/* ═══════════════════════════════════════════════
   DTM Fleet Intelligence — style.css
   Shared design tokens + components.
   Imported by index.html and config-ui panels.
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* surface */
  --ink:       #050911;
  --ink2:      #080f1e;
  --panel:     rgba(10, 18, 38, .72);
  --panel2:    rgba(14, 24, 48, .60);

  /* borders */
  --edge:      rgba(100, 140, 210, .20);
  --edge2:     rgba(100, 140, 210, .12);
  --edge3:     rgba(100, 140, 210, .07);

  /* brand */
  --azure:     #4191F0;
  --sky:       #7DCFFF;
  --sky2:      #a8dfff;
  --teal:      #1EC8C8;

  /* status — .teal/.slate classes use --work/--slate (the --teal var is brand) */
  --green:     #22EEA8;
  --work:      #17C8B5;
  --amber:     #FFB020;
  --red:       #FF4D6A;
  --slate:     #7B8CE4;
  --grey:      #4E6280;

  /* text */
  --tx1:       #ECF2FF;
  --tx2:       #9AAEC8;
  --tx3:       #566880;
  --tx4:       #3a4d65;

  /* type */
  --mono:      'JetBrains Mono', ui-monospace, monospace;
  --sans:      'Space Grotesk', system-ui, sans-serif;

  /* radius */
  --r-sm:      6px;
  --r-md:      10px;
  --r-lg:      14px;
  --r-xl:      18px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--ink);
  color: var(--tx1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
select { font-family: inherit; }
input  { font-family: inherit; }

/* ── SCANLINES + VIGNETTE ── */
.fx-scanlines::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.fx-vignette::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 8;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ── WORDMARK ── */
.dtm-wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--sky);
  white-space: nowrap;
  position: relative;
  text-shadow:
    0 0 28px rgba(125, 207, 255, .38),
    0 0 60px rgba(125, 207, 255, .14);
}
.dtm-wordmark::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(125,207,255,.5), rgba(125,207,255,0));
}
.dtm-subbrand { display: flex; flex-direction: column; gap: 1px; }
.dtm-subbrand .k { font-size: 11px; letter-spacing: 5px; color: var(--tx2); text-transform: uppercase; font-weight: 500; }
.dtm-subbrand .s { font-size: 9.5px; letter-spacing: 3px; color: var(--tx3); text-transform: uppercase; }

/* ── TOP BAR ── */
.dtm-bar {
  display: flex; align-items: center; gap: 16px;
  flex: 0 0 auto; position: relative; z-index: 10;
  padding: 12px 14px 0;
}
.dtm-bardiv {
  width: 1px; height: 40px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--edge), transparent);
}

