/* ============================================================================
   FleetLog design system.

   Loaded after style.css and extras.css, and before dashboard.css. It keeps
   every rule in those files and changes how they look in two moves:

   1. Tokens. style.css never names a colour, only a token, so remapping
      --bg, --panel, --text, --signal and the rest to the palette below
      recolours the whole app at once: slate for ink and surfaces, emerald
      for good, amber for caution and the brand, rose for stop, blue for info.
      The --d-* set is the palette itself, which the dashboard and its charts
      read directly.

   2. Components. The shapes and type that made the old look (hairlines,
      2px corners, uppercase labels everywhere, graph-paper ground) give way
      to elevated cards with a crisp low-blur shadow and a 1px highlight,
      rounded controls, sentence-case type, and a lift on hover for the
      things that are a way in.

   Light and dark are switched by the same three rules as before: the OS
   preference, and the light / dark override the theme button sets.
   ==========================================================================*/

/* =============================== palette ================================ */
:root, :root[data-theme="light"] {
  --d-bg:             #f3f5f9;
  --d-ink:            #0f172a;               /* slate-900 */
  --d-ink-2:          #334155;               /* slate-700 */
  --d-muted:          #4f5d72;               /* between slate-600 and 500: 6:1 on the ground */
  --d-faint:          #5f6d82;               /* still readable text: 4.8:1 on the ground */
  --d-surface:        rgba(255, 255, 255, .82);
  --d-surface-solid:  #ffffff;
  --d-surface-2:      #f8fafc;               /* slate-50 */
  --d-surface-3:      #eef2f7;
  --d-glass:          rgba(255, 255, 255, .72);
  --d-track:          #eef2f7;
  --d-border:         rgba(0, 0, 0, .05);
  --d-border-strong:  rgba(15, 23, 42, .10);
  --d-control-border: rgba(15, 23, 42, .14);
  --d-grid:           rgba(15, 23, 42, .06);
  --d-highlight:      inset 0 1px 0 rgba(255, 255, 255, .9);
  --d-shadow-sm:      0 1px 2px rgba(15, 23, 42, .06);
  --d-shadow:         0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
  --d-shadow-hover:   0 6px 12px -2px rgba(15, 23, 42, .08), 0 18px 36px -10px rgba(15, 23, 42, .18);
  --d-shadow-pop:     0 12px 24px -6px rgba(15, 23, 42, .14), 0 30px 60px -12px rgba(15, 23, 42, .22);
  --d-scrim:          rgba(15, 23, 42, .38);

  --d-emerald:        #047857;  --d-emerald-soft: rgba(16, 185, 129, .12);
  --d-amber:          #92400e;  --d-amber-soft:   rgba(245, 158, 11, .15);
  --d-rose:           #be123c;  --d-rose-soft:    rgba(244, 63, 94, .11);
  --d-sky:            #1d4ed8;  --d-sky-soft:     rgba(59, 130, 246, .11);
  --d-brand:          #f59e0b;  /* amber-500: the brand lamp and primary action */
  --d-brand-2:        #fbbf24;
  --d-fuel:           #f59e0b;
  --d-maint:          #3b82f6;
  --d-ring:           rgba(245, 158, 11, .28);

  --d-tooltip-bg:     rgba(15, 23, 42, .94);
  --d-tooltip-ink:    #f8fafc;
  --d-tooltip-border: rgba(255, 255, 255, .08);

  --d-ambient: radial-gradient(1200px 600px at 0% -10%, rgba(245, 158, 11, .07), transparent 60%),
               radial-gradient(1000px 520px at 100% -8%, rgba(59, 130, 246, .07), transparent 60%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg:             #0b1120;
    --d-ink:            #f1f5f9;
    --d-ink-2:          #cbd5e1;
    --d-muted:          #94a3b8;
    --d-faint:          #8a97ab;               /* 6:1 on the dark surface */
    --d-surface:        rgba(15, 23, 42, .74);
    --d-surface-solid:  #111827;
    --d-surface-2:      rgba(30, 41, 59, .55);
    --d-surface-3:      #1e293b;
    --d-glass:          rgba(15, 23, 42, .72);
    --d-track:          rgba(51, 65, 85, .5);
    --d-border:         rgba(255, 255, 255, .08);
    --d-border-strong:  rgba(255, 255, 255, .13);
    --d-control-border: rgba(255, 255, 255, .14);
    --d-grid:           rgba(148, 163, 184, .12);
    --d-highlight:      inset 0 1px 0 rgba(255, 255, 255, .05);
    --d-shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
    --d-shadow:         0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
    --d-shadow-hover:   0 8px 16px -4px rgba(0, 0, 0, .45), 0 22px 44px -12px rgba(0, 0, 0, .65);
    --d-shadow-pop:     0 14px 28px -6px rgba(0, 0, 0, .55), 0 34px 70px -14px rgba(0, 0, 0, .7);
    --d-scrim:          rgba(2, 6, 23, .62);

    --d-emerald:        #34d399;  --d-emerald-soft: rgba(52, 211, 153, .14);
    --d-amber:          #fbbf24;  --d-amber-soft:   rgba(251, 191, 36, .14);
    --d-rose:           #fb7185;  --d-rose-soft:    rgba(251, 113, 133, .14);
    --d-sky:            #60a5fa;  --d-sky-soft:     rgba(96, 165, 250, .14);
    --d-brand:          #fbbf24;
    --d-brand-2:        #fcd34d;
    --d-fuel:           #fbbf24;
    --d-maint:          #60a5fa;
    --d-ring:           rgba(251, 191, 36, .30);

    --d-tooltip-bg:     rgba(2, 6, 23, .94);
    --d-tooltip-ink:    #f1f5f9;
    --d-tooltip-border: rgba(255, 255, 255, .10);

    --d-ambient: radial-gradient(1200px 600px at 0% -10%, rgba(251, 191, 36, .06), transparent 60%),
                 radial-gradient(1000px 520px at 100% -8%, rgba(96, 165, 250, .08), transparent 60%);
  }
}
:root[data-theme="dark"] {
  --d-bg:             #0b1120;
  --d-ink:            #f1f5f9;
  --d-ink-2:          #cbd5e1;
  --d-muted:          #94a3b8;
  --d-faint:          #8a97ab;               /* 6:1 on the dark surface */
  --d-surface:        rgba(15, 23, 42, .74);
  --d-surface-solid:  #111827;
  --d-surface-2:      rgba(30, 41, 59, .55);
  --d-surface-3:      #1e293b;
  --d-glass:          rgba(15, 23, 42, .72);
  --d-track:          rgba(51, 65, 85, .5);
  --d-border:         rgba(255, 255, 255, .08);
  --d-border-strong:  rgba(255, 255, 255, .13);
  --d-control-border: rgba(255, 255, 255, .14);
  --d-grid:           rgba(148, 163, 184, .12);
  --d-highlight:      inset 0 1px 0 rgba(255, 255, 255, .05);
  --d-shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
  --d-shadow:         0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
  --d-shadow-hover:   0 8px 16px -4px rgba(0, 0, 0, .45), 0 22px 44px -12px rgba(0, 0, 0, .65);
  --d-shadow-pop:     0 14px 28px -6px rgba(0, 0, 0, .55), 0 34px 70px -14px rgba(0, 0, 0, .7);
  --d-scrim:          rgba(2, 6, 23, .62);

  --d-emerald:        #34d399;  --d-emerald-soft: rgba(52, 211, 153, .14);
  --d-amber:          #fbbf24;  --d-amber-soft:   rgba(251, 191, 36, .14);
  --d-rose:           #fb7185;  --d-rose-soft:    rgba(251, 113, 133, .14);
  --d-sky:            #60a5fa;  --d-sky-soft:     rgba(96, 165, 250, .14);
  --d-brand:          #fbbf24;
  --d-brand-2:        #fcd34d;
  --d-fuel:           #fbbf24;
  --d-maint:          #60a5fa;
  --d-ring:           rgba(251, 191, 36, .30);

  --d-tooltip-bg:     rgba(2, 6, 23, .94);
  --d-tooltip-ink:    #f1f5f9;
  --d-tooltip-border: rgba(255, 255, 255, .10);

  --d-ambient: radial-gradient(1200px 600px at 0% -10%, rgba(251, 191, 36, .06), transparent 60%),
               radial-gradient(1000px 520px at 100% -8%, rgba(96, 165, 250, .08), transparent 60%);
}

