/* Dispatch Board — finish layer: depth, colour refinements and motion. Loaded after every other stylesheet.
   Motion answers what the person did (opening a menu, switching a tab, saving); nothing moves on its own except
   progress while work is running. prefers-reduced-motion (app.css) cuts all of it to an instant change. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .14s;
  --dur: .22s;
  --radius: 12px;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 18px -8px rgba(16, 24, 40, 0.12);
  --shadow-pop: 0 2px 6px rgba(16, 24, 40, 0.06), 0 22px 44px -14px rgba(16, 24, 40, 0.28);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 24px -10px rgba(16, 24, 40, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 22px -10px rgba(0,0,0,0.55);
    --shadow-pop: 0 2px 6px rgba(0,0,0,0.4), 0 24px 48px -12px rgba(0,0,0,0.7);
    --shadow-lift: 0 2px 4px rgba(0,0,0,0.4), 0 12px 26px -10px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 22px -10px rgba(0,0,0,0.55);
  --shadow-pop: 0 2px 6px rgba(0,0,0,0.4), 0 24px 48px -12px rgba(0,0,0,0.7);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.4), 0 12px 26px -10px rgba(0,0,0,0.6);
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- Type: a softer heading face (--font-head, app.css), sentence case instead of all capitals ---------- */
h1, h2, h3, .plan-name, .m-brand { font-family: var(--font-head); }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }
.brand h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; font-weight: 500; }
.drawer h2 { font-size: 21px; margin-bottom: 2px; }
.login-card h1 { font-size: 22px; letter-spacing: -0.02em; }
.plan-name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.m-brand { font-weight: 700; letter-spacing: -0.01em; }