/* ── TALLY CARDS ── */
.dtm-tally {
  position: relative; min-width: 86px; padding: 7px 12px 7px;
  border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--edge3);
  backdrop-filter: blur(12px);
}
.dtm-tally::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events: none;
}
.dtm-tally .n { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.dtm-tally .l { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--tx3); margin-top: 3px; }
.dtm-tally .pip { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; }
.dtm-tally.green .n  { color: var(--green); } .dtm-tally.green .pip { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dtm-tally.teal  .n  { color: var(--work);  } .dtm-tally.teal  .pip { background: var(--work);  box-shadow: 0 0 8px var(--work); }
.dtm-tally.amber .n  { color: var(--amber); } .dtm-tally.amber .pip { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dtm-tally.red   .n  { color: var(--red);   } .dtm-tally.red   .pip { background: var(--red);   box-shadow: 0 0 8px var(--red); }
.dtm-tally.slate .n  { color: var(--slate); } .dtm-tally.slate .pip { background: var(--slate); }
.dtm-tally.grey  .n  { color: var(--grey);  } .dtm-tally.grey  .pip { background: var(--grey); }
/* No sign-in: informational (not a filter) — amber ring pip, alarm pulse when > 0 */
.dtm-tally.nosign { cursor: default; }
.dtm-tally.nosign .n  { color: var(--amber); }
.dtm-tally.nosign .pip { background: transparent; border: 2px solid var(--amber); box-sizing: border-box; }
.dtm-tally.nosign.alarm { animation: tally-alarm 2s ease-in-out infinite; }
.dtm-tally.red.alarm { animation: tally-alarm 2s ease-in-out infinite; }
@keyframes tally-alarm {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 3px rgba(255,77,106,.12), inset 0 0 12px rgba(255,77,106,.06); }
}

/* ── CLOCK ── */
.dtm-clock { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.dtm-clock .time { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: 2px; line-height: 1; color: var(--tx1); }
.dtm-clock .date { font-size: 10px; letter-spacing: 2.5px; color: var(--tx3); text-transform: uppercase; }
.dtm-status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.dtm-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: live-pulse 2.5s ease-in-out infinite; }
.dtm-status.stale .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 1s steps(2) infinite; }
.dtm-status.dead  .dot { background: var(--red);   box-shadow: 0 0 8px var(--red);   animation: blink .7s steps(2) infinite; }
.dtm-status .txt { font-family: var(--mono); font-size: 10px; color: var(--tx2); letter-spacing: .4px; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes blink      { 50% { opacity: .2; } }

/* ── VIEW PROGRESS BAR ── */
.dtm-viewbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--azure), var(--teal));
  transform-origin: left; opacity: .75;
}

/* ── PANEL (glass card) ── */
.dtm-panel {
  background: var(--panel);
  border: 1px solid var(--edge3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.dtm-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(125,207,255,.03) 0%, transparent 40%);
  pointer-events: none;
}
.dtm-panel-head {
  padding: 13px 15px 10px;
  border-bottom: 1px solid var(--edge3);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.dtm-panel-head .t { font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--tx1); font-weight: 600; }
.dtm-panel-head .c { font-family: var(--mono); font-size: 11px; color: var(--tx3); }

/* ── EXCEPTION CARDS ── */
.dtm-card {
  position: relative; padding: 10px 12px 10px 14px;
  border-radius: var(--r-md); cursor: pointer;
  background: rgba(10,18,40,.55); border: 1px solid var(--edge3);
  transition: transform .1s, border-color .12s, background .12s;
}
.dtm-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.dtm-card.red   ::before { background: var(--red);   box-shadow: 0 0 10px rgba(255,77,106,.5); }
.dtm-card.amber ::before { background: var(--amber); box-shadow: 0 0 10px rgba(255,176,32,.4); }
.dtm-card.green ::before { background: var(--green); }
.dtm-card.teal  ::before { background: var(--work); }
.dtm-card.slate ::before { background: var(--slate); }
.dtm-card.grey  ::before { background: var(--grey); }
.dtm-card.truck ::before { background: transparent; border: 1.5px solid var(--amber); box-sizing: border-box; }
.dtm-card.hot, .dtm-card:hover {
  transform: translateX(-2px);
  border-color: rgba(125,207,255,.35);
  background: rgba(20,36,70,.72);
}
.dtm-card .top  { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dtm-card .nm   { font-size: 13.5px; font-weight: 600; color: var(--tx1); letter-spacing: .2px; }
.dtm-card .vh   { font-family: var(--mono); font-size: 10.5px; color: var(--sky); letter-spacing: .4px; }
.dtm-card .rs   { font-size: 11.5px; color: var(--tx2); margin-top: 3px; line-height: 1.35; }
.dtm-card .meta { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-top: 6px; }
.dtm-card .tag  { font-family: var(--mono); font-size: 9.5px; color: var(--tx3); background: rgba(255,255,255,.025); border: 1px solid var(--edge3); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.dtm-card .tag.loc { color: var(--tx2); }
.dtm-card .dw   { color: var(--amber); }
.dtm-card.red .dw { color: var(--red); }
.dtm-card .tag.carry { color: var(--amber); border-color: rgba(255,176,32,.35); }

/* ── SECTION DIVIDER ── */
.dtm-sec { display: flex; align-items: center; gap: 8px; margin: 4px 1px 0; }
.dtm-sec .lbl { font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--tx3); }
.dtm-sec .ln  { flex: 1; height: 1px; background: var(--edge3); }
.dtm-sec .ct  { font-family: var(--mono); font-size: 10px; color: var(--tx4); }

/* ── GREEN STRIP ── */
.dtm-greenstrip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--r-md); margin-top: 2px;
  background: linear-gradient(90deg, rgba(34,238,168,.09), rgba(34,238,168,.02));
  border: 1px solid rgba(34,238,168,.18);
}
.dtm-greenstrip .gd { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.dtm-greenstrip .gn { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--green); line-height: 1; }
.dtm-greenstrip .gl { font-size: 11px; color: var(--tx2); letter-spacing: .3px; }

