/* ============================================================================
   FleetWatch — an instrument panel for one comparison.

   The whole product asks: how far did it go, what did it earn, what is missing.
   So the visual system has exactly one signature component — the gap bar — and
   it appears at every altitude: fleet, vehicle, driver, day. Everything else
   gets out of its way.

   Colour is semantic and never decorative:
     green  money earned, and the distance that paid for itself
     amber  distance driven
     red    the gap
     hatch  unknown — drawn so it can never be misread as a zero
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/static/fonts/archivo-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  /* Neutrals tinted toward blue. Pure black never appears in nature and makes
     every colour above it look like it is floating. */
  --ink-900: #090c12;
  --ink-850: #0d1119;
  --ink-800: #111621;
  --ink-750: #151b28;
  --ink-700: #1a2130;
  --ink-600: #222b3d;
  --line: #212938;
  --line-2: #2e3849;
  --line-3: #3d4759;

  --text: #e7eaf2;
  --text-2: #98a1b6;
  --text-3: #656e84;

  /* Semantic. Each one means a thing; none of them is a mood. */
  --paid: #34c98b;
  --paid-dim: rgba(52, 201, 139, 0.14);
  --drive: #e2a343;
  --drive-dim: rgba(226, 163, 67, 0.14);
  --gap: #f05560;
  --gap-dim: rgba(240, 85, 96, 0.13);
  --info: #5b9cf6;
  --info-dim: rgba(91, 156, 246, 0.13);
  --unknown: #5b6480;
  --unknown-dim: rgba(91, 100, 128, 0.12);

  /* Brand. Mark, primary action, active state. Nothing else. */
  --brand: #fc3f1d;
  --brand-dim: rgba(252, 63, 29, 0.13);

  /* Fluid scale — breathes on a wide monitor, tightens on a phone. */
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-md: 0.875rem;
  --t-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --t-hero: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 40px; --s-8: 56px; --s-9: 76px;

  --r-sm: 4px; --r-md: 7px; --r-lg: 11px; --r-full: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-md);
  font-variation-settings: 'wdth' 100;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.mono {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* Tabular figures everywhere a number can change, so columns never jitter. */
.num, .metric-value, .stat-value, td.num, .gapbar-legend {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------- masthead */

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 58px;
  padding: 0 var(--s-6);
  background: color-mix(in srgb, var(--ink-850) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.nav-brand:hover { color: var(--text); }
.nav-brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.nav-link {
  position: relative;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nav-link:hover { color: var(--text); background: var(--ink-700); }
.nav-link.active { color: var(--text); background: transparent; }
/* The active marker is a rule under the word, not a filled pill - it reads as
   a position indicator rather than a button that is stuck down. */
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px; bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--gap-dim);
  color: var(--gap);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.nav-user { color: var(--text-3); font-size: var(--t-sm); white-space: nowrap; }
.nav-user strong { color: var(--text-2); font-weight: 500; }

/* Admin items collapse behind one control rather than crowding the bar. */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { color: var(--text); background: var(--ink-700); }
.nav-menu[open] > summary { color: var(--text); background: var(--ink-700); }
/* Matches .nav-link.active: a rule under the word, so the current section is
   marked without the panel having to be open to say so. */
.nav-menu > summary.active { color: var(--text); position: relative; }
.nav-menu > summary.active::after {
  content: '';
  position: absolute;
  left: 11px; right: 22px; bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  padding: var(--s-2);
  background: var(--ink-750);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 70;
  animation: drop 0.16s var(--ease);
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.nav-menu-panel a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--t-sm);
}
.nav-menu-panel a:hover { background: var(--ink-600); color: var(--text); }
.nav-menu-panel a.active { color: var(--brand); }
.nav-menu-sep {
  margin: var(--s-2) 6px;
  border-top: 1px solid var(--line);
}
.nav-menu-label {
  padding: 6px 10px 2px;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
}

/* ------------------------------------------------------------------- page */

.page {
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--s-6) clamp(var(--s-4), 3vw, var(--s-7)) var(--s-9);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.page-title {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  font-variation-settings: 'wdth' 86;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-sub { margin-top: 5px; color: var(--text-3); font-size: var(--t-sm); }

.section-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-3);
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.section-label:first-child { margin-top: 0; }

/* ------------------------------------------------------- the reading panel */
/*
   Not five identical cards. One dominant reading - the gap, because that is the
   product - with the supporting figures ranged beside it at a smaller size.
*/

.readout {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(300px, 2fr);
  gap: clamp(var(--s-4), 2vw, var(--s-6));
  align-items: stretch;
  margin-bottom: var(--s-6);
}

.readout-lead {
  position: relative;
  padding: var(--s-5) var(--s-6);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(240, 85, 96, 0.07), transparent 60%),
    var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.readout-lead.is-clean {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(52, 201, 139, 0.07), transparent 60%),
    var(--ink-800);
}
.readout-lead.is-unknown {
  background: var(--ink-800);
}

.readout-eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-3);
}
.readout-value {
  margin-top: var(--s-2);
  font-size: var(--t-hero);
  font-weight: 700;
  font-variation-settings: 'wdth' 80;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.readout-value.tone-gap { color: var(--gap); }
.readout-value.tone-paid { color: var(--paid); }
.readout-value.tone-unknown { color: var(--unknown); font-size: var(--t-2xl); }
.readout-note {
  margin-top: var(--s-3);
  max-width: 46ch;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.readout-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.figure {
  padding: var(--s-4) var(--s-5);
  background: var(--ink-800);
}
.figure-value {
  font-size: var(--t-2xl);
  font-weight: 650;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.figure-label {
  margin-top: 3px;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.figure-note { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-3); line-height: 1.4; }
.figure.tone-paid .figure-value { color: var(--paid); }
.figure.tone-drive .figure-value { color: var(--drive); }
.figure.tone-gap .figure-value { color: var(--gap); }
.figure.tone-brand .figure-value { color: var(--brand); }

/* ------------------------------------------------------------ the gap bar */
/*
   The signature component. One track = every kilometre. The green portion is
   distance a completed order paid for; what remains, in red, is the gap. It is
   the same shape at fleet, vehicle, driver and day level, so once someone has
   understood it once they never have to read a legend again.
*/

.gapbar {
  --paid-pct: 0%;
  position: relative;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--gap);
  overflow: hidden;
  min-width: 64px;
}
.gapbar-paid {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--paid-pct);
  background: var(--paid);
  border-radius: var(--r-full);
  transform-origin: left;
  animation: grow 0.7s var(--ease) both;
}
@keyframes grow { from { transform: scaleX(0); } }

.gapbar.sm { height: 5px; }
.gapbar.lg { height: 11px; }

/* Unknown is hatched, so it reads as "no reading" at a glance and can never be
   confused with a bar that happens to be empty. */
.gapbar.is-unknown {
  background: repeating-linear-gradient(
    -45deg,
    var(--unknown-dim) 0 5px,
    transparent 5px 10px
  );
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.gapbar.is-unknown .gapbar-paid { display: none; }

.gapbar-legend {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.gapbar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gapbar-legend i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.gapbar-legend .k-paid { background: var(--paid); }
.gapbar-legend .k-gap { background: var(--gap); }
.gapbar-legend .k-unknown {
  background: repeating-linear-gradient(-45deg, var(--unknown) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-pad { padding: var(--s-5); }
.card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
  font-weight: 650;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.01em;
}
.card-title .hint { font-weight: 400; font-size: var(--t-xs); color: var(--text-3); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s-4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); align-items: start; }

/* Legacy stat blocks, kept so older screens stay coherent. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.stat { padding: var(--s-4) var(--s-5); background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stat-value { font-size: var(--t-2xl); font-weight: 650; font-variation-settings: 'wdth' 84; letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { margin-top: 2px; font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.stat-note { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-3); }
.stat.accent .stat-value { color: var(--brand); }
.stat.high .stat-value { color: var(--gap); }
.stat.warn .stat-value { color: var(--drive); }
.stat.ok .stat-value { color: var(--paid); }

/* ----------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }

table.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.table th {
  position: sticky;
  top: 58px;
  z-index: 2;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-750);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  font-variation-settings: 'wdth' 92;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  white-space: nowrap;
}
.card .table th { top: 0; }

.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr { transition: background 0.12s var(--ease); }
.table tbody tr:hover { background: var(--ink-750); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; }
th.num { text-align: right; }

.t-strong { font-weight: 600; font-variation-settings: 'wdth' 94; }
.t-sub { margin-top: 2px; font-size: var(--t-xs); color: var(--text-3); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* Rows arrive in sequence on load. One orchestrated moment, not a fidget. */
@media (prefers-reduced-motion: no-preference) {
  .reveal > * { animation: rise 0.42s var(--ease) both; }
  .reveal > *:nth-child(1) { animation-delay: 0.02s; }
  .reveal > *:nth-child(2) { animation-delay: 0.05s; }
  .reveal > *:nth-child(3) { animation-delay: 0.08s; }
  .reveal > *:nth-child(4) { animation-delay: 0.11s; }
  .reveal > *:nth-child(5) { animation-delay: 0.14s; }
  .reveal > *:nth-child(6) { animation-delay: 0.17s; }
  .reveal > *:nth-child(7) { animation-delay: 0.19s; }
  .reveal > *:nth-child(8) { animation-delay: 0.21s; }
  .reveal > *:nth-child(n+9) { animation-delay: 0.23s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

/* -------------------------------------------------------- unknown & pills */

/* An unmeasured or withheld value. Hatched underline so it is unmistakably not
   a number, and never a zero. */
.unknown {
  color: var(--unknown);
  padding-bottom: 1px;
  background-image: repeating-linear-gradient(
    -45deg, var(--unknown) 0 2px, transparent 2px 4px
  );
  background-position: 0 100%;
  background-size: 100% 3px;
  background-repeat: repeat-x;
  cursor: help;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill-high { background: var(--gap-dim); color: var(--gap); }
.pill-warn { background: var(--drive-dim); color: var(--drive); }
.pill-info { background: var(--info-dim); color: var(--info); }
.pill-ok { background: var(--paid-dim); color: var(--paid); }
.pill-unknown { background: var(--unknown-dim); color: var(--unknown); }
.pill-accent { background: var(--brand-dim); color: var(--brand); }
.pill-plain { background: var(--ink-700); color: var(--text-2); }

/* A finding carries a dot of its severity - scannable down a column. */
.pill.sev::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sev-high { color: var(--gap); }
.sev-warn { color: var(--drive); }
.sev-info { color: var(--info); }

/* --------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-700);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), transform 0.1s var(--ease);
}
.btn:hover { background: var(--ink-600); border-color: var(--line-3); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #e5360f; border-color: #e5360f; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--ink-700); color: var(--text); }
.btn-danger { color: var(--gap); border-color: rgba(240, 85, 96, 0.35); background: transparent; }
.btn-danger:hover { background: var(--gap-dim); border-color: var(--gap); color: var(--gap); }
.btn-sm { padding: 4px 10px; font-size: var(--t-xs); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
input::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
input[type=checkbox] { accent-color: var(--brand); width: auto; }

.field { margin-bottom: var(--s-3); }
.field label { display: block; margin-bottom: 5px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.03em; color: var(--text-2); }
.field-hint { margin-top: 5px; font-size: var(--t-xs); color: var(--text-3); line-height: 1.45; }
.form-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 145px; }

.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }

/* Segmented range control - one object, not three loose buttons. */
.segment {
  display: inline-flex;
  padding: 2px;
  background: var(--ink-750);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.segment a {
  padding: 4px 12px;
  border-radius: 5px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-3);
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.segment a:hover { color: var(--text); }
.segment a.on { background: var(--brand); color: #fff; }

.chip {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--ink-750);
  color: var(--text-2);
  font-size: var(--t-xs);
  font-weight: 500;
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.on { background: var(--brand-dim); border-color: transparent; color: var(--brand); }

.search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 380px;
}
.search input { padding-left: 32px; }
.search::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border: 1.5px solid var(--text-3);
  border-radius: 50%;
}
.search::after {
  content: '';
  position: absolute;
  left: 21px; top: 50%;
  width: 5px; height: 1.5px;
  margin-top: 2px;
  background: var(--text-3);
  transform: rotate(45deg);
}
.search kbd {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--ink-750);
  color: var(--text-3);
  font-family: 'Plex Mono', monospace;
  font-size: 10px;
}

/* --------------------------------------------------------------- messages */

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  animation: rise 0.3s var(--ease) both;
}
.flash-ok { background: var(--paid-dim); border-color: rgba(52, 201, 139, 0.3); color: var(--paid); }
.flash-error { background: var(--gap-dim); border-color: rgba(240, 85, 96, 0.3); color: var(--gap); }

/* A note beside the data, not a shouty alert box. */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border-left: 2px solid var(--line-3);
  background: var(--ink-850);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.note.tone-warn { border-left-color: var(--drive); }
.note.tone-gap { border-left-color: var(--gap); }
.note.tone-live { border-left-color: var(--brand); }
.note strong { color: var(--text); font-weight: 600; }

.banner { /* kept for older markup */
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text-2); font-size: var(--t-sm);
}

.spinner {
  width: 10px; height: 10px; flex: none;
  border: 2px solid var(--brand);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* An empty state teaches the screen rather than announcing its emptiness. */
.empty { padding: var(--s-8) var(--s-5); text-align: center; }
.empty-title {
  font-size: var(--t-lg);
  font-weight: 650;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.015em;
}
.empty-desc { max-width: 52ch; margin: var(--s-2) auto 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.55; }
.empty-do { margin-top: var(--s-4); }

/* A compact readout for a grid of small facts: label above, value below, left
   aligned. Unlike .detail-field it does not stretch label and value apart. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: var(--s-5);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fact { padding: var(--s-3) var(--s-4); background: var(--ink-800); }
.fact-label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.fact-value {
  margin-top: 3px;
  font-size: var(--t-lg);
  font-weight: 600;
  font-variation-settings: 'wdth' 92;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.fact-note { font-size: var(--t-xs); color: var(--text-3); }

/* Management landing tiles - a menu hides what exists; a page shows it. */
.tile { display: block; transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); }
.tile:hover { border-color: var(--line-3); transform: translateY(-1px); color: var(--text); }
.tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.tile-title {
  font-size: var(--t-lg); font-weight: 650;
  font-variation-settings: 'wdth' 92; letter-spacing: -0.015em;
}
.tile-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg); font-weight: 650; color: var(--text-3);
}
.tile-blurb { margin-top: 5px; color: var(--text-2); font-size: var(--t-sm); line-height: 1.45; }

/* A found Yango driver, ready to be added. */
.results { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.result {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4);
  background: var(--ink-750);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  animation: rise 0.3s var(--ease) both;
}
.result-who { flex: 1; min-width: 200px; }
.result-meta { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.result-do { margin-left: auto; }

/* ------------------------------------------------------------------ misc */

.detail-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.detail-field:last-child { border-bottom: none; }
.detail-label { color: var(--text-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.detail-value { text-align: right; font-size: var(--t-sm); }

.bar { min-width: 60px; height: 5px; border-radius: var(--r-full); background: var(--ink-700); overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); }
.bar-fill.ok { background: var(--paid); }
.bar-fill.warn { background: var(--drive); }
.bar-fill.high { background: var(--gap); }

/* ------------------------------------------------------------------ login */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(252, 63, 29, 0.07), transparent 70%),
    var(--ink-900);
}
.login-card { width: 100%; max-width: 372px; animation: rise 0.5s var(--ease) both; }
.login-brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xl); font-weight: 700;
  font-variation-settings: 'wdth' 86; letter-spacing: -0.03em;
}
.login-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-dim); }
.login-tag { margin: var(--s-2) 0 var(--s-6); color: var(--text-3); font-size: var(--t-sm); line-height: 1.5; }