/* ==================== the app's own tokens, remapped ==================== */
/* Every rule in style.css and extras.css reads these, so this is where the
   whole app changes colour. They follow the palette above in both themes. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bg:           var(--d-bg);
  --grid:         transparent;               /* the graph-paper ground retires */
  --panel:        var(--d-surface-solid);
  --panel-2:      var(--d-surface-2);
  --line:         var(--d-border-strong);
  --line-hard:    var(--d-control-border);
  --text:         var(--d-ink);
  --muted:        var(--d-muted);

  --signal:       var(--d-brand);
  --signal-text:  var(--d-amber);
  --go:           var(--d-emerald);
  --go-text:      var(--d-emerald);
  --go-fill:      var(--d-emerald-soft);
  --stop:         var(--d-rose);
  --stop-text:    var(--d-rose);
  --stop-fill:    var(--d-rose-soft);
  --info:         var(--d-sky);
  --info-text:    var(--d-sky);
  --info-fill:    var(--d-sky-soft);
  --caution-fill: var(--d-amber-soft);

  --shadow:       var(--d-shadow);
  --shadow-lift:  var(--d-shadow-pop);
  --plate-ink:    var(--d-ink);
  --plate-bg:     var(--d-surface-solid);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg); --grid: transparent; --panel: var(--d-surface-solid); --panel-2: var(--d-surface-3);
    --line: var(--d-border-strong); --line-hard: var(--d-control-border); --text: var(--d-ink); --muted: var(--d-muted);
    --signal: var(--d-brand); --signal-text: var(--d-amber);
    --go: var(--d-emerald); --go-text: var(--d-emerald); --go-fill: var(--d-emerald-soft);
    --stop: var(--d-rose); --stop-text: var(--d-rose); --stop-fill: var(--d-rose-soft);
    --info: var(--d-sky); --info-text: var(--d-sky); --info-fill: var(--d-sky-soft);
    --caution-fill: var(--d-amber-soft);
    --shadow: var(--d-shadow); --shadow-lift: var(--d-shadow-pop);
    --plate-ink: var(--d-ink); --plate-bg: var(--d-bg);
  }
}
:root[data-theme="dark"] { --panel-2: var(--d-surface-3); --plate-bg: var(--d-bg); }

