/* ============================================================
   Global Horizon Transport — Design System v2
   Professional transport operations portal
   ============================================================ */

/* ----- Tokens ----- */
:root {
  --asphalt:      #161A22;
  --asphalt-mid:  #1E2436;
  --asphalt-lt:   #252D40;
  --steel:        #F0F3F8;
  --white:        #FFFFFF;
  --amber:        #E8A33D;
  --amber-dark:   #C8832D;
  --amber-glow:   rgba(232,163,61,.16);
  --amber-bg:     #FEF3E0;
  --green:        #3E9C6E;
  --green-bg:     #E4F4EE;
  --brick:        #B84433;
  --brick-bg:     #FDEAE7;
  --blue:         #3B6FA0;
  --blue-bg:      #E7EFF8;
  --ink:          #1B1F27;
  --ink-2:        #374151;
  --muted:        #6B7280;
  --muted-2:      #9AA2B0;
  --border:       #E2E7EF;
  --border-2:     #EEF1F6;
  --sidebar-w:    252px;
  --topbar-h:     58px;
  --r-sm:         6px;
  --r:            10px;
  --r-lg:         14px;
  --r-xl:         18px;
  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 14px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
  --shadow-md:    0 8px 24px rgba(0,0,0,.11),0 3px 6px rgba(0,0,0,.06);
  --shadow-lg:    0 16px 48px rgba(0,0,0,.14),0 6px 12px rgba(0,0,0,.08);
  --shadow-xl:    0 24px 64px rgba(0,0,0,.22),0 8px 20px rgba(0,0,0,.12);
  --t:            .18s ease;
  --t-fast:       .12s ease;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Always reserve space for the vertical scrollbar so the page doesn't get wider/narrower
   as content (e.g. an expanded DSR row) pushes the page past/under the viewport height. */
html { font-size: 14px; scrollbar-gutter: stable; }
body { font-family: 'Inter', sans-serif; background: var(--steel); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ----- Animations ----- */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.96); }      to { opacity: 1; transform: scale(1); } }

/* ----- App Shell ----- */
.app-shell { display: flex; min-height: 100vh; }

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Thin custom scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(170deg, #12161F 0%, #1B1F2E 55%, #161A22 100%);
  color: #c8ccd4;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Amber accent bar at very top */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber-dark) 0%, var(--amber) 55%, rgba(232,163,61,.2) 100%);
  z-index: 1;
}

/* ── Logo ── */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 16px 15px;
  margin-top: 3px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-logo-img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; border-radius: 7px; }
.logo-mark {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%);
  color: var(--asphalt);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(232,163,61,.4);
}
.logo-text { display: flex; flex-direction: column; min-width: 0; }
.logo-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14.5px; color: #fff; line-height: 1.2; letter-spacing: .3px; }
.logo-sub  { font-size: 9px; color: rgba(255,255,255,.24); letter-spacing: .8px; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Navigation ── */
.sidebar-nav { flex: 1; padding: 10px; }

.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #A8BAC8;
  text-decoration: none;
  font-size: 12.5px; font-weight: 500;
  margin-bottom: 1px;
  position: relative;
  transition: background var(--t), color var(--t);
}
/* Icon box via SVG padding */
.nav-item svg {
  width: 15px; height: 15px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t);
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #D4E2EE; }
.nav-item:hover svg { background: rgba(255,255,255,.11); }
.nav-item.active { background: rgba(232,163,61,.11); color: var(--amber); font-weight: 600; }
.nav-item.active svg { background: rgba(232,163,61,.2); box-shadow: 0 2px 8px rgba(232,163,61,.22); }
/* Left accent bar for active item */
.nav-item.active::after {
  content: '';
  position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--amber);
}

/* Chevron toggle arrow */
.nav-chevron {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background var(--t);
}
.nav-chevron svg {
  width: 13px !important; height: 13px !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .2s ease;
}
.nav-chevron:hover { background: rgba(255,255,255,.09); }
.nav-item.open .nav-chevron svg { transform: rotate(90deg); }

/* Sub-items with vertical connector — collapsed by default */
.nav-sub-group {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.08);
  margin-bottom: 0;
}
.nav-sub-group.open {
  max-height: 500px;
  margin-bottom: 2px;
}
.nav-item-sub { font-size: 12px; padding: 5px 9px; }
.nav-item-sub svg { width: 13px; height: 13px; padding: 6px; border-radius: 6px; }

/* Section divider label */
.nav-section-label {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 10px 5px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.2);
}
.nav-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.07);
}
/* Collapsible section headers */
.nav-section-toggle { cursor: pointer; user-select: none; }
.nav-section-toggle:hover { color: rgba(255,255,255,.45); }
.nav-section-toggle .nav-chevron { order: 2; margin-left: 0; width: 16px; height: 16px; }
.nav-section-toggle .nav-chevron svg { width: 11px !important; height: 11px !important; }
.nav-section-toggle.open .nav-chevron svg { transform: rotate(90deg); }
.nav-section-body { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-section-body.open { max-height: 800px; }

/* ── About Developer ── */
.about-dev-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 8px; padding: 5px 0;
  background: none; border: 0; cursor: pointer;
  font: 500 10.5px 'Inter', sans-serif; letter-spacing: .04em;
  color: rgba(200,212,224,.35);
  transition: color var(--t);
}
.about-dev-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.about-dev-link:hover { color: var(--amber); }

.about-dev-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,18,26,.55); backdrop-filter: blur(3px);
  animation: aboutDevFade .18s ease;
}
.about-dev-overlay[hidden] { display: none; }
.about-dev-card {
  position: relative; width: 100%; max-width: 330px; text-align: center;
  background: var(--white); border-radius: var(--r-xl);
  padding: 34px 28px 26px; box-shadow: var(--shadow-xl);
  border-top: 4px solid var(--amber);
  animation: aboutDevRise .22s ease;
}
.about-dev-close {
  position: absolute; top: 8px; right: 12px; background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.about-dev-close:hover { color: var(--ink); }
.about-dev-avatar {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--asphalt-lt) 0%, var(--asphalt) 100%);
  color: var(--amber); font: 700 22px 'Barlow Condensed', sans-serif; letter-spacing: .04em;
  box-shadow: 0 0 0 3px var(--amber-glow), var(--shadow);
}
.about-dev-eyebrow { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.about-dev-name { margin: 6px 0 2px; font: 700 26px 'Barlow Condensed', sans-serif; color: var(--ink); }
.about-dev-company { display: block; font-size: 13px; font-weight: 600; color: var(--amber-dark); margin-bottom: 20px; }
.about-dev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--asphalt); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; transition: background var(--t), transform var(--t);
}
.about-dev-btn svg { width: 14px; height: 14px; }
.about-dev-btn:hover { background: var(--asphalt-lt); transform: translateY(-1px); }
.about-dev-url { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); }
.login-credit { text-align: center; margin-top: 18px; font-size: 11.5px; color: rgba(255,255,255,.55); }
.login-credit a { color: rgba(255,255,255,.85); font-weight: 600; text-decoration: none; }
.login-credit a:hover { color: var(--amber); }
@keyframes aboutDevFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aboutDevRise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media print { .about-dev-overlay { display: none !important; } }

/* ── Bottom user area ── */
.sidebar-bottom { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }

.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  margin-bottom: 8px;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 14px;
  color: #12161F;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(232,163,61,.3);
}
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: 12px; color: #dce4ee; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 9px; color: var(--amber); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; opacity: .9; }

.btn-signout {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(200,212,224,.4);
  padding: 8px 14px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 11.5px; width: 100%;
  transition: border-color var(--t), color var(--t), background var(--t);
  font-family: inherit; font-weight: 500;
}
.btn-signout:hover { border-color: rgba(184,68,51,.45); color: #E07060; background: rgba(184,68,51,.09); }

/* ============================================================
   MAIN CONTENT + TOPBAR
   ============================================================ */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border-2);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.breadcrumb { font-size: 13px; color: var(--muted); flex: 1; }

.page-body { padding: 28px; max-width: 1440px; animation: fadeIn .22s ease; }

/* ----- Page header ----- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.page-subtitle { font-size: 12px; color: var(--muted); margin-top: 3px; }
.header-actions { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

.kpi-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
  border-top: 3px solid var(--border);
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card.accent-amber { border-top-color: var(--amber); }
.kpi-card.accent-brick  { border-top-color: var(--brick); }
.kpi-card.accent-green  { border-top-color: var(--green); }
.kpi-card.accent-blue   { border-top-color: var(--blue); }
.kpi-card.accent-purple { border-top-color: #7C5CBF; }

.kpi-icon {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon-amber  { background: var(--amber-bg);  color: var(--amber-dark); }
.kpi-icon-brick  { background: var(--brick-bg);  color: var(--brick); }
.kpi-icon-green  { background: var(--green-bg);  color: var(--green); }
.kpi-icon-blue   { background: var(--blue-bg);   color: var(--blue); }
.kpi-icon-purple { background: #EDE9F7; color: #7C5CBF; }

.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 10px; font-weight: 600; padding-right: 52px; display: flex; align-items: center; gap: 6px; }
.kpi-currency-tag { font-size: 9px; font-weight: 700; letter-spacing: .8px; color: var(--amber-dark); background: var(--amber-bg); border: 1px solid rgba(232,163,61,.25); border-radius: 3px; padding: 1px 5px; text-transform: uppercase; flex-shrink: 0; }
.kpi-value { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 5px; }
.kpi-sub-split { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; margin-top: 6px; }

/* ============================================================
   CARDS
   ============================================================ */