/* ── LEGEND ── */
.dtm-legend {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 10px;
  border-radius: var(--r-md); pointer-events: none;
  background: rgba(5,9,17,.78); border: 1px solid var(--edge2);
  backdrop-filter: blur(8px);
}
.dtm-legend .li { display: flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: 1px; color: var(--tx2); text-transform: uppercase; }
.dtm-legend .sw { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── FOOTER ── */
.dtm-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 0 14px 8px;
  font-family: var(--mono); font-size: 10px; color: var(--tx3); letter-spacing: .5px;
}
.dtm-foot .b  { display: flex; align-items: center; gap: 6px; }
.dtm-foot .sp { flex: 1; }
.dtm-foot .hi { color: var(--sky); }
.dtm-foot b   { color: var(--sky); }
.dtm-foot .src {
  padding: 2px 8px; border-radius: 4px; border: 1px solid var(--edge2);
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 9px;
}
.dtm-foot .src.live  { color: var(--green); border-color: rgba(34,238,168,.35); }
.dtm-foot .src.mock  { color: var(--amber); border-color: rgba(255,176,32,.35);  }

/* ── MAPBOX MARKERS ── */
.dtm-marker {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid rgba(5,9,17,.9);
  transition: transform .15s, box-shadow .15s;
}
.dtm-marker:hover, .dtm-marker.hot { transform: scale(1.38); z-index: 999 !important; }
.dtm-marker.green { background: var(--green); box-shadow: 0 0 0 1.5px var(--green), 0 0 18px 4px rgba(34,238,168,.45); }
.dtm-marker.teal  { background: var(--work);  box-shadow: 0 0 0 1.5px var(--work),  0 0 18px 4px rgba(23,200,181,.40); }
.dtm-marker.amber { background: var(--amber); box-shadow: 0 0 0 1.5px var(--amber), 0 0 18px 4px rgba(255,176,32,.40); }
.dtm-marker.red   { background: var(--red);   box-shadow: 0 0 0 1.5px var(--red),   0 0 18px 4px rgba(255,77,106,.50); animation: red-pulse 2s ease-in-out infinite; }
.dtm-marker.slate { background: var(--slate); box-shadow: 0 0 0 1.5px var(--slate), 0 0 8px 2px rgba(123,140,228,.35); }
.dtm-marker.grey  { background: var(--grey);  box-shadow: 0 0 0 1.5px var(--grey),  0 0 8px 2px rgba(78,98,128,.30); }
@keyframes red-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--red), 0 0 18px 4px rgba(255,77,106,.5); }
  50%       { box-shadow: 0 0 0 3px rgba(255,77,106,.25), 0 0 28px 8px rgba(255,77,106,.3); }
}
.dtm-ring {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: ring-expand 2s ease-out infinite; pointer-events: none;
}
.dtm-ring.r2 { animation-delay: .7s; }
@keyframes ring-expand {
  0%   { transform: scale(.5); opacity: .9; }
  70%  { opacity: 0; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* ── MAPBOX POPUP ── */
.dtm-popup .mapboxgl-popup-content {
  background: rgba(8,14,32,.93); border: 1px solid rgba(100,140,210,.22);
  border-radius: var(--r-md); padding: 9px 13px;
  color: var(--tx1); font-family: var(--sans);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}
.mapboxgl-popup-tip { border-top-color: rgba(8,14,32,.93) !important; border-bottom-color: rgba(8,14,32,.93) !important; }
.dtm-popup .mapboxgl-popup-close-button { color: var(--tx3); font-size: 16px; top: 4px; right: 6px; }
.pop-nm  { font-size: 13px; font-weight: 600; color: var(--tx1); }
.pop-vh  { font-family: var(--mono); font-size: 10px; color: var(--sky); margin-top: 1px; }
.pop-rs  { font-size: 11px; color: var(--tx2); margin-top: 4px; line-height: 1.4; }
.pop-loc { font-size: 10.5px; color: var(--tx3); margin-top: 3px; }
.pop-dw  { font-family: var(--mono); font-size: 10px; margin-top: 5px; padding: 2px 7px; border-radius: 4px; display: inline-block; border: 1px solid currentColor; }
.pop-dw.red   { color: var(--red);   border-color: rgba(255,77,106,.4); background: rgba(255,77,106,.08); }
.pop-dw.amber { color: var(--amber); border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.08); }
.pop-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pop-spd  { font-family: var(--mono); font-size: 10px; color: var(--tx2); background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 4px; }
.pop-hos  { font-family: var(--mono); font-size: 10px; color: var(--sky); background: rgba(125,207,255,.08); padding: 2px 6px; border-radius: 4px; }
.pop-duty { font-family: var(--mono); font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: .5px; }

/* ── MAPBOX CHROME OVERRIDES ── */
.mapboxgl-ctrl-attrib { background: rgba(5,9,17,.65) !important; border-radius: 6px !important; }
.mapboxgl-ctrl-attrib a { color: rgba(100,140,210,.5) !important; }
.mapboxgl-ctrl-logo { opacity: .3 !important; filter: invert(1) !important; }
.mapboxgl-ctrl-group { background: rgba(8,14,32,.85) !important; border: 1px solid rgba(100,140,210,.2) !important; border-radius: 8px !important; }
.mapboxgl-ctrl-group button { background: transparent !important; }
.mapboxgl-ctrl-icon { filter: invert(.7) sepia(.2) hue-rotate(180deg) !important; }

/* ── SCROLLBAR ── */
.dtm-scroll { scrollbar-width: thin; scrollbar-color: rgba(100,140,210,.2) transparent; }
.dtm-scroll::-webkit-scrollbar { width: 5px; }
.dtm-scroll::-webkit-scrollbar-thumb { background: rgba(100,140,210,.2); border-radius: 3px; }

/* ── FORM CONTROLS (config UI) ── */
.dtm-input, .dtm-select {
  background: rgba(5,9,17,.7); border: 1px solid var(--edge);
  border-radius: var(--r-sm); color: var(--tx1); font-family: var(--sans);
  font-size: 13px; padding: 7px 10px; width: 100%;
  transition: border-color .15s;
  appearance: none; -webkit-appearance: none;
}
.dtm-input:focus, .dtm-select:focus { outline: none; border-color: var(--sky); }
.dtm-input::placeholder { color: var(--tx4); }

.dtm-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--tx3); display: block; margin-bottom: 5px;
}

