/* =========================================================================
   Isotrace dark theme  (v0.20)
   Purely ADDITIVE: every rule is scoped under :root[data-theme="dark"], so the
   existing light theme renders byte-for-byte identically when no theme
   (or theme="light") is set. Light is the default; dark only applies while the
   user has toggled it on for the current session. All text/surface pairs
   verified >= WCAG AA.

   Selectors are prefixed with :root[...] (not just [...]) to give them enough
   specificity to override page rules like `.card .hd .veh`; on exact ties this
   file wins because it is linked AFTER each page's inline <style>.
   ========================================================================= */

:root[data-theme="dark"]{
  --brand:#2b7fa0;
  --brand-dark:#4fb0d4;   /* used for links / headings on dark surfaces */
  --accent:#e0871c;
  --ok:#37c07a;
  --ink:#e6edf1;          /* primary text */
  --muted:#9fb0ba;        /* secondary text */
  --line:#2b3742;         /* borders */
  --bg:#0f171d;           /* page background */
  --surface:#1a2229;      /* cards, modals, panels */
  --surface-2:#222d36;    /* inputs, rows, hover, secondary buttons, pills */
  --ok-bg:#15291f;    --ok-fg:#5fd39a;
  --warn-bg:#2e2410;  --warn-fg:#f0c860;
  --danger-bg:#301a19;--danger-fg:#f28b82;
  color-scheme: dark;
}

/* ---- page + generic elements ------------------------------------------ */
:root[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }
:root[data-theme="dark"] a{ color:var(--brand-dark); }
:root[data-theme="dark"] hr{ border-color:var(--line); }
:root[data-theme="dark"] ::placeholder{ color:var(--muted); opacity:1; }

/* ---- main surfaces ----------------------------------------------------- */
:root[data-theme="dark"] :is(.card,.modal,.intervals,.empty,.tablecard,.panel,
  .addbox,.subbar,.review,.controls,.bar,.section-hd,.unsched,.note,.stat,
  .prog,.export,.legend,.summary,.sheet,.box){
  background:var(--surface); border-color:var(--line); color:var(--ink);
}
:root[data-theme="dark"] :is(.card,.panel) :is(h1,h2,h3,.who,.hd,.veh){ color:var(--ink); }