/* Headings and labels read in sentence case; pills and tags too (their base is in css/app.css). Weekday initials keep their capitals. */
.brand h1, .brand-sub, .attention-head h3, .banner-unassigned .label, .banner-recurring .label, .timeline-head .corner,
.status-pill, .conflict-pill, .kpi-card .kpi-label, .credit-kpi span, table.loads th, .drawer h2, .field label, .section-title,
.stop-row .stop-head .tag, .login-card h1, .move-head .tag, .tr-table th, .bill-kv span, .rep-card h3, .rep-label,
.ibx-card-title, .lane-head, .plan-banner strong, .plan-name,
.m-brand, .m-tile small, .m-section, .m-sheet h2, .imp-toolbar label, .imp-map th, .imp-rows th, .imp-list th, .c-imp .section-title,
.lv-tile .l, .live-team h2, .lv-panel h3, .lv-team th, .ps-table th, .pw-cols h4, .lvp-port h3, .sample-banner strong,
.comp-list-head h3, .comp-group, .insp-open h3 { text-transform: none; letter-spacing: 0; }
/* Without capitals, the small labels need a touch more size to hold their place. */
.kpi-card .kpi-label, .credit-kpi span { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
table.loads th, .tr-table th, .lv-team th, .ps-table th, .imp-map th, .imp-rows th, .imp-list th { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.field label { font-size: var(--fs-sm); }
.section-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.attention-head h3 { font-size: 15px; }
.rep-card h3 { font-size: var(--fs-lg); color: var(--ink); }
.rep-label, .ibx-card-title, .bill-kv span, .timeline-head .corner, .lane-head, .m-tile small, .m-section, .lv-tile .l { font-size: 12px; }
.banner-unassigned .label, .banner-recurring .label, .sample-banner strong, .plan-banner strong { font-size: var(--fs-md); }

/* ---------- Keyframes ---------- */
@keyframes dbPopIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dbSheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dbFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dbToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dbGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dbGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dbShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes dbIndeterminate { 0% { transform: translateX(-100%) scaleX(.3); } 50% { transform: translateX(10%) scaleX(.6); } 100% { transform: translateX(100%) scaleX(.3); } }

/* ---------- First appearance: the board and the sign-in card ---------- */
.app:not([hidden]) { animation: dbFadeUp .42s var(--ease-out) both; }
.login-screen:not([hidden]) .login-card { animation: dbPopIn .38s var(--ease-out) both; }
.login-card { border-radius: 16px; box-shadow: var(--shadow-pop); padding: 30px 28px; }

/* ---------- Menus and popovers ---------- */
.date-pop, .tools-pop, .col-picker, .hlp-pop, .addr-pop {
  border-radius: var(--radius); box-shadow: var(--shadow-pop); border-color: var(--border);
  transform-origin: top center; animation: dbPopIn var(--dur) var(--ease-out) both;
}
.tools-pop { transform-origin: top right; }
.hlp-pop.hlp-sheet { animation-name: dbSheetIn; }
.tools-pop a { transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); animation: dbFadeUp .26s var(--ease-out) both; }
.tools-pop a:nth-child(2) { animation-delay: .03s; }
.tools-pop a:nth-child(3) { animation-delay: .06s; }
.tools-pop a:nth-child(4) { animation-delay: .09s; }
.tools-pop a:nth-child(n+5) { animation-delay: .12s; }
.tools-pop a:hover, .tools-pop a:focus-visible { transform: translateX(2px); }
.date-pop button { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.date-pop .day:active { transform: scale(.92); }
.date-pop .day.sel { box-shadow: 0 4px 10px -4px var(--accent); }
.col-picker label { border-radius: 6px; padding: 5px 6px; margin: 0 -6px; transition: background var(--dur-fast) ease; }
.col-picker label:hover { background: var(--surface-3); }

/* Hover tooltips: drift in rather than blink. */
[data-tip]::after { transform: translate(-50%, -3px); border-radius: 8px; transition: opacity .14s ease, transform .18s var(--ease-out), visibility 0s linear .14s; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { transform: translate(-50%, 0); transition: opacity .16s ease .4s, transform .22s var(--ease-out) .4s, visibility 0s linear .4s; }
[data-tip-align="right"]::after, [data-tip-align="left"]::after { transform: translateY(-3px); }
[data-tip-align="right"]:hover::after, [data-tip-align="left"]:hover::after,
[data-tip-align="right"]:focus-visible::after, [data-tip-align="left"]:focus-visible::after { transform: none; }

/* ---------- Drawer, scrim, toast ---------- */
.scrim { background: rgba(10, 16, 24, 0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .26s ease; }
.drawer {
  transform: translateX(36px); border-left-color: var(--border);
  box-shadow: var(--shadow-pop);
  transition: transform .34s var(--ease-out), opacity .22s ease;
}
.drawer-close { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; top: 14px; right: 14px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out); }
.drawer-close:hover { background: var(--surface-3); color: var(--ink); transform: rotate(90deg); }
.hlp-panel:not([hidden]) { animation: dbSheetIn .3s var(--ease-out) both; }

.toast:not([hidden]) { animation: dbToastIn .32s var(--ease-spring) both; }
.toast { padding: 11px 20px; box-shadow: 0 14px 34px -10px rgba(16, 24, 40, 0.5); }

/* ---------- Buttons and controls ---------- */
.btn {
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out), filter var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); transition-duration: .06s; }
.btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px -6px var(--accent), 0 0 0 3px var(--accent-soft); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  /* Outline and Raised keep their own primary look; everything else gets the sheen. */
  :root:not([data-buttons="outline"]):not([data-buttons="raised"]), [data-buttons="standard"], [data-buttons="rounded"], [data-buttons="square"], [data-buttons="soft"] {
    --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
    --btn-primary-hover-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
    --btn-primary-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .btn.primary:hover:not(:disabled) { box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
}
.btn.danger:hover:not(:disabled) { background: var(--status-critical-soft); }
.btn:focus-visible, select.filter:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, .top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top-btn { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out); }
.top-btn .ico { display: inline-block; transition: transform var(--dur) var(--ease-spring); }
.top-btn:hover .ico { transform: scale(1.14); }
.top-btn:active { transform: scale(.96); }
#btnSettings:hover .ico { transform: rotate(60deg); }

/* Icon colour on hover. At rest an icon's hue (--ic, set in css/app.css) is held back so a row of buttons reads as one set;
   pointing at one brings its full colour up, tints the button in the same colour and lights the icon from behind. The tints are
   mixed with transparent rather than with a surface colour, so they work over a light bar, a dark bar and a wallpaper alike. */
svg.ico { transition: stroke var(--dur-fast) ease, filter var(--dur) var(--ease-out); }
.top-btn:hover svg.ico, .top-btn:focus-visible svg.ico,
.btn:hover:not(:disabled) svg.ico, .tab:hover svg.ico, .tab[aria-selected="true"] svg.ico,
.tools-pop a:hover svg.ico, .tools-pop a:focus-visible svg.ico,
.sp-item:hover svg.ico, .sp-item[aria-current="page"] svg.ico, .switch-row:hover svg.ico { stroke: var(--ic, currentColor); }
.top-btn:hover svg.ico, .tools-pop a:hover svg.ico, .sp-item[aria-current="page"] svg.ico {
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--ic, transparent) 50%, transparent));
}
.top-btn:hover { background: color-mix(in srgb, var(--ic, var(--ink)) 15%, transparent); border-color: color-mix(in srgb, var(--ic, var(--ink)) 34%, transparent); }
.tools-pop a:hover, .tools-pop a:focus-visible { background: color-mix(in srgb, var(--ic, var(--ink)) 12%, transparent); }
.sp-item:hover { background: color-mix(in srgb, var(--ic, var(--ink)) 9%, transparent); }
/* The gear turns and the day arrows slide the way they point. */
#dPrev:hover svg.ico { transform: translateX(-1.5px); }
#dNext:hover svg.ico { transform: translateX(1.5px); }
.date-nav button svg.ico { transition: transform var(--dur) var(--ease-spring), stroke var(--dur-fast) ease; }
.user-chip, .date-nav { transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out); }
button.user-chip:hover { box-shadow: var(--shadow); }
.user-chip .avatar { background: linear-gradient(135deg, var(--accent), var(--accent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.brand-mark { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), var(--shadow); }

.icon-btn { transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur) var(--ease-out); }
.icon-btn:active { transform: scale(.94); }

/* Text inputs: a soft halo on focus instead of a hard outline. */
.search, select.filter, .field input, .field select, .field textarea, .login-card input, .driver-select-inline {
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), background var(--dur-fast) ease;
}
.search:hover, select.filter:hover { border-color: var(--border-strong); }
.search:focus-within, .field input:focus, .field select:focus, .field textarea:focus, .login-card input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .search:focus-within, .field input:focus, .field select:focus, .field textarea:focus, .login-card input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}
.field input:focus, .field select:focus, .field textarea:focus, .login-card input:focus { background: var(--surface); }