/* ── BUTTONS ── */
.dtm-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--edge); background: transparent; color: var(--tx2);
  transition: all .15s; cursor: pointer; white-space: nowrap;
}
.dtm-btn:hover { color: var(--tx1); background: rgba(125,207,255,.08); border-color: var(--edge2); }
.dtm-btn.primary { color: var(--sky); border-color: rgba(125,207,255,.35); background: rgba(125,207,255,.08); }
.dtm-btn.primary:hover { background: rgba(125,207,255,.16); }
.dtm-btn.danger  { color: var(--red); border-color: rgba(255,77,106,.3); background: rgba(255,77,106,.06); }
.dtm-btn.danger:hover  { background: rgba(255,77,106,.12); }
.dtm-btn.success { color: var(--green); border-color: rgba(34,238,168,.3); background: rgba(34,238,168,.07); }
.dtm-btn.success:hover { background: rgba(34,238,168,.14); }
.dtm-btn.sm { font-size: 9.5px; padding: 4px 9px; letter-spacing: 1px; }
.dtm-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── CONFIG SLIDE-OUT PANEL ── */
.dtm-cfg-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.dtm-cfg-overlay.open { opacity: 1; pointer-events: all; }

.dtm-cfg-drawer {
  position: fixed; top: 0; right: -440px; bottom: 0; width: 440px; z-index: 101;
  background: rgba(7,12,24,.97); border-left: 1px solid var(--edge);
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.22,.68,0,1.2);
  box-shadow: -20px 0 60px rgba(0,0,0,.6);
}
.dtm-cfg-drawer.open { right: 0; }