/* ============================= shape & motion ============================ */
:root {
  --radius:    10px;          /* was 2px: every control and box rounds with it */
  --r-sm:      8px;
  --r-md:      12px;
  --r-lg:      16px;
  --r-xl:      20px;
  --ease:      cubic-bezier(0.25, 0.8, 0.25, 1);
  --tick:      180ms;
  --lift:      transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease, background-color .2s ease;
}

/* ================================ ground ================================= */
body {
  background-color: var(--bg);
  background-image: var(--d-ambient);
  background-attachment: fixed;
  color: var(--text);
  text-rendering: optimizeLegibility;
}
::selection { background: var(--d-amber-soft); color: var(--text); }

/* thin, rounded scrollbars that sit in the surface rather than on it */
* { scrollbar-width: thin; scrollbar-color: var(--d-control-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--d-control-border); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--d-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================== typography ============================== */
/* Headings keep Archivo but lose the signage caps: sentence case, heavy,
   tightly tracked. The FleetLog wordmark keeps its capitals. */
h1, h2, h3 { font-stretch: 100%; text-transform: none; letter-spacing: -.02em; color: var(--text); }
.pagehead h2 { font-size: 28px; font-weight: 750; letter-spacing: -.025em; }
.modal h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.mono, .num, td, .card .v { font-variant-numeric: tabular-nums; }

/* small labels read as labels, not as stamped plates */
label.f, div.f { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--d-ink-2); gap: 6px; }
label.f > span:first-child, div.f > span:first-child { color: var(--d-ink-2); }