.switch .track { transition: background var(--dur) ease, border-color var(--dur) ease; }
.switch .track::before { transition: transform .28s var(--ease-spring), width .18s ease; }
.switch input:active + .track::before { width: 22px; }
.switch input:checked:active + .track::before { transform: translateX(12px); }
.chipbox label, .swatch { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-spring); }
.swatch:hover { transform: scale(1.1); }
.chipbox label:active { transform: scale(.95); }

/* ---------- Tabs: the underline grows under the chosen tab ---------- */
.tabbar { border-bottom-color: var(--border); }
.tabbar .tab, .bill-nav .tab, .int-nav .fleet-chip { position: relative; transition: color var(--dur-fast) ease, background var(--dur) ease; }
.tabbar .tab[aria-selected="true"], .bill-nav .tab[aria-selected="true"], .int-nav .fleet-chip.active-filter { border-bottom-color: transparent; }
.tabbar .tab::after, .bill-nav .tab::after, .int-nav .fleet-chip::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0;
  background: var(--tab-sel-line, var(--accent)); transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.bill-nav .tab::after, .int-nav .fleet-chip::after { background: var(--accent); }
.tabbar .tab[aria-selected="true"]::after, .bill-nav .tab[aria-selected="true"]::after, .int-nav .fleet-chip.active-filter::after { transform: scaleX(1); }
.tabbar .tab:hover:not([aria-selected="true"])::after { transform: scaleX(.35); opacity: .35; }
.tabs:not(.tabbar .tabs):not(.bill-nav) .tab { transition: background var(--dur) ease, color var(--dur-fast) ease, box-shadow var(--dur) ease; }

/* Switching tabs: the new view settles in. */
[id^="view-"]:not([hidden]) { animation: dbFadeUp .3s var(--ease-out) both; }