.dtm-cfg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--edge3); flex-shrink: 0;
}
.dtm-cfg-head .t { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--tx1); font-weight: 600; }

.dtm-cfg-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.dtm-cfg-body::-webkit-scrollbar { width: 5px; }
.dtm-cfg-body::-webkit-scrollbar-thumb { background: rgba(100,140,210,.2); border-radius: 3px; }

.dtm-cfg-section { display: flex; flex-direction: column; gap: 10px; }
.dtm-cfg-section-head {
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--azure);
  display: flex; align-items: center; gap: 10px;
}
.dtm-cfg-section-head::after { content: ''; flex: 1; height: 1px; background: var(--edge3); }

/* View row in config */
.dtm-view-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--r-md);
  background: rgba(10,18,40,.55); border: 1px solid var(--edge3);
  transition: border-color .12s;
}
.dtm-view-row:hover { border-color: var(--edge); }
.dtm-view-row .drag { color: var(--tx4); cursor: grab; font-size: 16px; flex-shrink: 0; }
.dtm-view-row .drag:active { cursor: grabbing; }
.dtm-view-row .vname { flex: 1; font-size: 13px; font-weight: 600; color: var(--tx1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtm-view-row .vstyle { font-family: var(--mono); font-size: 9px; color: var(--tx3); letter-spacing: .5px; }
.dtm-view-row .vdwell { font-family: var(--mono); font-size: 10px; color: var(--azure); white-space: nowrap; }
.dtm-toggle { position: relative; width: 32px; height: 18px; flex-shrink: 0; }
.dtm-toggle input { opacity: 0; width: 0; height: 0; }
.dtm-toggle .slider {
  position: absolute; inset: 0; border-radius: 9px;
  background: var(--tx4); transition: .2s;
  cursor: pointer;
}
.dtm-toggle .slider::before {
  content: ''; position: absolute; width: 12px; height: 12px;
  left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s;
}
.dtm-toggle input:checked + .slider { background: var(--green); }
.dtm-toggle input:checked + .slider::before { transform: translateX(14px); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .dtm-ring, .dtm-marker.red, .dtm-status .dot, .dtm-tally.red.alarm {
    animation: none !important; transition: none !important;
  }
}

/* ═══════════════════════════════════════════════
   LIGHT THEME
   Set data-theme="light" on <html>. Everything below is an override —
   the dark theme above is untouched, so the toggle is symmetric.
   Palette matches the Fleet Intelligence hub (periwinkle / orange on a
   cool-white gradient) so the wall reads as part of the same product.
═══════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* surface */
  --ink:       #eef2ff;
  --ink2:      #f6f8ff;
  --panel:     rgba(255, 255, 255, .68);
  --panel2:    rgba(255, 255, 255, .55);

  /* borders */
  --edge:      rgba(95, 117, 237, .28);
  --edge2:     rgba(95, 117, 237, .18);
  --edge3:     rgba(95, 117, 237, .12);

  /* brand — periwinkle stands in for the neon sky/azure */
  --azure:     #3d51d4;
  --sky:       #3d51d4;
  --sky2:      #5f75ed;
  --teal:      #0f7f7f;

  /* status — darkened so they hold contrast on white */
  --green:     #0f8a4f;
  --work:      #0f7f7f;
  --amber:     #b46b00;
  --red:       #d62030;
  --slate:     #55639e;
  --grey:      #8892ae;

  /* text — muted tones are darker than the hub's because this is read
     across a room, not at desk distance */
  --tx1:       #101a3d;
  --tx2:       #414c70;
  --tx3:       #626c8c;
  --tx4:       #8a93ae;
}

/* The CRT flourishes read as grime on a light screen. */
:root[data-theme="light"] .fx-scanlines::after,
:root[data-theme="light"] .fx-vignette::before { display: none; }

:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse 130% 70% at 70% -15%, rgba(95,117,237,.10) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 5% 105%, rgba(255,103,2,.07) 0%, transparent 50%),
    linear-gradient(160deg, #eef2ff 0%, #fdfaf6 100%);
}