/* ============================== app shell =============================== */
.sidebar {
  background: var(--d-glass);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-right: 1px solid var(--d-border-strong);
  padding: 0 10px 14px; gap: 2px;
}
body.nav-collapsed .sidebar:hover { box-shadow: var(--d-shadow-pop); }
.sidebar .brand { font-size: 18px; letter-spacing: .12em; height: 60px; }
.sidebar .brand i {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 18px;
  color: #1f1300; background: linear-gradient(145deg, var(--d-brand-2), var(--d-brand));
  box-shadow: 0 4px 10px -2px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.nav-group { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; color: var(--d-faint); padding: 16px 12px 6px; }
.navlink {
  border-left: 0; border-radius: var(--r-sm); padding: 8px 11px; font-size: 13.5px; font-weight: 500;
  color: var(--d-ink-2);
  transition: background-color .2s ease, color .2s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.navlink i { color: var(--d-faint); transition: color .2s ease; }
.navlink:hover { background: var(--d-surface-2); color: var(--text); transform: translateX(2px); }
.navlink:hover i { color: var(--d-ink-2); }
.navlink.active {
  background: var(--d-amber-soft); color: var(--text); font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22);
}
.navlink.active i { color: var(--d-amber); }

.topbar {
  background: var(--d-glass);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--d-border-strong);
  min-height: 58px;
}
.icon-btn { border-radius: var(--r-sm); transition: background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.icon-btn:hover { background: var(--d-surface-2); border-color: var(--d-border-strong); transform: translateY(-1px); }
.crumb { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.crumb .crumb-current { font-weight: 650; }
.pagehead { padding: 24px 24px 6px; }
.page { padding: 16px 24px 48px; gap: 18px; perspective: 1000px; }
/* The page's entrance fade (style.css) holds its last keyframe with
   `both`, which would pin every panel's transform and cancel the hover
   lift. `backwards` keeps the entrance and hands the transform back. */
.page > * { animation-fill-mode: backwards; }

/* =============================== controls =============================== */
.btn {
  border-radius: var(--r-sm); padding: 8px 14px;
  font: 600 12.5px/1.4 var(--font-body); text-transform: none; letter-spacing: 0;
  background: var(--d-surface-solid); color: var(--text);
  border: 1px solid var(--d-control-border);
  box-shadow: var(--d-shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: var(--lift);
}
.btn:hover { background: var(--d-surface-2); transform: translateY(-1px); box-shadow: var(--d-shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--d-shadow-sm); }
.btn i { font-size: 15px; }
.btn.primary {
  color: #1f1300; border-color: transparent;
  background: linear-gradient(180deg, var(--d-brand-2), var(--d-brand));
  box-shadow: 0 1px 2px rgba(180, 83, 9, .25), 0 4px 12px -4px rgba(245, 158, 11, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #fcd34d, var(--d-brand-2));
  box-shadow: 0 2px 4px rgba(180, 83, 9, .25), 0 8px 18px -6px rgba(245, 158, 11, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn.danger { color: var(--d-rose); border-color: rgba(244, 63, 94, .35); background: var(--d-surface-solid); }
.btn.danger:hover { background: var(--d-rose-soft); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--d-surface-2); border-color: var(--d-border-strong); }
.btn.slim { padding: 5px 10px; font-size: 12px; }
.btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }

input, select, textarea {
  border-radius: var(--r-sm); border: 1px solid var(--d-control-border);
  background: var(--d-surface-solid); color: var(--text);
  padding: 8px 11px; font-size: 13.5px;
  box-shadow: var(--d-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--d-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--d-brand);
  box-shadow: 0 0 0 4px var(--d-ring), var(--d-shadow-sm);
}
input[type="checkbox"], input[type="radio"] { box-shadow: none; accent-color: var(--d-brand); }
:where(a, button):focus-visible { outline: 2px solid var(--d-brand); outline-offset: 2px; border-radius: var(--r-sm); }

.linkbtn { color: var(--d-sky); font-weight: 600; }

/* ============================ cards & panels ============================ */
/* one surface everywhere: solid, a hairline edge, a crisp shadow, and a
   highlight along the top edge that reads as the card's lit face */
.panel, .card, .table-wrap {
  background: var(--d-surface-solid);
  border: 1px solid var(--d-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--d-highlight), var(--d-shadow);
  transition: var(--lift);
}
.panel { padding: 18px 20px; }
.panel > h3, .panel .ptitle {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; text-transform: none; color: var(--text);
  border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; gap: 10px;
}
.panel .ptitle > i.ph, .ptitle > i.ph {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--d-sky-soft); color: var(--d-sky); font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--d-border);
}
.ptitle .seeall { font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--d-sky); }
.chart-hint { color: var(--d-faint); }

/* Depth on hover, for the surfaces that are a way somewhere or a summary to
   scan: a lift along z inside the page's perspective, and a wider, softer
   shadow. A panel holding a form or a table stays put, because a box that
   moves while someone types or reads down a column is harder to use. */
.card:hover,
.panel:not(:has(input, select, textarea, table, .table-wrap, canvas)):hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--d-highlight), var(--d-shadow-hover);
  border-color: var(--d-control-border);
}
.panel:has(input, select, textarea, table, .table-wrap, canvas):hover { box-shadow: var(--d-highlight), var(--d-shadow-hover); }
.table-wrap:hover { box-shadow: var(--d-highlight), var(--d-shadow-hover); }