/* ---------- Cards, board and tables ---------- */
.board, .attention, .kpi-card, .credit-kpi, .rep-card, .login-card { border-color: var(--border); }
.kpi-card, .credit-kpi { gap: 4px; padding: 13px 15px; }
.kpi-card .kpi-value, .credit-kpi strong { font-size: 22px; letter-spacing: -0.01em; }
.fleet-chip { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out); }
.fleet-chip:hover { box-shadow: var(--shadow-lift); }
.fleet-chip.active-filter { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.fleet-chip:focus-visible, .fleet-chip.active-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rep-starter { transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.rep-starter:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.driver-row, .driver-id, table.loads td, .alert-item, .attention-head { transition: background var(--dur-fast) ease; }
.driver-row:hover .track-wrap { background: var(--surface-2); }
.alert-item:hover { background: var(--surface-2); }
table.loads tbody tr:hover td { background: var(--surface-2); }
table.loads th { letter-spacing: 0.04em; }

.load-block {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(16, 24, 40, 0.12);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.load-block:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), var(--shadow-lift); filter: saturate(1.08); z-index: 6; }
.load-block.done { background-image: none; box-shadow: none; }
.load-block.brokered { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.13) 0 6px, transparent 6px 12px), linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); }
.now-line { box-shadow: 0 0 0 3px var(--accent-soft); opacity: .75; }
.status-pill, .count-pill, .conflict-pill, .lfd, .req-chip { transition: background var(--dur) ease, color var(--dur) ease; }

/* ---------- Loading: progress bars, busy results, the top loading bar ---------- */
.imp-bar span, .start-bar span, .plan-meter-bar span {
  position: relative; overflow: hidden;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  transition: width .45s var(--ease-out);
}
.imp-bar span, .start-bar span { animation: dbShimmer 1.6s linear infinite; }
.imp-bar span { background-color: var(--accent); }
.start-bar span { background-color: var(--status-available); }
.plan-meter-bar span { animation: dbGrowX .7s var(--ease-out) both; transform-origin: left; }
.plan-meter-bar, .imp-bar, .start-bar { box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08); }
.sc-bar-fill { transform-origin: left; animation: dbGrowX .6s var(--ease-out) both; border-radius: inherit; }

.rep-bar-fill { transform-origin: left; animation: dbGrowX .6s var(--ease-out) both; border-radius: 0 6px 6px 0; }
.rep-col-fill { transform-origin: bottom; animation: dbGrowY .6s var(--ease-out) both; border-radius: 6px 6px 0 0; }
.rep-bar:nth-child(2) .rep-bar-fill, .rep-col:nth-child(2) .rep-col-fill { animation-delay: .03s; }
.rep-bar:nth-child(3) .rep-bar-fill, .rep-col:nth-child(3) .rep-col-fill { animation-delay: .06s; }
.rep-bar:nth-child(4) .rep-bar-fill, .rep-col:nth-child(4) .rep-col-fill { animation-delay: .09s; }
.rep-bar:nth-child(n+5) .rep-bar-fill, .rep-col:nth-child(n+5) .rep-col-fill { animation-delay: .12s; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rep-bar-fill:not(.neg) { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--surface)), var(--accent)); }
  .rep-col-fill:not(.neg) { background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 72%, var(--surface)), var(--accent)); }
}
.pf-split .pf-seg { transition: filter var(--dur-fast) ease; }
.pf-split .pf-seg:hover { filter: brightness(1.12); }

.rep-result.busy { position: relative; opacity: .7; }
.rep-result.busy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%) no-repeat;
  background-size: 200% 100%; animation: dbShimmer 1.2s linear infinite;
}
:root[data-theme="dark"] .rep-result.busy::after { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rep-result.busy::after { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%); } }

/* Top loading bar (#netBar, js/sync.js): shown while a request the person started is running. */
.net-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-netbar); pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .3s ease .12s; }
.net-bar.on { opacity: 1; transition-delay: 0s; }
.net-bar::before {
  content: ""; position: absolute; inset: 0; transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--status-transit) 70%, transparent);
  animation: dbIndeterminate 1.15s var(--ease-out) infinite;
}
.net-bar.done::before { animation: dbGrowX .25s var(--ease-out) both; background: linear-gradient(90deg, var(--accent), var(--status-transit)); }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  .net-bar::before { animation: none; background: var(--accent); }
  .btn:hover:not(:disabled), .load-block:hover, .rep-starter:hover { transform: none; }
}
@media print { .net-bar { display: none !important; } }