/* Wordmark glow → clean ink */
:root[data-theme="light"] .dtm-wordmark { text-shadow: none; }
:root[data-theme="light"] .dtm-wordmark::after {
  background: linear-gradient(90deg, rgba(95,117,237,.55), rgba(95,117,237,0));
}

/* Panels + cards */
:root[data-theme="light"] .dtm-panel {
  border-color: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 32px rgba(31,45,97,.10);
}
:root[data-theme="light"] .dtm-panel::before {
  background: linear-gradient(160deg, rgba(255,255,255,.5) 0%, transparent 40%);
}
:root[data-theme="light"] .dtm-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(95,117,237,.14);
}
:root[data-theme="light"] .dtm-card.hot,
:root[data-theme="light"] .dtm-card:hover {
  background: #fff;
  border-color: rgba(95,117,237,.40);
  box-shadow: 0 6px 20px rgba(31,45,97,.10);
}
:root[data-theme="light"] .dtm-card .tag {
  background: rgba(16,26,61,.05);
}
:root[data-theme="light"] .dtm-tally { background: rgba(255,255,255,.62); }
:root[data-theme="light"] .dtm-greenstrip {
  background: linear-gradient(90deg, rgba(15,138,79,.10), rgba(15,138,79,.02));
  border-color: rgba(15,138,79,.24);
}

/* Chrome: bar, legend, footer, viewbar */
:root[data-theme="light"] .dtm-bar,
:root[data-theme="light"] .dtm-foot { color: var(--tx2); }
:root[data-theme="light"] .dtm-legend {
  background: rgba(255,255,255,.86);
  border-color: rgba(95,117,237,.18);
  box-shadow: 0 4px 16px rgba(31,45,97,.10);
}
:root[data-theme="light"] .dtm-foot .src.live  { border-color: rgba(15,138,79,.40); }
:root[data-theme="light"] .dtm-foot .src.mock  { border-color: rgba(180,107,0,.40); }