.card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border-2); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.card-header { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 18px; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--border-2); }
.card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-2); }
.card-header-row .card-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ----- Info Cards (Clients, Companies) ----- */
.info-card {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid var(--border-2);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.info-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.info-card-primary { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.info-card-secondary { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.info-card-meta { font-size: 11px; color: var(--muted-2); margin-bottom: 12px; }
.info-card-stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border-2); }
.info-card-actions { margin-top: 12px; display: flex; justify-content: flex-end; }

/* ============================================================
   DATA TABLES
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  padding: 7px 7px;
  background: #F7F9FC;
  color: var(--muted);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 7px 7px; border-bottom: 1px solid var(--border-2); vertical-align: middle; color: var(--ink-2); font-size: 12px; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover td { background: #D9E5FB; }
.data-table tbody tr.row-muted td { opacity: 0.55; }
.data-table tr:last-child td { border-bottom: none; }

.data-table-compact th, .data-table-compact td { padding: 7px 1px; }
.data-table-compact .ellipsis-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inner-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.inner-table th { padding: 6px 10px; background: #F7F9FC; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); }
.inner-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-2); color: var(--ink-2); }

/* ----- Expand rows ----- */
.expand-row td { background: linear-gradient(180deg, #EEF2FA 0%, #F2F5FC 100%); padding: 16px 22px; border-top: 1px solid var(--border); border-bottom: 2px solid var(--border); }
.expand-content .expand-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.expand-content .expand-grid > div { background: var(--white); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 14px; min-width: 130px; }
.expand-content .label { display: block; font-size: 10px; color: var(--muted-2); font-weight: 700; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-checkbox-wrap {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.filter-checkbox-wrap input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--amber); }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px; align-items: center;
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.filter-input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
}
.filter-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  text-decoration: none;
  transition: all var(--t);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}
.btn:active { transform: scale(.97) translateY(1px) !important; box-shadow: none !important; }

.btn-primary { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%); color: #fff; box-shadow: 0 2px 8px rgba(200,131,45,.35); }
.btn-primary:hover { box-shadow: 0 5px 16px rgba(200,131,45,.45); transform: translateY(-1px); }

.btn-secondary { background: var(--white); color: var(--ink-2); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: #F6F8FC; border-color: #C8D0DE; box-shadow: var(--shadow-sm); }

.btn-success { background: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(62,156,110,.3); }
.btn-success:hover { opacity: .9; transform: translateY(-1px); }
.btn-danger  { background: var(--brick); color: #fff; box-shadow: 0 2px 6px rgba(184,68,51,.3); }
.btn-danger:hover  { opacity: .9; transform: translateY(-1px); }

.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-outline { background: transparent; color: var(--ink-2); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: #F6F8FC; border-color: #C8D0DE; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--muted-2); padding: 4px 6px; font-size: 13px;
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { color: var(--amber); background: var(--amber-glow); }
.btn-icon.btn-danger:hover { color: var(--brick); background: var(--brick-bg); }
.btn-link { color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 500; }
.btn-link:hover { text-decoration: underline; color: #2B5580; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; letter-spacing: .2px;
}
.badge-success  { background: var(--green-bg); color: var(--green); }
.badge-danger   { background: var(--brick-bg); color: var(--brick); }
.badge-neutral  { background: var(--border-2); color: var(--muted); }
.badge-info     { background: var(--blue-bg);  color: var(--blue); }
.badge-clickable { cursor: pointer; user-select: none; }
.badge-clickable:hover { filter: brightness(0.92); }
.badge-client   { background: var(--blue-bg);  color: var(--blue); }
.badge-driver   { background: var(--amber-bg); color: var(--amber-dark); }
.badge-sr       { background: var(--border-2); color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0; }
.badge-super-admin { background: linear-gradient(135deg, #F5C842 0%, var(--amber) 100%); color: #12161F; font-weight: 700; border: 1px solid rgba(232,163,61,.35); }
.badge-invoice  { background: var(--blue-bg);  color: var(--blue); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0; }
.user-role.badge { background: rgba(255,255,255,.1); color: var(--muted-2); padding: 2px 7px; font-size: 10px; border-radius: 4px; }
.mr-1 { margin-right: 4px; }

/* ============================================================
   PILL TOGGLES
   ============================================================ */
.pill-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.pill-toggle a, .pill-toggle button {
  padding: 7px 16px;
  font-size: 12px; font-weight: 600;
  color: var(--muted); text-decoration: none;
  background: none; border: none; cursor: pointer;
  border-right: 1px solid var(--border);
  font-family: inherit;
  transition: background var(--t), color var(--t);
}
.pill-toggle a:last-child, .pill-toggle button:last-child { border-right: none; }
.pill-toggle a:hover, .pill-toggle button:hover { background: #F6F8FC; color: var(--ink-2); }
.pill-toggle a.active, .pill-toggle button.active { background: var(--asphalt); color: #fff; }

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(12,16,26,.68);
  backdrop-filter: blur(3px);
}
.modal-box {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  min-width: 460px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-2);
  animation: modalIn .18s ease;
}
.modal-lg { min-width: 640px; }
.modal-header {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 700;
  margin: -28px -28px 22px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-2);
  background: #FAFBFD;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  color: var(--ink);
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 22px -28px -28px;
  padding: 16px 28px;
  border-top: 1px solid var(--border-2);
  background: #FAFBFD;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-section { margin-bottom: 20px; background: var(--white); border: 1px solid var(--border-2); border-radius: var(--r); padding: 22px 22px 6px; box-shadow: var(--shadow-sm); }
.form-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .7px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.form-section-header { margin-bottom: 18px; }
.sr-badge { background: var(--border-2); border-radius: var(--r-sm); padding: 7px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid var(--border); display: inline-block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-group .span-2 { grid-column: span 2; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .1px; }
.form-control {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px; font-family: inherit;
  color: var(--ink); background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  line-height: 1.4;
}
.form-control:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
select.form-control { cursor: pointer; }
.required { color: var(--brick); margin-left: 1px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.field-error { color: var(--brick); font-size: 11px; margin-top: 3px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-2); }

/* Middle point list */
.pickup-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pickup-item { display: flex; align-items: center; gap: 8px; }
.pickup-item .form-control { flex: 1; }
.trip-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--white); }
.trip-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 5px; transition: background var(--t-fast); }
.trip-check-item:hover { background: var(--border-2); }
.trip-meta-driver { font-weight: 500; }
.trip-meta-truck { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.trip-meta-route { margin-left: auto; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.trip-meta-date { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.trip-meta-company { font-size: 11px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.running-total { margin-top: 10px; font-size: 13px; font-weight: 600; text-align: right; color: var(--ink); }
.outstanding-hint { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: right; }
.amount-warning { margin-top: 4px; font-size: 12px; color: var(--brick); }
.input-error { border-color: var(--brick) !important; }

/* Per-trip allocation rows inside payment modal */
.trip-alloc-item { display: flex; flex-direction: column; border-radius: 6px; border: 1px solid transparent; margin-bottom: 2px; transition: border-color var(--t-fast), background var(--t-fast); }
.trip-alloc-item.is-checked { border-color: var(--border); background: var(--steel); }
.trip-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 5px; cursor: pointer; transition: background var(--t-fast); user-select: none; }
.trip-check-label:hover { background: var(--border-2); }
.trip-outstanding-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--blue); white-space: nowrap; background: var(--blue-bg); padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.trip-alloc-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 30px; flex-wrap: wrap; }
.trip-alloc-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.trip-alloc-input { width: 130px !important; height: 30px !important; font-size: 13px !important; padding: 3px 8px !important; flex-shrink: 0; }
.trip-alloc-suffix { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.trip-co-rent-suffix { font-size: 11px; color: var(--green); font-weight: 600; white-space: nowrap; }
.trip-alloc-over-warning { font-size: 11px; color: var(--brick); font-weight: 600; white-space: nowrap; }
.payment-amount-readonly { background: var(--steel) !important; color: var(--ink-2) !important; cursor: default !important; }

/* Selected-trips chip bar above the trip checklist */
.selected-trips-bar {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--amber-glow); border: 1px solid var(--amber);
  border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 8px;
  animation: fadeIn .15s ease;
}
.selected-trips-label {
  flex-shrink: 0; padding-top: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--amber-dark); white-space: nowrap;
}
.selected-trips-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 6px 3px 11px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.trip-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--steel); color: var(--muted); font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0; transition: background var(--t-fast), color var(--t-fast);
}
.trip-chip-x:hover { background: var(--brick); color: #fff; }

/* ============================================================
   CLIENT BALANCE BARS
   ============================================================ */
.client-balance-list { display: flex; flex-direction: column; gap: 16px; }
.client-balance-row { display: flex; align-items: center; gap: 12px; }
.cb-name { font-size: 13px; font-weight: 600; min-width: 150px; color: var(--ink-2); }
.cb-bar-wrap { flex: 1; height: 8px; background: var(--border-2); border-radius: 4px; overflow: hidden; }
.cb-bar { height: 100%; background: linear-gradient(90deg, var(--green) 0%, #5CB88A 100%); border-radius: 4px; transition: width .4s ease; }
.cb-amounts { display: flex; align-items: center; gap: 8px; min-width: 180px; justify-content: flex-end; }

/* ============================================================
   BAR CHART
   ============================================================ */
.bar-chart { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { font-size: 12px; min-width: 120px; text-align: right; color: var(--ink-2); }
.bar-track { flex: 1; height: 16px; background: var(--border-2); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber) 0%, var(--amber-dark) 100%); border-radius: 4px; transition: width .4s ease; }
.bar-value { font-size: 12px; min-width: 100px; color: var(--muted); }

/* ============================================================
   SOA  —  Professional document layout (matches PDF reference)
   ============================================================ */
.soa-card {
    background: #fff;
    border-radius: var(--r);
    border: 1px solid var(--border-2);
    padding: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
    overflow: hidden;
}

/* ── ① Letterhead: white bg, company left / doc-type right ── */
.soa-letterhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 44px 20px;
    background: #fff;
}
.soa-lh-company {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--asphalt);
    line-height: 1;
}
.soa-lh-doctype {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
}

/* ── ② Amber horizontal rule ── */
.soa-amber-bar {
    height: 3px;
    background: var(--amber);
    margin: 0 44px;
}

/* ── ③ Info box: bordered, two columns ── */
.soa-info-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 22px 44px;
    border: 1px solid #DDE0E8;
    border-radius: 4px;
    overflow: hidden;
}
.soa-bill-col {
    padding: 20px 24px;
    background: #fff;
}
.soa-details-col {
    padding: 20px 24px;
    background: #F7F8FC;
    border-left: 1px solid #DDE0E8;
}
.soa-zone-hdr {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
}
.soa-client-arabic {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--asphalt);
    line-height: 1.1;
}
.soa-client-english {
    font-size: 14px;
    font-weight: 700;
    color: var(--asphalt);
    margin-top: 4px;
}
.soa-client-vat {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
}
.soa-client-vat strong {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 6px;
}

.soa-detail-row {
    display: flex;
    gap: 16px;
    margin-bottom: 7px;
    align-items: baseline;
}
.soa-detail-key {
    font-size: 12px;
    color: var(--muted);
    min-width: 56px;
}
.soa-detail-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--asphalt);
}

/* ── ④ Table ── */
.soa-table-wrap { padding: 0 44px; }
.soa-table { margin-bottom: 0; border-collapse: collapse; width: 100%; }

/* Dark navy header (override data-table defaults) */
.soa-table thead tr { background: var(--asphalt) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.soa-table thead th {
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 13px 12px !important;
    border: none !important;
}
.soa-table tbody tr { border-bottom: 1px solid #EAECF0; }
.soa-table tbody td { padding: 14px 12px; vertical-align: middle; font-size: 13px; }

/* Two-line money cell */
.soa-money { text-align: right; }
.soa-money-amt {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--asphalt);
    display: block;
}
.soa-money-amt.fw-bold { font-weight: 700; }
.soa-money-cur {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin-top: 1px;
}

/* ── ⑤ Footer: BALANCE DUE | amber bar | large amount ── */
.soa-footer {
    display: flex;
    align-items: stretch;
    margin: 22px 44px 10px;
    border: 1px solid #DDE0E8;
    border-radius: 4px;
    overflow: hidden;
}
.soa-footer-label {
    flex: 1;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--asphalt);
    display: flex;
    align-items: center;
    background: #fff;
}
.soa-footer-bar {
    width: 3px;
    background: var(--amber);
    flex-shrink: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.soa-footer-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: #F7F8FC;
}
.soa-closing {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--asphalt);
}
.soa-closing-cur {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── ⑥ Page footer ── */
.soa-page-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 44px 20px;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-top: 1px solid #EAECF0;
    margin-top: 12px;
}