/* the stat tiles on the alerts, fuel card and detail pages */
.cards { gap: 16px; perspective: 1000px; }
.card { border-top: 1px solid var(--d-border-strong); padding: 16px 18px; gap: 6px; }
.card .k { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--d-muted); }
.card .k i { color: var(--d-sky); font-size: 15px; }
.card .v { font-family: var(--font-display); font-stretch: 100%; font-size: 28px; font-weight: 750; letter-spacing: -.02em; }
.card .s { color: var(--d-faint); font-size: 11.5px; }
.card.warn { border-top-color: var(--d-border-strong); box-shadow: var(--d-highlight), var(--d-shadow), inset 0 3px 0 var(--d-brand); }
.card.bad  { box-shadow: var(--d-highlight), var(--d-shadow), inset 0 3px 0 var(--d-rose); }
.card.bad .v { color: var(--d-rose); }
a.card.linkcard:hover { border-top-color: var(--d-control-border); background: var(--d-surface-solid); }

/* ================================ tables ================================ */
.table-wrap { overflow: auto; }
table { font-size: 13px; border-collapse: separate; border-spacing: 0; }
th {
  background: var(--d-surface-2); color: var(--d-muted);
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
  padding: 10px 14px; border-bottom: 1px solid var(--d-border-strong);
}
th:first-child { border-top-left-radius: var(--r-lg); }
th:last-child  { border-top-right-radius: var(--r-lg); }
td { padding: 11px 14px; border-bottom: 1px solid var(--d-border); color: var(--d-ink-2); }
tbody tr { transition: background-color .18s ease; }
tbody tr:hover { background: var(--d-surface-2); }
tr.clickrow:hover td { background: var(--d-amber-soft); }
td .link {
  font: 600 12px/1.4 var(--font-body); text-transform: none; letter-spacing: 0;
  color: var(--d-muted); padding: 4px 9px; border-radius: 7px;
  transition: background-color .18s ease, color .18s ease;
}
td .link:hover { color: var(--text); background: var(--d-surface-3, var(--d-surface-2)); }
td .link.del:hover { color: var(--d-rose); background: var(--d-rose-soft); }
.plate { border-radius: 6px; border-color: var(--d-control-border); box-shadow: var(--d-shadow-sm); }

/* ================================ badges ================================ */
.badge {
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 650; letter-spacing: .04em;
  border: 0; box-shadow: inset 0 0 0 1px var(--d-border-strong);
}
.badge.ok   { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); }
.badge.warn { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35); }
.badge.bad  { box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .3); }
.badge.info { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .3); }

/* ========================= tabs: a segmented control ===================== */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border: 0;
  background: var(--d-surface-3, var(--d-surface-2)); border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
  justify-self: start; max-width: 100%;
}
.tab {
  border: 0; margin: 0; border-radius: 9px; padding: 7px 14px;
  font: 600 12.5px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--d-muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text); background: var(--d-surface-solid);
  box-shadow: var(--d-shadow), inset 0 0 0 1px var(--d-border);
}

/* ============================ banners & notes ============================ */
.flagbar {
  border: 0; border-image: none; border-radius: var(--r-md);
  padding: 10px 14px; font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500;
  background: var(--d-amber-soft); color: var(--d-amber);
  box-shadow: inset 3px 0 0 var(--d-brand);
}
.error { border: 0; border-radius: var(--r-md); box-shadow: inset 3px 0 0 var(--d-rose); padding: 10px 12px; }
.empty { padding: 44px 16px; }
.empty i {
  font-size: 26px; opacity: 1; color: var(--d-faint);
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  background: var(--d-surface-2); box-shadow: inset 0 0 0 1px var(--d-border);
}