/* Map markers: dark ring so dots stay legible on a pale basemap */
:root[data-theme="light"] .dtm-marker { border-color: rgba(255,255,255,.95); }
:root[data-theme="light"] .dtm-marker.green { box-shadow: 0 0 0 1.5px var(--green), 0 0 10px 2px rgba(15,138,79,.35); }
:root[data-theme="light"] .dtm-marker.teal  { box-shadow: 0 0 0 1.5px var(--work),  0 0 10px 2px rgba(15,127,127,.35); }
:root[data-theme="light"] .dtm-marker.amber { box-shadow: 0 0 0 1.5px var(--amber), 0 0 10px 2px rgba(180,107,0,.35); }
:root[data-theme="light"] .dtm-marker.red   { box-shadow: 0 0 0 1.5px var(--red),   0 0 10px 2px rgba(214,32,48,.40); }
:root[data-theme="light"] .dtm-marker.slate { box-shadow: 0 0 0 1.5px var(--slate), 0 0 6px 1px rgba(85,99,158,.35); }
:root[data-theme="light"] .dtm-marker.grey  { box-shadow: 0 0 0 1.5px var(--grey),  0 0 6px 1px rgba(136,146,174,.35); }
:root[data-theme="light"] .dtm-ring { border-color: rgba(214,32,48,.55); }
@keyframes red-pulse-light {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--red), 0 0 10px 2px rgba(214,32,48,.40); }
  50%      { box-shadow: 0 0 0 3px rgba(214,32,48,.25), 0 0 18px 5px rgba(214,32,48,.28); }
}
:root[data-theme="light"] .dtm-marker.red { animation-name: red-pulse-light; }

/* Popups */
:root[data-theme="light"] .dtm-popup .mapboxgl-popup-content {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(95,117,237,.22) !important;
  box-shadow: 0 8px 32px rgba(31,45,97,.18) !important;
}
:root[data-theme="light"] .mapboxgl-popup-tip {
  border-top-color: rgba(255,255,255,.97) !important;
  border-bottom-color: rgba(255,255,255,.97) !important;
}
:root[data-theme="light"] .pop-dw.red   { border-color: rgba(214,32,48,.45); background: rgba(214,32,48,.07); }
:root[data-theme="light"] .pop-dw.amber { border-color: rgba(180,107,0,.45); background: rgba(180,107,0,.07); }
:root[data-theme="light"] .pop-spd { background: rgba(16,26,61,.06); }
:root[data-theme="light"] .pop-hos { background: rgba(95,117,237,.10); }

/* Mapbox controls */
:root[data-theme="light"] .mapboxgl-ctrl-attrib { background: rgba(255,255,255,.75) !important; }
:root[data-theme="light"] .mapboxgl-ctrl-attrib a { color: rgba(74,85,120,.75) !important; }
:root[data-theme="light"] .mapboxgl-ctrl-logo { filter: none !important; opacity: .5 !important; }
:root[data-theme="light"] .mapboxgl-ctrl-group {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(95,117,237,.22) !important;
}
:root[data-theme="light"] .mapboxgl-ctrl-icon { filter: none !important; }

/* Scrollbars + form controls */
:root[data-theme="light"] .dtm-scroll { scrollbar-color: rgba(95,117,237,.28) transparent; }
:root[data-theme="light"] .dtm-scroll::-webkit-scrollbar-thumb,
:root[data-theme="light"] .dtm-cfg-body::-webkit-scrollbar-thumb { background: rgba(95,117,237,.28); }
:root[data-theme="light"] .dtm-input,
:root[data-theme="light"] .dtm-select { background: rgba(255,255,255,.9); }
:root[data-theme="light"] .dtm-btn { background: rgba(255,255,255,.7); }
:root[data-theme="light"] .dtm-btn:hover { background: rgba(95,117,237,.10); }
:root[data-theme="light"] .dtm-btn.primary { background: rgba(95,117,237,.12); border-color: rgba(95,117,237,.45); }
:root[data-theme="light"] .dtm-btn.primary:hover { background: rgba(95,117,237,.20); }
:root[data-theme="light"] .dtm-btn.danger  { background: rgba(214,32,48,.08); border-color: rgba(214,32,48,.35); }
:root[data-theme="light"] .dtm-btn.success { background: rgba(15,138,79,.10); border-color: rgba(15,138,79,.35); }