.opening-balance-row td { font-style: italic; background: #F8F9FB; color: var(--muted); }
.soa-totals-row td { background: #F0F2F8; font-weight: 700; border-top: 2px solid var(--asphalt) !important; }
.soa-words-row td { background: #FEF9E7; font-style: italic; color: #7d6008; font-size: 12px;
                    border-top: none !important; border-bottom: 2px solid var(--amber) !important; }
/* ── Ledger: Excel-style compact screen view ── */
.ledger-card { box-shadow: none !important; border: 1px solid var(--border-2); border-radius: 6px !important; overflow: hidden; }
.ledger-card .soa-letterhead { padding: 14px 24px 10px; }
.ledger-card .soa-lh-company { font-size: 22px; }
.ledger-card .soa-lh-doctype { font-size: 11px; margin-top: 3px; letter-spacing: 2px; }
.ledger-card .soa-amber-bar  { margin: 0 24px; }
.ledger-card .soa-info-zone  { margin: 10px 24px; }
.ledger-card .soa-bill-col,
.ledger-card .soa-details-col { padding: 10px 16px; }
.ledger-card .soa-client-arabic  { font-size: 18px; }
.ledger-card .soa-client-english { font-size: 15px; margin-top: 0; }
.ledger-card .soa-client-vat     { font-size: 11px; margin-top: 4px; }
.ledger-card .soa-zone-hdr       { font-size: 8px; margin-bottom: 6px; }
.ledger-card .soa-detail-row     { margin-bottom: 4px; }
.ledger-card .soa-detail-key,
.ledger-card .soa-detail-val     { font-size: 11px; }
.ledger-card .soa-footer,
.ledger-card .soa-page-footer { display: none !important; }
.ledger-card .soa-table-wrap { padding: 0; }
/* Excel grid: full borders, right-aligned numbers, compact rows */
.soa-ledger-table .soa-table { table-layout: fixed; width: 100%; border-collapse: collapse; border: -2px solid #B8C0CC; }
.soa-ledger-table .soa-table th:nth-child(1)  { width: 58px;  }  /* DATE        */
.soa-ledger-table .soa-table th:nth-child(2)  { width: 52px;  }  /* INV. NO.    */
.soa-ledger-table .soa-table th:nth-child(3)  { width: 200px; }  /* TN          */
.soa-ledger-table .soa-table th:nth-child(4)  { width: 55px;  }  /* DEPT        */
.soa-ledger-table .soa-table th:nth-child(5)  { width: auto;  }  /* DESCRIPTION */
.soa-ledger-table .soa-table th:nth-child(6)  { width: 68px;  }  /* AMOUNT      */
.soa-ledger-table .soa-table th:nth-child(7)  { width: 56px;  }  /* VAT         */
.soa-ledger-table .soa-table th:nth-child(8)  { width: 68px;  }  /* TOTAL       */
.soa-ledger-table .soa-table th:nth-child(9)  { width: 68px;  }  /* CREDITED    */
.soa-ledger-table .soa-table th:nth-child(10) { width: 68px;  }  /* BALANCE     */
.soa-ledger-table .soa-table th:nth-child(11) { width: 48px;  }  /* REMARKS     */
.soa-ledger-table .soa-table th:nth-child(12) { width: 48px;  }  /* TID         */
.soa-ledger-table .soa-table thead th { font-size: 8px !important; padding: 1px 1px !important; text-align: center; vertical-align: middle; border: 1px solid rgba(255,255,255,.25) !important; letter-spacing: .2px !important; line-height: 1.2; }
.soa-ledger-table .soa-table tbody tr { border-bottom: none; }
.soa-ledger-table .soa-table tbody td { padding: -4px -1px; font-size: 10px; line-height: 1; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0px solid #D0D5DE; }
.soa-ledger-table td.tn-cell   { white-space: nowrap; overflow: visible; text-overflow: clip; padding-right: 2px; width: 200px; font-size: 10.5px; letter-spacing: -0.3px; }
.soa-ledger-table td.desc-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.soa-ledger-table .soa-table tbody td:nth-child(1) { font-size: 8.5px; }
.soa-ledger-table .xl-num { text-align: right !important; font-variant-numeric: tabular-nums; font-size: 10px; }
.soa-ledger-table .soa-table tbody tr:nth-child(even) td { background: #F5F7FC; }
.soa-ledger-table .soa-table tbody tr:nth-child(even).soa-credit-row td { background: #E5F5ED; }
.soa-credit-row td { background: #EEF9F3; }
.soa-ledger-table .soa-totals-row td { padding: 1px 1px; font-size: 12px; font-weight: 700; background: #E8EAF3 !important; border-top: 2px solid #9DA3B4 !important; }
.soa-ledger-table .opening-balance-row td { padding: 1px 1px; font-size: 10px; }
.soa-ledger-table .soa-words-row td { padding: 1px 1px; font-size: 11px; white-space: normal; background: #F9FAFC !important; font-weight: 500; }

/* On-screen ledger: the rules above use a descendant selector (.soa-ledger-table .soa-table) that
   never matches, since both classes sit on the same <table>. Fixed compact columns so the whole
   table — including BALANCE — fits the screen width; DESCRIPTION takes the remaining space. */
@media screen {
  table.soa-table.soa-ledger-table { table-layout: fixed; width: 100%; }
  table.soa-ledger-table th:nth-child(1)  { width: 92px;  }  /* DATE        */
  table.soa-ledger-table th:nth-child(2)  { width: 70px;  }  /* INV. NO.    */
  table.soa-ledger-table th:nth-child(3)  { width: 190px; }  /* TN          */
  table.soa-ledger-table th:nth-child(4)  { width: 44px;  min-width: 0 !important; max-width: none !important; }  /* DEPT (short codes) */
  table.soa-ledger-table th:nth-child(5)  { width: auto;  }  /* DESCRIPTION */
  table.soa-ledger-table th:nth-child(6)  { width: 88px;  }  /* AMOUNT      */
  table.soa-ledger-table th:nth-child(7)  { width: 76px;  }  /* VAT         */
  table.soa-ledger-table th:nth-child(8)  { width: 88px;  }  /* TOTAL       */
  table.soa-ledger-table th:nth-child(9)  { width: 88px;  }  /* CREDITED    */
  table.soa-ledger-table th:nth-child(10) { width: 92px;  }  /* BALANCE     */
  table.soa-ledger-table th:nth-child(11) { width: 70px;  }  /* REMARKS     */
  table.soa-ledger-table th:nth-child(12) { width: 56px;  }  /* TID         */
  table.soa-ledger-table thead th { padding: 10px 6px !important; letter-spacing: .4px !important; }
  table.soa-ledger-table tbody td { padding: 10px 6px; }
  table.soa-ledger-table td.desc-cell { white-space: normal; padding-left: 6px; }
  table.soa-ledger-table td.tn-cell { white-space: normal; }
  table.soa-ledger-table th:nth-child(4), table.soa-ledger-table td:nth-child(4) { padding-left: 3px !important; padding-right: 3px !important; }
  table.soa-ledger-table th:nth-child(5), table.soa-ledger-table td.desc-cell { padding-left: 4px !important; }

  /* SOA (Invoice Status) page: same compact fixed columns */
  table.soa-table.soa-summary-table { table-layout: fixed; width: 100%; }
  table.soa-summary-table th:nth-child(1)  { width: 84px;  }  /* INV. NO.    */
  table.soa-summary-table th:nth-child(2)  { width: 190px; }  /* TN          */
  table.soa-summary-table th:nth-child(3)  { width: 104px; }  /* PO NO.      */
  table.soa-summary-table th:nth-child(4)  { width: 100px; }  /* DATE        */
  table.soa-summary-table th:nth-child(5)  { width: 78px;  min-width: 0 !important; max-width: none !important; }  /* DEPT */
  table.soa-summary-table th:nth-child(6)  { width: auto;  }  /* DESCRIPTION */
  table.soa-summary-table th:nth-child(7)  { width: 90px;  }  /* AMOUNT      */
  table.soa-summary-table th:nth-child(8)  { width: 78px;  }  /* VAT         */
  table.soa-summary-table th:nth-child(9)  { width: 90px;  }  /* TOTAL       */
  table.soa-summary-table th:nth-child(10) { width: 92px;  }  /* RECEIVED    */
  table.soa-summary-table th:nth-child(11) { width: 92px;  }  /* BALANCE     */
  table.soa-summary-table th:nth-child(12) { width: 58px;  }  /* TID         */
  table.soa-summary-table thead th { padding: 10px 6px !important; letter-spacing: .4px !important; }
  table.soa-summary-table tbody td { padding: 10px 6px; }
  table.soa-summary-table td:nth-child(4) { white-space: nowrap; }
  table.soa-summary-table td:nth-child(3) { white-space: normal; word-break: break-all; }
}

/* ============================================================
   LOGIN PAGE

   ============================================================ */
.login-body {
  background: linear-gradient(135deg, var(--asphalt) 0%, #1E2436 55%, #12161E 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-card { background: var(--white); border-radius: var(--r-xl); padding: 40px 36px; box-shadow: var(--shadow-xl); }
.login-logo { text-align: center; margin-bottom: 32px; }
.logo-mark-large {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%);
  color: var(--asphalt);
  border-radius: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(200,131,45,.45);
}
.login-logo-img { max-width: 180px; height: auto; margin-bottom: 14px; display: block; margin-left: auto; margin-right: auto; }
.login-logo h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); }
.login-logo p { font-size: 12px; color: var(--muted); margin-top: 3px; }
.login-form .form-group { margin-bottom: 18px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 5px; }
.login-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px; font-family: inherit;
  color: var(--ink); background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  display: block;
}
.login-form input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: none; background: none;
  color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.password-toggle:hover { color: var(--ink); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }

/* ============================================================
   ALERTS & BANNERS
   ============================================================ */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 500; }
.alert-success { background: var(--green-bg); color: #1a5c3a; border: 1px solid #b0d9c5; border-left: 4px solid var(--green); }
.alert-error   { background: var(--brick-bg); color: #7a211a; border: 1px solid #f0b8b0; border-left: 4px solid var(--brick); }

.banner { padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; font-size: 13px; }
.banner-info    { background: var(--blue-bg);  color: #1e3a5f; border: 1px solid #b8d0ec; border-left: 4px solid var(--blue); }
.banner-warning { background: #FEF9E7; color: #7d6008; border: 1px solid #f9e08a; border-left: 4px solid #d4ac0d; }

/* ============================================================
   UTILITIES
   ============================================================ */
.mono   { font-family: 'IBM Plex Mono', monospace; }
.money  { font-family: 'IBM Plex Mono', monospace; }
.positive { color: var(--green); font-weight: 600; }
.negative { color: var(--brick); font-weight: 600; }
.arabic-primary { font-size: 15px; font-weight: 600; }
.text-secondary { color: var(--muted); }
.text-muted     { color: var(--muted-2); }
.text-sm  { font-size: 11px; }
.text-xs  { font-size: 10px; }
.fw-bold  { font-weight: 700; }
.italic   { font-style: italic; }
.mt-1 { margin-top: 6px; }
.mt-4 { margin-top: 20px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.ml-2 { margin-left: 8px; }
.ml-auto { margin-left: auto; }
.empty-state { text-align: center; padding: 52px 20px; color: var(--muted-2); font-size: 14px; }
.row-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; overflow: visible; }
.actions     { white-space: nowrap; }
.trip-form   { max-width: 920px; }
.error-page  { text-align: center; padding: 80px 20px; }
.error-code  { font-family: 'Barlow Condensed', sans-serif; font-size: 80px; font-weight: 700; color: var(--amber); }
.error-message { font-size: 16px; color: var(--muted); margin: 16px 0 24px; }

/* ============================================================
   DASHBOARD ENHANCEMENTS
   ============================================================ */

/* KPI grids */
.kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1300px) { .kpi-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .kpi-grid-6 { grid-template-columns: repeat(2, 1fr); } }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .kpi-grid-4 { grid-template-columns: 1fr 1fr; } }

/* ── Dashboard main 60/40 grid ── */
.dash-main-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 0;
}
@media (max-width: 1100px) { .dash-main-grid { grid-template-columns: 1fr; } }

/* ── Period tabs ── */
.period-tabs {
  display: inline-flex; gap: 2px;
  background: var(--border-2); border-radius: 8px; padding: 3px;
  flex-shrink: 0;
}
.period-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 13px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  transition: background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.period-tab.active {
  background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.period-tab:hover:not(.active) { color: var(--ink-2); }

/* ── Client overview table ── */
.client-overview-card { margin-bottom: 0; }
.client-ov-table-wrap { overflow-y: auto; max-height: 390px; }
.client-ov-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.client-ov-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted-2); padding: 6px 10px; text-align: right;
  border-bottom: 2px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.client-ov-table th:first-child { text-align: left; }
.client-ov-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.client-ov-table tbody tr:last-child td { border-bottom: none; }
.client-ov-table tbody tr:hover td { background: var(--steel); }
.client-ov-table .num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.client-ov-name   { font-weight: 600; color: var(--ink); font-size: 12.5px; line-height: 1.3; }
.client-ov-arabic { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Client status dot */
.client-status-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  vertical-align: middle;
}
.dot-settled { background: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.dot-partial { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); }
.dot-unpaid  { background: var(--brick); box-shadow: 0 0 0 2px var(--brick-bg); }

/* PO badge */
.po-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 19px; border-radius: 10px;
  font-size: 10px; font-weight: 700; padding: 0 6px; line-height: 1;
}
.po-badge-warn { background: var(--brick-bg); color: var(--brick); }
.po-badge-ok   { background: var(--green-bg); color: var(--green); font-size: 11px; }

/* Client overview legend */
.client-ov-legend {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 2px 2px; font-size: 11px; color: var(--muted);
}
.client-ov-legend span { display: flex; align-items: center; gap: 5px; }

/* ── Alert cards (right column) ── */
.dash-alerts-col { display: flex; flex-direction: column; gap: 16px; }

.alert-card-header {
  display: flex; align-items: center; gap: 11px; margin-bottom: 14px;
}
.alert-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.alert-card-icon-warn { background: var(--amber-bg); color: var(--amber-dark); }
.alert-card-icon-blue { background: var(--blue-bg);  color: var(--blue); }
.alert-card-title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.alert-card-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Alert bucket rows */
.alert-buckets { display: flex; flex-direction: column; gap: 7px; }
.alert-bucket {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px; border-left: 3px solid transparent;
}
.bucket-fresh { background: var(--green-bg); border-left-color: var(--green); }
.bucket-warn  { background: var(--amber-bg); border-left-color: var(--amber); }
.bucket-crit  { background: var(--brick-bg); border-left-color: var(--brick); }

.bucket-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bucket-icon-fresh { background: var(--green); color: #fff; }
.bucket-icon-warn  { background: var(--amber); color: #fff; }
.bucket-icon-crit  { background: var(--brick); color: #fff; }

.bucket-label {
  flex: 1; font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.bucket-count {
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700;
  min-width: 28px; text-align: right; line-height: 1;
}
.bucket-fresh .bucket-count { color: var(--green); }
.bucket-warn  .bucket-count { color: var(--amber-dark); }
.bucket-crit  .bucket-count { color: var(--brick); }
.bucket-amount {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted);
  min-width: 72px; text-align: right;
}
.alert-buckets-header {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px 2px;
}
.abh-spacer-icon  { width: 22px; flex-shrink: 0; }
.abh-spacer-label { flex: 1; }
.abh-col {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); text-align: right;
}
.abh-col-trips  { min-width: 28px; }
.abh-col-amount { min-width: 72px; }

/* Alert card footer total */
.alert-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 0; margin-top: 8px;
  border-top: 1px solid var(--border-2);
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.alert-footer-amt {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-2);
  font-weight: 700;
}

/* Welcome header */
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.dash-header-left .dash-greeting {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1;
}
.dash-header-left .dash-date { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dash-header-right { display: flex; align-items: center; gap: 10px; }
.dash-info-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue-bg); color: var(--blue);
  border: 1px solid #b8d0ec; border-radius: 999px;
  padding: 5px 12px; font-size: 11px; font-weight: 600;
}

/* Collection Rate ring */
.kpi-rate-card { display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.rate-ring-wrap { display: flex; justify-content: center; padding-top: 4px; }
.rate-ring {
  width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--green) 0% calc(var(--pct, 0) * 1%), var(--border) 0%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px; color: var(--green);
  box-shadow: inset 0 0 0 13px var(--white);
}

/* Charts grid */
.dash-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .dash-charts-grid { grid-template-columns: 1fr; } }

.chart-card { margin-bottom: 0; }
.donut-wrap { position: relative; height: 260px; }
.donut-wrap canvas { height: 100% !important; }
.donut-center {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.donut-center-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600; }
.donut-center-value { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.bar-wrap { overflow: hidden; }
.bar-wrap canvas { width: 100% !important; }

/* Card header "View all" link */
.card-view-all { font-size: 12px; color: var(--amber-dark); font-weight: 600; text-decoration: none; }
.card-view-all:hover { color: var(--amber); }

/* Payment activity feed */
.payment-feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
}
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.dot-client { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.dot-driver { background: var(--blue);  box-shadow: 0 0 0 3px var(--blue-bg); }
.feed-body { flex: 1; min-width: 0; }
.feed-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.feed-party   { display: flex; align-items: center; gap: 6px; min-width: 0; }
.feed-name    { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* Trip activity feed */
.trip-feed { display: flex; flex-direction: column; }
.trip-feed-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
  gap: 12px;
}
.trip-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.trip-feed-left  { flex: 1; min-width: 0; }
.trip-feed-right { text-align: right; flex-shrink: 0; }
.trip-feed-sr   { font-size: 13px; font-weight: 700; color: var(--ink); }
.trip-feed-route { font-size: 12px; color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-feed-meta  { display: flex; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.trip-balance-tag {
  display: inline-block; margin-top: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .4px;
}
.tag-settled  { background: var(--green-bg);  color: var(--green); }
.tag-negative { background: var(--brick-bg);  color: var(--brick); }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .no-print, .sidebar, .topbar, .filter-bar, .banner, .kpi-grid, .kpi-card, nav { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-body { padding: 0 !important; animation: none !important; }
  #soa-printable { border: none !important; box-shadow: none !important; border-radius: 0 !important; }
  .soa-card { border: none !important; }
  .soa-letterhead { padding: 24px 32px 16px !important; }
  .soa-amber-bar  { margin: 0 32px !important; }
  .soa-info-zone  { margin: 16px 32px !important; }
  .soa-table-wrap { padding: 0 32px !important; }
  .soa-footer     { margin: 16px 32px 8px !important; }
  .soa-page-footer { padding: 8px 32px 14px !important; }
  body { background: #fff !important; }

  /* SOA Invoice Status — compact cells + wider description column */
  .soa-table tbody td { padding: 5px 7px !important; font-size: 10px !important; }
  .soa-table thead th { padding: 5px 7px !important; font-size: 9px !important; }
  .soa-table th:nth-child(4),
  .soa-table td:nth-child(4) { width: 30%; }

  /* Ledger: restore SOA document chrome */
  .ledger-card .soa-letterhead  { display: flex !important;  padding: 24px 32px 16px !important; }
  .ledger-card .soa-amber-bar   { display: block !important; margin: 0 32px !important; }
  .ledger-card .soa-info-zone   { display: grid !important;  margin: 16px 32px !important; }
  .ledger-card .soa-footer      { display: flex !important;  margin: 16px 32px 8px !important; }
  .ledger-card .soa-page-footer { display: flex !important;  padding: 8px 32px 14px !important; }
  .ledger-card .soa-table-wrap  { padding: 0 !important; }

  /* Ledger table for print. (The old rules here used the descendant selector
     ".soa-ledger-table .soa-table", which never matched — both classes are on the same <table> —
     so the table printed in auto layout with no-wrap cells and columns ran off the page.) */
  table.soa-ledger-table { table-layout: fixed !important; border-collapse: collapse !important; width: 100% !important; }
  table.soa-ledger-table th:nth-child(1)  { width: 7%     !important; }  /* DATE        */
  table.soa-ledger-table th:nth-child(2)  { width: 6.8%   !important; }  /* INV. NO.    */
  table.soa-ledger-table th:nth-child(3)  { width: 8.6%  !important; }  /* TN          */
  table.soa-ledger-table th:nth-child(4)  { width: 3%     !important; min-width: 0 !important; max-width: none !important; }  /* DEPT */
  table.soa-ledger-table th:nth-child(5)  { width: auto !important; }  /* DESCRIPTION */
  table.soa-ledger-table th:nth-child(6)  { width: 8%     !important; }  /* AMOUNT      */
  table.soa-ledger-table th:nth-child(7)  { width: 6.5%   !important; }  /* VAT         */
  table.soa-ledger-table th:nth-child(8)  { width: 8.5%   !important; }  /* TOTAL       */
  table.soa-ledger-table th:nth-child(9)  { width: 8%     !important; }  /* CREDITED    */
  table.soa-ledger-table th:nth-child(10) { width: 8.5%   !important; }  /* BALANCE     */
  table.soa-ledger-table th:nth-child(11) { width: 5.5%   !important; }  /* REMARKS     */
  table.soa-ledger-table th:nth-child(12) { width: 3.5%   !important; }  /* TID         */
  table.soa-ledger-table thead { display: table-header-group; }
  table.soa-ledger-table tr { page-break-inside: avoid; break-inside: avoid; }
  table.soa-ledger-table thead th { font-size: 7.5px !important; padding: 3px 1px !important; text-align: center; border: 1px solid rgba(255,255,255,.25) !important; letter-spacing: 0 !important; }
  table.soa-ledger-table tbody td { padding: 2px 2px !important; font-size: 8.5px !important; line-height: 1.25 !important; border: 1px solid #C5C5C5 !important; white-space: normal !important; word-break: break-word; overflow: visible !important; vertical-align: top; }
  table.soa-ledger-table td:nth-child(1) { white-space: nowrap !important; }
  table.soa-ledger-table td.tn-cell     { font-size: 8px !important; letter-spacing: 0 !important; width: auto !important; }
  table.soa-ledger-table td.desc-cell   { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; font-size: 7.4px !important; line-height: 1.22 !important; padding-left: 1px !important; }
  table.soa-ledger-table .desc-full { display: inline; }
  table.soa-ledger-table .desc-short { display: none; }
  table.soa-ledger-table .xl-num        { text-align: right !important; font-size: 8px !important; white-space: nowrap !important; }
  table.soa-ledger-table .soa-totals-row td { padding: 3px 2px !important; font-size: 8px !important; white-space: nowrap !important; }
  table.soa-ledger-table .soa-words-row td  { padding: 3px 3px !important; font-size: 9px !important; white-space: normal !important; }
}
}

/* ============================================================
   VAT SUBMISSION STATUS
   ============================================================ */
.vat-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.vat-select-all-wrap {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink); user-select: none;
}
.vat-select-all-wrap input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.vat-panel {
  background: var(--white); border: 1px solid var(--amber);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(232,163,61,.15);
}
.vat-panel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vat-panel-label { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vat-table tbody tr.vat-submitted-row td { background: rgba(62,156,110,.07); }
.vat-quarter-cell { font-weight: 600; color: var(--green, #3e9c6e); font-size: 13px; }

/* ============================================================
   REPORT INDEX CARDS
   ============================================================ */
.report-index-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-top: 8px;
}
.report-index-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--white); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 28px 24px;
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.report-index-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--amber); transform: translateY(-2px);
}
.report-index-icon {
  width: 56px; height: 56px; border-radius: var(--r);
  background: rgba(232,163,61,.12); border: 1px solid rgba(232,163,61,.25);
  display: flex; align-items: center; justify-content: center; color: var(--amber);
}
.report-index-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.report-index-desc  { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ============================================================
   DSR — HERO HEADER
   ============================================================ */
.dsr-hero {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1B2035 0%, #232C44 100%);
  border-radius: var(--r-lg); padding: 20px 28px; margin-bottom: 16px;
  box-shadow: var(--shadow-md); border-bottom: 3px solid var(--amber);
}
.dsr-hero-left { display: flex; align-items: center; gap: 16px; }
.dsr-hero-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  background: rgba(232,163,61,.15); border: 1px solid rgba(232,163,61,.30);
  border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--amber);
}
.dsr-hero-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 30px;
  font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: .5px;
}
.dsr-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dsr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.dsr-chip-default { background: rgba(255,255,255,.09); color: #A8B4C8; }
.dsr-chip-green  { background: rgba(62,156,110,.25); color: #5DC78F; }
.dsr-chip-amber  { background: rgba(232,163,61,.25);  color: var(--amber); }
.dsr-hero-actions { display: flex; gap: 8px; align-items: center; }

.btn-ghost-dark {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #C0CAD8; padding: 7px 15px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--t), color var(--t); font-family: inherit;
  position: relative;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.15); color: #fff; }
.filter-active-dot {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px; background: var(--amber); border-radius: 50%;
}

/* ============================================================
   DSR — FILTER PANEL (collapsible)
   ============================================================ */
.dsr-filter-panel {
  background: var(--white); border: 1px solid var(--border-2);
  border-radius: var(--r); overflow: hidden;
  max-height: 0; padding: 0 22px;
  transition: max-height .28s ease, padding .28s ease, margin .28s ease, box-shadow .28s ease;
  margin-bottom: 0; box-shadow: none;
}
.dsr-filter-panel.is-open {
  max-height: 420px; padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.dsr-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dsr-filter-search-wrap { position: relative; flex: 1; min-width: 260px; }
.dsr-filter-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); pointer-events: none;
}
.dsr-filter-search-input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink); font-family: inherit; background: #FAFBFD;
  transition: border-color var(--t), box-shadow var(--t);
}
.dsr-filter-search-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.dsr-filter-date-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsr-filter-date-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.dsr-filter-date-sep { color: var(--muted-2); }
.dsr-filter-pending {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  width: 100%; padding-top: 10px; border-top: 1px solid var(--border);
  margin-top: 2px;
}
.dsr-pending-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.dsr-filter-btns { display: flex; gap: 6px; }

/* ============================================================
   DSR — EXPORT COLUMN PICKER PANEL
   ============================================================ */
.export-col-panel {
  background: var(--white); border: 1px solid var(--border-2);
  border-radius: var(--r); overflow: hidden;
  max-height: 0; padding: 0 22px;
  transition: max-height .28s ease, padding .28s ease, margin .28s ease, box-shadow .28s ease;
  margin-bottom: 0; box-shadow: none;
}
.export-col-panel.is-open {
  max-height: 420px; padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.export-col-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.export-col-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.export-col-toggle-all { font-size: 12px; color: var(--muted); }
.export-col-toggle-all a { color: var(--blue); text-decoration: none; }
.export-col-toggle-all a:hover { text-decoration: underline; }
.export-col-groups { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; }
.export-col-group { display: flex; flex-direction: column; gap: 5px; min-width: 90px; }
.export-col-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--muted-2); letter-spacing: .07em; margin-bottom: 2px;
}
.export-col-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* ============================================================
   DSR — TABLE CARD WRAPPER
   ============================================================ */
.dsr-table-card {
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-sm);
  /* clip (not hidden) keeps the rounded corners without becoming a scroll container,
     which would stop the column header from sticking to the page */
  overflow: clip;
}
.dsr-table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px 13px; border-bottom: 1px solid var(--border-2);
}
.dsr-table-title { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.dsr-table-meta { font-size: 12px; color: var(--muted); }

.dsr-totals-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 0; border-bottom: 1px solid var(--border-2);
  background: #f7f8fb;
}
.dsr-total-item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 9px 18px;
}
.dsr-total-sep { width: 1px; height: 36px; background: var(--border-2); flex-shrink: 0; }
.dsr-total-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.dsr-total-val {
  font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  color: var(--ink); margin-top: 1px;
}
.dsr-total-val.positive { color: var(--green); }
.dsr-total-val.negative { color: var(--brick); }