/* ================================ modal ================================= */
.modal-back {
  background: var(--d-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal {
  border: 1px solid var(--d-border-strong); border-top: 1px solid var(--d-border-strong);
  border-radius: var(--r-xl); padding: 22px 24px; gap: 14px;
  box-shadow: var(--d-highlight), var(--d-shadow-pop);
}
@keyframes t-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.modal { animation: t-pop .28s var(--ease); }

/* ============================ floating menus ============================ */
.exportmenu, .alertmenu, .pick-menu {
  border: 1px solid var(--d-border-strong); border-radius: var(--r-md);
  background: var(--d-surface-solid);
  box-shadow: var(--d-shadow-pop); padding: 5px;
}
.exportmenu button, .pick-row {
  border: 0; border-radius: var(--r-sm);
  font: 500 13px/1.4 var(--font-body); text-transform: none; letter-spacing: 0;
}
.exportmenu button:hover { color: var(--text); background: var(--d-surface-2); }
/* the currency switch under the formats */
.exportopt {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px; margin-top: 4px;
  border-top: 1px solid var(--d-border-strong); font: 500 12.5px/1.4 var(--font-body);
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.exportopt input { margin: 0; accent-color: var(--signal); }
.alertmenu { padding: 0; overflow: hidden; }
.alertmenu-head { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }

/* ================================ toasts ================================ */
.toast {
  border: 1px solid var(--d-border-strong); border-left: 1px solid var(--d-border-strong);
  border-radius: var(--r-md); padding: 11px 14px 11px 16px;
  background: var(--d-surface-solid); box-shadow: var(--d-shadow-pop), inset 3px 0 0 var(--d-emerald);
}
.toast.ok   { border-left-color: var(--d-border-strong); box-shadow: var(--d-shadow-pop), inset 3px 0 0 var(--d-emerald); }
.toast.err  { border-left-color: var(--d-border-strong); box-shadow: var(--d-shadow-pop), inset 3px 0 0 var(--d-rose); }
.toast.info { border-left-color: var(--d-border-strong); box-shadow: var(--d-shadow-pop), inset 3px 0 0 var(--d-sky); }

/* ========================= alerts, lists, pager ========================= */
.alert-item { border-radius: var(--r-sm); transition: background-color .18s ease; }
.alert-item .l { font-weight: 600; }
.pager { font-size: 12.5px; text-transform: none; letter-spacing: 0; }

/* the fleet status scorecard's lamps */
.score-cell { border-radius: var(--r-md); transition: var(--lift); }
.score-cell:hover { transform: translateY(-2px); box-shadow: var(--d-shadow-hover); }

/* =========================== forms and editors =========================== */
.form-section {
  color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: -.005em; text-transform: none;
  border-bottom: 1px solid var(--d-border-strong); padding: 10px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.form-section::before { content: ''; width: 6px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--d-brand-2), var(--d-brand)); }
.parts-box, .checklist-sec, .readout, .autofill {
  border-radius: var(--r-md); border-color: var(--d-border-strong); background: var(--d-surface-2);
}
.parts-box .boxhead, .parts-total { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.cl-scroll { border-radius: var(--r-md); box-shadow: var(--d-shadow); }
.cl-table th { letter-spacing: .07em; }
.cl-seg { border-radius: 9px; }
.overview-grid .k { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--d-muted); }
.overview-grid .ov { font-weight: 500; }

/* ====================== grids of cells in one card ====================== */
/* the vehicle's status strip and the access-request grants: one rounded
   card, its cells parted by hairlines */
.status-grid, .access-grid {
  border: 1px solid var(--d-border-strong); border-radius: var(--r-lg); overflow: hidden;
  background: var(--d-surface-solid); box-shadow: var(--d-highlight), var(--d-shadow);
}
.status-item { border-color: var(--d-border); background: transparent; padding: 14px 16px; transition: background-color .2s ease; }
.status-item:hover { background: var(--d-surface-2); }
.status-item .k { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--d-muted); }
.status-item .k i { color: var(--d-sky); }

/* ============================== bulk upload ============================= */
.step-no {
  width: 24px; height: 24px; border: 0; border-radius: 999px;
  font: 700 12px var(--font-body); color: var(--d-amber);
  background: var(--d-amber-soft); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
}
.dropzone { border-radius: var(--r-lg); transition: var(--lift); }
.dropzone:hover, .dropzone.over { border-color: var(--d-brand); background: var(--d-amber-soft); transform: translateY(-2px); }

/* the page's filters line up on their bottom edge, labelled or not */
@media (min-width: 761px) { .pagehead-right { align-items: flex-end; } }

/* the checklist table sits inside a form label box: it keeps body weight */
.cl-wrap { font-weight: 400; }
.cl-table .cl-item { font-weight: 500; }

/* =============================== sign in ================================ */
.login-panel { background: var(--d-surface-solid); }
.login-card label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--d-ink-2); }
.login-card input { padding: 11px 12px; font-size: 14px; }
.login-card .btn { padding: 11px 14px; font-size: 14px; }
.login-brand { letter-spacing: .14em; }
.login-card h1 { font-size: 34px; font-weight: 750; letter-spacing: -.03em; }