/* ---- secondary surfaces: rows, tiles, inputs, pills ------------------- */
:root[data-theme="dark"] :is(.row,.tile,.hrow,.ivrow,.nso,.stoprow,.stop,.ustop,
  .car,.veh,.ctchip,.taskchip){
  background:var(--surface-2); border-color:var(--line); color:var(--ink);
}
/* the vehicle-selector pill is nested 3 deep on some pages: cover it directly */
:root[data-theme="dark"] :is(.card .hd .veh,.hd .veh,.veh){
  background:var(--surface-2); color:var(--ink);
}
:root[data-theme="dark"] .veh .vbtn{ color:var(--brand-dark); }
:root[data-theme="dark"] :is(input,select,textarea,.modal input,.modal select,
  .modal textarea,.field input,.field select,.field textarea){
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
:root[data-theme="dark"] :is(.row,.hrow,.ivrow){ border-top-color:var(--line); }

/* rows that alternate to a faint tint in light mode */
:root[data-theme="dark"] :is(.row.off,.tile.off,tr:nth-child(even),.zebra){
  background:var(--surface);
}

/* ---- topbar ------------------------------------------------------------ */
:root[data-theme="dark"] .topbar{ background:var(--brand-dark); }
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .topbar a{ color:#fff; }

/* ---- admin nav dropdown (structure + light in nav.css) ----------------- */
/* The panel is a light #fff card by default; without these it would sit on a
   dark page as a white slab. Lives here rather than nav.css because dark rules
   belong to this file by contract. */
/* The Menu button is a solid WHITE pill in both themes (it has to out-shout the
   translucent links beside it). --brand-dark flips to a pale blue in dark mode,
   which would leave pale-on-white, so pin the label to the light theme's teal. */
:root[data-theme="dark"] .navbtn{ color:#0e4659; background:#fff; }
:root[data-theme="dark"] .navbtn:hover,
:root[data-theme="dark"] .navbtn[aria-expanded="true"]{ background:#e8f1f5; }
:root[data-theme="dark"] .navpanel{ background:var(--surface); border-color:var(--line);
                                    box-shadow:0 10px 28px rgba(0,0,0,.5); }
:root[data-theme="dark"] .navpanel a{ color:var(--ink); }
:root[data-theme="dark"] .navpanel a:hover{ background:var(--surface-2); }
:root[data-theme="dark"] .navpanel a.cur{ background:var(--surface-2); color:var(--brand-dark); }
:root[data-theme="dark"] .navgrp{ color:var(--muted); }
:root[data-theme="dark"] .navsep{ background:var(--line); }

/* ---- tables (telemetry) ----------------------------------------------- */
:root[data-theme="dark"] table{ color:var(--ink); }
:root[data-theme="dark"] :is(th,td){ border-color:var(--line); }
:root[data-theme="dark"] thead :is(th,td){ background:var(--surface-2); color:var(--ink); }
:root[data-theme="dark"] tbody tr{ background:var(--surface); }

/* ---- buttons ----------------------------------------------------------- */
:root[data-theme="dark"] :is(.btn.ghost,.btn.link,.nav,.refresh,.back,.add,.addbtn,
  .end,.export,.review,.pweye){
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
:root[data-theme="dark"] .btn.link{ background:none; color:var(--brand-dark); }
:root[data-theme="dark"] :is(.btn.ghost:hover,.nav:hover,.refresh:hover,.back:hover,
  .addbtn:hover,.end:hover,.export:hover){ background:#2c3a45; }

/* ---- status: OK / green ------------------------------------------------ */
:root[data-theme="dark"] :is(.chip.ok,.pill.online,.pill.on,.chip.delivered,
  .status.delivered,.tag.done,.tag.trf-clear,.badge.grace){
  background:var(--ok-bg); border-color:#26543c; color:var(--ok-fg);
}
:root[data-theme="dark"] :is(.chip.ok .s,.tag.done,.eta-clock,.dt.done){ color:var(--ok-fg); }

/* ---- status: WARN / amber --------------------------------------------- */
:root[data-theme="dark"] :is(.chip.due_soon,.est,.notice,.tag.stat,.tag.open,
  .tag.returning,.taskchip,.tag.trf-moderate,.tag.trf-heavy,.badge-test,.badge.carry,
  .badge.back,.status.arriving,.chip.arriving,.stattag){
  background:var(--warn-bg); border-color:#5a4a20; color:var(--warn-fg);
}
/* step-number circle + placeholder heading + test badge text: not warnings */
:root[data-theme="dark"] .seq{ background:var(--surface-2); color:var(--ink); }
:root[data-theme="dark"] .ph-title{ color:var(--brand-dark); }
:root[data-theme="dark"] .badge-test{ color:var(--warn-fg); }
:root[data-theme="dark"] :is(.chip.due_soon .s,.est,.note,.low,.unsched-hd,.udur,
  .tag.returning,.tag.trf-moderate,.tag.trf-heavy){ color:var(--warn-fg); }

/* ---- status: DANGER / red --------------------------------------------- */
:root[data-theme="dark"] :is(.chip.overdue,.pill.offline,.pill.off,.tag.trf-severe,
  .tag.stat,.badge.out,.badge.flagged,.status.enroute,.chip.enroute,
  .nso.has-open,.veh.nso.out .tag){
  background:var(--danger-bg); border-color:#5e2a27; color:var(--danger-fg);
}
:root[data-theme="dark"] :is(.chip.overdue .s,.err,.modal .err,.rmstop,.dlvstop,
  .tag.stat,.tag.trf-severe,.veh.nso.out .tag,.veh.nso.out .tag small){ color:var(--danger-fg); }

/* ---- neutral / no-record / info chips --------------------------------- */
:root[data-theme="dark"] :is(.chip.no_record,.chip.unknown,.tag.custom,.ctchip,
  .badge.carry){
  background:var(--surface-2); border-color:var(--line); color:var(--muted);
}
:root[data-theme="dark"] .tag.custom{ color:var(--brand-dark); }
:root[data-theme="dark"] :is(.chip.no_record .s,.chip.unknown .s,.none,.muted,
  .hmeta,.sub,.mveh,.eyebrow,.ph-meta,.ph-gen,.seg,.run){ color:var(--muted); }

/* ---- popups sitting on the map (light bubbles) ------------------------ */
:root[data-theme="dark"] :is(.pop,.pop .ptask,.mapboxgl-popup-content){
  background:var(--surface); color:var(--ink); border-color:var(--line);
}
:root[data-theme="dark"] .mapboxgl-popup-content{ box-shadow:0 6px 20px rgba(0,0,0,.5); }
:root[data-theme="dark"] .mapboxgl-popup-tip{ border-top-color:var(--surface); border-bottom-color:var(--surface); }

/* ---- overlay dim behind modals ---------------------------------------- */
:root[data-theme="dark"] .overlay{ background:rgba(0,0,0,.6); }

/* ---- the floating toggle button (injected by theme.js) ---------------- */
#themeToggle{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface,#fff); color:var(--ink,#1f2a30);
  box-shadow:0 4px 14px rgba(0,0,0,.22); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform .12s ease, background .15s ease;
}
#themeToggle:hover{ transform:translateY(-1px); }
#themeToggle svg{ width:20px; height:20px; display:block; }
/* light-mode default look for the button */
:root:not([data-theme="dark"]) #themeToggle{ background:#fff; color:#1f2a30; border-color:#dde4e7; }