.dsr-table-scroller { /* no overflow set: the table is fixed at 100% width, and a scroll container here would break the sticky header */ }

/* ============================================================
   DSR TABLE — styling
   ============================================================ */
/* Fixed layout forces the table to exactly 100% width — no horizontal scroll */
.dsr-table { table-layout: fixed; width: 100%; border-bottom: 3px solid var(--amber); }

.dsr-table thead tr { background: linear-gradient(135deg, #1B2035 0%, #212840 100%); }
.dsr-table thead th {
  color: #8A96AE; font-size: 9.5px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; background: transparent; line-height: 1.25;
  border-bottom: none; border-right: 1px solid rgba(255,255,255,.06);
  padding: 8px 3px; vertical-align: bottom; overflow: hidden;
  /* Column names stay visible while scrolling, just under the top bar */
  position: sticky; top: var(--topbar-h); z-index: 5; background: #1E243A;
}
.dsr-table thead th:last-child { border-right: none; }

/* All cells: ultra-compact, truncate overflow */
.dsr-table td {
  padding: 5px 3px; font-size: 0.71rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Route column: both cities stay on one row, truncated with an ellipsis + hover tooltip if too long */
.dsr-table td.dsr-route-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}

.dsr-table tbody tr.main-row { transition: background var(--t-fast); }
.dsr-table tbody tr.main-row:hover { background: #D9E5FB; }
.dsr-table tbody tr.dsr-invoiced   { border-left: 3px solid var(--green); }
.dsr-table tbody tr.dsr-uninvoiced { border-left: 3px solid rgba(232,163,61,.55); }

.dsr-table th.sortable { cursor: pointer; user-select: none; }
.dsr-table th.sortable:hover { background: rgba(255,255,255,.07) !important; color: #C8D0E0; }
.sort-ind { font-size: 0.72rem; margin-left: 3px; color: #4A5370; }
.sort-ind.active { color: var(--amber); font-weight: 700; }

.dsr-work-month { font-size: 11px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; margin-left: 3px; }

/* Expand row */
.dsr-table .expand-row td {
  background: linear-gradient(180deg, #F1F5FF 0%, #F6F8FE 100%);
  border-top: 2px solid var(--amber); border-bottom: 2px solid var(--border); padding: 0;
}
.dsr-expand-btn { transition: transform .2s ease; }
.dsr-expand-btn.open { transform: rotate(180deg); }

/* ============================================================
   PAGINATION BAR — shared by any list table (DSR, Payments, …)
   ============================================================ */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-2);
  background: var(--white); flex-wrap: wrap;
}
.pagination-info { font-size: 12px; color: var(--muted); }
.pagination-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.page-link {
  min-width: 28px; height: 28px; padding: 0 7px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  border: 1px solid transparent;
}
.page-link:hover { background: #F6F8FC; border-color: var(--border); }
.page-link.active { background: var(--asphalt); color: #fff; }
.page-link.is-disabled { opacity: .35; pointer-events: none; }
.page-ellipsis { color: var(--muted-2); font-size: 12px; padding: 0 2px; }
.page-jump { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.page-jump input {
  width: 46px; text-align: center; padding: 4px 6px; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 12px; font-family: 'IBM Plex Mono', monospace;
}

/* ============================================================
   DSR — EXPAND DETAIL PANEL
   ============================================================ */
.dsr-expand { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }

/* Each panel */
.dsr-panel {
  flex: 0 0 auto;
  padding: 11px 20px 11px 16px;
  border-right: 1px solid rgba(0,0,0,.07);
  position: relative;
  padding-left: 22px;
}
.dsr-panel:last-child { border-right: none; flex: 1 1 auto; }

/* Coloured left accent stripe */
.dsr-panel::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px;
}
.dsr-panel-finance::before { background: var(--blue); }
.dsr-panel-driver::before  { background: var(--green); }
.dsr-panel-remarks::before { background: var(--amber); }

/* Section header tag */
.dsr-panel-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}

/* KPI row — financial numbers */
.dsr-kpi-row { display: flex; align-items: flex-start; gap: 0; }
.dsr-kpi {
  display: flex; flex-direction: column;
  padding-right: 18px; margin-right: 18px;
  border-right: 1px solid var(--border-2);
}
.dsr-kpi:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.dsr-kpi-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.dsr-kpi-val.kpi-green { color: var(--green); }
.dsr-kpi-val.kpi-amber { color: var(--amber-dark); }
.dsr-kpi-key { font-size: 10px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* KV grid — driver / remarks data */
.dsr-kv-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 3px 10px; align-items: baseline;
}
.dsr-panel-driver .dsr-kv-grid,
.dsr-panel-remarks .dsr-kv-grid {
  grid-template-columns: auto 1fr auto 1fr;
  column-gap: 16px;
}
.dsr-kv-key {
  font-size: 10px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; line-height: 1.7;
}
.dsr-kv-val { font-size: 11.5px; color: var(--ink-2); line-height: 1.7; }
.dsr-kv-val.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

/* Full-width inline remarks (Loading Material, Remarks 1, Remarks 2) */
.dsr-remarks-stack { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dsr-remark-item { font-size: 12px; color: var(--ink-2); line-height: 1.65; word-break: break-word; }
.dsr-remark-item .dsr-kv-key { display: inline; margin-right: 4px; }
.dsr-remark-text { display: inline; margin: 0; }

/* ============================================================
   DSR — EMPTY STATE
   ============================================================ */
.dsr-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 20px; gap: 12px; color: var(--muted);
}
.dsr-empty p { font-size: 14px; margin: 0; }

/* ============================================================
   RESPONSIVE — DSR column visibility
   ============================================================ */

/* Mobile < 640px: show only essential cols */
@media (max-width: 639px) {
  .dsr-col-sm, .dsr-col-lg { display: none !important; }
  .dsr-table { min-width: unset; width: 100%; }
  .dsr-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
  .dsr-hero-actions { width: 100%; justify-content: flex-end; }
  .dsr-filter-panel.is-open { max-height: 520px; }
  .dsr-filter-form { flex-direction: column; align-items: stretch; }
  .dsr-filter-date-group { justify-content: flex-start; }
  .dsr-expand { flex-direction: column; }
  .dsr-panel { border-right: none; border-bottom: 1px solid var(--border-2); flex: none !important; }
  .dsr-panel:last-child { border-bottom: none; }
}

/* Tablet 640–1023px: hide lg cols, table still fixed-width */
@media (min-width: 640px) and (max-width: 1023px) {
  .dsr-col-lg { display: none !important; }
  .dsr-hero { flex-wrap: wrap; gap: 12px; }
}

/* ============================================================
   REFERENCE AUTOCOMPLETE DROPDOWN
   ============================================================ */
.ref-dd-wrapper { position: relative; }
.ref-dropdown {
  position: absolute; z-index: 300; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; display: none;
}
.ref-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--border-2);
}
.ref-option:last-child { border-bottom: none; }
.ref-option:hover { background: var(--steel); }
.ref-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-opt-sub { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* Generic searchable combo input (cities, vehicle types, ...) */
.combo-dropdown {
  position: absolute; z-index: 300; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; display: none;
}
.combo-option { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border-2); }
.combo-option:last-child { border-bottom: none; }
.combo-option:hover { background: var(--steel); }

/* ≥ 1024px: all columns visible, table fills container — no horizontal scroll */

/* Large hover tooltip (see main.js) */
.hover-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  max-width: 560px; padding: 14px 20px;
  background: var(--asphalt); color: #fff;
  font-size: 18px; font-weight: 500; line-height: 1.45;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-left: 4px solid var(--amber);
  white-space: pre-wrap; word-wrap: break-word;
  opacity: 0; transition: opacity .12s;
}
.hover-tip.show { opacity: 1; }

/* ============================================================
   STATEMENT OF ACCOUNT — professional layout additions
   ============================================================ */
.soa-lh-logo { height: 54px; max-width: 200px; object-fit: contain; margin-bottom: 8px; }
.soa-lh-contact {
  margin-top: 8px; font-size: 10.5px; color: var(--ink-2); line-height: 1.6;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
}
.ledger-card .soa-lh-contact { font-size: 10px; }

.soa-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 0 24px 12px; border: 1px solid #DDE0E8; border-radius: 4px; overflow: hidden;
}
.soa-sum-item { padding: 10px 14px; background: #fff; border-right: 1px solid #DDE0E8; }
.soa-sum-item:last-child { border-right: none; }
.soa-sum-label { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.soa-sum-val { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; margin-top: 3px; color: var(--asphalt); }
.soa-sum-val.positive { color: var(--green); }
.soa-sum-due { background: var(--asphalt); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.soa-sum-due .soa-sum-label { color: rgba(255,255,255,.6); }
.soa-sum-due .soa-sum-val { color: var(--amber); font-size: 17px; }

.soa-ageing { margin: 0 24px 14px; }
.soa-ageing-title { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.soa-ageing-title span { font-weight: 500; letter-spacing: .3px; text-transform: none; }
.soa-ageing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.soa-ageing-grid > div {
  background: #F7F8FC; border: 1px solid #E4E7EF; border-radius: 4px; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.soa-ageing-grid span { font-size: 9.5px; color: var(--muted); }
.soa-ageing-grid b { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--asphalt); }
.soa-age-bad b { color: var(--brick); }
.soa-age-total { background: #FEF3E0 !important; border-color: var(--amber) !important; }

.desc-short { display: none; }
.soa-inv-link { color: inherit; text-decoration: none; }
.soa-inv-link:hover { text-decoration: underline; color: var(--amber-dark); }
.soa-overdue-tag {
  display: block; width: max-content; margin-top: 1px; padding: 0 4px; border-radius: 3px;
  font-size: 8px; font-weight: 700; color: #fff; background: var(--brick); line-height: 1.5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.soa-remit { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 6px 24px 8px; }
.soa-bank { flex: 1; border: 1px solid #DDE0E8; border-radius: 4px; padding: 10px 14px; background: #F7F8FC;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.soa-bank .soa-zone-hdr { margin-bottom: 6px; }
.soa-bank-row { display: flex; gap: 12px; font-size: 11px; line-height: 1.7; }
.soa-bank-row span { min-width: 92px; color: var(--muted); }
.soa-sign { text-align: center; min-width: 180px; }
.soa-sign img { height: 48px; max-width: 170px; object-fit: contain; display: block; margin: 0 auto 2px; }
.soa-sign-line { border-top: 1px solid #9DA3B4; padding-top: 3px; font-size: 9.5px; color: var(--muted); }
.soa-note { margin: 4px 24px 6px; font-size: 9.5px; color: var(--muted); line-height: 1.5; }

/* Screen: the header stays visible while scrolling the ledger. `clip` (not `hidden`) keeps the
   card's rounded corners without turning it into a scroll container, which would break sticky. */
.ledger-card { overflow: clip; }
@media screen {
  table.soa-ledger-table thead th { position: sticky; top: var(--topbar-h); z-index: 4; }
}

/* Page numbers on printed pages (Chrome/Edge) */
@page {
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8px; color: #888; }
}

@media print {
  .soa-summary, .soa-ageing, .soa-remit, .soa-note { margin-left: 0 !important; margin-right: 0 !important; }
  .soa-sum-val { font-size: 12px; }
  .soa-sum-due .soa-sum-val { font-size: 13px; }
  .soa-sum-item { padding: 6px 10px; }
  .soa-ageing-grid b { font-size: 10.5px; }
  .soa-lh-logo { height: 42px; }
  .ledger-card .soa-info-zone { margin: 10px 0 !important; }
  .ledger-card .soa-amber-bar { margin: 0 !important; }
  .soa-remit, .soa-summary, .soa-ageing { page-break-inside: avoid; break-inside: avoid; }
}

/* Narrower screens: keep the fixed column widths readable by scrolling the table sideways
   instead of squeezing DESCRIPTION to nothing. (Only below 1500px, so the sticky header keeps
   working on normal desktop widths.) */
@media screen and (max-width: 1500px) {
  .ledger-card .soa-table-wrap, .soa-table-wrap { overflow-x: auto; }
  /* Below 1500px the table scrolls sideways inside .soa-table-wrap, which makes that wrapper the scroll container for
     "position: sticky": the header would then be pushed down by the top-bar offset and sit ON TOP of the first rows.
     So on these narrower screens the column header simply stays in its normal place above the rows. */
  table.soa-ledger-table thead th, table.soa-summary-table thead th, table.soa-status-table thead th { position: static; }
  table.soa-table.soa-ledger-table { min-width: 1180px; }
  table.soa-table.soa-summary-table { min-width: 1130px; }
}

/* ── Submit guard: busy state for buttons of a form that is being submitted ── */
button.is-submitting, input.is-submitting { cursor: wait !important; opacity: .75; pointer-events: none; }
.btn-spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Page-transition loader ─────────────────────────────────────────────── */
.page-loader-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.72), rgba(226,231,239,.62));
  -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; cursor: progress;
}
.page-loader-overlay.is-visible { opacity: 1; visibility: visible; }
.page-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 230px; padding: 30px 44px 26px; border-radius: 20px;
  background: rgba(255,255,255,.96); border: 1px solid rgba(226,231,239,.9);
  box-shadow: 0 24px 60px rgba(22,26,34,.20), 0 2px 0 rgba(255,255,255,.8) inset;
  transform: translateY(10px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.page-loader-overlay.is-visible .page-loader-card { transform: none; }
.page-loader-orb { position: relative; width: 92px; height: 92px; margin-bottom: 12px; }
.page-loader-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.page-loader-orb .track { fill: none; stroke: var(--amber-bg); stroke-width: 5; }
.page-loader-orb .arc {
  fill: none; stroke: url(#plg); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 276; stroke-dashoffset: 200;
  transform-origin: 50% 50%; animation: page-loader-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite;
  filter: drop-shadow(0 0 4px rgba(232,163,61,.55));
}
.page-loader-orb img {
  position: absolute; inset: 17px; width: calc(100% - 34px); height: calc(100% - 34px);
  object-fit: contain; border-radius: 50%; animation: page-loader-pulse 1.8s ease-in-out infinite;
}
.page-loader-text { font-size: 15px; font-weight: 600; letter-spacing: .5px; color: var(--ink); }
.page-loader-text .dots i { font-style: normal; display: inline-block; animation: page-loader-dot 1.2s infinite; }
.page-loader-text .dots i:nth-child(2) { animation-delay: .15s; }
.page-loader-text .dots i:nth-child(3) { animation-delay: .3s; }
.page-loader-sub { font-size: 12px; color: var(--muted); }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }
@keyframes page-loader-pulse { 0%,100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes page-loader-dot { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-loader-orb .arc { animation-duration: 2.4s; }
  .page-loader-orb img, .page-loader-text .dots i { animation: none; }
}
@media print { .page-loader-overlay { display: none !important; } }


/* ── Trip form (new / edit) ─────────────────────────────────────────────── */
.trip-form { padding-bottom: 12px; }
.tf-topline {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 -28px 20px; padding: 12px 28px;
  background: rgba(240,243,248,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.tf-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tf-nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  background: var(--white); border: 1px solid var(--border); transition: all var(--t-fast, .15s);
}
.tf-nav a b {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--border-2); color: var(--muted); font-size: 10px;
}
.tf-nav a:hover { border-color: var(--amber); color: var(--ink); }
.tf-nav a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tf-nav a.is-active b { background: var(--amber); color: #fff; }

.tf-section { scroll-margin-top: 78px; transition: box-shadow .2s ease, border-color .2s ease; }
.tf-section:focus-within { border-color: rgba(232,163,61,.55); box-shadow: 0 4px 18px rgba(22,26,34,.07); }
.tf-section .form-section-title { display: flex; align-items: center; gap: 8px; }
.tf-ico { font-size: 15px; }
.tf-opt { font-style: normal; font-weight: 500; font-size: 10.5px; letter-spacing: .3px; text-transform: none; color: var(--muted-2); margin-left: 6px; }

.tf-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; scroll-margin-top: 78px; }
.tf-two-col > .form-section { margin-bottom: 20px; }

/* Collapsible optional blocks */
.tf-more { margin: 2px 0 14px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: #FAFBFD; }
.tf-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.tf-more > summary::-webkit-details-marker, .tf-collapsible summary::-webkit-details-marker { display: none; }
.tf-more > summary::before, .tf-summary > span:first-child::after { content: none; }
.tf-more > summary > span::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--amber-dark); transition: transform .18s ease; }
.tf-more[open] > summary > span::before { transform: rotate(90deg); }
.tf-more > summary:hover { color: var(--ink); }
.tf-more-body { padding: 4px 14px 0; }
.tf-collapsible { padding-bottom: 0; }
.tf-collapsible > details > summary.tf-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0; border-bottom: 0; padding-bottom: 16px;
}
.tf-collapsible > details[open] > summary.tf-summary { margin-bottom: 18px; border-bottom: 1px solid var(--border-2); }
.tf-collapsible > details > summary.tf-summary::after { content: '▾'; color: var(--muted); transition: transform .18s; margin-left: 10px; }
.tf-collapsible > details:not([open]) > summary.tf-summary::after { transform: rotate(-90deg); }
.tf-count { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-dark); text-transform: none; letter-spacing: 0; }
.tf-refs-body { padding: 0; }

/* Trip type segmented control */
.tf-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--border-2); border-radius: 10px; margin-top: 2px; }
.tf-seg button {
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 22px; border-radius: 8px; color: var(--muted); transition: all .18s ease;
}
.tf-seg button:hover { color: var(--ink); }
.tf-seg button.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(22,26,34,.16), 0 0 0 1px rgba(232,163,61,.5); }

/* Recent-route chips + route preview */
.tf-recent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--amber-bg); border: 1px solid rgba(232,163,61,.28); }
.tf-recent[hidden] { display: none; }
.tf-recent-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--amber-dark); }
.tf-recent-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  background: var(--white); color: var(--ink-2); border: 1px solid rgba(232,163,61,.45); transition: all .15s ease;
}
.tf-chip:hover { background: var(--amber); border-color: var(--amber); color: #fff; transform: translateY(-1px); }

.tf-chain { display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; padding: 12px 14px; border-radius: var(--r-sm); background: #F7F9FC; border: 1px solid var(--border-2); }
.tf-chain.has-route { display: flex; }
.tf-chain-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.tf-chain-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-stop { display: inline-flex; flex-direction: column; padding: 5px 12px; border-radius: 8px; background: var(--white); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.25; }
.tf-stop i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.tf-stop-start { border-left: 3px solid var(--green); }
.tf-stop-mid   { border-left: 3px solid var(--blue); }
.tf-stop-end   { border-left: 3px solid var(--amber); }
.tf-arrow { color: var(--muted-2); font-weight: 700; }

/* Live money summary */
.tf-money-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.tf-summary-card { border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; background: #F7F9FC; border: 1px solid var(--border); transition: background .2s, border-color .2s; }
.tf-summary-card.is-profit { background: var(--green-bg); border-color: rgba(62,156,110,.35); }
.tf-summary-card.is-loss   { background: var(--brick-bg); border-color: rgba(184,68,51,.4); }
.tf-sum-title { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tf-sum-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }
.tf-sum-row b, .tf-sum-total b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.tf-sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 700; color: var(--ink); }
.tf-sum-total b { font-size: 18px; font-weight: 600; }
.is-loss .tf-sum-total b { color: var(--brick); }
.is-profit .tf-sum-total b { color: var(--green); }
.tf-sum-pct { text-align: right; font-size: 11px; color: var(--muted); min-height: 14px; }

/* Validation + warnings */
.form-group.has-error .form-control, .form-control.tf-invalid { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(184,68,51,.12); }
.tf-err { display: none; color: var(--brick); font-size: 11px; font-weight: 500; }
.form-group.has-error .tf-err { display: block; }
.tf-hint { color: var(--amber-dark); font-size: 11px; }
.tf-warn { font-size: 12px; font-weight: 500; padding: 7px 10px; border-radius: 6px; background: var(--amber-bg); color: #8A5A16; border: 1px solid rgba(232,163,61,.4); }
.tf-warn[hidden] { display: none; }

/* Sticky action bar */
.tf-actions {
  position: sticky; bottom: 0; z-index: 25; margin: 8px -28px -28px; padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(22,26,34,.07);
}
.tf-actions-btns { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.tf-actions-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.tf-actions-hint.is-dirty .tf-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.tf-actions-hint.is-dirty { color: var(--ink-2); font-weight: 600; }
.tf-kbd { margin-left: 8px; color: var(--muted-2); font-weight: 400; }
.tf-kbd kbd { font: 600 10.5px 'IBM Plex Mono', monospace; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--white); color: var(--ink-2); }

.tf-toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 10002; transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: all .25s ease; max-width: 90vw;
}
.tf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1200px) { .tf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-money-layout { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .tf-two-col { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .tf-topline { margin: 0 -16px 16px; padding: 10px 16px; }
  .tf-nav { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .tf-nav a { white-space: nowrap; }
  .tf-grid-4, .tf-grid-3, .tf-grid-2 { grid-template-columns: 1fr; }
  .tf-actions { margin: 8px -16px -16px; padding: 10px 16px; }
  .tf-actions-hint { display: none; }
  .tf-actions-btns { width: 100%; }
  .tf-actions-btns .btn { flex: 1; justify-content: center; }
  .form-control { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tf-toast, .tf-chip, .tf-seg button, .tf-more > summary > span::before { transition: none; } }

/* Driver | Reference | Vehicle: three independent cards */
.tf-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; scroll-margin-top: 78px; align-items: start; }
.tf-three-col > .form-section { margin-bottom: 20px; }
@media (max-width: 1300px) { .tf-three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .tf-three-col { grid-template-columns: 1fr; } }

/* Dashboard switch (also used on the classic dashboard) */
.dash-switch { display: inline-flex; padding: 3px; gap: 3px; background: var(--border-2); border-radius: 10px; }
.dash-switch a { padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 8px; text-decoration: none; transition: all .15s; }
.dash-switch a:hover { color: var(--ink); }
.dash-switch a.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(22,26,34,.16), 0 0 0 1px rgba(232,163,61,.5); }


/* ── SOA (Invoice Status): ledger look, this page's column order ──────────────
   INV. NO. · DATE · TN · PO NO. · DEPT · DESCRIPTION · AMOUNT · VAT · TOTAL · RECEIVED · V. NO · BALANCE · TID
   Sizes mirror the matching ledger columns. Placed after the ledger rules so these win. */
@media screen {
  table.soa-status-table th:nth-child(1)  { width: 70px; }                                              /* INV. NO.    */
  table.soa-status-table th:nth-child(2)  { width: 80px; }                                              /* DATE        */
  table.soa-status-table th:nth-child(3)  { width: 110px; }                                             /* TN          */
  table.soa-status-table th:nth-child(4)  { width: 78px; }                                              /* PO NO.      */
  table.soa-status-table th:nth-child(5)  { width: 40px;  min-width: 0 !important; max-width: none !important; } /* DEPT (short codes) */
  table.soa-status-table th:nth-child(6)  { width: auto; }                                              /* DESCRIPTION */
  table.soa-status-table th:nth-child(7)  { width: 78px; }                                              /* AMOUNT      */
  table.soa-status-table th:nth-child(8)  { width: 62px; }                                              /* VAT         */
  table.soa-status-table th:nth-child(9)  { width: 78px; }                                              /* TOTAL       */
  table.soa-status-table th:nth-child(10) { width: 76px; }                                              /* RECEIVED    */
  table.soa-status-table th:nth-child(11) { width: 62px; }                                              /* V. NO       */
  table.soa-status-table th:nth-child(12) { width: 78px; }                                              /* BALANCE     */
  table.soa-status-table th:nth-child(13) { width: 46px; }                                              /* TID         */
  table.soa-status-table th, table.soa-status-table td { box-sizing: border-box; }   /* widths above are the real widths */
  table.soa-status-table thead th { padding-left: 4px !important; padding-right: 4px !important; }
  /* DESCRIPTION gets all the width that is left, so a trip description normally fits on ONE line (it only wraps if it is longer than the column) */
  table.soa-status-table thead th { white-space: normal; line-height: 1.2; }
  table.soa-status-table td.desc-cell { font-size: 11.5px; letter-spacing: -0.1px; }
  table.soa-status-table td:nth-child(2)  { white-space: nowrap; }                                      /* DATE stays on one line */
  /* tighter PO NO. | DEPT | DESCRIPTION spacing (departments are only 3-4 characters) */
  table.soa-status-table th:nth-child(4), table.soa-status-table td:nth-child(4),
  table.soa-status-table th:nth-child(5), table.soa-status-table td:nth-child(5) { padding-left: 3px !important; padding-right: 3px !important; }
  table.soa-status-table th:nth-child(6), table.soa-status-table td:nth-child(6) { padding-left: 4px !important; }
}
@media screen and (max-width: 1500px) { table.soa-table.soa-status-table { min-width: 1280px; } }
@media print {
  table.soa-status-table th:nth-child(1)  { width: 7.4%  !important; }  /* INV. NO.    */
  table.soa-status-table th:nth-child(2)  { width: 7.4%  !important; }  /* DATE        */
  table.soa-status-table th:nth-child(3)  { width: 8.6%  !important; }  /* TN          */
  table.soa-status-table th:nth-child(4)  { width: 6%    !important; }  /* PO NO.      */
  table.soa-status-table th:nth-child(5)  { width: 3.5%  !important; min-width: 0 !important; max-width: none !important; } /* DEPT */
  table.soa-status-table th:nth-child(6)  { width: auto  !important; }  /* DESCRIPTION */
  table.soa-status-table th:nth-child(7)  { width: 8%    !important; }  /* AMOUNT      */
  table.soa-status-table th:nth-child(8)  { width: 6.5%  !important; }  /* VAT         */
  table.soa-status-table th:nth-child(9)  { width: 8.5%  !important; }  /* TOTAL       */
  table.soa-status-table th:nth-child(10) { width: 8%    !important; }  /* RECEIVED    */
  table.soa-status-table th:nth-child(11) { width: 6%    !important; }  /* V. NO       */
  table.soa-status-table th:nth-child(12) { width: 8.5%  !important; }  /* BALANCE     */
  table.soa-status-table th:nth-child(13) { width: 3.5%  !important; }  /* TID         */
  table.soa-status-table td:nth-child(1) { white-space: normal !important; }
  table.soa-status-table td:nth-child(2) { white-space: nowrap !important; }
  /* PDF / print: full description (as on screen), smaller type, wraps onto a second line when it is long */
  table.soa-status-table .desc-full  { display: inline !important; }
  table.soa-status-table .desc-short { display: none !important; }
  table.soa-status-table td.desc-cell { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; font-size: 7.4px !important; line-height: 1.22 !important; }
}


/* ── Multi-select dropdown (DSR department filter) ────────────────────────── */
.dsr-filter-panel.is-open { overflow: visible; }   /* lets the dropdown panel extend past the filter box */
.ms { position: relative; display: inline-block; }
.ms-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; max-width: 280px; cursor: pointer; text-align: left; }
.ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms.has-value .ms-trigger { border-color: var(--amber); background: var(--amber-bg); font-weight: 600; }
.ms-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.ms-count[hidden] { display: none; }
.ms-chev { flex: 0 0 auto; color: var(--muted); transition: transform .18s ease; }
.ms.is-open .ms-chev { transform: rotate(180deg); }
.ms-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-width: 86vw;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(22,26,34,.18); overflow: hidden; animation: ms-pop .14s ease-out;
}
.ms-panel[hidden] { display: none; }
@keyframes ms-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ms-search-wrap { padding: 10px 10px 6px; }
.ms-search { width: 100%; box-sizing: border-box; padding: 8px 11px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--steel); }
.ms-search:focus { outline: none; border-color: var(--amber); background: #fff; box-shadow: 0 0 0 3px var(--amber-glow); }
.ms-actions { display: flex; align-items: center; gap: 4px; padding: 2px 10px 8px; border-bottom: 1px solid var(--border-2); }
.ms-actions button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--amber-dark); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.ms-actions button:hover { background: var(--amber-bg); }
.ms-summary { margin-left: auto; font-size: 11.5px; color: var(--muted); padding-right: 2px; }
.ms-list { max-height: 280px; overflow-y: auto; padding: 4px 6px 8px; }
.ms-group[hidden] { display: none; }
.ms-group-title { position: sticky; top: 0; z-index: 1; background: rgba(255,255,255,.96); padding: 9px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ms-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; user-select: none; }
.ms-opt[hidden] { display: none; }
.ms-opt:hover, .ms-opt:focus-within { background: var(--steel); }
.ms-opt input { width: 16px; height: 16px; accent-color: var(--amber-dark); cursor: pointer; flex: 0 0 auto; }
.ms-opt input:checked + span { font-weight: 600; color: var(--ink); }
.ms-empty { padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--muted); }
.ms-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ms-panel { animation: none; } .ms-chev { transition: none; } }
@media (max-width: 700px) { .ms, .ms-trigger { width: 100%; max-width: none; } .ms-panel { width: 100%; } }