/* -------------------------------------------------------------------- map */

#map { height: calc(100vh - 58px); width: 100%; }

.map-panel {
  position: absolute;
  left: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 500;
  min-width: 210px;
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--ink-850) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  font-size: var(--t-xs);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.map-panel h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.map-panel .rows { display: grid; gap: 5px; }
.map-row { display: flex; align-items: center; gap: 7px; color: var(--text-2); }
.map-row i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.map-row i.moving { background: var(--paid); box-shadow: 0 0 0 3px var(--paid-dim); }
.map-row i.stopped { background: var(--text-3); }
.map-row i.lbs { background: transparent; box-shadow: inset 0 0 0 1.5px var(--drive); }
.map-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--text-3); }

.map-toggle {
  position: absolute;
  right: clamp(12px, 2vw, 20px);
  top: clamp(12px, 2vw, 20px);
  z-index: 500;
  display: inline-flex;
  padding: 2px;
  background: color-mix(in srgb, var(--ink-850) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.map-toggle button {
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}
.map-toggle button.on { background: var(--brand); color: #fff; }

.leaflet-container { background: var(--ink-900); font-family: 'Archivo', sans-serif; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--ink-750);
  color: var(--text);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.leaflet-popup-content-wrapper { border-radius: var(--r-lg); }
.leaflet-popup-content { margin: 11px 13px; font-size: var(--t-sm); line-height: 1.55; }
.leaflet-popup-close-button { color: var(--text-3) !important; }
.leaflet-bar a {
  background: var(--ink-750);
  border-color: var(--line-2) !important;
  color: var(--text) !important;
}
.leaflet-bar a:hover { background: var(--ink-600); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--ink-900) 78%, transparent) !important;
  color: var(--text-3) !important;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
/* Vehicle labels sit on satellite imagery, so they need their own ground. */
.leaflet-tooltip.veh-label {
  padding: 2px 7px;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.leaflet-tooltip.veh-label::before { display: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .readout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav {
    height: auto;
    padding: var(--s-2) var(--s-4);
    flex-wrap: wrap;
    gap: var(--s-2);
    position: static;
  }
  .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-right { margin-left: auto; }
  .nav-user { display: none; }
  .table th { position: static; }
  .page { padding: var(--s-4) var(--s-4) var(--s-8); }
  .page-header { align-items: flex-start; }
  .readout-lead { padding: var(--s-4); }
  .detail-value { text-align: left; }
  .detail-field { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}