/* Settings drawer */
:root[data-theme="light"] .dtm-cfg-overlay { background: rgba(16,26,61,.28); }
:root[data-theme="light"] .dtm-cfg-drawer {
  background: rgba(255,255,255,.96);
  border-left: 1px solid rgba(95,117,237,.20);
  box-shadow: -12px 0 40px rgba(31,45,97,.16);
}
:root[data-theme="light"] .dtm-view-row { background: rgba(255,255,255,.75); }
:root[data-theme="light"] .dtm-toggle .slider { background: rgba(16,26,61,.18); }

/* ── TALLY CHIPS AS FILTERS ──
   They are <button>s now; clicking one filters the rail and the map dots. */
.dtm-tally{
  font-family:inherit; text-align:left; cursor:pointer;
  border:1px solid var(--edge3); transition:border-color .15s, background .15s, transform .1s;
}
.dtm-tally:hover{border-color:var(--edge2); transform:translateY(-1px)}
.dtm-tally.selected{border-color:var(--sky); box-shadow:0 0 0 1px var(--sky) inset}
.dtm-tally.green.selected{border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset}
.dtm-tally.amber.selected{border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset}
.dtm-tally.red.selected  {border-color:var(--red);   box-shadow:0 0 0 1px var(--red) inset}
.dtm-tally.grey.selected {border-color:var(--grey);  box-shadow:0 0 0 1px var(--grey) inset}

/* "Showing X only — show all" chip at the top of a filtered rail */
.dtm-filterchip{
  display:block; width:100%; margin-bottom:8px; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--sky); background:rgba(125,207,255,.10);
  border:1px solid var(--edge2); border-radius:var(--r-md); padding:8px 10px; text-align:center;
}
.dtm-filterchip:hover{background:rgba(125,207,255,.18)}
:root[data-theme="light"] .dtm-filterchip{background:rgba(95,117,237,.10)}
:root[data-theme="light"] .dtm-filterchip:hover{background:rgba(95,117,237,.18)}

/* ── 4K / LARGE-SCREEN SCALING ──
   On a 65" 4K panel the browser reports ~4096 CSS px, so everything drawn at
   desk-monitor sizes becomes unreadable across a room. Scale the type and the
   chrome up rather than shipping a second layout. */
@media (min-width:2560px){
  .dtm-wordmark{font-size:44px}
  .dtm-subbrand .k{font-size:16px; letter-spacing:6px}
  .dtm-subbrand .s{font-size:13px; letter-spacing:3.5px}
  .dtm-tally{min-width:132px; padding:11px 18px}
  .dtm-tally .n{font-size:40px}
  .dtm-tally .l{font-size:13px; letter-spacing:3px}
  .dtm-clock .time{font-size:40px}
  .dtm-clock .date{font-size:14px}
  .dtm-status .txt{font-size:14px}
  .dtm-panel-head .t{font-size:16px; letter-spacing:4.5px}
  .dtm-panel-head .c{font-size:15px}
  .dtm-card{padding:15px 18px 15px 20px}
  .dtm-card .nm{font-size:20px}
  .dtm-card .vh{font-size:15px}
  .dtm-card .rs{font-size:16px}
  .dtm-card .tag{font-size:13px}
  .dtm-sec .lbl{font-size:13px; letter-spacing:4px}
  .dtm-sec .ct{font-size:14px}
  .dtm-greenstrip .gn{font-size:28px}
  .dtm-greenstrip .gl{font-size:15px}
  .dtm-foot{font-size:15px}
  .dtm-legend .li{font-size:13px}
  .dtm-legend .sw{width:12px;height:12px}
  .dtm-filterchip{font-size:13px}
  .dtm-marker{width:16px;height:16px}
}

/* Theme toggle button (shared by the wall top bar) */
.dtm-themebtn {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tx3);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 4px 9px; line-height: 1;
  transition: all .15s; white-space: nowrap;
}
.dtm-themebtn:hover { color: var(--sky); border-color: var(--edge); background: rgba(125,207,255,.08); }
:root[data-theme="light"] .dtm-themebtn:hover { background: rgba(95,117,237,.10); }