/* Pinned "Unassigned" option at the top of the department multi-select */
.ms-group-pinned { padding: 2px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-2); }
.ms-opt-special { background: var(--amber-bg); border: 1px dashed rgba(232,163,61,.55); }
.ms-opt-special:hover, .ms-opt-special:focus-within { background: #FCE7BF; }
.ms-opt-special em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--amber-dark); }

/* DSR route filter: start point ⇄ end point */
.dsr-route-group { flex-wrap: nowrap; }
.dsr-route-input { width: 150px; }
.dsr-route-input.has-value { border-color: var(--amber); background: var(--amber-bg); font-weight: 600; }
.dsr-route-swap { border: 1px solid var(--border); background: var(--white); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; transition: all .15s; }
.dsr-route-swap:hover { border-color: var(--amber); color: var(--amber-dark); transform: rotate(180deg); }
@media (max-width: 700px) { .dsr-route-group { flex-wrap: wrap; } .dsr-route-input { width: 100%; } }

/* ── Session guard dialog ─────────────────────────────────────────────────── */
.sg-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(22,26,34,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sg-box { width: 100%; max-width: 440px; background: var(--white); border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 24px 64px rgba(0,0,0,.3); text-align: center; animation: ms-pop .18s ease-out; }
.sg-icon { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sg-warn { background: var(--amber-bg); } .sg-off { background: var(--brick-bg); }
.sg-box h3 { margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; }
.sg-box p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.sg-box ol { text-align: left; margin: 0 0 12px; padding-left: 22px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.sg-msg { min-height: 18px; margin-bottom: 8px; font-size: 12.5px; color: var(--brick); font-weight: 600; }
.sg-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* SOA (Invoice Status): the big "Balance Due" box at the bottom is not part of the printout / PDF.
   (More specific than ".ledger-card .soa-footer { display:flex !important }" in the print block above.) */
@media print { .ledger-card .soa-footer.no-print { display: none !important; } }

/* SOA letterhead: when the company has a logo it replaces the company name, so the logo is shown large */
.soa-lh-logo { height: 92px; max-width: 380px; margin-bottom: 4px; }
.ledger-card .soa-lh-logo { height: 92px; }
@media print { .soa-lh-logo, .ledger-card .soa-lh-logo { height: 78px; max-width: 340px; } }

/* Payments list: every stacked per-trip line has the same fixed height, so Trip(s), Trip Date, Veh No.,
   Company, Invoice, PR and PO stay row-for-row aligned however many trips a payment covers
   (the trip badge used to make its line taller than the plain-text lines, and the gap grew with every trip). */
.alloc-line { height: 26px; line-height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.alloc-line .badge { vertical-align: middle; line-height: 1.2; }

/* Payments list: single-value cells (voucher, dates, type, client, amount, reference, ...) sit on the FIRST row of a payment,
   level with the first trip, instead of floating in the vertical middle of a tall multi-trip row. */
.pay-table tbody td { vertical-align: top; line-height: 26px; }
.pay-table tbody td.row-actions { line-height: 1.4; padding-top: 6px; }
.pay-table tbody td[style*="white-space:normal"] { line-height: 18px; padding-top: 11px; }   /* wrapping Remarks cell: first line level with the rest */
.pay-table tbody td .badge { vertical-align: middle; }

/* Sales Report: compact table so the three portal-only receipt columns fit on screen */
@media screen {
  .sales-table thead th { padding: 9px 5px !important; font-size: 9.5px !important; letter-spacing: .3px !important; line-height: 1.25; }
  .sales-table tbody td { padding: 8px 5px; font-size: 11.5px; vertical-align: top; }
  .sales-table th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
  .sales-table .rcpt-line { line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .sales-table .rcpt-amt { white-space: nowrap; font-weight: 600; }
  .sales-table td.vat-quarter-cell { font-size: 11px; }
  .soa-table-wrap:has(.sales-table) { overflow-x: auto; }   /* only the sales report scrolls sideways at every width */
}
/* ...but the receipt columns are for the portal only: never printed / saved as PDF */
@media print { .portal-only { display: none !important; } }

/* Ledger payment rows: invoices paid are listed under "Payment Received" in small monospace type, like the trip numbers */
.soa-ledger-table .desc-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-2); letter-spacing: -0.2px; white-space: normal; }
@media print { table.soa-ledger-table .desc-sub { font-size: 6.6px !important; letter-spacing: 0 !important; } }

/* Sales Report (screen): one line per invoice and no wasted space. Every column is only as wide as its content;
   the customer (English) column soaks up whatever is left, and a name that still does not fit is cut with "..." and
   shown in full on hover. */
@media screen {
  .sales-table { table-layout: auto; width: 100%; min-width: 980px; }
  .sales-table thead th { white-space: nowrap; padding: 8px 6px !important; text-align: left; }
  .sales-table tbody td { padding: 7px 6px; white-space: nowrap; vertical-align: top; font-size: 11.5px; }
  .sales-table td.nm-cell { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  /* No column soaks up the leftover width (that left a huge gap between the two name columns on wide screens):
     the browser shares spare space evenly, and long names are capped and cut with "..." */
  .sales-table td:nth-child(3) { max-width: 260px; }                                   /* CUSTOMER (ENG) */
  .sales-table td:nth-child(4) { max-width: 170px; }                                   /* CUSTOMER (AR) */
  .sales-table .rcpt-line { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .sales-table td.xl-num, .sales-table th:nth-child(n+6):nth-child(-n+8), .sales-table th:nth-child(12) { text-align: right; }
}

/* SOA Ledger: PO numbers on ONE line. With "(SAR)" gone from the headers the money columns can be narrower,
   which frees the width for the PO column. (The Invoice Status page is intentionally left as it was.) */
@media screen {
  /* Ledger: AMOUNT VAT TOTAL CREDITED BALANCE PO */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(6)  { width: 80px; }
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(7)  { width: 66px; }
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(8)  { width: 80px; }
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(9)  { width: 80px; }
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(10) { width: 84px; }
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(11) { width: 104px; }
  table.soa-ledger-table:not(.soa-status-table) td:nth-child(11) { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
}
@media screen and (max-width: 1500px) {
  table.soa-table.soa-ledger-table:not(.soa-status-table) { min-width: 1160px; }
}
@media print {
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(11) { width: 7.6% !important; }
  table.soa-ledger-table:not(.soa-status-table) td:nth-child(11) { white-space: nowrap !important; word-break: normal !important; }
}

/* SOA (Invoice Status): all 16 columns on screen WITHOUT a sideways scrollbar. Fixed layout at 100% width, small type,
   tight padding; DESCRIPTION takes whatever is left (and wraps to a second line when a trip description is longer).
   The three receipt columns at the end are portal-only (hidden when printing). */
@media screen {
  table.soa-table.soa-status-table { table-layout: fixed; width: 100%; min-width: 0; }
  table.soa-status-table th, table.soa-status-table td { box-sizing: border-box; }
  table.soa-status-table thead th { padding: 7px 3px !important; font-size: 8.5px !important; letter-spacing: 0 !important; line-height: 1.2; white-space: normal; text-align: left; }
  table.soa-status-table tbody td { padding: 6px 3px !important; font-size: 10px !important; line-height: 1.3; vertical-align: top; }
  table.soa-status-table td.xl-num, table.soa-status-table th:nth-child(n+7):nth-child(-n+10), table.soa-status-table th:nth-child(12), table.soa-status-table th:nth-child(16) { text-align: right; }
  table.soa-status-table th:nth-child(1)  { width: 54px; }       /* INV. NO.        */
  table.soa-status-table th:nth-child(2)  { width: 66px; }       /* DATE            */
  table.soa-status-table th:nth-child(3)  { width: 86px; }       /* TN              */
  table.soa-status-table th:nth-child(4)  { width: 64px; }       /* PO NO.          */
  table.soa-status-table th:nth-child(5)  { width: 30px; min-width: 0 !important; max-width: none !important; }   /* DEPT */
  table.soa-status-table th:nth-child(6)  { width: auto; }       /* DESCRIPTION     */
  table.soa-status-table th:nth-child(7)  { width: 62px; }       /* AMOUNT          */
  table.soa-status-table th:nth-child(8)  { width: 50px; }       /* VAT             */
  table.soa-status-table th:nth-child(9)  { width: 62px; }       /* TOTAL           */
  table.soa-status-table th:nth-child(10) { width: 62px; }       /* RECEIVED        */
  table.soa-status-table th:nth-child(11) { width: 54px; }       /* V. NO           */
  table.soa-status-table th:nth-child(12) { width: 62px; }       /* BALANCE         */
  table.soa-status-table th:nth-child(13) { width: 40px; }       /* TID             */
  table.soa-status-table th:nth-child(14) { width: 62px; }       /* RECEIPT NO.     */
  table.soa-status-table th:nth-child(15) { width: 66px; }       /* RECEIPT DATE    */
  table.soa-status-table th:nth-child(16) { width: 62px; }       /* RECEIPT AMOUNT  */
  table.soa-status-table td.desc-cell { font-size: 10px !important; letter-spacing: 0; white-space: normal; }
  table.soa-status-table td:nth-child(11), table.soa-status-table td.rcpt-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.soa-status-table .rcpt-line { line-height: 16px; overflow: hidden; text-overflow: ellipsis; max-width: none; }
  table.soa-status-table td:nth-child(1) .soa-overdue-tag { font-size: 8px; padding: 0 3px; }
}

/* SOA (Invoice Status), wide screens: DESCRIPTION only needs about 380px for one-line trip descriptions;
   everything left over goes to the TN (trips) column instead of an empty strip after the description. */
@media screen and (min-width: 1580px) {
  table.soa-status-table th:nth-child(3) { width: auto; }     /* TN takes the spare width */
  table.soa-status-table th:nth-child(6) { width: 380px; }    /* DESCRIPTION */
}

/* City / vehicle-type combo boxes: option highlighted with the keyboard (Up / Down) */
.combo-option.is-active { background: var(--amber-bg); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--amber); }

/* Client receipt: summary bar under the trip list (visible-after-search total + selected total) and richer selected chips */
.list-summary { display: flex; justify-content: space-between; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.list-summary .ls-block { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--steel); border: 1px solid var(--border); font-size: 12px; color: var(--ink-2); }
.list-summary .ls-label { font-weight: 700; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.list-summary .ls-count { font-weight: 600; color: var(--ink); }
.list-summary .ls-sep { color: var(--muted); }
.list-summary .ls-amt { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--ink); }
.list-summary .ls-selected { flex: 0 1 auto; }
.list-summary.has-selection .ls-selected { background: var(--amber-bg); border-color: rgba(232,163,61,.5); }
.list-summary.has-selection .ls-selected .ls-amt { color: var(--amber-dark); }
.trip-chip .trip-chip-sep { margin: 0 4px; color: var(--muted-2); }

/* Selected-trips bar: smaller, neater chips (invoice no. bold, trip no. lighter) */
.trip-chip { gap: 4px; padding: 2px 4px 2px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.trip-chip b { font-weight: 700; }
.trip-chip .trip-chip-sep { margin: 0 3px; font-size: 10px; }
.trip-chip-x { width: 14px; height: 14px; font-size: 11px; }
.selected-trips-chips { gap: 5px; }
.selected-trips-label { font-size: 9.5px; padding-top: 3px; }

/* SOA (Invoice Status): V. NO and RECEIPT AMOUNT columns removed -> 12 printed columns + 2 portal-only receipt columns.
   Column numbers: 1 INV, 2 DATE, 3 TN, 4 PO, 5 DEPT, 6 DESCRIPTION, 7 AMOUNT, 8 VAT, 9 TOTAL, 10 RECEIVED, 11 BALANCE, 12 TID, 13 RECEIPT NO, 14 RECEIPT DATE */
@media screen {
  table.soa-status-table th:nth-child(11) { width: 66px; text-align: right; }   /* BALANCE      */
  table.soa-status-table th:nth-child(12) { width: 40px; text-align: left; }    /* TID          */
  table.soa-status-table th:nth-child(13) { width: 70px; }                      /* RECEIPT NO.  */
  table.soa-status-table th:nth-child(14) { width: 70px; }                      /* RECEIPT DATE */
}
@media print {
  table.soa-status-table th:nth-child(11) { width: 8.5% !important; }           /* BALANCE */
  table.soa-status-table th:nth-child(12) { width: 3.5% !important; }           /* TID     */
}

/* SOA Ledger: REMARKS column (client receipt numbers) at the end - 13 columns now */
@media screen {
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(13) { width: 120px; }
  table.soa-ledger-table:not(.soa-status-table) td.rmk-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
}
@media screen and (max-width: 1500px) { table.soa-table.soa-ledger-table:not(.soa-status-table) { min-width: 1280px; } }
@media print {
  /* 13 columns: slightly narrower number columns make room for REMARKS and keep DESCRIPTION wide */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(1)  { width: 6.6% !important; }  /* DATE     */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(2)  { width: 6.4% !important; }  /* INV. NO. */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(3)  { width: 8.2% !important; }  /* TN       */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(4)  { width: 3%   !important; }  /* DEPT     */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(6)  { width: 7.4% !important; }  /* AMOUNT   */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(7)  { width: 6%   !important; }  /* VAT      */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(8)  { width: 7.8% !important; }  /* TOTAL    */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(9)  { width: 7.4% !important; }  /* CREDITED */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(10) { width: 7.8% !important; }  /* BALANCE  */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(11) { width: 7.2% !important; }  /* PO NO.   */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(12) { width: 3.3% !important; }  /* TID      */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(13) { width: 8%   !important; }  /* REMARKS  */
  table.soa-ledger-table:not(.soa-status-table) td.rmk-cell { white-space: normal !important; word-break: break-all; font-size: 7px !important; }
}
@media screen { table.soa-ledger-table:not(.soa-status-table) th:nth-child(3) { width: 150px; } }   /* ledger TN a little narrower to keep DESCRIPTION wide with the extra REMARKS column */

/* Selected trips grouped into ONE bubble per invoice (client receipts), with its trips inside */
.inv-group { display: flex; flex-direction: column; gap: 5px; background: var(--white); border: 1px solid rgba(232,163,61,.55); border-left: 4px solid var(--amber); border-radius: 10px; padding: 5px 8px 6px; box-shadow: var(--shadow-xs); max-width: 100%; }
.inv-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-group-name { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.inv-group-name.is-none { font-family: inherit; font-style: italic; font-weight: 600; color: var(--muted); }
.inv-group-count { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-dark); }
.inv-group-amt { font-size: 10.5px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.inv-group-x { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: none; background: var(--steel); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; transition: background var(--t-fast), color var(--t-fast); }
.inv-group-x:hover { background: var(--brick); color: #fff; }
.inv-group-trips { display: flex; flex-wrap: wrap; gap: 4px; }
.trip-chip.trip-chip-sm { background: var(--steel); box-shadow: none; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 3px 1px 8px; }
.trip-chip.trip-chip-sm:not(:has(button)) { padding-right: 8px; }

/* Compact invoice bubbles: invoice number + its trip chips + remove-all on ONE row (wraps only when it has to) */
.inv-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 5px; padding: 2px 5px 2px 8px; border-radius: 999px; border-left-width: 3px; }
.inv-group-count { padding: 0 6px; font-size: 9.5px; line-height: 15px; }
.inv-group-name { font-size: 10.5px; }
.inv-group-amt { font-size: 10px; }
.inv-group-trips { display: contents; }
.inv-group .trip-chip.trip-chip-sm { padding: 0 2px 0 7px; font-size: 9.5px; line-height: 15px; border-radius: 999px; }
.inv-group .trip-chip-x { width: 12px; height: 12px; font-size: 10px; }
.inv-group-x { margin-left: 2px; width: 15px; height: 15px; font-size: 12px; }
.selected-trips-chips { gap: 4px; align-items: center; }

/* Invoice = solid amber tag, trips = blue chips, so the two are told apart at a glance */
.inv-group { background: var(--amber-bg); }
.inv-group-name:not(.is-none) { background: var(--amber); color: #fff; padding: 0 8px; border-radius: 999px; line-height: 17px; }
.inv-group-name.is-none { background: var(--steel); padding: 0 8px; border-radius: 999px; line-height: 17px; }
.inv-group-count { background: #fff; }
.inv-group .trip-chip.trip-chip-sm { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(59,111,160,.45); box-shadow: none; }
.inv-group .trip-chip-x { background: rgba(59,111,160,.16); color: var(--blue); }
.inv-group .trip-chip-x:hover { background: var(--brick); color: #fff; }
.inv-group-x { background: #fff; }
.inv-group-x:hover { background: var(--brick); color: #fff; }

/* Client receipt covering several trips: shared header row + linked trip rows beneath it */
.pay-table tbody tr.pay-group-head td { background: #E3ECF7; vertical-align: middle; border-top: 2px solid rgba(59,111,160,.45); font-weight: 600; }
.pay-table tbody tr.pay-group-head td:first-child { box-shadow: inset 4px 0 0 var(--blue); }
.pay-table tbody tr.pay-group-head td.row-actions { padding-top: 0; padding-bottom: 0; }
.pay-table tbody tr.pay-group-row td { background: #F6F9FD; vertical-align: middle; border-top: 1px dashed rgba(59,111,160,.22); }
.pay-table tbody tr.pay-group-row td:first-child { box-shadow: inset 4px 0 0 rgba(59,111,160,.45); }
.pay-table tbody tr.pay-group-row.is-last td { border-bottom: 2px solid rgba(59,111,160,.35); }
.pay-table tbody tr.pay-group-row td.money { font-weight: 500; color: var(--muted); }
.pay-table tbody tr.pay-group-head:hover td, .pay-table tbody tr.pay-group-row:hover td { background: #DCE8F6; }
.pay-table tbody tr.pay-group-head td:first-child, .pay-table tbody tr.pay-group-row td:first-child { padding-left: 10px; }

/* SOA Ledger, payment rows: "Payment Received" + the invoices it settled, each with its trips - calm slate/blue, no orange.
   Receipts covering 3+ invoices collapse to one summary line (click to expand; printing expands them). */
.soa-ledger-table td.desc-cell .pay-recv { font-weight: 700; color: var(--green); }
.soa-ledger-table td.desc-cell details.settle-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.soa-ledger-table td.desc-cell details.settle-details > summary::-webkit-details-marker { display: none; }
.soa-ledger-table td.desc-cell details.settle-details > summary::before, .pay-history-table details.settle-details > summary::before { content: ''; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transition: transform .12s; }
.soa-ledger-table td.desc-cell details.settle-details[open] > summary::before, .pay-history-table details.settle-details[open] > summary::before { transform: rotate(90deg); }
.soa-ledger-table td.desc-cell .settle-count { font-size: 9.5px; font-weight: 600; color: var(--blue); background: var(--blue-bg); border-radius: 999px; padding: 0 7px; line-height: 15px; white-space: nowrap; }
.soa-ledger-table td.desc-cell .settle-wrap { white-space: normal !important; margin-top: 3px; line-height: 1.55; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: -0.2px; }
.soa-ledger-table td.desc-cell .settle { display: inline-block; white-space: nowrap; max-width: 100%; margin: 0 9px 0 0; vertical-align: top; }
.soa-ledger-table td.desc-cell .settle-inv { font-weight: 700; color: var(--ink); margin-right: 3px; }
.soa-ledger-table td.desc-cell .settle-inv::after { content: ':'; font-weight: 400; color: var(--muted-2); }
.soa-ledger-table td.desc-cell .settle-tns { color: var(--blue); }
@media print {
  .soa-ledger-table td.desc-cell .pay-recv { font-size: 7.5px; }
  .soa-ledger-table td.desc-cell details.settle-details > summary::before { display: none; }
  .soa-ledger-table td.desc-cell .settle-count { display: none; }
  .soa-ledger-table td.desc-cell .settle-wrap { margin-top: 0; line-height: 1.3; font-size: 6.6px !important; }
  .soa-ledger-table td.desc-cell .settle { font-size: 6.6px !important; letter-spacing: 0 !important; margin-right: 5px; }
  .soa-ledger-table td.desc-cell .settle-tns { color: var(--ink-2); }
  .soa-ledger-table tr.soa-credit-row { page-break-inside: avoid; }
}

/* SOA Ledger: Payment History panel (portal only) */
.pay-history-table th, .pay-history-table td { vertical-align: top; }
.pay-history-table td .selected-trips-chips { gap: 4px; }
.pay-history-table tfoot td { background: var(--steel); border-top: 2px solid var(--border); padding-top: 8px; padding-bottom: 8px; }

/* SOA Ledger totals row: seven-figure totals no longer run into each other */
table.soa-ledger-table:not(.soa-status-table) .soa-totals-row td.xl-num { font-size: 10.5px !important; letter-spacing: -0.3px; white-space: nowrap; padding-right: 5px !important; }
@media print { table.soa-ledger-table:not(.soa-status-table) .soa-totals-row td.xl-num { font-size: 7.5px !important; letter-spacing: -0.4px; padding-right: 3px !important; } }

/* Payment History on the statement: light slate / blue bubbles (no orange); receipts with 3+ invoices collapse to a summary line */
.pay-history-table details.settle-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.pay-history-table details.settle-details > summary::-webkit-details-marker { display: none; }
.pay-history-table .settle-count { font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-bg); border-radius: 999px; padding: 1px 9px; }
.pay-history-table details.settle-details[open] .selected-trips-chips { margin-top: 6px; }
.pay-history-table .inv-group { background: #F5F7FA; border-color: #D3DBE6; border-left-color: #5B7AA3; }
.pay-history-table .inv-group-name:not(.is-none) { background: #DCE5F1; color: #1E2A44; }
.pay-history-table .inv-group-count { background: #fff; color: #1E2A44; }
.pay-history-table .inv-group-amt { color: var(--ink-2); }

/* SOA Ledger PDF: the DATE column was too narrow for dd-MM-yyyy and ran into INV. NO. - wider column, slightly smaller date text */
@media print {
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(1)  { width: 8.4% !important; }   /* DATE     */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(3)  { width: 7.6% !important; }   /* TN       */
  table.soa-ledger-table:not(.soa-status-table) th:nth-child(13) { width: 6.8% !important; }   /* REMARKS  */
  table.soa-ledger-table:not(.soa-status-table) td:nth-child(1)  { font-size: 7.6px !important; letter-spacing: -0.2px !important; white-space: nowrap; padding-left: 2px !important; padding-right: 2px !important; }
  table.soa-ledger-table:not(.soa-status-table) td:nth-child(2)  { padding-left: 3px !important; }
}

/* New-trip form: Monthly Rate box (UOM, total units, price per unit -> company rent) */
.tf-money-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tf-rate-box { border: 1px solid #C9D6E8; background: #F3F7FC; border-radius: var(--r); padding: 12px 14px 12px; }
.tf-rate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tf-rate-title { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--blue); }
.tf-rate-sub { font-size: 11px; color: var(--muted); }
.tf-rate-formula { margin-top: 9px; font-size: 12px; color: var(--muted); font-style: italic; }
.tf-rate-formula.is-ok { color: var(--ink); font-style: normal; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.tf-auto-tag { margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--blue); background: var(--blue-bg); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
#fCompanyRent.is-auto { background: var(--steel); font-weight: 700; cursor: default; }