/* Sora — the wordmark typeface from the SchoolFleet logo kit ("School" 500,
   "Fleet" 800). Self-hosted rather than pulled from Google Fonts: staff use this
   app behind a content filter that has swallowed third-party requests before,
   and a blocked font would silently drop the wordmark to a fallback face.
   One file covers the whole range — Sora ships as a variable font. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/sora-latin-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Official tokens from the logo kit (exports/tokens.json). These are the
     brand's own values — don't re-derive them by eye from the artwork. ---- */
  --sf-primary: #ea580c;
  --sf-primary-dark: #9a3412;
  --sf-primary-mid: #fb923c;
  --sf-primary-light: #fed7aa;
  --sf-tint: #fff7ed;
  --sf-ink: #1a1d24;
  --sf-icon-gradient: linear-gradient(145deg, #c2410c, #fb923c);
  --sf-font-wordmark: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Dark theme (default) — neutral graphite grey with the SchoolFleet orange
     accent taken from the chevron logo. Backgrounds are strictly grey; orange
     lives only on brand accents.

     Brand orange and status colors are deliberately separate systems:
       brand   = orange  (identity: actions, nav, logo, avatars)
       status  = red / yellow / green (meaning: overdue, due soon, ok)
     The logo's orange sits close to a warning amber, so "due soon" uses a
     cooler yellow to stay distinguishable from brand chrome. Never use
     --accent to signal status, and never use --warning as decoration. */

  /* Logo palette — the three chevrons, lightest to deepest. Aliased to the
     kit's official tokens above; change them there, not here. */
  --brand-100: var(--sf-primary-light);
  --brand-400: var(--sf-primary-mid);
  --brand-600: var(--sf-primary);
  --brand-800: var(--sf-primary-dark);

  /* One softened step off the brand orange, for the ONE place the full-strength
     orange was too loud: the selected tab in a dialog (see .mst-btn.active).
     Not a general-purpose accent — everything else stays on --accent. */
  --brand-soft: #ec7022;

  --bg: #15171b;
  --bg-2: #1e2127;
  --bg-3: #2d323b;
  --surface: #1a1d22;
  --surface-2: #262a31;
  --border: #2e333b;
  --text: #e7e9ec;
  --text-dim: #99a0a8;
  --muted: #6a7178;
  --accent: #f97316;     /* brand orange, lifted for contrast on dark grey */
  --accent-soft: rgba(249, 115, 22, 0.16);
  --brand-grad: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  --success: #34d399;    /* status: ok / healthy — stays green by design */
  --warning: #eab308;    /* status: due soon — yellow, not orange (see above) */
  --danger: #ef4444;     /* status: overdue */
  --critical: #dc2626;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  /* One height for every toolbar control (search, segmented toggle, selects) so
     a row of them lines up. Change here, not per-control. */
  --control-h: 43px;
  /* Shared lift for toolbar controls — they read as one row of the same object. */
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  --topbar-bg: rgba(26, 29, 34, 0.92);
  --modal-bg: #1e2127;   /* dialog surface — neutral, same family as the app */

  /* Navigation chrome (top bar + bottom nav) — a NEUTRAL GREY surface, no brand
     tint. The logo and the accent controls carry the orange; the chrome itself
     stays quiet so the app reads calm and professional. Light theme below. */
  --chrome-bg: #1a1d22;
  --chrome-text: #e7e9ec;
  --chrome-dim: rgba(231, 233, 236, 0.72);
  --chrome-muted: rgba(231, 233, 236, 0.55);
  --chrome-border: rgba(255, 255, 255, 0.07);
  --chrome-accent: #fb923c;
  --chrome-active-bg: rgba(251, 146, 60, 0.16);
  --chrome-badge: #eab308;
  /* Inputs that sit in the chrome (the fleet search) — a grey field, never tinted. */
  --field-bg: #22262d;
  /* Nav count bubbles. A plain count ("11 jobs") is INFORMATION, not a warning —
     it stays a quiet neutral. Only a real status count (overdue) goes red. */
  --badge-bg: #4b5563;
  --badge-fg: #ffffff;
}

/* Light theme — clean neutral grey, low-glare, brand orange accent. */
:root[data-theme="light"] {
  --bg: #f3f4f6;
  --bg-2: #e9ebee;
  --bg-3: #dbdee2;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --border: #dfe2e6;
  --text: #1c2025;
  --text-dim: #5d646c;
  --muted: #8a9199;
  --accent: #ea580c;     /* brand orange — the deepest chevron */
  --accent-soft: rgba(234, 88, 12, 0.12);
  --success: #15803d;    /* status: ok — green, darkened for light bg */
  --warning: #a16207;    /* status: due soon — yellow-brown, not orange */
  --danger: #dc2626;
  --critical: #b91c1c;
  --shadow: 0 6px 18px rgba(30, 40, 50, 0.10);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --modal-bg: #ffffff;   /* dialog surface — neutral, same family as the app */

  /* Chrome (header/footer) = a clean NEUTRAL surface, no brand tint. */
  --chrome-bg: #ffffff;
  --chrome-text: #1c2025;
  --chrome-dim: rgba(28, 32, 37, 0.66);
  --chrome-muted: rgba(28, 32, 37, 0.5);
  --chrome-border: rgba(28, 32, 37, 0.10);
  --chrome-accent: #ea580c;
  --chrome-active-bg: rgba(234, 88, 12, 0.10);
  --chrome-badge: #a16207;
  /* Inputs that sit in the chrome (the fleet search) — a grey field, never tinted. */
  --field-bg: #f3f4f6;
  /* Nav count bubbles — see the dark theme for the reasoning. */
  --badge-bg: #64748b;
  --badge-fg: #ffffff;
  /* Softer on light: a low-glare lift, not a dark halo. */
  --shadow-control: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.07);
}

/* Keep faint-tinted status pills readable on a light background */
:root[data-theme="light"] .cpill-overdue,
:root[data-theme="light"] .cflag-overdue { color: #be123c; }
:root[data-theme="light"] .cpill-soon,
:root[data-theme="light"] .cflag-soon { color: #a16207; }
:root[data-theme="light"] .cpill-ok { color: #15803d; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }

.loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 12px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 44px; width: 44px; object-fit: contain; flex-shrink: 0; }
/* Cluster the action icons together on the right edge of the header */
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.logo {
  width: 40px; height: 40px;
  background: var(--brand-grad);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.topbar h1 { font-size: 17px; margin: 0; line-height: 1.1; }
.subtitle { font-size: 11px; color: var(--text-dim); margin: 2px 0 0; }
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.icon-btn:hover { background: var(--surface-hi, var(--surface)); }
.icon-btn:active { transform: scale(0.95); }

/* App top bar: the logo leads on the LEFT at a size that lets the chevrons
   read, with the company name as the headline beside it. The surface is a
   neutral grey (--chrome-*) — the logo supplies the only color up here. */
.topbar-app {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  padding-right: 64px; /* room for the absolutely-positioned profile button */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--chrome-bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--chrome-border);
}
.topbar-app .brand { gap: 13px; min-width: 0; flex: 1; }
.topbar-app .brand-logo { height: 46px; width: 46px; }
.topbar-app .brand-text { min-width: 0; }
/* The company name is the headline. Truncate rather than wrap — carrier names
   get long and a two-line header shifts the whole app down. */
.topbar-app h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-app .subtitle {
  color: var(--chrome-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Header profile avatar (opens the account / More screen) */
.topbar-profile {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: calc(env(safe-area-inset-top, 0px) / 2);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--brand-grad);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-profile:active { transform: translateY(-50%) scale(0.92); }
.topbar-profile.active { box-shadow: 0 0 0 2px var(--chrome-bg), 0 0 0 4px var(--accent); }

/* ---------- Tabs ---------- */
.tabs {
  position: sticky;
  /* Sits directly under the sticky app header — keep in step with
     .topbar-app's measured height (14+14 padding + 46px logo + 1px border)
     or the two overlap. */
  top: calc(75px + env(safe-area-inset-top, 0px));
  z-index: 40;
  display: flex;
  overflow-x: auto;
  padding: 10px 12px;
  gap: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.tab .ti { font-size: 12px; }
.badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-left: 4px;
}
/* On the active (accent-filled) tab, use a translucent badge so it stays visible */
.tab.active .badge { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* ---------- Main ---------- */
main { padding: 16px; max-width: 900px; margin: 0 auto; }

.section-title {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 22px 0 12px;
}
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--text-dim);
}

/* ---------- KPI cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.5px; }
.kpi-value { font-size: 26px; font-weight: 700; }
.kpi.success { border-color: var(--success); }
.kpi.success .kpi-value { color: var(--success); }
.kpi.warning { border-color: var(--warning); }
.kpi.warning .kpi-value { color: var(--warning); }
.kpi.danger { border-color: var(--danger); }
.kpi.danger .kpi-value { color: var(--danger); }

/* ---------- Mechanic cards ---------- */
.mech-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mech-grid { grid-template-columns: repeat(3, 1fr); } }
.mech-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px;
}
.mech-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mech-card-head h3 { margin: 0; font-size: 16px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.mech-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.mech-stats div { text-align: center; background: var(--bg); padding: 8px 4px; border-radius: 8px; }
.mech-stats span {
  display: block;
  font-size: 20px;
  font-weight: 700;
}
.mech-stats span.urgent { color: var(--danger); }
.mech-stats label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); }

/* ---------- Turnaround by mechanic ---------- */
.ta-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.ta-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.ta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ta-row:last-child { border-bottom: none; }
.ta-rank { width: 24px; text-align: center; font-size: 14px; flex: none; }
.ta-name {
  font-weight: 600;
  max-width: 38%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-bar {
  flex: 1;
  min-width: 24px;
  max-width: 180px;
  height: 8px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
}
.ta-bar-fill { display: block; height: 100%; border-radius: 4px; }
.ta-days { font-weight: 700; font-size: 15px; margin-left: auto; flex: none; }
.ta-count { font-size: 12px; color: var(--text-dim); white-space: nowrap; flex: none; min-width: 52px; text-align: right; }
.ta-muted { font-size: 12px; color: var(--muted); margin-left: auto; }
.ta-fast { color: var(--success); }
.ta-mid  { color: var(--warning); }
.ta-slow { color: var(--danger); }
.ta-bar-fill.ta-fast { background: var(--success); }
.ta-bar-fill.ta-mid  { background: var(--warning); }
.ta-bar-fill.ta-slow { background: var(--danger); }

/* ---------- Fleet health: DOT / PM due-soon cards ---------- */
.due-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .due-grid { grid-template-columns: 1fr 1fr; } }
.due-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.due-card h3 { margin: 0 0 10px; font-size: 15px; }
.due-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer; color: var(--text); font-size: 13px;
}
.due-row:last-child { margin-bottom: 0; }
.due-row:hover { border-color: var(--accent); }
.due-bus { font-weight: 700; }
.due-when { color: var(--text-dim); }
.due-when.warn { color: var(--warning); }

