/* =============================================================================
   styles.css
   -----------------------------------------------------------------------------
   Dark operations-center theme. Dense information, real visual hierarchy —
   the map and the handoff state dominate; telemetry supports. No emoji, no
   cutesy microcopy. Accessible contrast, visible focus states, keyboard-
   navigable controls throughout.
============================================================================= */

:root {
  --bg: #070f1c;
  --panel: #0c1828;
  --panel-2: #0f2034;
  --border: rgba(150, 184, 220, 0.14);
  --border-strong: rgba(150, 184, 220, 0.28);
  --text: #f4f8fc;
  --muted: #8799ad;
  /* WCAG AA fix: the original #647b93 measured ~4.1-4.4:1 against --bg/--panel
     (below the required 4.5:1 for normal text) and is used extremely widely
     (.eyebrow section labels, meta text, legend notes). Lightened to clear
     4.5:1 against every background it appears on (~5.4:1 min, computed). */
  --muted-2: #7c93a8;

  --blue: #1688ff;
  --blue-bright: #39c2ff;
  --amber: #ffb347;
  --red: #ff3a4d;
  --green: #24d18f;
  --purple: #c65cff;
  --pink: #ff6bd6;
  --yellow: #ffd54a;

  --fresh: #24d18f;
  --aging: #ffd54a;
  --stale: #ff9142;
  --lost: #ff3a4d;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --radius: 14px;
  --radius-sm: 9px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

button, input, select {
  font: inherit;
  color: inherit;
}

.hidden { display: none !important; }

a { color: var(--blue-bright); }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

.eyebrow {
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 850;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------- */
/* WORDMARK — rendered from BRAND.name / BRAND.short (js/config.js), never
   a hardcoded string or an image logo. */
/* ----------------------------------------------------------------------- */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark-glyph {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--blue-bright), var(--blue));
  color: #04101d;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(22, 136, 255, 0.35);
}
.wordmark-text {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.wordmark-tagline {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

/* ----------------------------------------------------------------------- */
/* LOGIN SCREEN */
/* ----------------------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 30% 10%, rgba(22, 136, 255, 0.14), transparent 40%), var(--bg);
}
.login-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(15, 32, 52, 0.96), rgba(9, 22, 38, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.login-tagline {
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.login-demo-notice {
  margin: 12px 0 20px;
  padding: 10px 12px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 179, 71, 0.08);
  color: #ffd9a8;
  font-size: 11.5px;
  line-height: 1.5;
  border-radius: 6px;
}
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.login-form input {
  background: #061422;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
}
.login-form input:focus-visible { border-color: var(--blue-bright); }

/* ----------------------------------------------------------------------- */
/* APP SHELL */
/* ----------------------------------------------------------------------- */
/* Fixed to exactly the viewport height (not just min-height) with overflow
   hidden at this one point in the ancestor chain. Every descendant that
   needs to scroll independently (.sidebar, .view, .pursuits-list,
   .event-feed, .telemetry-panel, .agency-panel) already declares its own
   overflow-y: auto and min-height: 0 — but without a hard height cap
   somewhere above them, the whole document was free to simply grow taller
   than the viewport instead, which would let native page scroll carry the
   entire shell (including the safety banner) out of view. Capping the shell
   here is what makes the non-dismissible safety banner in fact
   un-scrollable, and makes every panel's own internal scrolling engage
   instead of the page growing. */
.app-shell { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.safety-banner {
  flex: none;
  padding: 9px 20px;
  background: linear-gradient(90deg, rgba(255, 58, 77, 0.16), rgba(255, 145, 66, 0.1));
  border-bottom: 1px solid rgba(255, 145, 66, 0.35);
  color: #ffd7c9;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  letter-spacing: 0.01em;
}

.app-body {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: radial-gradient(circle at 68% 0%, rgba(22, 136, 255, 0.1), transparent 34%), var(--bg);
  min-height: 0;
}

.sidebar {
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #081423;
  overflow-y: auto;
}

.nav-stack { display: grid; gap: 8px; }
.nav-item {
  appearance: none;
  border: 1px solid transparent;
  color: #95a9bd;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 750;
  font-size: 13px;
}
.nav-item:hover, .nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(22, 136, 255, 0.18), rgba(22, 136, 255, 0.04));
  border-color: rgba(22, 136, 255, 0.28);
}

.pursuits-section { display: flex; flex-direction: column; gap: 8px; }
.pursuits-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.pursuits-empty {
  color: var(--muted-2);
  font-size: 11.5px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.pursuit-item {
  display: grid;
  gap: 4px;
  text-align: left;
  background: rgba(4, 12, 22, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  cursor: pointer;
  color: var(--text);
}
.pursuit-item:hover { border-color: var(--border-strong); }
.pursuit-item.selected { border-color: var(--blue-bright); background: rgba(22, 136, 255, 0.1); }
.pursuit-item.ended { opacity: 0.55; }
.pursuit-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pursuit-item-top strong { font-size: 12.5px; }
.pursuit-item-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pursuit-status-badge { font-size: 8.5px; font-weight: 900; letter-spacing: 0.07em; padding: 2px 6px; border-radius: 999px; }
.pursuit-status-badge.active { color: #63e6b3; background: rgba(36, 209, 143, 0.12); border: 1px solid rgba(36, 209, 143, 0.3); }
.pursuit-status-badge.ended { color: #9fb0c2; background: rgba(150, 184, 220, 0.08); border: 1px solid var(--border); }

.system-card {
  margin-top: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; color: #a8b7c7; font-size: 11.5px; }
.status-row:first-of-type { margin-top: 12px; }
.status-row strong { color: #fff; }
.status-pill { font-size: 9px; font-weight: 900; letter-spacing: 0.06em; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.status-pill.good { color: #63e6b3; background: rgba(36, 209, 143, 0.1); border: 1px solid rgba(36, 209, 143, 0.28); }
.status-pill.idle { color: #ffd9a8; background: rgba(255, 179, 71, 0.1); border: 1px solid rgba(255, 179, 71, 0.28); }
.demo-data-badge {
  margin-top: 12px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 179, 71, 0.4);
  background: rgba(255, 179, 71, 0.06);
  color: #ffd9a8;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* WCAG fix: #4a5b70 measured ~2.8:1 against the sidebar background (fails
   4.5:1). Uses the corrected --muted-2 instead of a bespoke color. */
.sidebar-footer { font-size: 9px; letter-spacing: 0.13em; color: var(--muted-2); text-align: center; padding-top: 4px; }

.main-area { min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.topbar {
  height: 68px;
  flex: none;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(6, 16, 29, 0.72);
  backdrop-filter: blur(12px);
}
.topbar h1 { margin: 3px 0 0; font-size: 20px; letter-spacing: -0.01em; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.clock { font-variant-numeric: tabular-nums; color: #c9d6e3; font-weight: 800; font-size: 13px; }
.connection-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(36, 209, 143, 0.1), 0 0 18px rgba(36, 209, 143, 0.5); }

.view { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.view.active-view { display: block; }

/* ----------------------------------------------------------------------- */
/* DISPATCH GRID */
/* ----------------------------------------------------------------------- */
.dispatch-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
  grid-template-rows: minmax(440px, 56vh) minmax(220px, auto) minmax(180px, auto);
  grid-template-areas:
    "map telemetry"
    "map agency"
    "feed feed";
  gap: 14px;
}

.panel {
  background: linear-gradient(180deg, rgba(15, 32, 52, 0.96), rgba(9, 22, 38, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-header {
  flex: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
}
.panel-header strong { display: block; margin-top: 3px; font-size: 13px; }

.map-panel { grid-area: map; position: relative; min-height: 0; }
#map { width: 100%; flex: 1; min-height: 0; background: #132033; }
.map-header { position: relative; z-index: 500; flex-wrap: wrap; row-gap: 8px; }
.map-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.map-mode-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.toggle-btn { border: none; background: transparent; color: var(--muted); padding: 7px 12px; font-size: 11px; font-weight: 800; cursor: pointer; }
.toggle-btn.active { background: rgba(22, 136, 255, 0.18); color: #fff; }

.primary-btn, .ghost-btn, .danger-btn {
  border-radius: 9px;
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 850;
  font-size: 11px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* WCAG fix: the original gradient's lighter top stop (#1d93ff) gave white
   button text only ~3.15:1 contrast (fails 4.5:1 required for 11px text).
   Darkened both stops so white text clears 4.5:1 across the whole gradient
   (~4.8:1 at the lightest point, computed). */
.primary-btn { color: #fff; background: linear-gradient(180deg, #1075c9, #0a4f96); border-color: #39a2ff; }
.ghost-btn { color: #c9d6e3; background: #0a1727; border-color: var(--border); }
.ghost-btn:hover { border-color: var(--border-strong); }
.danger-btn { color: #ffd0d5; background: rgba(255, 58, 77, 0.12); border-color: rgba(255, 58, 77, 0.4); }
.danger-btn:hover { background: rgba(255, 58, 77, 0.2); }
.full-width { width: 100%; }
.ghost-btn.tiny, .danger-btn.tiny { padding: 5px 9px; font-size: 10px; }

.map-overlay {
  position: absolute;
  z-index: 600;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(6, 16, 28, 0.88);
  border: 1px solid var(--border);
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 10px;
  color: #c1ceda;
  backdrop-filter: blur(8px);
  max-width: 260px;
}
.legend-row { display: flex; align-items: center; gap: 6px; }
.legend-note { color: var(--muted-2); font-size: 9px; line-height: 1.4; margin-top: 2px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.crossing-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); }

/* Layout fix: this is positioned absolute against .map-panel's own box,
   which includes .panel-header (min-height: 58px) in normal flow above it —
   at the original top: 14px this chip rendered on top of the map header's
   own Focused/All Pursuits/Center/Pause/Replay controls, not below them.
   Pushed down to clear the header. */
.predicted-chip {
  position: absolute;
  z-index: 600;
  top: 70px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(6, 16, 28, 0.92);
  border: 1px dashed var(--border-strong);
  padding: 10px 12px;
  border-radius: 10px;
  max-width: 260px;
  backdrop-filter: blur(8px);
}
.predicted-label { font-size: 9px; letter-spacing: 0.1em; color: var(--muted-2); font-weight: 850; }
.predicted-chip strong { font-size: 14px; }
.predicted-caveat { font-size: 9.5px; color: var(--muted); font-style: italic; }
.predicted-chip .ghost-btn { margin-top: 6px; align-self: flex-start; }

/* Layout fix: same positioning-context issue as .predicted-chip above (was
   overlapping .panel-header), pushed down to clear it — also now sits below
   the predicted-chip's row instead of contesting the same top-right corner
   during the exact moment (an actual crossing) both are likely visible at
   once.
   WCAG fix: the original gradient (bright purple/blue, both ~0.25-0.27
   luminance) gave white banner text only ~3.3-3.5:1 (fails 4.5:1 required
   for 13px bold text, which is below the 18.66px "large text" bold
   threshold). Darkened both stops so white text clears 4.5:1 throughout
   (~6.1-6.7:1, computed). max-width is also capped in absolute px so it
   doesn't stretch edge-to-edge on very wide/ultrawide monitors. */
.crossing-banner {
  position: absolute;
  z-index: 700;
  top: 70px;
  left: 50%;
  transform: translate(-50%, -12px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  background: linear-gradient(90deg, rgba(140, 60, 180, 0.96), rgba(14, 90, 180, 0.96));
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  max-width: min(88%, 640px);
  text-align: center;
  pointer-events: none;
}
.crossing-banner.show { opacity: 1; transform: translate(-50%, 0); }

/* Leaflet marker/polygon customization */
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255, 255, 255, 0.75) !important; }
.agency-label { background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(230, 238, 246, 0.55) !important; font-weight: 800 !important; font-size: 10px !important; letter-spacing: 0.06em; text-transform: uppercase; }
.unit-tooltip { font-size: 11px; line-height: 1.5; }

/* WCAG fix: white callsign text on this marker's own colored fill measured
   ~1.8-3.3:1 against all three role colors (primary #39c2ff, cover #ffb347,
   backup #c65cff) — all fail 4.5:1. Dark text against the same three colors
   measures ~5.8-10.8:1, computed, because two of the three role colors are
   themselves fairly light/saturated. The white 3px ring border is unaffected. */
.unit-marker {
  --unit-color: #1688ff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--unit-color);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--unit-color) 30%, transparent), 0 4px 15px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  color: var(--bg);
  font-size: 9px;
  font-weight: 950;
  position: relative;
}
.unit-marker-flag {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  background: var(--aging);
  color: #241a00;
}
.unit-marker.state-fresh { animation: unitPulse 1.6s infinite; }
.unit-marker.state-aging { opacity: 0.9; }
.unit-marker.state-aging .unit-marker-flag { background: var(--aging); }
.unit-marker.state-stale { opacity: 0.75; filter: saturate(0.7); }
/* WCAG fix: white flag text on --stale (#ff9142) measured ~2.2:1 and on
   --lost (#ff3a4d) ~3.5:1 — both fail 4.5:1. Removed the color: #fff
   override on both so they inherit .unit-marker-flag's dark #241a00 text
   (already correct for the --aging case above), which measures ~7.7:1 and
   ~4.9:1 respectively, computed. */
.unit-marker.state-stale .unit-marker-flag { background: var(--stale); }
.unit-marker.state-lost { opacity: 0.5; filter: grayscale(0.7); border-style: dashed; }
.unit-marker.state-lost .unit-marker-flag { background: var(--lost); }
@keyframes unitPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--unit-color) 12%, transparent), 0 4px 15px rgba(0, 0, 0, 0.45); } }

.crossing-pin {
  --pin-color: #c65cff;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: var(--pin-color);
  border: 2px solid #fff;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------------- */
/* TELEMETRY PANEL */
/* ----------------------------------------------------------------------- */
.telemetry-panel { grid-area: telemetry; overflow-y: auto; }
.live-label { color: #ff8792; }
.ended-label { color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 5px rgba(255, 58, 77, 0.1); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 58, 77, 0); } }
.priority-badge { font-size: 9px; font-weight: 900; letter-spacing: 0.08em; border-radius: 999px; padding: 5px 8px; color: #ff9ca5; border: 1px solid rgba(255, 58, 77, 0.28); background: rgba(255, 58, 77, 0.09); white-space: nowrap; }
.auto-badge { font-size: 9px; font-weight: 900; letter-spacing: 0.08em; border-radius: 999px; padding: 5px 8px; color: #76baff; border: 1px solid rgba(22, 136, 255, 0.28); background: rgba(22, 136, 255, 0.09); white-space: nowrap; }

.pursuit-meta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.metric-card { background: rgba(4, 12, 22, 0.42); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.metric-card span { display: block; color: #708399; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.metric-card strong { display: block; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }

.suspect-cards { display: grid; gap: 10px; padding: 0 12px 12px; }
.suspect-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.suspect-card-header { padding: 9px 11px; background: rgba(198, 92, 255, 0.07); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.suspect-card-header strong { font-size: 12px; }
.suspect-desc { font-size: 10px; color: var(--muted); }

.unit-cards { display: grid; gap: 8px; padding: 9px; }
.unit-cards-empty { padding: 14px; color: var(--muted-2); font-size: 11.5px; text-align: center; }

.unit-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: rgba(4, 12, 22, 0.35); transition: border-color 0.2s ease; }
.unit-card.role-primary { border-color: rgba(57, 194, 255, 0.3); }
.unit-card.role-cover { border-color: rgba(255, 179, 71, 0.28); }
.unit-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.unit-card-top strong { font-size: 12.5px; display: block; }
.unit-agency { font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; }

.fix-badge { font-size: 8.5px; font-weight: 900; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.fix-badge.state-fresh { color: #63e6b3; background: rgba(36, 209, 143, 0.12); border: 1px solid rgba(36, 209, 143, 0.3); }
.fix-badge.state-aging { color: #ffe08a; background: rgba(255, 213, 74, 0.12); border: 1px solid rgba(255, 213, 74, 0.32); }
.fix-badge.state-stale { color: #ffb98a; background: rgba(255, 145, 66, 0.14); border: 1px solid rgba(255, 145, 66, 0.36); }
.fix-badge.state-lost { color: #ffaab1; background: rgba(255, 58, 77, 0.14); border: 1px solid rgba(255, 58, 77, 0.4); }

.unit-card-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.unit-card-metrics div span { display: block; font-size: 8.5px; color: #708399; text-transform: uppercase; letter-spacing: 0.06em; }
.unit-card-metrics div strong { display: block; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.unit-road { margin-top: 7px; font-size: 10px; color: var(--muted); }
.unit-card-actions { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }

.telemetry-footer-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 14px; }

.overview-summary-list { display: grid; gap: 8px; padding: 12px; }
.overview-summary-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: rgba(4, 12, 22, 0.4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
}
.overview-summary-row:hover { border-color: var(--border-strong); }

/* ----------------------------------------------------------------------- */
/* AGENCY PANEL — Notified Agencies */
/* ----------------------------------------------------------------------- */
.agency-panel { grid-area: agency; overflow-y: auto; }
.agency-empty { padding: 16px; color: var(--muted-2); font-size: 11.5px; line-height: 1.6; }
.agency-list { display: grid; gap: 8px; padding: 10px; }
.agency-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.agency-row.pending { border-color: rgba(255, 213, 74, 0.35); background: rgba(255, 213, 74, 0.05); }
.agency-row.ack { border-color: rgba(36, 209, 143, 0.32); background: rgba(36, 209, 143, 0.05); }
.agency-row-main { display: flex; align-items: center; gap: 8px; }
.agency-row-main strong { font-size: 12.5px; }
.agency-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.agency-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agency-status-badge { font-size: 8.5px; font-weight: 900; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; }
.agency-status-badge.pending { color: #ffe08a; background: rgba(255, 213, 74, 0.14); border: 1px solid rgba(255, 213, 74, 0.34); }
.agency-status-badge.ack { color: #63e6b3; background: rgba(36, 209, 143, 0.14); border: 1px solid rgba(36, 209, 143, 0.32); }
.agency-row-source { font-size: 9.5px; color: var(--muted-2); font-style: italic; }

/* ----------------------------------------------------------------------- */
/* EVENT FEED */
/* ----------------------------------------------------------------------- */
.feed-panel { grid-area: feed; }
.event-feed { max-height: 220px; overflow-y: auto; padding: 4px 0; }
.event-empty { padding: 16px; color: var(--muted-2); font-size: 11.5px; }
.event-row {
  display: grid;
  grid-template-columns: 76px 84px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 15px;
  border-bottom: 1px solid rgba(150, 184, 220, 0.07);
  font-size: 11.5px;
}
.event-row:last-child { border-bottom: none; }
/* WCAG fix: #667b90 measured ~4.1-4.4:1 (fails 4.5:1). Uses the corrected
   --muted-2 instead of a bespoke color. */
.event-time { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.event-badge { font-size: 8.5px; font-weight: 900; letter-spacing: 0.06em; color: var(--muted); }
.event-text { color: #d7e1eb; }
.event-row.event-type-crossing .event-badge { color: var(--purple); }
.event-row.event-type-crossing .event-text { color: #ecd7ff; font-weight: 700; }
.event-row.event-type-telemetry-gap .event-badge { color: var(--stale); }
.event-row.event-type-telemetry-gap .event-text { color: #ffd7bd; }
.event-row.event-type-telemetry-restored .event-badge { color: var(--green); }
.event-row.event-type-alert .event-badge { color: var(--blue-bright); }
.event-row.event-type-system .event-badge { color: var(--muted-2); }

/* ----------------------------------------------------------------------- */
/* OFFICER MDT VIEW */
/* ----------------------------------------------------------------------- */
.officer-wrap { min-height: 100%; display: grid; place-items: center; padding: 28px; }
.officer-console { width: min(720px, 100%); padding: 30px; text-align: center; }
.officer-wordmark { justify-content: center; margin-bottom: 20px; }
.officer-unit-select { margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--muted); }
.officer-unit-select select { background: #061422; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 12px; }
.officer-copy h2 { font-size: 25px; margin: 8px 0 7px; }
.officer-copy p { max-width: 560px; margin: 0 auto; color: #8295a9; line-height: 1.6; font-size: 13px; }
.officer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0; }
.officer-stats div { padding: 12px; border-radius: 10px; background: #091625; border: 1px solid var(--border); }
.officer-stats span, .officer-stats strong { display: block; }
.officer-stats span { font-size: 9px; color: #698097; letter-spacing: 0.08em; }
.officer-stats strong { font-size: 13px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.officer-fix-state { padding: 10px 14px; border-radius: 10px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); }
.officer-fix-state.state-fresh { color: #63e6b3; background: rgba(36, 209, 143, 0.08); }
.officer-fix-state.state-aging { color: #ffe08a; background: rgba(255, 213, 74, 0.08); }
.officer-fix-state.state-stale { color: #ffb98a; background: rgba(255, 145, 66, 0.1); }
.officer-fix-state.state-lost { color: #ffaab1; background: rgba(255, 58, 77, 0.1); }
.officer-safety-note { margin-top: 22px; font-size: 11px; color: var(--muted-2); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 16px; }

/* ----------------------------------------------------------------------- */
/* MODAL */
/* ----------------------------------------------------------------------- */
.modal-root:not(.hidden) { position: fixed; inset: 0; z-index: 2000; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 15, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-card {
  width: min(440px, 100%);
  background: linear-gradient(180deg, rgba(17, 34, 55, 0.98), rgba(10, 23, 39, 0.98));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.modal-card h2 { margin: 0 0 6px; font-size: 17px; }
.modal-description { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.modal-form { display: grid; gap: 12px; }
.modal-field { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.modal-field input, .modal-field select {
  background: #061422;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--text);
  font-size: 13px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ----------------------------------------------------------------------- */
/* RESPONSIVE */
/* ----------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .app-body { grid-template-columns: 220px 1fr; }
  .dispatch-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 480px auto auto auto;
    grid-template-areas: "map" "telemetry" "agency" "feed";
  }
}

@media (max-width: 760px) {
  .app-body { display: block; }
  .sidebar { display: none; }
  .topbar { height: 60px; padding: 0 14px; }
  .dispatch-grid { padding: 10px; grid-template-rows: 420px auto auto auto; gap: 10px; }
  .map-actions .ghost-btn { padding: 8px 10px; }
  .event-row { grid-template-columns: 60px 1fr; }
  .event-badge { display: none; }
  .officer-stats { grid-template-columns: 1fr 1fr; }
  .unit-card-metrics { grid-template-columns: 1fr 1fr; }
  .pursuit-meta-row { grid-template-columns: 1fr 1fr 1fr; }
}