/* ============================ touch & motion ============================ */
@media (hover: none) {
  .card:hover, .panel:hover, .btn:hover, .navlink:hover, .icon-btn:hover, .score-cell:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .panel:hover, .btn:hover, .navlink:hover, .icon-btn:hover, .score-cell:hover { transform: none; }
}
@media (max-width: 760px) {
  .pagehead h2 { font-size: 24px; }
  .page { padding: 14px 14px 32px; }
  .pagehead { padding: 16px 14px 2px; }
  .panel { padding: 15px 14px; }
  .tabs { display: flex; }
}

/* ============================================================================
   Identity: the road.

   FleetLog is about vehicles on Kenyan roads, so the character is taken from
   there rather than from software: headings and big figures in a condensed
   signage face, every number plate drawn as the yellow rear plate it is on
   the vehicle, amber lane markings where a page begins or a route is
   chosen, and a fine grain on the ground, like tarmac under a paper sheet.
   ==========================================================================*/

:root {
  /* Big Shoulders began as signage for a city's streets: narrow, loud, and
     legible at a distance. Plex Sans stays for reading, Plex Mono for data. */
  --font-display: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  --lane: repeating-linear-gradient(90deg, var(--d-brand) 0 16px, transparent 16px 26px);
  --lane-v: repeating-linear-gradient(180deg, var(--d-brand) 0 7px, transparent 7px 12px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --grain-opacity: .045;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-opacity: .09; } }
:root[data-theme="dark"] { --grain-opacity: .09; }

/* ------------------------------- the ground ------------------------------ */
/* grain over the ambient light, fixed so it does not crawl as pages scroll */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }

/* ------------------------------- signage --------------------------------- */
.pagehead h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: .92; letter-spacing: .005em;
}
/* the lane marking under every page title, painted on as the page arrives */
.pagehead h2::after {
  content: ''; display: block; width: 92px; height: 4px; margin-top: 12px; border-radius: 2px;
  background: var(--lane);
  animation: lane-paint .9s .15s cubic-bezier(.65, 0, .35, 1) backwards;
}
@keyframes lane-paint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.sidebar .brandname { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .14em; }
.card .v, .dash .kpi-value {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; line-height: .95;
}
.card .v { font-size: 36px; }
.dash .kpi-value { font-size: 44px; }
.modal h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .01em; }
.login-card h1 { font-family: var(--font-display); font-weight: 800; font-size: 54px; letter-spacing: .005em; line-height: .9; }
.login-card h1::after { content: ''; display: block; width: 92px; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--lane); }
.login-brand { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .22em; }
.login-aside p { font-family: var(--font-display); font-weight: 800; font-size: 50px; line-height: .98; letter-spacing: .005em; max-width: 14ch; }

/* ------------------------------ the plates ------------------------------- */
/* Every registration is drawn as the yellow rear plate it is on the vehicle:
   black characters in a condensed face, a black border, the slight emboss
   of pressed metal. It is the same object in light and in dark, because it
   is a physical thing, and it is what people scan a fleet list for. */
.plate {
  font-family: var(--font-display); font-weight: 800; font-size: 15.5px; line-height: 1.2;
  letter-spacing: .07em; text-transform: uppercase; color: #111317;
  background: linear-gradient(180deg, #ffe14a 0%, #ffd000 55%, #f2c200 100%);
  border: 1.5px solid #111317; border-radius: 5px; padding: 1px 8px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(15, 23, 42, .25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.detail-plate { font-size: 30px; padding: 3px 16px 1px; border-width: 2.5px; border-radius: 8px; letter-spacing: .09em; }
.dash .plate { border-radius: 5px; }

/* --------------------------- lanes on the rail --------------------------- */
.navlink { position: relative; }
.navlink.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: var(--lane-v);
}

/* the section marker in forms becomes a short run of lane paint */
.form-section::before { width: 22px; height: 4px; border-radius: 2px; background: var(--lane); background-size: 26px 4px; }

@media (max-width: 760px) {
  .pagehead h2 { font-size: 36px; }
  .dash .kpi-value { font-size: 38px; }
  .login-card h1 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pagehead h2::after { animation: none; } }

/* ------------------------- the road on the sign-in ------------------------ */
/* The first thing anyone sees: a road running away into the distance, its
   centre line coming towards you as if you were driving it. Drawn in CSS
   on the photo panel, under the words; still for reduced motion. */
.login-card h1 { margin-bottom: 8px; }
.login-aside { position: relative; overflow: hidden; isolation: isolate; }
.login-aside::before {
  content: ''; position: absolute; z-index: -1; left: 62%; bottom: 0;
  width: 64%; height: 118%;
  transform: translateX(-50%) perspective(360px) rotateX(55deg);
  transform-origin: 50% 100%;
  background:
    /* the centre line: one dash per 180px tile, repeated down the road */
    linear-gradient(180deg, rgba(251, 191, 36, .95) 0 55%, transparent 55% 100%) center 0 / 14px 180px repeat-y,
    /* the edge lines */
    linear-gradient(90deg, rgba(255, 255, 255, .6) 0 5px, transparent 5px calc(100% - 5px), rgba(255, 255, 255, .6) calc(100% - 5px)) 0 0 / 100% 100% no-repeat,
    /* the tarmac, darker towards you */
    linear-gradient(180deg, rgba(24, 26, 31, .15), rgba(12, 13, 16, .9)) 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  animation: drive 1.1s linear infinite;
}
@keyframes drive { to { background-position: center 180px, 0 0, 0 0; } }
.login-aside p { position: relative; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) { .login-aside::before { animation: none; } }

/* alert titles are names and places, not code: the reading face, not mono */
.alert-item .l { font-family: var(--font-body); font-weight: 650; font-size: 13px; letter-spacing: 0; }

/* ------------------------- the sign-in picture ---------------------------- */
/* The picture is the live 3D scene in js/signin-scene.js. Beneath it sits the
   same sunset drawn in CSS, which is what shows while three.js loads, and
   stays if WebGL or the connection is not there: the panel never shows a
   missing photo again. */
:root { --login-photo: none; }
.login-aside {
  background:
    radial-gradient(circle at 40% 64%, rgba(255, 238, 205, .95) 0 2.6%, rgba(255, 190, 120, .45) 6%, transparent 24%),
    linear-gradient(180deg, #1c2146 0%, #7a3d5c 34%, #e3743b 57%, #ffc27d 65.5%, #7a5634 66%, #3b2a1c 100%);
}
/* a darker foot, so the headline always reads over the road */
.login-aside::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 12, .82) 0%, rgba(8, 9, 12, .38) 32%, transparent 58%);
}
.signin-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease;
}
.signin-scene.on { opacity: 1; }
.login-aside.has-scene::before { display: none; }   /* the CSS road gives way to the 3D one */
.login-aside p { z-index: 1; }

/* ============================================================================
   Accessibility pass.

   The look above stays; these rules make sure everyone can read it and work
   it: no text smaller than 11px, a visible focus ring on everything that
   takes focus, 44px targets on touch screens, and form fields that do not
   make a phone zoom in when tapped.
   ==========================================================================*/

/* screen-reader-only text, for labels a sighted reader gets from layout */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------ type floor ------------------------------- */
/* the 9 and 10px labels were below what reads at arm's length */
.readout-item .k, .repmeta .k, .score-cell .k, .score-head .s,
.detail-group h4, .checklist-sec h4,
.dash .mini-k, .dash .status-strip .mini-k { font-size: 11px; }

/* --------------------------------- focus --------------------------------- */
/* Rows, sortable headers and anything else given a tabindex get the same
   ring as buttons. Some dashboard rules turn the outline off and only tint
   the border on focus, which is too faint to see, so the ring comes back
   as a shadow there. */
:where([tabindex], summary, th.sortable):focus-visible {
  outline: 2px solid var(--d-brand); outline-offset: 2px; border-radius: var(--r-sm);
}
tr.clickrow:focus-visible { outline-offset: -2px; }
.modal:focus, .modal:focus-visible { outline: none; }   /* focused only so its title is read out */
tr.clickrow:focus-visible td { background: var(--d-amber-soft); }
.dash .mini.linked:focus-visible, .dash .dq-row:focus-visible, .dash .appr-row:focus-visible,
.dash .jump-chip:focus-visible, button.kpi.card.linked:focus-visible {
  box-shadow: 0 0 0 3px var(--d-ring), var(--d-shadow);
}

/* ------------------------------ sort headers ------------------------------ */
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }

/* -------------------------------- hover ---------------------------------- */
/* a lift is enough; scaling the card as well blurs its text mid-move */
.card:hover,
.panel:not(:has(input, select, textarea, table, .table-wrap, canvas)):hover { transform: translateY(-3px); }

/* ---------------------------- touch screens ------------------------------ */
@media (pointer: coarse) {
  .btn, .btn.slim, .tab, .navlink, .pick-row, .exportmenu button { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  td .link { min-height: 36px; padding: 8px 11px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .selbox { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
}

/* ----------------------------- phone forms ------------------------------- */
/* iOS zooms the page into any field under 16px, then leaves it zoomed */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}