/* ---------- Bus group ---------- */
.bus-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.bus-group-head {
  padding: 10px 14px;
  background: var(--surface-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.bus-group-head .count {
  background: var(--accent);
  color: white;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 700;
}

/* ---------- Request card ---------- */
.req-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.req-card:last-child { border-bottom: none; }
.req-card.priority-out_of_service { border-left-color: #000; background: rgba(220, 38, 38, 0.12); }
.req-card.priority-critical { border-left-color: var(--critical); background: rgba(220, 38, 38, 0.06); }
.req-card.priority-high { border-left-color: var(--danger); }
.req-card.priority-medium { border-left-color: var(--warning); }
.req-card.priority-low { border-left-color: var(--text-dim); }
.req-card.req-flash { animation: req-flash 2s ease-out; }
@keyframes req-flash {
  0%   { background: rgba(37, 99, 235, 0.28); }
  100% { background: transparent; }
}

.req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.req-title { font-weight: 600; font-size: 15px; flex: 1; }
.req-meta { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.req-desc { color: var(--text-dim); font-size: 13px; margin: 0 0 8px; line-height: 1.4; white-space: pre-wrap; }
.req-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; }
.req-info { font-size: 12px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.req-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.prio {
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.prio-out_of_service { background: #111827; color: #fca5a5; border: 1px solid var(--critical); }
.prio-critical { background: var(--critical); color: white; }
.prio-high { background: var(--danger); color: white; }
.prio-medium { background: var(--warning); color: #1f2937; }
.prio-low { background: var(--bg-3); color: var(--text-dim); }

.status {
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.status-open { color: var(--accent); border-color: var(--accent); }
.status-in_progress { color: var(--warning); border-color: var(--warning); }
.status-completed { color: var(--success); border-color: var(--success); }

.age {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 700;
  background: var(--bg-3);
}
.age-ok { color: var(--text-dim); }
.age-warn { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.age-bad { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

.chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 600;
}
.chip-unassigned { background: var(--bg-3); color: var(--text-dim); }

/* ---------- Open Jobs — collapsed mechanic rows → per-mechanic dialog ---------- */
.jobs-rows { display: flex; flex-direction: column; gap: 10px; }
.jobs-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  color: var(--success);
  font-weight: 700;
}

/* Mechanic card (main screen): avatar, name + one-line status, chevron */
.mech-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.mech-row:active { background: var(--surface-2); }
.mech-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.mech-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mech-row-name { font-weight: 700; font-size: 15px; }
/* Right-side turnaround rank + avg — an emphasized badge to draw the eye */
.mech-row-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px 10px;
  min-width: 46px;
}
.rank-mark { font-size: 20px; line-height: 1; }
.rank-mark.num { font-size: 15px; font-weight: 800; color: var(--text-dim); }
.rank-avg { font-size: 11px; font-weight: 800; color: var(--accent); line-height: 1; white-space: nowrap; }
.mech-row-arrow { color: var(--muted); font-size: 18px; flex-shrink: 0; }

/* One-line status: leading urgency dot, bold numbers, rank medal, tinted age */
.mstat-line { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.mstat-line b { color: var(--text); font-weight: 700; }
.s-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.mstat-line .s-bad { color: var(--danger); font-weight: 700; }
.mstat-line .s-warn { color: var(--warning); font-weight: 700; }

/* Per-mechanic dialog — a large, near-full-height sheet */
.modal:has(.mech-modal) {
  max-width: 720px;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mech-modal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mech-modal-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.mech-modal-title { margin: 0; font-size: 18px; font-weight: 800; flex: 1; min-width: 0; }
.mech-modal-x {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.mech-modal-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

/* In-dialog Open / Completed tabs (swipeable) */
.dlg-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}
.dlg-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 8px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.dlg-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.dlg-tab-n {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-3);
  color: var(--text-dim);
  padding: 1px 7px;
  border-radius: 999px;
}
.dlg-tab.active .dlg-tab-n { background: var(--accent); color: #fff; }
.dlg-panel { display: flex; flex-direction: column; gap: 14px; }

/* Open-tab toolbar: bus-number search + sort dropdown. The dialog is a modal,
   where `.modal input/select` force width:100% — reset that so the two controls
   sit side by side (search grows, sort stays content-width). */
.jobs-toolbar { display: flex; gap: 8px; align-items: center; }
.jobs-toolbar .search-input { width: auto; min-width: 0; flex: 1 1 auto; padding: 9px 14px; font-size: 13px; }
.jobs-toolbar .sort-select { width: auto; flex: 0 0 auto; }
#jobs-groups { display: flex; flex-direction: column; gap: 14px; }

/* Completed-tab time buckets (collapsible; recent open by default) */
.cbucket { display: flex; flex-direction: column; gap: 12px; }
.cbucket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}
.cbucket-head:active { background: var(--bg-3); }
.cbucket-chev { color: var(--muted); font-size: 11px; width: 12px; text-align: center; flex-shrink: 0; }
.cbucket-label { flex: 1; min-width: 0; }
.cbucket-count {
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
}
.cbucket-body { display: flex; flex-direction: column; gap: 14px; }
.dlg-panel.slide-in-right { animation: dlg-in-right 0.18s ease-out; }
.dlg-panel.slide-in-left { animation: dlg-in-left 0.18s ease-out; }
@keyframes dlg-in-right { from { transform: translateX(28px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes dlg-in-left  { from { transform: translateX(-28px); opacity: 0.35; } to { transform: none; opacity: 1; } }

/* Contained per-bus box */
.bus-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.bus-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 9px;
}
.bus-box-num { font-weight: 800; font-size: 13px; color: var(--text); }
.bus-box-status {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sc);
  background: color-mix(in srgb, var(--sc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  padding: 1px 7px;
  border-radius: 8px;
}
.bus-box-model {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bus-box-count {
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 9px;
}
.bus-box-cards { display: flex; flex-direction: column; gap: 8px; }

.jobs-col-more { padding: 6px; text-align: center; color: var(--muted); font-size: 11px; }

/* Clean rounded card */
.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 14px;
  padding: 11px 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.job-card.priority-out_of_service { border-left-color: var(--critical); }
.job-card.priority-critical { border-left-color: var(--critical); }
.job-card.priority-high { border-left-color: var(--danger); }
.job-card.priority-medium { border-left-color: var(--warning); }
.job-card.priority-low { border-left-color: var(--muted); }
.job-card.req-flash { animation: req-flash 2s ease-out; }
/* Inside a bus box the cards are flatter (the box provides the containment). */
.bus-box-cards .job-card { box-shadow: none; border-radius: 10px; background: var(--surface); }

.job-card-tap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
.job-card-title {
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-card-age {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  background: var(--bg-3);
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.job-card-age.age-warn { color: var(--warning); background: rgba(224, 160, 18, 0.16); }
.job-card-age.age-bad { color: var(--danger); background: rgba(239, 68, 68, 0.16); }
.job-card-age-done { color: var(--success); background: rgba(34, 197, 94, 0.14); text-transform: none; }
.job-card-line2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.job-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.prio-dot.prio-out_of_service,
.prio-dot.prio-critical { background: var(--critical); }
.prio-dot.prio-high { background: var(--danger); }
.prio-dot.prio-medium { background: var(--warning); }
.prio-dot.prio-low { background: var(--muted); }

/* One-tap primary action on the card face */
.job-card-cta { flex: 0 0 auto; }
.job-cta {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.job-cta:active { transform: scale(0.96); }
.job-cta-go { background: var(--accent); color: #fff; }
.job-cta-done { background: var(--success); color: #fff; }
.job-cta-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* Inline-expanded body (full width below the card face) */
.job-card-expand {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.job-card-expand .req-desc { margin: 0; }
.job-card-expand .req-info { font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.job-card-expand .req-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.req-completion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.rc-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-3);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.rc-parts { color: var(--text-dim); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-success, .btn-ghost, .btn-outline, .btn-danger-ghost {
  font-size: 12px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
}
/* The primary action carries the logo's two-tone orange. */
.btn-primary { background: var(--brand-grad); color: white; }
.btn-primary:active { transform: scale(0.97); }
.btn-success { background: var(--success); color: white; }
.btn-success:active { transform: scale(0.97); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:active { transform: scale(0.97); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline.w-full { width: 100%; }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); }

/* Keyboard focus — a brand-tinted ring, consistent across every control. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Alerts panel (Fleet tab) ---------- */
.alerts-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.alerts-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.alerts-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.alerts-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alerts-block {
  margin-top: 12px;
}
.alerts-block:first-of-type { margin-top: 0; }
.alerts-block h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 700;
}
.alerts-critical h3 {
  color: var(--critical);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
  animation: pulse-bg 2s ease-in-out infinite;
}
.alerts-warn h3 { color: var(--warning); }

@keyframes pulse-bg {
  0%, 100% { background: rgba(220, 38, 38, 0.12); }
  50%      { background: rgba(220, 38, 38, 0.25); }
}

.alert-row {
  display: grid;
  grid-template-columns: 24px 52px 1fr auto 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.alert-row:hover { background: var(--surface-2); }
.alert-row:active { transform: scale(0.99); }
.alert-row.alert-critical {
  border-left-color: var(--critical);
  background: rgba(220, 38, 38, 0.08);
  font-weight: 600;
}
.alert-row.alert-warn { border-left-color: var(--warning); }
.alert-row.alert-soon { border-left-color: var(--accent); }

.alert-icon { font-size: 16px; }
.alert-bus { font-weight: 700; color: var(--text); }
.alert-type {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.alert-row.alert-critical .alert-label { color: var(--critical); }
.alert-row.alert-warn .alert-label { color: var(--warning); }
.alert-row.alert-soon .alert-label { color: var(--accent); }
.alert-arrow { color: var(--text-dim); }

.empty-mini {
  text-align: center;
  padding: 18px;
  color: var(--success);
  font-weight: 600;
}

/* Critical bus card */
.bus-card-critical {
  border-color: var(--critical) !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.4);
}
.dot-cell-critical {
  background: rgba(220, 38, 38, 0.18) !important;
  border: 1px solid var(--critical);
}
.bus-card-flash {
  animation: card-flash 1.5s ease;
}
@keyframes card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  50%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ---------- Fleet / Bus ---------- */
.bus-list {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bus-list { grid-template-columns: repeat(2, 1fr); } }
.bus-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.bus-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bus-card h3 { margin: 0; font-size: 17px; }
.pill {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
}
.pill-ok { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.pill-warn { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pill-bad { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.bus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.bus-grid > div { background: var(--bg); padding: 8px 10px; border-radius: 8px; }
.bus-grid label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); display: block; }
.bus-grid span { font-size: 14px; font-weight: 600; }
.bus-grid .ok { color: var(--success); }
.bus-grid .warn { color: var(--warning); }
.bus-grid .bad { color: var(--danger); }

.pm-section {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pm-section h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.pm-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}
.pm-row:last-child { border-bottom: none; }
.pm-overdue { color: var(--danger); font-weight: 600; }
.pm-soon { color: var(--warning); font-weight: 600; }
.pm-missing { color: var(--text-dim); font-style: italic; }
.pm-section h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.seasonal-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 700;
}

.bus-actions { display: flex; gap: 8px; }
.bus-actions > * { flex: 1; }

/* ---------- FAB ---------- */
.fab {
  position: fixed;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 28px;
  border: none;
  box-shadow: 0 8px 20px rgba(20, 45, 25, 0.4);
  cursor: pointer;
  z-index: 45;
  /* Same reason as .bottom-nav: stay composited so the swipe transform on
     #view doesn't make this fixed button flicker out. */
  will-change: transform;
}
.fab:active { transform: scale(0.94); }

/* ---------- Bottom navigation (app-style tab bar) ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  padding: 10px 4px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--chrome-bg);
  border-top: 1px solid var(--chrome-border);
  /* Keep the bar on its own GPU layer. Without this, WebKit/iOS drops a
     fixed element from compositing while a sibling (#view) is mid-transform
     during a swipe — the footer vanishes and only "blinks" back on repaint. */
  transform: translateZ(0);
  will-change: transform;
}
.nav-item {
  position: relative;
  flex: 0 0 66px;
  max-width: 78px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 2px;
  color: var(--chrome-text);
  font-family: inherit;
  transition: color 0.15s;
  min-width: 0;
}
/* The highlight bubble lives on the icon only (WhatsApp-style): a wide,
   stretched rounded-rectangle behind the icon — never behind the label.
   Icons are always full color on every tab. */
.nav-item .ni-icon {
  font-size: 21px;
  line-height: 1;
  filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 14px;
  transition: background 0.15s, transform 0.15s;
}
.nav-item:active .ni-icon { transform: scale(0.92); }
.nav-item .ni-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Active state is shown ONLY by the bubble behind the icon — the label and
   icon colors stay the same on every tab. */
.nav-item.active .ni-icon { background: var(--chrome-active-bg); }
/* Count bubble, pinned to the top-right of the icon bubble. The 2px ring in the
   chrome color cuts it cleanly off the icon underneath instead of letting the
   two collide. */
.nav-item .ni-badge {
  position: absolute;
  top: 1px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--badge-bg);
  color: var(--badge-fg);
  box-shadow: 0 0 0 2px var(--chrome-bg);
}
.nav-item .ni-badge.danger { background: var(--danger); color: #fff; }

/* ---------- "More" screen ---------- */
.more-account {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}
.more-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.more-account-name { font-size: 16px; font-weight: 600; }
.more-account-role { font-size: 13px; color: var(--text-dim); text-transform: capitalize; }
.more-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin: 16px 4px 8px;
}
.more-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 6px;
}
.more-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
}
.more-group .more-row:last-child { border-bottom: none; }
.more-row:active { background: var(--surface-2); }
.more-row-icon { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
.more-row-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.more-row-title { font-weight: 600; }
.more-row-sub { font-size: 12px; color: var(--text-dim); }
.more-row-chevron { color: var(--muted); font-size: 20px; flex-shrink: 0; }
.more-row-danger .more-row-title { color: var(--danger); }
.more-row-danger .more-row-icon { color: var(--danger); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

/* Animated "Saved" success state shown inside the Save & Upload dialog. */
.modal-saved { text-align: center; max-width: 360px; }
.save-success {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 8px 10px; animation: save-pop .3s ease both;
}
@keyframes save-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.save-check { width: 84px; height: 84px; }
.save-check svg { width: 100%; height: 100%; }
.save-check-circle {
  stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: save-stroke .5s cubic-bezier(.65,0,.45,1) .05s forwards;
}
.save-check-mark {
  stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: save-stroke .35s cubic-bezier(.65,0,.45,1) .45s forwards;
}
@keyframes save-stroke { to { stroke-dashoffset: 0; } }
.save-success-text {
  font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: .3px;
  opacity: 0; animation: save-fade .3s ease .5s forwards;
}
.save-success .muted { opacity: 0; animation: save-fade .3s ease .65s forwards; }
.save-done-btn { margin-top: 14px; min-width: 140px; padding: 10px 18px; border-radius: 999px; opacity: 0; animation: save-fade .3s ease .8s forwards; }
@keyframes save-fade { to { opacity: 1; } }

/* Confirmation toast (e.g. "✓ Saved") — floats above everything, auto-dismisses */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--accent, #ea580c);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  line-height: 1;
}
.modal h3 { margin: 0 0 12px; font-size: 18px; }
/* Driver & bus detail get a wider modal so info/files lay out in columns */
.modal:has(.driver-detail) { max-width: 780px; }
/* A label with no control under it is a group heading ("Address"), so it keeps
 * the small uppercase caption. Labels that DO head a control get notched into
 * the box instead — see "Field names sit in the box" below. */
.modal label { display: block; margin-top: 18px; margin-bottom: 7px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.modal label:first-of-type { margin-top: 4px; }
.modal { --notch-bg: var(--modal-bg); }
/* A checkbox line is a statement you tick, not a field name — sentence case,
 * not the uppercase caption every other label wears. Every call site used to
 * inline these three rules; they live here so the ticks all match. */
.modal label.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.modal label.check-row input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.modal input, .modal select, .modal textarea {
  width: 100%;
  /* Outlined, not filled: the notched label has to sit ON the border, so the
     box can't be a different colour from what's behind it. */
  background: var(--modal-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--accent); }

/* ── Field names sit in the box ────────────────────────────────────────────
 * The field name is notched into the top edge of its own control, the way
 * most modern apps label a field, rather than floating above it as a caption.
 * It doesn't animate on focus: every field here has a name worth showing even
 * when it's empty, so the label just lives on the border — and it stays at
 * 13px, close enough to the 14px value below it to read at arm's length.
 *
 * No markup changes needed: the label is inline-block so its background paints
 * over only its own slice of the line, and a negative bottom margin drops it
 * onto the border of whatever follows. `:has()` keeps this off the labels that
 * head a group of fields rather than a single control — those would otherwise
 * float over nothing. `--notch-bg` is what's behind the control, set per
 * surface (dialogs are a different colour from cards).
 */
.modal label:not(.check-row):is(:has(+ input), :has(+ select), :has(+ textarea), :has(+ .addr-autosuggest)),
.addr-fields .af-lbl,
.blbl:is(:has(+ input), :has(+ select), :has(+ textarea)),
.org-field-label {
  /* Block, not inline-block: a negative margin under an inline box can't pull
     the control up, because the line box it sits in keeps its own height.
     fit-content is what stops the background covering the whole border. */
  display: block;
  width: fit-content;
  align-self: flex-start;      /* a flex column would stretch it over the whole border */
  position: relative;
  z-index: 1;
  max-width: calc(100% - 20px);
  margin: 16px 0 -8px 10px;
  padding: 1px 6px;
  background: var(--notch-bg, var(--surface));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  pointer-events: none;        /* the chip overlaps the box — let clicks through */
}
.modal label:is(:has(+ input:focus), :has(+ select:focus), :has(+ textarea:focus), :has(+ .addr-autosuggest input:focus)),
.addr-fields .af:focus-within .af-lbl,
.blbl:is(:has(+ input:focus), :has(+ select:focus), :has(+ textarea:focus)),
.org-field:focus-within .org-field-label { color: var(--accent); }
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
.modal-actions button { padding: 10px 16px; font-size: 14px; }

/* Two-up rows inside modals (used by the requirement editor) */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-2 > div { min-width: 0; }

/* Appearance chooser (Auto / Day / Night) — selectable option rows */
.theme-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.theme-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 12px;
  -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s;
}
.theme-opt:hover { border-color: var(--muted); }
.theme-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.theme-opt-icon { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.theme-opt-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-opt-title { font-weight: 700; font-size: 15px; }
.theme-opt-sub { font-size: 12.5px; color: var(--muted); }
.theme-opt-check { margin-left: auto; color: var(--accent); font-weight: 800; font-size: 16px; opacity: 0; flex-shrink: 0; }
.theme-opt.sel .theme-opt-check { opacity: 1; }

/* Notifications modal (More → Notifications). */
.push-what, .push-steps { margin: 8px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.65; }
.push-what li::marker { color: var(--accent); }
.push-steps li { margin-bottom: 4px; }
/* Reserve the line so the modal doesn't jump when a status message appears. */
.push-msg { min-height: 18px; margin: 4px 0 2px; }

/* Admin page — a Settings-style category menu that drills into one section.
   Panes are shown one at a time via the [hidden] attribute (toggled in JS). */
.admin-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
/* [hidden] must beat the explicit display rules above/below it. */
.admin-menu[hidden],
.admin-detail[hidden],
.admin-pane[hidden] { display: none; }
.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.admin-menu-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.admin-menu-ico {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 10px;
  flex-shrink: 0;
}
.admin-menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-menu-title { font-weight: 600; font-size: 15px; }
.admin-menu-sub { color: var(--text-dim); font-size: 12px; }
.admin-menu-chev { color: var(--muted); font-size: 22px; line-height: 1; flex-shrink: 0; }
.admin-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 4px;
}
.admin-back:hover { text-decoration: underline; }

/* Photo picker: file input + camera button */
.photo-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.photo-pick input[type="file"] { flex: 1; min-width: 0; }

/* Add-choice menu (FAB) */
.add-choice { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.choice-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.choice-btn:hover { border-color: var(--accent); }
.choice-icon { font-size: 24px; flex: none; width: 34px; text-align: center; }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-text strong { font-size: 15px; }
.choice-text small { color: var(--text-dim); font-size: 12px; }

/* Bulk import editable grid */
.bulk-grid-wrap { overflow: auto; max-height: 48vh; border: 1px solid var(--border); border-radius: 8px; }
.bulk-grid { border-collapse: collapse; width: 100%; }
.bulk-grid th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--text-dim);
  text-align: left; padding: 6px 8px; white-space: nowrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.bulk-grid td { padding: 0; border: 1px solid var(--border); }
.bulk-cell {
  width: 100%; min-width: 96px; box-sizing: border-box;
  border: 0; background: transparent; color: var(--text);
  padding: 6px 8px; font-size: 12px;
}
.bulk-cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.bulk-rowdel { text-align: center; }
.bulk-del-row { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 8px; }
.bulk-del-row:hover { color: var(--danger); }

/* Driver multi-select */
.bulk-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 10px; position: sticky; top: 0; z-index: 5;
}
.bulk-bar-left { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bulk-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-check { width: 24px; flex: none; text-align: center; font-size: 18px; }
.deck-row.deck-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.sch-checks { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-top: 4px; }
.sch-check { font-weight: 400; display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* Bulk import result */
.bulk-result { margin-top: 10px; }
.bulk-summary { font-size: 14px; margin-bottom: 6px; }
.bulk-errors { margin: 0; padding-left: 18px; max-height: 160px; overflow: auto; font-size: 12px; color: var(--text-dim); }
.bulk-errors li { margin-bottom: 2px; }

/* Bus document upload row */
.bus-doc-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bus-doc-upload > * { flex: 1; min-width: 110px; }
.bus-doc-upload button { flex: 0 0 auto; }

/* Maintenance request photo thumbnail */
/* Request photo shown as a partial banner across the top of the card */
.req-photo-banner {
  display: block;
  margin: -12px -14px 10px;   /* cancel .req-card padding so it spans edge-to-edge */
  height: 64px;               /* thin header strip (~ card row height) */
  overflow: hidden;
  cursor: zoom-in;
  border-bottom: 1px solid var(--border);
}
.req-photo-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.dot-banner {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid var(--critical);
  color: #fecaca;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.dot-banner strong { color: #fff; }
.modal select option:disabled { color: #555; }

.modal-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 14px;
  margin: 14px 0 0;
}
.modal-group legend {
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  font-weight: 700;
}
.modal-group legend .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.modal-group label { margin-top: 8px; }
.modal-group label .muted { text-transform: none; letter-spacing: 0; }

/* ============================================================
 * STAFF / DRIVERS
 * ============================================================ */
.staff-toolbar {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.staff-toolbar button { flex: 1; min-width: 160px; }

/* Driver cards */
.driver-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .driver-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .driver-list { grid-template-columns: 1fr 1fr 1fr; }
}

.driver-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.driver-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.driver-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.driver-card h3 { margin: 0; font-size: 16px; }
.driver-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}
.driver-card-critical { border-left: 4px solid var(--critical); }
.driver-card-warn { border-left: 4px solid #f59e0b; }

.cpills { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cpill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.cpill-overdue { background: rgba(220,38,38,0.2); color: #fecaca; border: 1px solid var(--critical); }
.cpill-soon { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid #f59e0b; }
.cpill-ok { background: rgba(16,185,129,0.16); color: #6ee7b7; border: 1px solid var(--success); }

.cflag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 4px;
}
.cflag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.cflag-overdue { background: rgba(220,38,38,0.15); color: #fecaca; border-color: var(--critical); }
.cflag-soon { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: #f59e0b; }

/* Safety drill grid */
.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.drill-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drill-card.drill-ok { border-left: 3px solid var(--success); }
.drill-card.drill-soon { border-left: 3px solid var(--warning); background: rgba(234, 179, 8, 0.08); }
.drill-card.drill-overdue { border-left: 3px solid var(--critical); background: rgba(220,38,38,0.07); }
.drill-card.drill-pending { border-left: 3px solid #6b7280; }

/* Driver detail modal */
.driver-detail { width: 100%; }
.dd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.dd-head h3 { margin: 0 0 4px; }

.dd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  overflow-x: auto;
}
.dd-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.dd-tab:hover { color: var(--text); }
.dd-tab.active { color: var(--text); border-bottom-color: var(--accent, #3b82f6); }

.dd-pane[hidden] { display: none; }
/* Status pane (driver & bus detail) */
.lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.section-h-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.section-h-action button { text-transform: none; letter-spacing: 0; }
.evt-row.evt-clickable {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text);
}
.evt-row.evt-clickable:hover { border-color: var(--accent); }
.cf-flash { animation: cfflash 1.6s ease; }
@keyframes cfflash {
  0%, 100% { box-shadow: none; }
  15%, 60% { box-shadow: 0 0 0 3px var(--accent); }
}
.status-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.status-bar .cpill { font-size: 13px; padding: 6px 14px; border-radius: 999px; }

/* Organized info sections (driver & bus detail) */
.info-section { margin-bottom: 14px; }
.info-section-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent); font-weight: 700; margin: 0 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.info-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-item.wide { grid-column: 1 / -1; }
.info-item label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-dim); font-weight: 600; margin: 0;
}
.info-item .v { font-size: 14px; word-break: break-word; }

.dd-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
}
.dd-field label {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  font-weight: 600;
}

/* Compliance grid (inside detail modal) */
.comp-cat { margin-bottom: 16px; }
.comp-cat h4 {
  margin: 8px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.comp-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.comp-row.comp-overdue { border-left: 3px solid var(--critical); background: rgba(220,38,38,0.06); }
.comp-row.comp-soon { border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.05); }
.comp-row.comp-ok { border-left: 3px solid var(--success); }
.comp-row.comp-missing { border-left: 3px solid #6b7280; background: rgba(107,114,128,0.06); }
.comp-info { flex: 1; min-width: 0; }
.comp-name { font-size: 14px; font-weight: 600; }
.comp-meta { margin: 2px 0; }
.comp-status-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
}
.comp-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.comp-pill-overdue { background: var(--critical); color: #fff; }
.comp-pill-soon { background: #f59e0b; color: #1f1300; }
.comp-pill-ok { background: var(--success); color: #04261c; }
.comp-pill-missing { background: #6b7280; color: #fff; }
.comp-pill-n\/a { background: #374151; color: #cbd5e1; }
.comp-when { color: var(--text-dim); }
.comp-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Document upload + list */
.upload-form {
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.upload-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.upload-row select, .upload-row input[type="text"] { flex: 1; min-width: 130px; }

.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.doc-meta { flex: 1; min-width: 0; }
.doc-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Misc form helpers */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.form-grid-2 label, .form-grid-3 label { margin-top: 4px; }
/* A label that wraps to two lines used to push its own box a line lower than
 * the one beside it. Each cell is a column that pins its label-plus-control
 * pair to the bottom, so every box in a row sits on the same line no matter
 * how long the field name is. The pair moves together — the label is welded to
 * the top of its box by a negative margin, so `auto` has to go on the label. */
.form-grid-2 > div, .form-grid-3 > div { display: flex; flex-direction: column; }
.modal .form-grid-2 > div > label:first-child, .modal .form-grid-3 > div > label:first-child,
.form-grid-2 > div > label.check-row, .form-grid-3 > div > label.check-row { margin-top: auto; }

.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
}

/* ================================================================
   Additions for Fleet/Staff restructure (matched to dark theme)
   ================================================================ */

/* Section switch (top-level Fleet | Staff) */
.section-switch {
  display: inline-flex;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.section-switch button, .ss-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.section-switch button.active, .ss-btn.active {
  background: var(--accent);
  color: #fff;
}
.section-switch button:hover:not(.active), .ss-btn:hover:not(.active) {
  color: var(--text);
}
.ss-badge {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* Driver toolbar (search + filter) */
.driver-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  /* Keep the search bar + view/sort controls pinned under the header
     while the fleet / staff lists scroll beneath them. */
  position: sticky;
  top: calc(62px + env(safe-area-inset-top, 0px));
  z-index: 30;
  background: var(--bg);
  /* Full-bleed across main's 16px gutters so scrolling content can't
     peek through the sides or top of the pinned bar. */
  margin: 0 -16px 14px;
  padding: 10px 16px;
}
.driver-toolbar-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 12px;
}
.dti-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dti-check { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-dim); }
.btn-xs.active-toggle { background: var(--accent); color: #fff; border-color: var(--accent); }
.search-input {
  flex: 1;
  min-width: 200px;
  height: var(--control-h);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field-bg);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  box-shadow: var(--shadow-control);
  transition: all 0.15s ease;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Selects in a toolbar are built to match .search-input exactly — same height,
   field colour, pill radius and lift — so the row reads as one control group. */
.filter-select {
  height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  box-shadow: var(--shadow-control);
  transition: all 0.15s ease;
}
.filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* The "Sort by" dropdown is the same object as the other toolbar selects —
   only its label reads quieter. Don't re-style its box here. */
.sort-select { color: var(--text-dim); }
.sort-select:hover { color: var(--text); }

/* Bus avatar (driver bus number / standby) */
.bus-avatar {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.5px;
  background: var(--accent);
}
.bus-avatar.bus-num { background: var(--accent); }
/* Standby has no bus of its own — grey, not a status color. */
.bus-avatar.bus-sb {
  background: var(--muted);
  font-size: 14px;
}
.bus-avatar.bus-large {
  width: 80px; height: 80px;
  font-size: 28px;
  border-radius: 18px;
}

/* Deck-style driver list */
.driver-deck {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deck-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--text);
}
.deck-row:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.deck-row.deck-row-warn     { border-left: 3px solid var(--warning); }
.deck-row.deck-row-critical { border-left: 3px solid var(--danger); }
.deck-row.deck-row-ok       { border-left: 3px solid var(--success); }
.deck-row.alert-driver      { border-left: 3px solid var(--danger); }
.deck-info { flex: 1; min-width: 0; }
.deck-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.deck-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.deck-stats {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.deck-flag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  margin-top: 4px;
  display: inline-block;
}
.deck-flag.cflag-ok      { background: rgba(16,185,129,0.15); color: var(--success); }
.deck-flag.cflag-soon    { background: rgba(245,158,11,0.15); color: var(--warning); }
.deck-flag.cflag-overdue { background: rgba(239,68,68,0.18);  color: var(--danger); }
.deck-flag.cflag-missing { background: rgba(148,163,184,0.15); color: var(--muted); }
.deck-arrow {
  color: var(--muted);
  font-size: 20px;
  margin-left: 4px;
  line-height: 1;
}

/* Status compliance pills inside deck rows */
.cpill {
  display: inline-flex;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}
.cpill-ok      { background: rgba(16,185,129,0.15); color: var(--success); }
.cpill-soon    { background: rgba(245,158,11,0.15); color: var(--warning); }
.cpill-overdue { background: rgba(239,68,68,0.18);  color: var(--danger); }

/* Schedule pills (multi-route assignment indicators) */
.sched-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sched-pill {
  display: inline-flex;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(59,130,246,0.15);
  color: #93c5fd;
  border-radius: 999px;
}

/* Diabetic / dx badge */
.dx-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(168,85,247,0.18);
  color: #c4b5fd;
  border-radius: 999px;
}

/* Broadcast hero */
.broadcast-hero {
  background: linear-gradient(135deg, var(--accent) 0%, #14532d 100%);
  color: #fff;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.broadcast-hero h2 { margin: 0 0 4px; font-size: 20px; color: #fff; }
.broadcast-hero p  { margin: 0; color: rgba(255,255,255,0.85); font-size: 13px; }
.broadcast-hero .btn-primary,
.broadcast-hero .btn-large {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}
.broadcast-hero .btn-primary:hover,
.broadcast-hero .btn-large:hover { background: #f1f5f9; }

/* Schedule cards on broadcast tab */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.schedule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: all 0.15s ease;
}
.schedule-card:hover { border-color: var(--accent); background: var(--surface-2); }
.sched-name { font-weight: 700; font-size: 14px; color: var(--text); }
.sched-time { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sched-count {
  margin-top: 10px;
  display: inline-flex;
  padding: 3px 10px;
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* Drill cards (safety drills on Staff dashboard) */
.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.drill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.drill-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(4, 14, 8, 0.5); }

/* Compliance history viewer */
.history-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.history-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}

/* ---------- Selectable option cards (bus / schedule pickers) ----------
   Not tiny checkboxes: the whole card is the target (48px min, thumb-sized),
   and the native box is restyled into the round tick on the trailing edge. */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px 10px 2px 2px;  /* room for the scrollbar, so it can't sit on a card */
  margin-top: 2px;
}
/* `label.cb-line`, not `.cb-line` — it has to outrank `.modal label`, which
   turns every label in a dialog into a block-level uppercase field caption. */
label.cb-line {
  /* row-reverse puts the tick on the trailing edge without wrapping the label
     text in a span (some .cb-line callers pass a bare text node). */
  display: flex; flex-direction: row-reverse; align-items: center;
  justify-content: space-between; gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
label.cb-line:hover { border-color: var(--border); }
label.cb-line:active { background: var(--bg-3); }

/* The checkbox itself = the indicator, pushed to the trailing edge. */
label.cb-line input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
label.cb-line input[type=checkbox]:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 13px 13px no-repeat;
}
label.cb-line input[type=checkbox]:disabled { opacity: 0.45; cursor: default; }

/* Selected card: accent tint + accent edge, so a glance reads the picks. */
label.cb-line:has(input[type=checkbox]:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
label.cb-line:has(input[type=checkbox]:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- Driver picker (searchable tap-list) ---------- */
.driver-picker { display: flex; flex-direction: column; gap: 8px; }
/* Same search field as the page toolbars — one search style app-wide. */
.dp-search {
  width: 100%;
  height: var(--control-h);
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-shadow: var(--shadow-control);
  transition: all 0.15s ease;
}
.dp-search::placeholder { color: var(--muted); }
.dp-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.dp-count { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.dp-head-btns { display: flex; gap: 6px; }
.dp-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.dp-row:hover { background: rgba(255,255,255,0.05); }
.dp-row .dp-name { min-width: 0; }
.dp-row .dp-bus { flex-shrink: 0; }
.dp-row.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.dp-row.selected .dp-name { font-weight: 600; }
.dp-row.selected::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  margin-right: -2px;
}
.dp-row-locked { cursor: default; opacity: 0.85; }
.dp-row-locked:hover { background: transparent; }

.cc-head-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Admin (hidden /admin/templates) */
.admin-view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.tpl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.tpl-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.tpl-active {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  background: rgba(16,185,129,0.18);
  color: var(--success);
  border-radius: 999px;
}
.tpl-upload {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
}
.tpl-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Block info banner (e.g. "DS-870 required first") */
.alert-block-info {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.3);
  color: #93c5fd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}

/* w-full util */
.w-full { width: 100%; }

/* ============================================================
 * NEW: restructure — centered tabs, file cabinet, big buttons,
 * course sessions, modal section tabs, address autosuggest
 * ============================================================ */

/* Centered tabs (top-level + sub-tabs) */
.tabs-centered { justify-content: center; }
.subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs-centered { justify-content: center; flex-wrap: wrap; }
.subtab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.subtab:hover { background: var(--surface-2); }
.subtab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.subtab .badge {
  background: rgba(255,255,255,0.2);
  color: inherit;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
}

/* ============================================================
 * File cabinet — real separated folders with collapsible files
 * ============================================================ */
.folders { position: relative; }

/* Folder tabs — sit like the raised tabs on hanging file folders, tucked over
   the top edge of the open folder body. Exactly one body shows at a time. */
.folder-tabs {
  display: flex;
  gap: 4px;
  padding-left: 6px;
  position: relative;
  z-index: 2;
}
.folder-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  top: 3px;                 /* inactive tabs sit slightly recessed */
  transition: background 0.15s, color 0.15s, top 0.12s;
}
.folder-tab:hover { background: var(--bg-3); color: var(--text); }
.folder-tab.active {
  top: 0;
  background: var(--surface);
  color: var(--text);
  border-top: 3px solid var(--folder-accent, var(--accent));
  padding-top: 9px;         /* offset the thicker accent top border */
}
.folder-tab-hire { --folder-accent: var(--accent); }
.folder-tab-recurring { --folder-accent: var(--warning); }
.folder-tab-other { --folder-accent: var(--muted); }

.folder-tab-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.folder-tab-text { display: flex; flex-direction: column; min-width: 0; }
.folder-tab-title {
  font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-tab-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-tab-chips {
  margin-left: auto;
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: flex-end;
}

/* Folder body — the open folder interior; only the active one is visible.
   Driven by `.active`, never the [hidden] attribute, so two bodies can never
   stack on top of each other. */
.folder-body { display: none; }
.folder-body.active {
  display: block;
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 12px 12px 12px;
  padding: 12px;
  box-shadow: var(--shadow);
  animation: cab-reveal 0.18s ease;
}
/* No tabs above it (e.g. the bus cabinet) → fully rounded folder */
.folders > .folder-body.active:first-child { border-radius: 12px; }

/* Files stack like papers in the folder */
.cabinet-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual file — collapsible <details>; status shows on the closed row */
.cabinet-file {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cabinet-file[open] { box-shadow: var(--shadow); }
.cabinet-file.cabinet-file-missing { border-color: rgba(239,68,68,0.4); }
.cabinet-file.status-overdue { border-left-color: var(--critical); }
.cabinet-file.status-soon    { border-left-color: var(--warning); }
.cabinet-file.status-ok      { border-left-color: var(--success); }
.cabinet-file.status-missing { border-left-color: var(--danger); }
.cabinet-file.status-optional { border-left-color: var(--border); }

.cf-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cf-summary::-webkit-details-marker { display: none; }
.cf-summary:hover { background: var(--surface-2); }
.cf-name { font-weight: 600; flex: 1; min-width: 0; }
.cf-count {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}
.cf-summary-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cf-caret { color: var(--muted); font-size: 12px; transition: transform 0.18s ease; }
.cabinet-file[open] .cf-caret { transform: rotate(90deg); }

.cf-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  animation: cab-reveal 0.16s ease;
}
.cf-detail { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
/* The filed document a read-only card's buttons act on */
.cf-file-line {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

/* Big action buttons (Prefill, Upload, Download) */
.cf-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.big-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  min-width: 110px;
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.1s, background 0.15s;
}
.big-btn:hover { background: var(--bg-3); }
.big-btn:active { transform: scale(0.97); }
.big-btn .big-icon { font-size: 22px; line-height: 1; }
.big-btn .big-label { text-align: center; }
.big-btn-print {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.45);
  color: #93c5fd;
}
.big-btn-upload {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.45);
  color: #6ee7b7;
}
.big-btn-download {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.45);
  color: #fcd34d;
}
/* Read-only pair on the driver's own cabinet — the only two actions they get */
.big-btn-view {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.45);
  color: #93c5fd;
}
.big-btn-share {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.45);
  color: #d8b4fe;
}
/* Light theme: the tinted backgrounds are pale, so use darker label colors for contrast */
:root[data-theme="light"] .big-btn-print {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.5);
  color: #1d4ed8;
}
:root[data-theme="light"] .big-btn-upload {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.55);
  color: #047857;
}
:root[data-theme="light"] .big-btn-download {
  background: rgba(245,158,11,0.16);
  border-color: rgba(245,158,11,0.55);
  color: #b45309;
}
:root[data-theme="light"] .big-btn-view {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.5);
  color: #1d4ed8;
}
:root[data-theme="light"] .big-btn-share {
  background: rgba(168,85,247,0.14);
  border-color: rgba(168,85,247,0.5);
  color: #7e22ce;
}

/* Folder-tab status chips (rolled-up missing / due-soon counts) */
.cab-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cab-chip-missing { color: var(--danger);  background: rgba(239,68,68,0.14);  border-color: rgba(239,68,68,0.35); }
.cab-chip-soon    { color: var(--warning); background: rgba(224,160,18,0.14); border-color: rgba(224,160,18,0.35); }
.cab-chip-ok      { color: var(--success); background: rgba(34,197,94,0.14);  border-color: rgba(34,197,94,0.35); }

@keyframes cab-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On a phone there isn't room for icon + title + sub + chips on one line — the
   roll-up chips drop to their own row under the title and the "One-time · 7
   files" sub line goes, rather than letting the two collide. */
@media (max-width: 620px) {
  .folder-tab { flex-wrap: wrap; row-gap: 4px; gap: 8px; padding: 9px 10px; }
  .folder-tab-icon { font-size: 18px; }
  .folder-tab-sub { display: none; }
  .folder-tab-chips { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  .cab-chip { font-size: 10px; padding: 1px 6px; }
}

@media (max-width: 420px) {
  .folder-tab { padding: 9px 8px; }
  .folder-tab-title { font-size: 13px; }
}

/* Existing uploaded docs list under a cabinet-file */
.cabinet-docs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cabinet-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
}
.cabinet-doc:hover { background: var(--surface-2); }
.cab-doc-title { flex: 1; font-weight: 500; }
.cabinet-no-files {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Document history window (opened from the big "History" button) */
.docwin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
}
.docwin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.docwin-row:hover { background: var(--surface-2); }
.docwin-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docwin-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Three-dots actions trigger on each document row */
.docwin-menu-btn {
  flex: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px 10px;
  letter-spacing: 1px;
}

/* Per-document action sheet (View / Rename / Download / Delete) */
.doc-actions-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-actions-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}
.doc-actions-menu button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-size: 15px;
  padding: 12px 14px;
}

/* In-app document viewer (embeds the file instead of downloading it) */
.modal:has(.doc-viewer) { max-width: 920px; width: 96vw; }
.doc-viewer { display: flex; flex-direction: column; min-height: 0; }
.doc-viewer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.doc-viewer-title {
  margin: 0;
  /* Takes the slack so Print + Open stay grouped at the right edge. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-viewer-head .btn-xs { flex: 0 0 auto; }
.doc-viewer-frame {
  flex: 1;
  min-height: 0;
  height: 72vh;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  background: var(--surface-2);
}
/* PDF pages / images stack vertically and scroll inside the frame */
.doc-viewer-frame.doc-viewer-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.doc-viewer-page {
  max-width: 100%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  background: #fff;
}
.doc-viewer-img { max-width: 100%; height: auto; }
.doc-viewer-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.doc-viewer-msg {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.doc-viewer-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Rename input + fixed extension suffix */
.rename-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rename-row input { flex: 1; min-width: 0; }
.rename-ext {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Share dialog — the file being sent, shown above the recipient field */
.doc-share-file {
  margin: 0 0 14px;
  word-break: break-word;
}

/* Course session cards */
/* ---- Courses page layout & polish ---- */
.course-section { margin-bottom: 26px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 14px;
}
.section-head .section-title { margin: 0; }
.btn-sm { padding: 7px 14px; font-size: 13px; font-weight: 600; }

.course-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 14px 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.course-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  opacity: 0.55;
}
.course-card-active::before { opacity: 1; }
.course-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(4, 14, 8, 0.5);
}
.course-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-title { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.cc-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(21,163,74,0.22), rgba(212,160,23,0.18));
  border: 1px solid var(--border);
}
.course-card-head h3 { margin: 0 0 5px; font-size: 18px; line-height: 1.2; }
.cc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.course-block { margin-top: 14px; }
.course-block h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.course-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.session-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.session-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.session-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Cabinet (collapsible "past sessions") */
.course-cabinet {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.course-cabinet > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
}
.cabinet-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Drivers still-due panel */
.due-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}
.due-panel-ok { border-color: rgba(16, 185, 129, 0.35); }
.due-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.due-progress { flex: 1; min-width: 0; }
.due-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.due-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.due-frac { font-size: 13px; font-weight: 700; color: var(--text); }
.due-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.due-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--warning);
  transition: width 0.3s ease;
}
.due-bar-fill.ok { background: var(--success); }
.due-details { border-top: 1px solid var(--border); }
.due-details > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
.due-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0 18px;
}
.due-list li {
  font-size: 13px;
  color: var(--text);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.cabinet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.cab-info { flex: 1; min-width: 0; }
.cab-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Modal section tabs (used in driver new/edit modal) */
.modal-section-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.mst-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* The one place that runs a softened orange instead of --accent: these pills sit
   inside a dialog, at small size, right next to the title — full-strength brand
   orange there reads louder than the thing it's labelling. Everywhere else keeps
   the brand orange; don't spread --brand-soft. */
.mst-btn.active {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: #fff;
}
.mst-pane { animation: fadeIn 0.15s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Driver-detail tabs centered */
.dd-tabs-centered { justify-content: center; }

/* An address entered as five fields that still read as one block: each box
 * gets its own small caption (a placeholder disappears the moment someone
 * types, and then nobody can tell State from County), and the gaps are wide
 * enough that City / State / ZIP don't look jammed together on a phone. */
.addr-fields { display: grid; gap: 12px; margin-top: 6px; }
.addr-fields .af-row { display: grid; gap: 12px; }
.addr-fields .af-street { grid-template-columns: 2.2fr 1fr; }
.addr-fields .af-city { grid-template-columns: 2fr 0.8fr 1.1fr; }
/* Street / City / State / ZIP / County are notched into their boxes by the
 * shared rule up in the modal block — a caption that reads differently from
 * the field names above and below it looks like a bug. Only the top margin
 * differs: these rows already carry their own 12px gap. */
.addr-fields .af-lbl { margin-top: 0; }
@media (max-width: 400px) {
  /* Street + Apt side by side leaves the street box too narrow to read the
   * suggestion you just picked. */
  .addr-fields .af-street { grid-template-columns: 1fr; }
}

/* Address autosuggest dropdown */
.addr-autosuggest { position: relative; }
/* When the input is wrapped for autosuggest it's no longer a direct grid/flex
 * child, so it can't inherit width that way — keep it filling the wrapper. */
.addr-autosuggest > input { width: 100%; box-sizing: border-box; }
.addr-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.addr-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.addr-item:hover { background: var(--surface-2); }

/* Refresher schedule modal driver grid */
.sr-driver-grid { max-height: 200px; overflow-y: auto; padding: 4px; }
.sr-session-row { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.sr-session-row:last-child { border-bottom: none; }

/* Dashboard "Upcoming" event list */
.evt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.evt-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.evt-row.evt-warn { border-left: 4px solid var(--warning); }
.evt-row.evt-bad  { border-left: 4px solid var(--danger); }
.evt-label { font-weight: 600; font-size: 14px; }
.evt-sub   { margin-top: 2px; }
.see-all { margin-top: 6px; align-self: flex-start; }

/* Drill cards (existing) — extend with actions */
.drill-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Compliance "missing" pill (file-cabinet) */
.cpill-missing {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.4);
}

/* Compliance "optional" pill — a never-uploaded optional doc, shown neutrally */
.cpill-na {
  background: rgba(148,163,184,0.14);
  color: var(--muted);
  border-color: var(--border);
}

/* ---------- Admin PDF field inspector ---------- */
.tpl-fields {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tpl-fields-summary {
  margin-bottom: 6px;
}
.tpl-fields-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.tpl-fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tpl-fields-table th,
.tpl-fields-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.tpl-fields-table th {
  background: rgba(255,255,255,0.04);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.tpl-fields-table code {
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.tpl-field-mapped { background: rgba(34,197,94,0.05); }

/* ---------- Admin Organization Settings ---------- */
.admin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.admin-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* Nested item cards sit on the section surface — drop to the page bg so they
   read as insets rather than card-on-same-card. */
.admin-section .mech-card,
.admin-section .tpl-card { background: var(--bg); }
/* Instructor / requirement rows: full-width divided list inside the card,
   not floating rows with side margins. */
.admin-section .user-row {
  margin: 0;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.admin-section .user-row:last-child { border-bottom: none; }
/* An optional one-line hint under a section header. */
.admin-hint {
  margin: -6px 0 14px;
  color: var(--text-dim);
  font-size: 12px;
}
.org-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
/* No gap: the field name is notched into the top of the input (shared rule in
 * the modal block), so the two have to touch. */
.org-field {
  display: flex;
  flex-direction: column;
}
.org-field-label { margin-top: 0; }
.org-field input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  outline: none;
}
.org-field input:focus {
  border-color: var(--accent);
}
.org-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.org-save-status {
  transition: opacity 0.2s;
}

/* ---- Toggle switch (replaces checkboxes) ---- */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.18s ease;
  cursor: pointer;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.switch input:checked + .slider {
  background: var(--accent);
}
.switch input:checked + .slider::before {
  transform: translateX(18px);
}
.switch input:disabled + .slider {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Toggle rows (label + switch) ---- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--text);
}
.toggle-row-strong .toggle-label {
  font-weight: 600;
}

/* ---- Daily report settings panel ---- */
.report-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.report-settings .org-field select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.report-settings .org-field select:focus {
  border-color: var(--accent);
}
.report-section-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ---- Mechanic cards ---- */
.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.mech-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mech-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mech-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mech-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mech-head-actions {
  display: flex;
  gap: 4px;
}
.icon-btn-sm {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  color: var(--text);
}
.icon-btn-sm:hover {
  background: var(--surface-2);
}
.icon-btn-sm.danger:hover {
  border-color: var(--danger);
}
.mech-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mech-login {
  min-width: 0;
}
.mech-login-email {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.mech-login-meta {
  margin-top: 2px;
}
.mech-nologin {
  color: var(--text-dim);
  font-style: italic;
}

/* ---- Pills ---- */
.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pill-default {
  background: var(--accent);
  color: #fff;
}
.pill-off {
  background: var(--danger);
  color: #fff;
}

/* ===================== Auth (login / change password) ===================== */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* The auth card is ALWAYS a light surface, in both themes. So it must pin its
   own ink — inheriting the theme's --text put near-white labels and near-white
   typed input on a white card in dark mode (i.e. invisible). */
.auth-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  color: var(--sf-ink);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.auth-logo { font-size: 48px; line-height: 1; }
.auth-title { margin: 8px 0 2px; font-size: 28px; letter-spacing: 1px; }
.auth-sub { margin: 0 0 20px; color: #64748b; font-size: 14px; }

/* ---------- Brand mark + login entrance ----------
   The logo is three chevrons pointing right, so it means forward motion. The
   entrance says the same thing: each chevron flies in from the left, staggered
   left→right, so a wave travels across the mark and settles. Everything else on
   the card follows it in. Motion is opt-out via prefers-reduced-motion below. */
.auth-logo-svg {
  width: 160px;
  height: 160px;
  max-width: 70%;
  display: block;
  margin: 0 auto 10px;
  overflow: visible; /* chevrons start outside the viewBox — don't clip them */
}
.auth-intro .bm-chev {
  opacity: 0;
  /* transform on an SVG path resolves in USER UNITS (this viewBox is 60 wide),
     not screen px, and defaults to pivoting on the viewBox origin. Pin the box
     to the shape so the offsets below read as "a bit left of home". */
  transform-box: fill-box;
  transform-origin: center;
  animation: chev-fly-in 1.15s cubic-bezier(0.16, 0.85, 0.28, 1) forwards;
}
/* Stagger: the trailing (lightest) chevron leads, each next one 300ms behind —
   a slow, deliberate build rather than a quick snap. */
.auth-intro .bm-chev-1 { animation-delay: 0.1s; }
.auth-intro .bm-chev-2 { animation-delay: 0.4s; }
.auth-intro .bm-chev-3 { animation-delay: 0.7s; }

/* Offsets are viewBox user units: -18 of 60 ≈ a third of the mark's width. The
   longer the glide runs, the further it needs to travel or it reads as a crawl. */
@keyframes chev-fly-in {
  0%   { opacity: 0; transform: translateX(-18px) scaleX(0.74); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* The wordmark and the form arrive after the mark has landed. */
.auth-intro .auth-title,
.auth-intro .auth-sub,
.auth-intro form,
.auth-intro .auth-link {
  opacity: 0;
  animation: auth-rise 0.6s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}
/* The last chevron lands at ~1.85s; the card follows it in from there. */
.auth-intro .auth-title { animation-delay: 1.3s; }
.auth-intro .auth-sub   { animation-delay: 1.42s; }
.auth-intro form        { animation-delay: 1.54s; }
.auth-intro .auth-link  { animation-delay: 1.66s; }

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The wordmark, exactly as the logo kit specifies (exports/schoolfleet-lockup.svg
   + README): Sora, "School" 500 in ink, "Fleet" 800 in primary orange, tracked
   -1.2 at 56px. It is NOT a gradient — this is live text, not an image, so it
   stays crisp, selectable, and animatable. */
.brand-wordmark {
  font-family: var(--sf-font-wordmark);
  font-size: 34px;
  letter-spacing: -0.021em; /* -1.2 / 56 from the lockup */
  line-height: 1.1;
  white-space: nowrap;
}
.brand-wordmark .wm-school { font-weight: 500; color: var(--sf-ink); }
.brand-wordmark .wm-fleet  { font-weight: 800; color: var(--sf-primary); }

@media (prefers-reduced-motion: reduce) {
  .auth-intro .bm-chev,
  .auth-intro .auth-title,
  .auth-intro .auth-sub,
  .auth-intro form,
  .auth-intro .auth-link {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.auth-card form { text-align: left; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--sf-ink); }
.auth-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 15px;
  background: #fff;
  color: var(--sf-ink);
}
/* Password field with an inline show/hide eye button. */
.auth-pass-wrap { position: relative; }
.auth-pass-wrap input { padding-right: 44px; }
.auth-pass-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0 9px 9px 0;
  color: #64748b;
  cursor: pointer;
}
.auth-pass-toggle:hover { color: var(--sf-ink); }
.auth-pass-toggle svg { width: 19px; height: 19px; }

.auth-btn { width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; }
.auth-err { color: #dc2626; font-size: 13px; margin-top: 10px; min-height: 16px; }
.auth-ok { color: var(--success); font-size: 13px; margin-top: 10px; min-height: 16px; }
.auth-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  margin-top: 14px;
  padding: 4px;
  text-decoration: underline;
}

/* ===================== Limited (driver/school) view ===================== */
.limited-actions { padding: 14px 16px; }
.limited-actions .btn-primary { width: 100%; padding: 14px; font-size: 16px; }
.bus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 16px 24px;
}
.limited-bus { padding: 12px; }
.limited-bus-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.limited-bus-num { font-weight: 700; font-size: 17px; }
.limited-bus-status { font-size: 12px; }
/* ===================== Driver app: "My Bus" ===================== */

/* Switcher for a driver who runs a morning bus and a different afternoon one. */
.mybus-switch {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mybus-switch::-webkit-scrollbar { display: none; }
.mybus-chip {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mybus-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The header card: a bus THUMBNAIL beside the number, model and "can I drive
   it" line. Deliberately not a full-width hero — the photo is decoration, and
   at page width it pushed everything a driver actually needs below the fold. */
.mybus-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
/* Two-class selector on purpose: .bus-icon's own `width:100%` is declared
   later in this file, so a single .mybus-photo rule loses to it. */
.mybus-hero .mybus-photo { width: 108px; flex: none; }
/* Static thumbnail — the fleet grid's lift-on-hover would read as "tap me". */
.mybus-hero .mybus-photo:hover { transform: none; filter: none; }
.mybus-name { min-width: 0; flex: 1; }
.mybus-name h2 { margin: 0; font-size: 22px; }
.mybus-name p { margin: 3px 0 0; }

/* "Can I take this bus out today?" — a real text banner, because the
   windshield overlay it replaces is sized in cqw and would be ~5px tall on a
   thumbnail. */
.mybus-state {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.mybus-state-note { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.mybus-state-ok   { background: rgba(34,197,94,0.16);  color: var(--success); }
.mybus-state-hold { background: rgba(224,160,18,0.18); color: var(--warning); }
.mybus-state-bad  { background: rgba(220,38,38,0.16);  color: var(--danger); }

/* The reference sections a driver drills into, as menu rows. Single column:
   this shell is phone-width, unlike the admin page's auto-fill grid. */
.mybus-menu { grid-template-columns: 1fr; margin-top: 16px; }
/* The back link out of one of those sections — the admin page's own copy sits
   flush against a pane heading, this one against a KPI row. */
#view > .admin-back { margin-bottom: 12px; }

.mybus-report { width: 100%; padding: 14px; font-size: 16px; margin-bottom: 18px; }
.mybus-kpis { margin-bottom: 4px; }
.mybus-kpi-v { font-size: 19px; }

.mybus-blank { text-align: center; padding: 44px 20px 26px; }
.mybus-blank-icon { font-size: 46px; line-height: 1; }
.mybus-blank h3 { margin: 12px 0 6px; }

/* ===================== Daily inspection (DVIR) =====================
   The card sits directly under the bus photo — before a run it's the first
   thing a driver deals with. It only wears the brand ring while a pre-trip is
   still owed; once signed it settles back into ordinary furniture. */
.insp-card {
  margin: 0 0 16px;
  padding: 12px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.insp-card-due { border-color: var(--brand-600); background: var(--accent-soft); }
.insp-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.insp-card-t { font-size: 14px; font-weight: 800; }

.insp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-slot {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px; min-height: 62px;
  text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface-2); color: var(--text);
  font: inherit;
}
.insp-slot:active { transform: scale(0.985); }
.insp-slot-k { font-size: 13.5px; font-weight: 800; }
.insp-slot-v { font-size: 11.5px; color: var(--text-dim); line-height: 1.3; }
/* Not signed yet: the only slot that reads as an action. */
.insp-slot-todo { border-color: var(--brand-600); background: var(--bg-2); }
.insp-slot-todo .insp-slot-k { color: var(--accent); }
.insp-slot-done { border-color: rgba(34,197,94,0.4); }
.insp-slot-done .insp-slot-k { color: var(--success); }
.insp-slot-flag { border-color: rgba(224,160,18,0.45); }
.insp-slot-flag .insp-slot-k { color: var(--warning); }
.insp-slot-bad { border-color: rgba(220,38,38,0.45); }
.insp-slot-bad .insp-slot-k { color: var(--danger); }

.insp-history {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 8px; padding: 9px 2px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
}
.insp-chev { color: var(--muted); }

/* ---- The checklist screen ---- */
.insp-head { margin-bottom: 14px; }
.insp-head h3 { margin: 0 0 2px; font-size: 20px; }
.insp-req {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
}
.insp-allok { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }
.insp-allok-note { margin: 6px 2px 4px; }

/* Form controls. The app's input styling is scoped to `.modal`, and this form
   is a screen, not a dialog — so it brings its own. 16px is deliberate: any
   smaller and iOS Safari zooms the page in when the field takes focus. */
.insp-label {
  display: block; margin-bottom: 7px;
  font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
}
.insp-input, .insp-note {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 16px;
}
.insp-note { font-size: 15px; }

.insp-group-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insp-group-ok {
  flex: none; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font: inherit; font-size: 11.5px; font-weight: 800; text-transform: none; letter-spacing: 0;
}
.insp-items { display: flex; flex-direction: column; gap: 8px; }
.insp-item {
  padding: 9px 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; background: var(--surface-2);
}
.insp-item.is-ok { border-left-color: var(--success); }
.insp-item.is-defect { border-left-color: var(--danger); background: rgba(220,38,38,0.07); }
.insp-item-label { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
/* The dot that marks a safety-critical item. Colour alone would be the only
   signal, so it also carries a title for anyone reading it out. */
.insp-crit { color: var(--danger); font-weight: 900; }
.insp-item-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-btn {
  padding: 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 800;
}
.insp-item.is-ok .insp-btn-ok { background: rgba(34,197,94,0.18); border-color: var(--success); color: var(--success); }
.insp-item.is-defect .insp-btn-bad { background: rgba(220,38,38,0.18); border-color: var(--danger); color: var(--danger); }
.insp-note { margin-top: 8px; }

.insp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-vbtn {
  padding: 13px 8px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font: inherit; font-size: 13.5px; font-weight: 800;
}
.insp-vbtn.active { background: rgba(34,197,94,0.18); border-color: var(--success); color: var(--success); }
.insp-vbtn-bad.active { background: rgba(220,38,38,0.18); border-color: var(--danger); color: var(--danger); }
.insp-unsafe-warn {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.35);
  color: var(--danger); font-size: 12.5px; line-height: 1.45;
}

/* ---- Signature pad ----
   touch-action:none is load-bearing: without it the browser scrolls the page
   under the finger instead of letting the canvas draw. */
.sigpad-wrap {
  position: relative; margin-top: 4px;
  border: 1px dashed var(--border); border-radius: 12px;
  background: #ffffff; overflow: hidden;
}
.sigpad { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sigpad-line {
  position: absolute; left: 18px; right: 18px; bottom: 34px; height: 1px;
  background: #cbd5e1; pointer-events: none;
}
.sigpad-hint {
  position: absolute; left: 22px; bottom: 40px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; pointer-events: none;
}
.sigpad-actions { display: flex; justify-content: flex-end; margin: 6px 0 10px; }

/* Deliberately NOT sticky. The bottom nav is fixed at z-index 48, so a sticky
   bar would sit underneath it — and the driver has to be at the bottom of the
   form to sign anyway, which is exactly where this is. */
.insp-footer {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin-top: 18px;
}
.insp-progress { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.insp-progress-done { color: var(--success); }
.insp-footer .btn-primary { width: 100%; padding: 15px; font-size: 16px; }

/* ---- A filed report, read back ---- */
.insp-verdict-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.insp-answers { display: flex; flex-direction: column; gap: 5px; }
.insp-answer { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; }
.insp-answer.is-defect { color: var(--danger); font-weight: 700; }
.insp-answer-m { flex: none; }
.insp-sig-shown {
  padding: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: #ffffff;
}
.insp-sig-shown img { display: block; width: 100%; height: auto; }

/* ===================== Driver app: "My File Cabinet" ===================== */
.cab-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cab-head-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.cab-head-title { margin: 0; font-size: 20px; }
.cab-head p { margin: 3px 0 0; }
.cab-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===================== Users admin screen ===================== */
.users-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px;
}
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 16px; padding: 12px; }
.user-email { font-weight: 600; }
.user-actions { flex-shrink: 0; }

/* Role filter + search above the grouped list. */
.user-toolbar { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.user-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.user-tab {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
}
.user-tab b { font-weight: 800; opacity: .75; }
.user-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.user-tab.active b { opacity: .9; }
.user-search {
  width: 100%; padding: 9px 12px; font-size: 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

/* One card per role, with its rows as a divided list inside. */
.user-group {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin: 0 16px 14px; overflow: hidden;
}
.user-group-head {
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 700;
}
.user-group-head .count {
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 10px;
}
.user-group .user-row { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--border); background: none; border-radius: 0; box-shadow: none; }
.user-group .user-row:last-child { border-bottom: none; }
.user-group .empty { padding: 14px; }
.user-row-off .user-main { opacity: .6; }

/* Inside the admin pane the groups already sit in a section card — drop the
   outer margins so they line up with the rest of the pane. */
.admin-section .user-toolbar { padding: 0 0 10px; }
.admin-section .user-group { margin: 0 0 12px; background: var(--bg); }
.admin-section .user-group .user-row { padding: 12px 14px; }
.btn-danger { background: #dc2626; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; }

/* ============================================================
 * FLEET — grid of real (CC0) school-bus images with info overlaid
 * ============================================================ */
.bus-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: end;
}
@media (max-width: 560px) { .bus-icon-grid { grid-template-columns: repeat(2, 1fr); } }

/* Fleet view toggle (Buses / Cards) — segmented control */
.view-toggle {
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
  box-shadow: var(--shadow-control);
}
.vt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent;
  color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.vt-btn .vt-ico { font-size: 15px; line-height: 1; }
.vt-btn:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.05); }
.vt-btn.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.vt-btn.active:active { transform: scale(0.97); }

/* Fleet group headers: Needs Service / Good to Go */
.fleet-group-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.fleet-group-h span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #fff;
}
.fleet-group-h.needs { color: var(--danger); border-color: rgba(239,68,68,0.45); }
.fleet-group-h.needs span { background: var(--danger); color: #fff; }
.fleet-group-h.due { color: var(--warning); border-color: rgba(224,160,18,0.45); }
.fleet-group-h.due span { background: var(--warning); color: #1f2937; }
.fleet-group-h.ok { color: var(--success); border-color: rgba(34,197,94,0.4); }
.fleet-group-h.ok span { background: var(--success); }

/* Frameless tile: the bus image fills it; info is overlaid absolutely.
   container-type makes cqw units below scale the overlays to the tile size. */
.bus-icon {
  position: relative;
  display: block;
  width: 100%;
  container-type: inline-size;
  background: none;
  border: 0;
  padding: 0;            /* no padding: overlay %s map directly onto the image */
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bus-icon:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
.bus-icon:active { transform: translateY(-1px) scale(0.99); }
.bus-icon-retired { opacity: 0.55; filter: grayscale(0.6); }

/* Multi-select mode: selectable bus tile + corner checkbox. */
.bus-icon.bus-selected { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.bus-check {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 3;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

.bus-photo { width: 100%; height: auto; display: block; pointer-events: none; }

/* Out-of-service buses gently pulse so they stand out. */
.bus-icon-oos { animation: bus-pulse 2.2s ease-in-out infinite; }
@keyframes bus-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(239,68,68,0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(239,68,68,0.6)); }
}

/* --- Overlays positioned on the front-view bus image (percentages) --- */
.bus-ov {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; line-height: 1; white-space: nowrap;
  pointer-events: none;
}
/* Windshield text — the glass is painted flat in the image itself (dark, or
   red for out-of-service), so we just lay the open-job titles on it */
.bus-ws {
  position: absolute;
  left: 18%; top: 13%; width: 64%; height: 24%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8cqw; padding: 0.6cqw 2cqw; overflow: hidden;
  text-align: center; pointer-events: none;
}
.bus-ws-job {
  display: flex; align-items: flex-start; gap: 1.8cqw; justify-content: center;
  font-size: 4.2cqw; font-weight: 800; color: #ffffff;
  letter-spacing: 0.2px; line-height: 1.25; max-width: 100%; min-width: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,0.9);
}
.bus-ws-dot { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; flex: none; margin-top: 0.9cqw; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6); }
/* Long titles wrap to a second line (clamped) instead of sticking out */
.bus-ws-txt {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.bus-ws-more { font-size: 3.4cqw; color: #eef3ec; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.95); }
.bus-ws-empty { font-size: 4.4cqw; font-weight: 800; color: #c8f7d6; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* Status — a plate-style label covering the license plate */
.bus-ov-status {
  left: 50%; top: 81.5%; transform: translate(-50%, -50%);
  min-width: 21%;
  background: var(--st); color: #fff;
  font-size: 3.4cqw; font-weight: 800; letter-spacing: 0.3px;
  padding: 1.4cqw 3cqw; border-radius: 2.2cqw;
  border: 0.6cqw solid rgba(255,255,255,0.92);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
/* App bus number — bold black in a white oval with thick green outline,
   on BOTH bumper sides (where the real numbers are) */
.bus-ov-num {
  top: 81%; transform: translate(-50%, -50%);
  min-width: 7cqw; padding: 1.5cqw 2.8cqw;
  background: #fff; color: #111;
  border: 1.9cqw solid var(--accent); border-radius: 50%;   /* small oval, thick ring */
  font-size: 5.6cqw; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.bus-ov-num-l { left: 22%; }
.bus-ov-num-r { left: 78%; }

/* Days-out-of-service chip beside the status label */
.oos-days {
  margin-left: 1.8cqw;
  background: rgba(255,255,255,0.95);
  color: #b01616;
  font-size: 3cqw; font-weight: 900;
  padding: 0.3cqw 1.8cqw; border-radius: 1.4cqw;
  text-shadow: none;
}

/* ============================================================
 * DRIVER PHOTOS — grid of cards + avatars
 * ============================================================ */
.pfp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 720px) { .pfp-grid { grid-template-columns: repeat(4, 1fr); } }

/* The round avatar (photo or initials) */
.pfp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--surface-2);
  border: 2px solid var(--border);
}
.pfp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfp-initials {
  color: #fff; font-weight: 800; letter-spacing: 0.5px;
  background: hsl(var(--pfp-hue, 150), 45%, 42%);
  border-color: hsl(var(--pfp-hue, 150), 45%, 32%);
}
.pfp-lg { width: 72px; height: 72px; font-size: 26px; }
.pfp-xl { width: 92px; height: 92px; font-size: 32px; border-width: 3px; }

/* Color-coded ring around the photo (mirrors bus status colors) */
.pfp-ring-ok       { border-color: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.pfp-ring-soon     { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.pfp-ring-missing  { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.pfp-ring-overdue  { border-color: var(--danger);  box-shadow: 0 0 0 3px rgba(239,68,68,0.20); }
.pfp-ring-muted    { border-color: var(--muted); filter: grayscale(0.5); }

/* Square card */
.pfp-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.pfp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.28); border-color: var(--accent); }
.pfp-card:active { transform: translateY(-1px) scale(0.99); }
.pfp-selected { outline: 2px solid var(--accent); outline-offset: -2px; }

.pfp-name {
  font-weight: 700; font-size: 14px; line-height: 1.2;
  display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap;
}
.pfp-tag {
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-dim);
}
.pfp-tag.cflag-ok      { background: rgba(16,185,129,0.15); color: var(--success); }
.pfp-tag.cflag-soon    { background: rgba(245,158,11,0.15); color: var(--warning); }
.pfp-tag.cflag-missing { background: rgba(245,158,11,0.15); color: var(--warning); }
.pfp-tag.cflag-overdue { background: rgba(239,68,68,0.18);  color: var(--danger); }
.pfp-tag.cflag-muted   { background: rgba(148,163,184,0.15); color: var(--muted); }

/* bus-number chip on the card corner */
.pfp-bus {
  position: absolute; top: 8px; left: 8px;
  min-width: 26px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; border-radius: 8px;
}
.pfp-bus.bus-sb { background: var(--muted); color: #fff; }
/* "+N" suffix shown on the bus badge when a driver runs more than one bus */
.pfp-bus-more { margin-left: 3px; font-size: 10px; font-weight: 700; opacity: 0.85; }
.pfp-check { position: absolute; top: 6px; right: 8px; font-size: 20px; line-height: 1; }

/* Driver-detail header photo + controls */
.dd-photo { position: relative; flex-shrink: 0; }
.dd-photo-bus {
  position: absolute; bottom: -2px; left: -4px;
  min-width: 24px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 8px; border: 2px solid var(--surface);
}
.dd-photo-bus.bus-sb { background: var(--muted); color: #fff; }

/* The avatar looks unchanged, but it is tappable to open the photo popup. */
.dd-photo-click { display: block; cursor: pointer; border-radius: 50%; }
.dd-photo-click:active { transform: scale(0.97); }

/* Popup window with the photo actions. */
.photo-menu { text-align: center; }
.photo-menu h3 { margin: 0 0 14px; }
.photo-menu-actions { display: flex; flex-direction: column; gap: 10px; }
.photo-menu-actions button { width: 100%; }

/* Full-size profile photo viewer. */
.photo-view { text-align: center; }
.photo-view img {
  display: block; width: 100%; max-height: 70vh; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--border); margin-bottom: 12px;
}
.photo-view button { width: 100%; }

/* ============================================================
 * Fill & Sign — full-screen interactive PDF
 * ============================================================ */
.fs-overlay {
  position: fixed; inset: 0; z-index: 4000;
  /* Soft, neutral backdrop so the white form pages read cleanly. */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(21,163,74,.08), transparent 60%),
    var(--bg-3);
  display: flex; flex-direction: column;
}
.fs-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface);
  color: var(--text); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow); flex: 0 0 auto;
}
.fs-title {
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  display: flex; align-items: center; gap: 8px;
}
.fs-title-ico {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--warning));
  font-size: 15px;
}
.fs-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-right: auto; margin-left: 6px; }
/* A pill that groups related controls (pen / zoom). */
.fs-group {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 5px;
}
.fs-group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); padding: 0 4px 0 6px;
}
.fs-tool {
  background: transparent; color: var(--text); border: 1px solid transparent;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; min-width: 34px; transition: background .12s, color .12s;
}
.fs-tool:hover { background: var(--surface-2); }
.fs-tool:active { transform: scale(0.96); }
/* Pen-thickness stepper: − / preview-dot / +. The dot scales with the width. */
.fs-step {
  display: inline-grid; place-items: center; width: 32px; height: 30px;
  background: transparent; color: var(--text); border: none; border-radius: 999px;
  font-size: 20px; line-height: 1; font-weight: 600; cursor: pointer; transition: background .12s;
}
.fs-step:hover { background: var(--surface); }
.fs-step:active { transform: scale(.94); }
.fs-step:disabled { opacity: .3; cursor: default; }
.fs-pen-preview { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.fs-pen-dot { display: block; border-radius: 50%; background: var(--text); transition: width .1s, height .1s; }
/* Pen-color swatches (black / blue). */
.fs-ink-c {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; transition: box-shadow .12s;
}
.fs-ink-c:hover { background: var(--surface); }
.fs-swatch {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.fs-ink-on { box-shadow: inset 0 0 0 2px var(--accent); }
.fs-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-actions .btn-primary { padding: 8px 16px; border-radius: 999px; }
.fs-status { color: var(--text-dim); text-align: center; padding: 40px 16px; }
.fs-error {
  color: var(--text); background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35);
  border-radius: var(--radius); padding: 16px; max-width: 560px; margin: 32px auto;
}
/* Viewport: we do our own pan/zoom via a transform, so no native scroll. */
.fs-pages {
  flex: 1 1 auto; overflow: hidden; position: relative; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Inner wrapper that is translated + scaled by the gesture controller. */
.fs-zoom {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content;
}
.fs-page {
  position: relative; background: #fff; border-radius: 4px;
  box-shadow: 0 8px 28px rgba(4, 14, 8, 0.35), 0 0 0 1px rgba(0,0,0,.04);
}
.fs-page canvas { display: block; border-radius: 4px; }
/* Full-page handwriting layer */
.fs-ink { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

/* Small "external attendee" tag shown after an outside driver's name. */
.badge-ext {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  line-height: 1; padding: 3px 6px; border-radius: 6px; vertical-align: middle;
  background: rgba(37, 99, 235, .14); color: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .3);
}

/* Field inputs sitting on the rendered form */
/* The Fill & Sign cabinet button */
.big-btn-sign { border-color: #d97706; }
.big-btn-sign .big-icon { color: #d97706; }

/* Bus picker (DS-873 / DS-875 vehicle section) */
.bus-pick-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 50vh; overflow: auto; margin: 8px 0;
}
.bus-pick-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface, #fff); cursor: pointer; text-align: left;
}
.bus-pick-item:hover { border-color: #2563eb; background: rgba(37,99,235,.06); }
@media (max-width: 520px) { .bus-pick-list { grid-template-columns: 1fr; } }

/* ---- Compliance report: collapsible requirement picker ---- */
.cr-disclose { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.cr-disclose-sum {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--text);
}
.cr-disclose-sum::-webkit-details-marker { display: none; }
.cr-disclose-sum::after { content: "▸"; color: var(--text-dim); transition: transform .15s ease; }
.cr-disclose[open] .cr-disclose-sum::after { transform: rotate(90deg); }
.cr-disclose .dp-count { font-weight: 500; }
.cr-disclose > .driver-picker { padding: 0 10px 10px; }

/* ---- Compliance report: drag-to-reorder rows ---- */
.cr-disclose .dp-row { justify-content: flex-start; gap: 10px; }
.cr-disclose .dp-row.selected::before { display: none; }
.cr-disclose .dp-row.selected::after {
  content: "✓"; margin-left: auto; color: var(--accent); font-weight: 700;
}
.cr-disclose .dp-name { flex: 1 1 auto; min-width: 0; }
.dp-grip {
  flex: 0 0 auto; color: var(--text-dim); letter-spacing: -2px;
  cursor: grab; user-select: none; font-size: 15px; line-height: 1;
}
.dp-row.dragging {
  opacity: .96; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}
.dp-list.dp-dragging { touch-action: none; cursor: grabbing; }

/* ============================================================
 * SMS messaging (two-way texting with drivers) — Broadcast screen
 * ============================================================ */
.sms-devnote {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.4);
  color: var(--text);
  font-size: 12.5px;
}

.sms-thread-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sms-thread-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
}
.sms-thread-row:hover { border-color: var(--accent); }
.sms-thread-row.unread { border-left: 3px solid var(--accent); }
.sms-thread-main { flex: 1; min-width: 0; }
.sms-thread-name { font-weight: 700; color: var(--text); }
.sms-thread-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-thread-meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sms-unread {
  display: inline-block; min-width: 20px; padding: 1px 6px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: center;
}

/* Chat thread (inside a modal) */
.sms-chat { display: flex; flex-direction: column; }
.sms-chat-log {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 52vh; overflow-y: auto;
  padding: 10px; margin: 10px 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.sms-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; }
.sms-bubble-body { white-space: pre-wrap; word-break: break-word; }
.sms-bubble-time { margin-top: 3px; font-size: 11px; opacity: 0.8; }
.sms-in { align-self: flex-start; background: var(--bg-3); border-bottom-left-radius: 4px; }
.sms-out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.sms-out .sms-bubble-time { color: #eafff0; }
.sms-failed { color: #ffd5d5; }
.sms-chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.sms-chat-compose textarea { flex: 1; resize: vertical; }

/* ============================================================
 * Roster progress screen — built on the shared design tokens
 * (--surface / --border / --radius) and shared components
 * (.section-head, .section-title, .badge, .pill-*, .cpill-*).
 * ============================================================ */
.tasks-wrap { padding: 16px; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* Cards share the app's card recipe (cf. .mech-card / .due-card). */
.tp-card, .task-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.task-section .section-head { margin: 0 0 12px; }
.task-section .section-head + .muted { margin-top: -6px; }
.badge-done { background: var(--success); }
/* Neutral "low" priority pill, completing the shared .pill-* family. */
.pill-low { background: var(--bg-3); color: var(--text-dim); }

/* Today's focus — the paced "finish N drivers" mission. */
.focus-stepper { display: inline-flex; align-items: center; gap: 4px; }
.focus-stepper .btn-xs { padding: 3px 10px; font-size: 15px; line-height: 1; font-weight: 700; }
.focus-goal { font-size: 12px; font-weight: 700; color: var(--text-dim); min-width: 46px; text-align: center; }
.focus-list { display: flex; flex-direction: column; gap: 6px; }
.focus-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; cursor: pointer; color: var(--text); }
.focus-row:hover { background: var(--surface-2); }
.focus-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.focus-name { font-size: 14px; font-weight: 700; }
.focus-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-badge { background: var(--warning); }

/* Collapsible section header (tap to fold heavy sections). */
.sec-collapsible { width: 100%; background: none; border: none; cursor: pointer; padding: 0; color: inherit; text-align: left; }
.sec-head-right { display: inline-flex; align-items: center; gap: 8px; }
.sec-caret { color: var(--text-dim); font-size: 12px; }

/* ============================================================
 * Vibrant layer — inject some color/energy into the progress screen
 * while staying readable in both light and dark themes.
 * ============================================================ */
/* Colorful, gradient cards */
.tp-card { background: linear-gradient(135deg, rgba(21,163,74,.16), rgba(224,160,18,.13)) , var(--surface); border-color: rgba(21,163,74,.4); }
.focus-section { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(236,72,153,.10)), var(--surface); border-color: rgba(245,158,11,.4); }

/* Distinct accent bar per section header */
.focus-section .section-title { border-left-color: #f59e0b; }
.collect-section .section-title { border-left-color: #14b8a6; }

/* Punchier ring + progress meter */
.tp-ring-num { font-size: 23px; font-weight: 800; }
.tp-meter, .gap-mini-meter, .tp-board-meter, .focus-mini { background: rgba(0,0,0,.12); }
.tp-meter > span { background: linear-gradient(90deg, var(--brand-400), var(--brand-600)) !important; }

/* Brighter chips + badges */
.tp-chip { border: none; }
.tp-chip.warn { color: #92600b; background: rgba(245,158,11,.22); }
.tp-chip.ok { color: #0f7a3a; background: rgba(16,185,129,.22); }
.tp-chip.fire { color: #b4460b; background: rgba(249,115,22,.20); }
.badge { background: linear-gradient(135deg, var(--accent), #37b56a); }
.focus-badge { background: linear-gradient(135deg, #f59e0b, #ef8f2a) !important; }


/* --- Gamified progress header --- */
.tp-top { display: flex; gap: 16px; align-items: center; }
.tp-ringwrap { flex: none; }
.tp-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.tp-ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.7s cubic-bezier(.4,0,.2,1); }
.tp-ring-num { font-size: 22px; font-weight: 700; }
.tp-headmeta { flex: 1; min-width: 0; }
.tp-h1 { font-size: 17px; font-weight: 700; color: var(--text); }
.tp-h2 { font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tp-chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text-dim); border: 1px solid var(--border); }
.tp-chip.warn { color: var(--warning); background: rgba(245,158,11,.15); border-color: transparent; }
.tp-chip.ok { color: var(--success); background: rgba(16,185,129,.15); border-color: transparent; }
.tp-chip.fire { color: var(--accent); background: rgba(16,185,129,.12); border-color: transparent; }
.tp-next { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.tp-refresh { margin-top: 6px; padding-left: 0; }
.tp-meter { height: 9px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 14px; border: 1px solid var(--border); }
.tp-meter > span { display: block; height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(.4,0,.2,1); }
.tp-alldone { text-align: center; padding: 22px 12px; font-size: 15px; font-weight: 700; color: var(--success); }

/* --- Leaderboard --- */
.tp-board { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.tp-board-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px; }
.tp-board-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 6px 2px; cursor: pointer; color: var(--text); }
.tp-board-name { font-size: 13.5px; font-weight: 600; flex: none; width: 38%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-board-meter { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.tp-board-meter > span { display: block; height: 100%; border-radius: 999px; }
.tp-board-pct { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text-dim); width: 38px; text-align: right; }


/* --- Compliance-gap groups --- */
.gap-group { border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; overflow: hidden; background: var(--bg-2); }
.gap-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 11px 12px; cursor: pointer; color: var(--text); }
.gap-driver { flex: none; width: 34%; text-align: left; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gap-mini-meter { flex: 1; height: 7px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.gap-mini-meter > span { display: block; height: 100%; border-radius: 999px; }
.gap-caret { flex: none; color: var(--text-dim); font-size: 12px; width: 14px; text-align: center; }
.gap-list { border-top: 1px solid var(--border); }
.gap-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 12px; cursor: pointer; color: var(--text); }
.gap-row:last-child { border-bottom: none; }
.gap-row:hover { background: var(--surface-2); }
.gap-name { flex: 1; min-width: 0; font-size: 13.5px; }
.gap-go { flex: none; color: var(--text-dim); font-size: 16px; }

/* --- Manage-daily modal rows --- */

/* --- Confetti --- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti span { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: confetti-fall linear forwards; }
@keyframes confetti-fall {
  0% { transform: translate(0, -10px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift, 0), 105vh) rotate(720deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .tp-ring-fg, .tp-meter > span { transition: none; }
}

/* ============================================================
 * DISPATCH BOARD
 * ============================================================ */
.disp-wrap { padding: 0 0 24px; }
.disp-tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0 12px; }
.disp-seg { display: flex; gap: 3px; padding: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }
.disp-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 8px 6px; font-size: 13px; font-weight: 600; background: none; border: none; border-radius: 9px; color: var(--text-dim); cursor: pointer; transition: background .13s ease, color .13s ease; }
.disp-tab.active { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.16); }
.disp-tab:not(.active):hover { color: var(--text); }
.disp-body { background: var(--modal-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.disp-datebar { display: flex; align-items: center; gap: 6px; }
.disp-datebar input[type="date"] { flex: 1; padding: 7px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 13.5px; }
.disp-daylabel { font-size: 13.5px; font-weight: 700; color: var(--text-dim); margin: -4px 2px 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.disp-plan-tag { font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(21,163,74,0.14); padding: 2px 9px; border-radius: 999px; }
.disp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.disp-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.disp-chip.ok { background: rgba(16,185,129,0.15); color: var(--success); border-color: transparent; }
.disp-chip.bad { background: rgba(239,68,68,0.15); color: var(--danger); border-color: transparent; }

/* Collapsible category groups (Boys / Girls / Mixed / Standby / Field trips) */
.disp-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.disp-group.collapsed { background: var(--bg); }
.disp-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 22px 16px; background: none; border: none; text-align: left; color: var(--text); }
.disp-group.collapsed .disp-group-head:active { background: var(--surface-2, var(--bg)); }
.disp-group-toggle { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--text); }
.disp-group-chev { font-size: 12px; color: var(--text-dim); width: 12px; }
.disp-group-count { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.disp-group-head .run-badge { font-size: 13px; padding: 3px 11px; }
.disp-group-head .disp-group-count { font-size: 13px; }
/* Green counterpart to .run-gaps — same pill geometry as the run "✓ Covered"
 * badge so the head reads as one family of status chips, not a stray glyph. */
.disp-group-ok { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(16,185,129,0.15); color: var(--success); }
.disp-group-body { padding: 4px 13px 13px; display: flex; flex-direction: column; gap: 12px; }
.disp-group.cat-boys { border-left: 3px solid #3b82f6; }
.disp-group.cat-girls { border-left: 3px solid #ec4899; }
.disp-group.cat-mixed, .disp-group.cat-other { border-left: 3px solid #a855f7; }
.disp-group.cat-standby { border-left: 3px solid var(--muted); }

.disp-run { background: transparent; border: none; }
.disp-group-body .disp-run + .disp-run { border-top: 1px solid var(--border); padding-top: 12px; }
.disp-run + .disp-run, .disp-run.trips { border-top: 1px solid var(--border); padding-top: 12px; }
.disp-run-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px 8px; }
.run-time { font-weight: 800; font-size: 14px; color: var(--text); min-width: 62px; }
.run-badge { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.run-badge.cat-boys { background: rgba(59,130,246,0.18); color: #3b82f6; }
.run-badge.cat-girls { background: rgba(236,72,153,0.18); color: #ec4899; }
.run-badge.cat-standby { background: rgba(148,163,184,0.2); color: var(--muted); }
.run-badge.cat-mixed, .run-badge.cat-other { background: rgba(168,85,247,0.16); color: #a855f7; }
.run-place { font-size: 12px; color: var(--text-dim); }
.run-count { font-size: 12px; color: var(--text-dim); }
.run-gaps { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(239,68,68,0.15); color: var(--danger); }

/* Per-run collapsible cards (the day's schedule, one comfortable row per run) */
.disp-run-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.disp-run-card.attn { border-color: rgba(239,68,68,0.45); }
.disp-run-toggle { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; background: none; border: none; padding: 12px 13px; cursor: pointer; color: var(--text); -webkit-tap-highlight-color: transparent; }
.disp-run-toggle:active { background: var(--surface); }
.disp-run-card.open .disp-run-toggle { border-bottom: 1px solid var(--border); }
.run-toggle-main { display: flex; align-items: center; gap: 9px; }
.run-toggle-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-left: 19px; }
.run-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.run-dot.ok { background: var(--success); }
.run-dot.bad { background: var(--danger); }
.run-name-lbl { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disp-run-chev { flex: none; font-size: 13px; color: var(--text-dim); }
.run-status { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.run-status.ok { background: rgba(16,185,129,0.15); color: var(--success); }
.run-status.bad { background: rgba(239,68,68,0.15); color: var(--danger); }
.disp-run-card .disp-slot-grid { padding: 10px 13px 13px; }

/* Header row: the expand toggle plus a per-run "change time today" button. */
.disp-run-headrow { display: flex; align-items: stretch; }
.disp-run-headrow .disp-run-toggle { flex: 1; width: auto; min-width: 0; }
.disp-run-time-btn { flex: none; align-self: stretch; background: none; border: none; border-left: 1px solid var(--border); padding: 0 13px; font-size: 16px; cursor: pointer; color: var(--text-dim); -webkit-tap-highlight-color: transparent; }
.disp-run-time-btn:active { background: var(--surface); }

/* Re-timed run (early dismissal / delayed opening): new time in amber, original
 * struck out, plus a "moved" tag. */
.disp-run-card.retimed { border-color: rgba(217,119,6,0.45); }
.run-time.moved { color: #d97706; }
.run-time-was { font-size: 11px; color: var(--text-dim); text-decoration: line-through; white-space: nowrap; }
.run-moved-tag { flex: none; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: rgba(217,119,6,0.15); color: #d97706; }

/* Closed session (school off): grey, no coverage demanded. */
.disp-group.closed { opacity: .9; }
.disp-group-toggle.static { cursor: default; flex: 1; }
.disp-group-closed { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

/* Template list rows with an inline delete. */
.menu-row { display: flex; align-items: center; gap: 6px; }
.menu-row .menu-item { flex: 1; min-width: 0; }

.disp-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; padding: 0; }
.disp-slot { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; }
.disp-slot.gap { border-left-color: var(--danger); background: rgba(239,68,68,0.06); }
.slot-lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot-bus { font-size: 15.5px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.slot-driver { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
.slot-fill { font-size: 12.5px; font-weight: 600; color: var(--danger); background: none; border: 1px dashed var(--danger); border-radius: 7px; padding: 2px 8px; cursor: pointer; }
.slot-driver.clash, .slot-bus.clash { text-decoration: line-through; opacity: .75; }
.slot-fix { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--danger); background: rgba(239,68,68,0.1); border: none; border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.slot-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; }
.slot-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--text-dim); }
.slot-tag.ok { background: rgba(16,185,129,0.15); color: var(--success); }
.slot-menu { background: none; border: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }

.disp-run.trips .trip-list, .disp-group.trips .trip-list { display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); overflow: hidden; }
.disp-group.trips .empty.small { padding: 0 13px 13px; }
.trip-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 12px; cursor: pointer; color: var(--text); }
.trip-row:last-child { border-bottom: none; }
.trip-row.cancelled { opacity: .55; text-decoration: line-through; }
.trip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trip-title { font-size: 13.5px; font-weight: 600; }
.trip-sub { font-size: 12px; color: var(--text-dim); }
.disp-undo { margin-left: auto; color: var(--accent); font-weight: 700; }

/* Season plans */
.disp-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; flex-direction: column; gap: 9px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.plan-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-row-main { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; background: none; border: none; color: var(--text); cursor: pointer; text-align: left; }
.plan-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.plan-name { font-size: 15px; font-weight: 700; }
.plan-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.plan-badge.default { background: rgba(16,185,129,0.16); color: var(--success); }
.plan-badge.editing { background: rgba(21,163,74,0.14); color: var(--accent); border: 1px solid var(--accent); }
.plan-sub { font-size: 12.5px; color: var(--text-dim); }
.plan-row-acts { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding-top: 9px; }
.plan-detail { margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--border); }

/* Plans editor: weekday tabs → a day's runs, split into Boys/Girls cards */
.plan-chev { font-size: 12px; color: var(--text-dim); }
.planday-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 2px; }
.planday-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; transition: background .12s ease; }
.planday-pill.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: none; }
.planday-pill.empty:not(.sel) { opacity: .45; }
.planday-dow { font-size: 11.5px; font-weight: 800; }
.planday-n { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.planday-pill.sel .planday-n { color: var(--accent); }
.planday-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 12px 2px 2px; }

.plan-cat { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 10px; background: var(--surface); }
.plan-cat.cat-boys { border-left-color: #3b82f6; }
.plan-cat.cat-girls { border-left-color: #ec4899; }
.plan-cat.cat-mixed, .plan-cat.cat-other { border-left-color: #a855f7; }
.plan-cat.cat-standby { border-left-color: var(--muted); }
.plan-cat-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.plan-cat.cat-boys .plan-cat-head { background: rgba(59,130,246,0.08); }
.plan-cat.cat-girls .plan-cat-head { background: rgba(236,72,153,0.08); }
.plan-cat.cat-mixed .plan-cat-head, .plan-cat.cat-other .plan-cat-head { background: rgba(168,85,247,0.08); }
.plan-cat-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.plan-cat .run-list { padding: 10px 12px; }

.run-list { display: flex; flex-direction: column; gap: 6px; }
.run-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.run-row-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.run-name { font-size: 13px; color: var(--text-dim); }
.run-dur { font-size: 11.5px; font-weight: 700; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.run-edit { font-size: 13px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.run-days { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--muted); background: var(--bg); border-radius: 5px; padding: 1px 6px; }
.run-asg { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.run-asg.full { color: var(--success); background: rgba(52, 211, 153, 0.15); }
.run-asg.partial { color: var(--warning); background: rgba(234, 179, 8, 0.16); }
.run-asg.none { color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); }
.run-row.full { border-left: 3px solid var(--success); }
.run-row.partial { border-left: 3px solid var(--warning); }
.wd-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.wd-pill { width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }
.wd-pill.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.dur-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dur-chip { padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; }
.dur-chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.dur-chip.wide { display: block; width: 100%; text-align: center; margin-top: 8px; }
/* A run whose buses aren't all the same length shows a range, not one number. */
.run-dur.varies { color: var(--accent); border-color: var(--accent); }
.run-row-count { display: flex; align-items: center; gap: 6px; }
.run-row-count .step { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; cursor: pointer; }
.run-row-count .step:disabled { opacity: .4; cursor: default; }
.run-row-count .count { min-width: 20px; text-align: center; font-weight: 700; font-size: 15px; }
.disp-hint { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.plan-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Assign-buses modal */
.runslots { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin: 6px 0; }
.runslot { display: flex; align-items: center; gap: 6px; }
.runslot-n { flex: none; width: 20px; text-align: center; font-weight: 700; color: var(--text-dim); }
.runslot-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.runslot-row2 { display: flex; align-items: center; gap: 6px; }
.runslot select { flex: 1; min-width: 0; padding: 7px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
/* Per-bus run length: plain pill when it follows the run, accented when it doesn't. */
.runslot-dur { flex: none; font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.runslot-dur.custom { color: var(--accent); border-color: var(--accent); }
.runslot-dur:hover { border-color: var(--accent); }

/* Fill sheet & menu */
.fill-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; margin: 6px 0; }
.fill-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.fill-row:hover { border-color: var(--accent); }
.fill-sub { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.fill-row.subtle { font-weight: 500; color: var(--text-dim); }
.fill-until-pick { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.fill-until-pick input { flex: 1; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 14px; }
.menu-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.menu-item { text-align: left; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 14px; cursor: pointer; }
.menu-item.danger { color: var(--danger); }
.modal-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.fld { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: 12.5px; color: var(--text-dim); }
.fld > span { font-weight: 600; }
.fld input, .fld select, .fld textarea { padding: 9px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.empty.small { padding: 12px; font-size: 13px; }

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cal-month { font-size: 17px; font-weight: 800; min-width: 170px; text-align: center; }
.cal-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cal-summary span { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.cal-sum-ok { background: rgba(16,185,129,0.15); color: var(--success); }
.cal-sum-bad { background: rgba(239,68,68,0.15); color: var(--danger); }
.cal-sum-trip { background: rgba(168,85,247,0.14); color: #a855f7; }
.cal-sum-none { background: var(--surface); color: var(--text-dim); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.cal-cell { position: relative; min-height: 66px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 5px 6px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; overflow: hidden; }
.cal-cell.blank { background: none; border: none; cursor: default; min-height: 0; }
.cal-cell.st-ok { border-left-color: var(--success); }
.cal-cell.st-gap { border-left-color: var(--danger); background: rgba(239,68,68,0.06); }
.cal-cell.st-none { border-left-color: var(--border); opacity: .7; }
.cal-cell.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; border-radius: 999px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.cal-daynum { font-size: 14px; font-weight: 800; line-height: 22px; }
.cal-body { display: flex; flex-direction: column; gap: 2px; }
.cal-pill { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; align-self: flex-start; }
.cal-pill.bad { background: var(--danger); color: #fff; }
.cal-pill.ok { background: rgba(16,185,129,0.18); color: var(--success); }
.cal-sub { font-size: 10.5px; color: var(--text-dim); }
.cal-trip { position: absolute; top: 5px; right: 6px; font-size: 10px; font-weight: 700; color: #a855f7; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 4px 0; }
.cal-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.cal-leg .dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cal-leg .dot.st-ok { background: var(--success); }
.cal-leg .dot.st-gap { background: var(--danger); }
.cal-leg .dot.st-none { background: var(--border); }

/* Field-trip request queue */
.disp-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--danger); border-radius: 999px; }
.req-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.req-chip { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.req-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.req-chip b { font-weight: 800; }
.req-list { display: flex; flex-direction: column; gap: 8px; }
.req-card { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; color: var(--text); cursor: pointer; }
.req-card:hover { border-color: var(--accent); }
.req-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-ref { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.req-when { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.req-purpose { font-size: 15px; font-weight: 700; }
.req-meta { font-size: 12.5px; color: var(--text-dim); }
/* Trip-request queue spacing. Scoped to .treq because .req-card / .req-meta are
   also used by the (much denser) maintenance-job lists. */
.treq { gap: 16px; padding: 18px; }
.treq .req-chips { gap: 8px; }
.treq .req-list { gap: 12px; }
.treq .req-card { padding: 15px 18px; gap: 9px; border-radius: 14px; }
.treq .req-card-top { gap: 10px; }
.treq .req-purpose { font-size: 16px; line-height: 1.35; }
.treq .req-when { font-size: 13px; }
/* Facts are separated by space, not "·" — a bullet drawn between flex items
   orphans onto the front of the next line whenever the row wraps. */
.treq .req-meta {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 4px 20px; font-size: 13px; line-height: 1.55; color: var(--text-dim);
}
.treq .req-group + .req-group { margin-top: 26px; }
.treq .req-group-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.treq .req-group-head span { font-weight: 800; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.treq .req-card.req-stale { opacity: 0.72; }
.treq .req-more { align-self: center; margin-top: 6px; }
.treq .empty { padding: 34px 12px; }

.ts-pill { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ts-requested { background: rgba(245,158,11,0.16); color: var(--warning); }
.ts-approved { background: rgba(59,130,246,0.16); color: #3b82f6; }
.ts-assigned { background: rgba(168,85,247,0.16); color: #a855f7; }
.ts-confirmed { background: rgba(16,185,129,0.16); color: var(--success); }
.ts-denied { background: rgba(239,68,68,0.14); color: var(--danger); }
.ts-done { background: var(--surface); color: var(--text-dim); }
.ts-stale { background: rgba(148,163,184,0.18); color: var(--muted); }

.req-detail-head { display: flex; align-items: center; gap: 8px; }
.req-info { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.req-info > div { display: flex; gap: 10px; font-size: 14px; }
.req-info > div > span { flex: none; width: 120px; color: var(--text-dim); font-size: 12.5px; padding-top: 1px; }
.req-info > div > b { min-width: 0; word-break: break-word; }
/* Trip-request detail modal: clean, grouped, bordered info cards */
.req-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 14px 2px 6px; }
#req-detail .req-section-label:first-of-type { margin-top: 6px; }
#req-detail .req-info { gap: 0; margin: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
#req-detail .req-info:empty { display: none; }
#req-detail .req-info > div { gap: 12px; align-items: baseline; padding: 9px 13px; }
#req-detail .req-info > div + div { border-top: 1px solid var(--border); }
#req-detail .req-info > div > span { width: 118px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; padding-top: 0; }
#req-detail .req-info > div > b { flex: 1; font-weight: 600; text-align: left; }
.assign-list { display: flex; flex-direction: column; gap: 6px; }
.assign-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }
/* Multi-slot "Assign buses" sub-modal */
.asg-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.asg-row-num { flex: none; width: 46px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-dim); }
.asg-row select { flex: 1; min-width: 0; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
.asg-row select option:disabled { color: var(--text-dim); }
.asg-remove { flex: none; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; }
.asg-remove:hover { color: var(--danger); border-color: var(--danger); }

/* Shared searchable driver picker + its trigger field (board, trips, plans, assign) */
.driver-trigger { flex: 1; min-width: 0; text-align: left; padding: 9px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inside a modal `.modal label` (higher specificity) beats `.fld`'s flex column,
   so a trigger would sit INLINE after its label and only drop to its own line if
   its text happened to be too long. Pin it to a full-width block so the Driver
   and Bus fields line up regardless of what's selected. */
.fld > .driver-trigger { display: block; width: 100%; }
.driver-trigger.empty { color: var(--text-dim); font-weight: 500; }
.driver-trigger:hover { border-color: var(--accent); }
.dp-search { width: 100%; padding: 10px 12px; margin: 4px 0 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 15px; }
.dp-list { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow-y: auto; }
.dp-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.dp-row:hover { border-color: var(--accent); }
.dp-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dp-row.off { opacity: .5; cursor: not-allowed; background: var(--bg); }
.dp-row.off:hover { border-color: var(--border); }
.dp-unassign { color: var(--text-dim); font-weight: 500; }
.dp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-bus { flex: none; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.dp-reason { flex: none; font-size: 11.5px; font-weight: 700; color: var(--danger); background: rgba(239,68,68,0.12); padding: 2px 8px; border-radius: 999px; }
.dp-reason.muted { color: var(--text-dim); background: var(--bg); font-weight: 600; }
/* Busy / on leave but still tappable: the dispatcher may override and take them
   off what they're on. Amber = "there's a cost", not red = "you can't". */
.dp-reason.warn { color: var(--warning); background: rgba(234,179,8,0.14); }
.dp-row.warn { border-color: rgba(234,179,8,0.45); }
.dp-row.warn:hover { border-color: var(--warning); }
/* What the override would break, listed in the confirm sheet. */
.dp-clash { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dp-clash-line { padding: 9px 11px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 8px; font-size: 14px; font-weight: 600; }

/* ============================================================
 * Driver — "My Schedule"
 *
 * A day is a card, a run/trip is a line inside it with the time in a fixed
 * left column so the whole strip scans as one time column. The month grid
 * reuses the dispatch calendar's .cal-* shell; only the driver-specific
 * "time off" state is new.
 * ============================================================ */
.sched-wrap { display: flex; flex-direction: column; gap: 12px; }

.sday { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 4px; }
/* Today gets the brand rule — the one card a driver looks for on open. */
.sday.today { border-left: 4px solid var(--accent); }
.sday-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.sday-date { font-size: 14.5px; font-weight: 800; }
.sday-rel { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.sday-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.sday-empty { padding: 2px 0 10px; font-size: 13px; color: var(--text-dim); }

.sday-banner { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.sday-banner.off { background: rgba(16,185,129,0.14); color: var(--success); }
.sday-banner.pending { background: rgba(234,179,8,0.14); color: var(--warning); }
.sday-banner.closed { background: var(--bg-2); color: var(--text-dim); }

.sitem { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.sday-head + .sitem, .sday-banner + .sitem { border-top: none; padding-top: 0; }
.sitem-time { flex: 0 0 68px; font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sitem-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sitem-title { font-size: 14px; font-weight: 600; }
.sitem-sub { font-size: 12.5px; color: var(--text-dim); }
.sitem-warn { font-size: 12px; font-weight: 700; color: var(--warning); }

/* Time off — shared by the driver's list and the office's queue. */
.to-list { display: flex; flex-direction: column; gap: 8px; }
.tor { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.tor-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tor-when { font-size: 14px; font-weight: 700; }
.tor-meta { font-size: 12.5px; color: var(--text-dim); }
.tor-note { font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.tor-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.sched-ask { width: 100%; margin-top: 10px; }

/* The office's queue: anything still awaiting a decision is pulled forward. */
.abs-card { margin-bottom: 8px; }
.abs-card.pending { border-left: 4px solid var(--warning); }
.abs-actions { display: flex; gap: 6px; }

/* Driver calendar: a day off is its own state alongside the board's ok/gap.
 * Green already means "you're driving", so time off is deliberately NOT green —
 * it's the absence of work, and it reads as a quiet neutral block against the
 * green run days rather than as a second kind of "good". */
.cal-cell.st-off { border-left-color: var(--text-dim); background: var(--bg-2); }
.cal-pill.off { background: var(--surface-2); color: var(--text-dim); }
.cal-leg .dot.st-off { background: var(--text-dim); }
.sched-daydetail { margin-top: 4px; }

/* ===================== In-app chat =====================
 * Two screens sharing one route: the inbox, and one open conversation.
 *
 * The conversation is the only screen in the app that does NOT scroll the page —
 * the composer has to stay reachable above the tab bar while the history scrolls
 * behind it, which is what everyone expects a chat to do. So .chat-scroll owns
 * its own scrollbar at an explicit height and the composer is fixed.
 * --chat-chrome is everything that ISN'T the message list: the app header (75px,
 * see .topbar-app), main's padding, the thread header, the composer and the tab
 * bar. dvh rather than vh, so a mobile browser retracting its own toolbar doesn't
 * leave the composer stranded off-screen.
 */
:root {
  --chat-nav-h: 72px;
  --chat-chrome: 282px;
}

/* ---------- Inbox ---------- */
.chat-head { margin-bottom: 12px; }
.chat-head .btn-primary { width: 100%; padding: 12px; font-size: 15px; }

.chat-list { display: flex; flex-direction: column; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-row:last-child { border-bottom: none; }
.chat-row:active { background: var(--surface-2); }
.chat-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row-top { display: flex; align-items: baseline; gap: 8px; }
.chat-row-title { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-when { font-size: 11.5px; color: var(--text-dim); flex-shrink: 0; }
.chat-row-preview { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An unread row leans on weight and color, not a background wash: on a busy
   morning the list is mostly unread, and a wall of highlight says nothing. */
.chat-row.unread .chat-row-title { font-weight: 800; }
.chat-row.unread .chat-row-preview { color: var(--text); font-weight: 600; }
.chat-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chat-mute { font-size: 11px; opacity: 0.7; }

.chat-av {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 17px;
  font-weight: 700;
}
.chat-av-office { background: var(--brand-grad); color: #fff; }
.chat-av-group { background: var(--bg-3); }

/* ---------- One conversation ---------- */
.chat-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.chat-back {
  background: none;
  border: none;
  color: var(--brand-600);
  font-size: 30px;
  line-height: 1;
  padding: 0 6px 4px 0;
  cursor: pointer;
  font-family: inherit;
}
.chat-thread-title { flex: 1; min-width: 0; }
.chat-thread-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-sub { font-size: 12px; color: var(--text-dim); }

.chat-scroll {
  height: calc(100vh - var(--chat-chrome));
  height: calc(100dvh - var(--chat-chrome));
  min-height: 180px;
  overflow-y: auto;
  /* Don't hand the scroll up to the page when the history hits its end — the
     whole screen would bounce around under a fixed composer. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px;
}
.chat-empty { padding: 28px 20px; text-align: center; color: var(--text-dim); font-size: 13.5px; }

.chat-day { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; }
.chat-day span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 12px;
}
.chat-system {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 8px 12px;
}

.chat-msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; }
.chat-msg.run-start { margin-top: 10px; }
.chat-msg.mine { align-items: flex-end; }
.chat-msg-who { font-size: 11.5px; font-weight: 700; color: var(--brand-600); margin: 0 0 3px 10px; }
.chat-bubble {
  max-width: 78%;
  padding: 8px 12px 6px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.35;
  /* Squared-off inner corner — the classic "this side is mine" cue, and the only
     thing telling the two apart once the bubbles are stacked. */
  border-bottom-left-radius: 5px;
  word-break: break-word;
}
.chat-msg.mine .chat-bubble {
  background: var(--brand-600);
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
}
/* Mid-run bubbles lose the tail, so a burst of three lines reads as one block. */
.chat-msg:not(.run-start) .chat-bubble { border-bottom-left-radius: 16px; }
.chat-msg.mine:not(.run-start) .chat-bubble { border-bottom-right-radius: 16px; }
.chat-text { white-space: pre-wrap; }
.chat-time {
  display: block;
  text-align: right;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.chat-msg.mine .chat-time { color: rgba(255, 255, 255, 0.75); }

/* ---------- Composer ---------- */
.chat-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--chat-nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 47;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: var(--chrome-bg);
  border-top: 1px solid var(--chrome-border);
  /* Same compositing hint as .bottom-nav: iOS drops a fixed element out of the
     layer while a sibling is mid-transform (the swipe-between-tabs gesture). */
  transform: translateZ(0);
}
.chat-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  /* border-box so the auto-grow can set height straight from scrollHeight (+ the
     border) and land exactly on the content — otherwise it sits 2px short and
     the textarea shows a scrollbar on a single empty line. */
  box-sizing: border-box;
  max-height: 130px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  /* 16px exactly — anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
  line-height: 1.3;
}
.chat-composer textarea:focus { outline: none; border-color: var(--brand-600); }
.chat-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-send:active { transform: scale(0.94); }

/* ---------- Pickers (new message / new group / add people) ---------- */
.chat-search {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}
.chat-picklist { max-height: 46vh; overflow-y: auto; }
.chat-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-pick:last-child { border-bottom: none; }
.chat-pick:active { background: var(--surface-2); }
.chat-pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-pick-name { font-weight: 600; font-size: 15px; }
.chat-pick-sub { font-size: 12px; color: var(--text-dim); }
.chat-pick-check input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--brand-600); }

.chat-members { margin: 10px 0; max-height: 40vh; overflow-y: auto; }
.chat-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.chat-member:last-child { border-bottom: none; }

/* Unread count on the More row, for the roles that reach chat through it. */
.more-row-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* ============================================================
   PAYROLL
   Two audiences share these styles: the driver's Pay tab (hero total, period
   cards) and the office's Payroll tab under Dispatch (period table, rate grid).
   The shared unit is .payline — one priced run or trip — so a line reads the
   same on a phone as it does in the office table.
   ============================================================ */

/* ---- Driver: "confirm your trip time" prompt ----
   Sits above the total because the total is incomplete until it's answered. */
.pay-confirm {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.45);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.pay-confirm-h { margin: 0 0 3px; font-size: 14px; font-weight: 800; }
.pay-confirm-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.pay-confirm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.pay-confirm-row:hover { border-color: var(--accent); }
.pay-confirm-cta { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent); }

/* ---- Driver: the headline number ---- */
.pay-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
}
.pay-hero-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 700; }
.pay-hero-amt { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
.pay-hero-sub { font-size: 13px; color: var(--text-dim); }
.pay-hero-when { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.pay-note { margin: 8px 2px 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---- Driver: the period still running ----
   Sits directly under the hero and is deliberately quieter: it's an estimate two
   weeks from a paycheck, and the hero is the money that's actually coming. Flat,
   not gradient; one text size down; no accent colour anywhere on it. */
.pay-sofar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pay-sofar-label { flex: 1 1 100%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); font-weight: 700; }
.pay-sofar-amt { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pay-sofar-sub { font-size: 12px; color: var(--muted); }

/* ---- Period cards (driver) ---- */
.paycard {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.paycard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.paycard-head.static { cursor: default; }
.paycard-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.paycard-when { font-size: 13.5px; font-weight: 700; }
.paycard-sub { font-size: 12px; color: var(--text-dim); }
.paycard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.paycard-amt { font-size: 16px; font-weight: 800; }
.paycard-chev { flex-shrink: 0; color: var(--muted); font-size: 15px; }
.paycard-head.static .paycard-chev { display: none; }

/* ---- One priced run or trip — shared by both screens ---- */
.pay-lines { border-top: 1px solid var(--border); padding: 4px 10px 10px; }
.payline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px dashed var(--border);
}
.payline:last-child { border-bottom: none; }
.payline-when { flex-shrink: 0; display: flex; flex-direction: column; width: 58px; }
.payline-date { font-size: 12px; font-weight: 700; }
.payline-time { font-size: 11px; color: var(--muted); }
.payline-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.payline-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payline-basis { font-size: 11.5px; color: var(--text-dim); }
.payline-amt { flex-shrink: 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.payline.edited { background: rgba(249,115,22,0.06); }
/* A sick / not-driven day is a $0 row whose only job is to explain the salary
   balance above it. It reads as an annotation, not as a line that paid. */
.payline.payline-note { opacity: 0.72; }
.payline.payline-note .payline-amt { color: var(--muted); font-weight: 600; }
.pay-warn-txt { color: var(--warning); font-weight: 700; }

/* ---- Salaried driver: the makeup of a period, above their lines ---- */
.pay-salstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 9px 2px 10px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.pay-salstrip b { font-variant-numeric: tabular-nums; color: var(--text); }

/* ---- The split: which names the gross is written out to ---- */
.pay-checkstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 2px 10px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.pay-checkstrip-h { font-weight: 700; color: var(--text); }
.pay-check b { font-variant-numeric: tabular-nums; color: var(--text); }
/* A check the period couldn't cover in full is a number the office has to act
   on, not a rounding difference — it says so on the line itself. */
.pay-check.short { color: var(--warning); }
.pay-check.short b { color: var(--warning); }

/* ---- Change requests: the driver's copy and the office's queue ---- */
.pay-reqs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.pay-req {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.08);
  border-radius: 9px;
}
.pay-req-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pay-req-body b { font-size: 13px; }
.pay-req-body small { font-size: 11.5px; color: var(--text-dim); }
.pay-payee-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- Office: editing who a driver's checks are made out to ---- */
.payee-list { display: flex; flex-direction: column; gap: 1px; margin: 10px 0; }
.payee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
}
.payee-row:last-child { border-bottom: none; }
.payee-row.regular { background: var(--surface-2); border-radius: 8px; padding: 9px 10px; }
.payee-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.payee-name b { font-size: 13.5px; }
.payee-name small { font-size: 11.5px; }
.payee-add { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
/* The name needs the width — a congregation's full name is long and a truncated
   placeholder reads as a broken field. It takes its own row; kind and amount
   share the next one, which fits any modal width without a breakpoint. */
.payee-add .form-row-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payee-add .form-row-3 > :first-child { grid-column: 1 / -1; }

/* ---- Driver: rate reference ---- */
.pay-rates { display: flex; flex-direction: column; gap: 1px; }
.pay-rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pay-rate:last-child { border-bottom: none; }
.pay-rate span { color: var(--text-dim); }
.pay-rate b { font-variant-numeric: tabular-nums; }

/* ---- Office: the period screen ---- */
.pay-wrap { display: flex; flex-direction: column; gap: 12px; }
.pay-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-topbar select { width: auto; min-width: 190px; margin: 0; }
.pay-paydate { font-size: 12.5px; color: var(--text-dim); }
.pay-spacer { flex: 1; }
/* "Approve" stays visible before the period ends so the next step is obvious,
   but it has to LOOK unavailable — a live-looking button that ignores clicks
   reads as a broken app rather than a rule. */
.pay-topbar button:disabled { opacity: 0.45; cursor: not-allowed; }

.pay-banner {
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.pay-banner.ok { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.4); color: var(--text); }
.pay-banner.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.45); color: var(--text); }
.pay-banner.warn button { margin-left: 8px; }

.pay-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-total {
  flex: 1 1 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pay-total span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); font-weight: 700; }
.pay-total b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* The period still in progress. Dashed and dimmed so it can never be read as the
   payable figure sitting next to it — it's a fortnight from a paycheck. */
.pay-total.pay-total-soft {
  flex: 1 1 150px;
  background: none;
  border-style: dashed;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
button.pay-total.pay-total-soft:hover { border-color: var(--accent); }
.pay-total-soft b { font-size: 16px; color: var(--text-dim); }
.pay-total-soft small { font-size: 10.5px; }

/* Driver table. The grid is declared once and shared by the header and every
   row so the columns line up without a real <table>. */
.paytable { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--surface); }
.paytable-head,
.payrow-head {
  display: grid;
  grid-template-columns: 1fr 46px 46px 62px 84px 22px;
  align-items: center;
  gap: 6px;
}
.paytable-head {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  font-weight: 700;
}
.paytable-head span:not(:first-child) { text-align: right; }
.payrow { border-bottom: 1px solid var(--border); }
.payrow:last-child { border-bottom: none; }
.payrow-head {
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.payrow.open .payrow-head { background: var(--surface-2); }
.payrow-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payrow-stat { font-size: 12.5px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.payrow-amt { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.payrow-chev { color: var(--muted); text-align: right; }
.pay-warn { font-size: 12px; }
.pay-addadj { margin-top: 8px; }

/* ---- Office: rate editor ----
   Seven columns now: which deal the driver is on decides which of the money
   boxes even apply, so the switch comes first and the boxes it governs grey out
   rather than disappearing — a column that vanishes per row breaks the grid. */
.paytable.rates .paytable-head,
.payrow.rate-row { grid-template-columns: 1fr 96px 110px 78px 78px 78px 88px 104px; }
.payrow.rate-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.payrow.rate-row.inactive { opacity: 0.55; }
.pay-rate-in {
  margin: 0;
  padding: 6px 8px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* A number input's intrinsic width is wider than these columns; without this
     it refuses to shrink and pushes the column beside it out of line. */
  min-width: 0;
}
select.pay-rate-in { text-align: left; width: 100%; }
.pay-rate-in:disabled { opacity: 0.35; cursor: not-allowed; }
/* The sick-days column stacks a box over its "n used" readout. It needs an
   explicit min-width:0 and a full-width input, or the input keeps its intrinsic
   size and spills back over the trip-rate column beside it. */
.pay-sick-cell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.pay-sick-cell .pay-rate-in { width: 100%; min-width: 0; }
.pay-sick-cell small { font-size: 10px; text-align: right; }
/* Salary is a term of the deal, not a schedule fact — a quiet chip, not a status. */
.cpill-soft { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

/* Live "that's 2h 20m" readout under the trip-time inputs. */
.tt-calc { margin: 4px 0 10px; font-size: 12.5px; }

@media (max-width: 560px) {
  .paytable-head,
  .payrow-head { grid-template-columns: 1fr 34px 34px 52px 74px 18px; }
  /* Seven columns don't fit a phone. The header is dropped and each row becomes
     a labelled stack — the office edits rates on a laptop, but the screen still
     has to be usable when they don't. */
  .paytable.rates .paytable-head { display: none; }
  .paytable.rates .payrow.rate-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    padding: 10px 12px;
  }
  .paytable.rates .payrow-name { grid-column: 1 / -1; }
  .pay-hero-amt { font-size: 30px; }
}

/* ==========================================================================
   BILLING & THE SCHOOL PORTAL
   ==========================================================================
   Shared by the school's own screens (trips / book / billing) and the office's
   Billing admin. One set of components, because the two sides look at the same
   invoices — a status the school reads as "Overdue" must not read as something
   else on the office's list.

   Every colour comes from the theme tokens, so all of this follows light/dark
   without a second definition. Status colours stay SEMANTIC (green/amber/red);
   brand orange is reserved for the balance due and primary actions.
   ========================================================================== */

/* ---- the surface every billing block sits on ----
   `.card` in the markup is a grouping hook, not a style — this app has no
   generic .card rule, each component carries its own surface. One declaration
   here keeps every billing block identical instead of six near-copies. */
.btrip, .bempty, .binv, .binv-doc, .brow-card, .bform {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 8px;
}
.btrip:last-child, .binv:last-child { margin-bottom: 0; }

/* ---- status chips ---- */
.bpill {
  display: inline-block; flex: none;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.bp-ok     { background: rgba(59,130,246,.14);  color: #2563eb; }
.bp-wait   { background: rgba(161,98,7,.16);    color: var(--warning); }
.bp-done   { background: rgba(21,128,61,.14);   color: var(--success); }
.bp-bad    { background: rgba(220,38,38,.14);   color: var(--danger); }
.bp-credit { background: rgba(147,51,234,.14);  color: #9333ea; }
.bp-draft  { background: var(--bg-3);           color: var(--text-dim); }
.bp-void   { background: var(--bg-3);           color: var(--muted); text-decoration: line-through; }

/* ---- section headings inside the portal ---- */
.bsection-h {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 22px 4px 8px;
}
.bsection-h.small { margin: 16px 0 6px; }

/* ---- the department strip: who you are booking and billing as ---- */
.bstrip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow);
}
.bstrip-main { min-width: 0; flex: 1; }
.bstrip-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstrip-sub  { font-size: 13px; color: var(--text-dim); margin-top: 2px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstrip-bal {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  background: var(--accent-soft); border: 1px solid transparent; border-radius: 11px;
  padding: 7px 12px; cursor: pointer; color: var(--accent);
}
.bstrip-bal:hover { border-color: var(--accent); }
.bstrip-bal-n { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bstrip-bal-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

/* ---- explanatory notes (not errors — states with a next step) ---- */
.bnote { padding: 14px 16px; border-radius: 13px; margin-bottom: 12px;
         background: var(--surface-2); border: 1px solid var(--border); }
.bnote-warn { background: rgba(161,98,7,.10); border-color: rgba(161,98,7,.3); }
.bnote-t { font-size: 14px; font-weight: 700; }
.bnote-s { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 3px; }

/* ---- empty states: say what to do next, not just "none" ---- */
.bempty { text-align: center; padding: 30px 20px; }
.bempty-t { font-size: 15px; font-weight: 700; }
.bempty-s { font-size: 13.5px; color: var(--text-dim); margin: 5px 0 16px; line-height: 1.5; }

/* ---- a trip card in the school's list ---- */
.btrip { padding: 15px 16px; }
.btrip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.btrip-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.btrip-when { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.btrip-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
              font-size: 12.5px; color: var(--text-dim); }
.btrip-price { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.btrip-note { margin-top: 10px; padding: 9px 11px; border-radius: 10px;
              background: var(--surface-2); font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.btrip-note-bad { background: rgba(220,38,38,.10); color: var(--danger); }
.btrip-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btrip-actions:empty { display: none; }

/* ---- the booking form ----
   Fields are styled here rather than inherited: this app has no global input
   rule (its other forms are inside .modal, which styles its own), so without
   these the booking screen falls back to raw browser chrome. */
.bform { padding: 18px 16px 20px; }
.bform input, .bform textarea, .bform select {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 16px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.bform input:focus, .bform textarea:focus, .bform select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.bform textarea { resize: vertical; min-height: 74px; }
.bform .gpill input { width: auto; padding: 0; box-shadow: none; }
/* The "Other" pickup address, revealed only while Other is the chosen pill.
   Hidden at the autosuggest wrapper so the suggestion dropdown goes with it;
   the explicit display:none is defensive, since [hidden] is only a UA default
   and .addr-autosuggest sets its own display. */
.bform .addr-autosuggest[hidden] { display: none; }
.bform .bloc-other { margin-top: 8px; }
.bform .btn-primary { margin-top: 20px; }
.blbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin: 15px 0 5px; }
.bform > .blbl:first-child { margin-top: 0; }
.brow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gpills { display: flex; flex-wrap: wrap; gap: 7px; }
.gpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font-size: 13px; border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color .12s, background .12s, color .12s;
}
.gpill input { margin: 0; }
.gpill.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ---- the live estimate ---- */
.best {
  margin-top: 20px; padding: 16px 17px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.best-l { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.best-n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px;
          font-variant-numeric: tabular-nums; }
.best-s { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
/* Separated by a rule so it reads as a condition on the price, not as more
   small print about the arithmetic above it. */
.best-note { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--accent);
             font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.best-note strong { color: var(--text); }
.best.best-idle { background: var(--surface-2); border-color: var(--border); }
.best.best-idle .best-l { color: var(--muted); }
.best.best-idle .best-n { font-size: 16px; font-weight: 700; color: var(--text-dim); }

/* ---- balance hero on the school's Billing tab ---- */
.bbal { text-align: center; padding: 24px 16px 20px; }
.bbal-l { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bbal-n { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px;
          font-variant-numeric: tabular-nums; }
.bbal-due .bbal-n { color: var(--accent); }

/* ---- an invoice row (both sides use it) ---- */
.binv {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; padding: 14px 16px; cursor: pointer;
}
.binv-main { min-width: 0; flex: 1; }
.binv-no { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.binv-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binv-right { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.binv-amt { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.binv-list { display: flex; flex-direction: column; gap: 8px; }

/* ---- the invoice document (portal detail + admin modal) ---- */
.binv-doc { padding: 18px 16px 20px; }
.binv-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
                 padding-bottom: 14px; border-bottom: 2px solid var(--accent); }
.binv-doc-no { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.binv-doc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 0 4px;
                 font-size: 12.5px; color: var(--text-dim); }
.blines { margin-top: 8px; }
.bline { display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
         border-bottom: 1px solid var(--border); font-size: 14px; }
.bline-d { flex: 1; min-width: 0; }
.bline-d .muted { display: block; margin-top: 2px; }
.bline-a { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.bline-x { flex: none; background: none; border: none; color: var(--muted);
           font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.bline-x:hover { color: var(--danger); }
.btotal { border-bottom: none; font-weight: 800; font-size: 15.5px; padding-top: 13px;
          border-top: 1px solid var(--border); }
.bbalance { border-top: 2px solid var(--accent); color: var(--accent); font-size: 18px; }

/* ---- admin: the dashboard tiles ---- */
.bstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.bstat {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 14px 15px; border-radius: 13px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: border-color .12s;
}
.bstat:hover { border-color: var(--accent); }
.bstat-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bstat-l { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.bstat-bad .bstat-n { color: var(--danger); }
.badmin-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
/* The CSV export is an <a> so it downloads; it must still read as a menu row. */
.badmin-links a.admin-menu-item { text-decoration: none; color: inherit; }

/* ---- admin: a generic list row with an action on the right ---- */
.brow-card { display: flex; align-items: center; justify-content: space-between; gap: 14px;
             width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 8px; }
.brow-t { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.brow-s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.brow-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.brow-bal { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---- admin: search + status chips ---- */
.binput { width: 100%; padding: 11px 13px; font-size: 15px; margin-bottom: 10px;
          border: 1px solid var(--border); border-radius: 11px;
          background: var(--surface); color: var(--text); }
.bchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.bchip { padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
         border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); }
.bchip.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ---- admin: the invoice modal ---- */
.binv-modal { max-height: 76vh; overflow-y: auto; }
.binv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.binv-acts .btn-ghost, .binv-acts .btn-primary { flex: 1 1 auto; text-align: center; text-decoration: none; }
.bhistory { margin-top: 18px; font-size: 12.5px; color: var(--text-dim); }
.bhistory summary { cursor: pointer; font-weight: 700; }
.bhistory ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }

/* ---- admin: the aging table ---- */
.btable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.btable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.btable th { text-align: right; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
             text-transform: uppercase; color: var(--muted);
             padding: 0 0 9px 12px; border-bottom: 1px solid var(--border); }
.btable th:first-child, .btable td:first-child { text-align: left; padding-left: 0; }
.btable td { text-align: right; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--border);
             font-variant-numeric: tabular-nums; }
.btable tfoot td { border-bottom: none; border-top: 2px solid var(--border); }
.bcell-late { color: var(--danger); font-weight: 600; }

@media (max-width: 560px) {
  .bstats { grid-template-columns: 1fr 1fr; }
  .bbal-n { font-size: 34px; }
  .best-n { font-size: 26px; }
  .brow { grid-template-columns: 1fr; }
}

/* ---- the billing line on the office's trip detail ---- */
.req-bill { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
            border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.req-bill-l { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
              color: var(--muted); flex: none; }
.req-bill-v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }