/*
  Dispatch design system.

  Shared by the dispatch board (index.html) and the crew page (crew.html).
  Colours, type and component styles live here as tokens so every screen
  stays consistent; the pages only add their own layout on top.

  Operational status colours (green / amber / red / blue) are reserved for
  status. Decorative elements use the navy and brand tokens instead.
*/

:root {
  /* ---------- Surfaces ---------- */
  --background-primary: #071525;   /* Midnight Navy */
  --background-secondary: #0D2033; /* Deep Navy */
  --surface: #162B3E;              /* Slate Navy: panels and cards */
  --surface-raised: #1C3550;       /* buttons and raised controls */
  --surface-sunken: #0A1B2D;       /* inputs and wells */

  /* ---------- Brand ---------- */
  --brand-primary: #2583EB;        /* Public Safety Blue */
  --brand-primary-hover: #3A92F0;
  --brand-secondary: #16B8D4;      /* Signal Cyan */

  /* ---------- Text ---------- */
  --text-primary: #F1F5F9;         /* Ice White */
  --text-soft: #C9D4DF;
  --text-secondary: #94A6B8;       /* Blue Gray */
  --text-muted: #6B8197;
  --text-on-brand: #FFFFFF;

  /* ---------- Lines & interaction ---------- */
  --border: #213A52;
  --border-strong: #2E4A66;
  --hover: rgba(148, 166, 184, .08);
  --selected: rgba(37, 131, 235, .18);
  --focus-ring: 0 0 0 3px rgba(37, 131, 235, .45);
  --zebra: rgba(148, 166, 184, .035);
  --overlay: rgba(3, 10, 19, .72);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .45);

  /* ---------- Operational status ---------- */
  --status-success: #22C55E;
  --status-warning: #F59E0B;
  --status-critical: #EF4444;
  --status-active: #3B82F6;
  --status-neutral: #64748B;
  /* Lighter tints for status text on dark panels. */
  --status-success-text: #4ADE80;
  --status-warning-text: #FBBF24;
  --status-critical-text: #F87171;
  --status-active-text: #7DB3FA;

  /* Unit statuses (names match the STATUS_CLASS keys used by the pages).
     Each has a text label everywhere it is shown, so colour is never the
     only signal. */
  --status-Available: #22C55E;
  --status-Responding: #3B82F6;
  --status-OnScene: #EF4444;
  --status-Transporting: #6366F1;
  --status-AtDestination: #A855F7;
  --status-AtPost: #F59E0B;
  --status-Dedicated: #EC4899;
  --status-OutOfService: #64748B;

  /* ---------- Shape & type ---------- */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --font-sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --tracking-label: .08em;

  color-scheme: dark;
}

/* Day mode: same system, inverted for bright sunlight / daytime screens. */
:root[data-theme="light"] {
  --background-primary: #E9EEF3;
  --background-secondary: #F4F7FA;
  --surface: #FFFFFF;
  --surface-raised: #E3EAF1;
  --surface-sunken: #FFFFFF;
  --brand-primary: #1D6FD1;
  --brand-primary-hover: #1A63BB;
  --brand-secondary: #0E8FA6;
  --text-primary: #0B1B2B;
  --text-soft: #23384D;
  --text-secondary: #4A5E72;
  --text-muted: #6B7D8F;
  --border: #CBD5E0;
  --border-strong: #A9B7C6;
  --hover: rgba(11, 27, 43, .05);
  --selected: rgba(29, 111, 209, .12);
  --focus-ring: 0 0 0 3px rgba(29, 111, 209, .35);
  --zebra: rgba(11, 27, 43, .025);
  --overlay: rgba(11, 27, 43, .45);
  --shadow-overlay: 0 12px 32px rgba(11, 27, 43, .2);
  --status-success-text: #15803D;
  --status-warning-text: #A16207;
  --status-critical-text: #B91C1C;
  --status-active-text: #1D4ED8;
  color-scheme: light;
}

/* ---------- Unit status classes ----------
   Set the status colour (--sc) and a readable text colour on top of it
   (--sc-ink). Components decide how to use them. */
.Available { --sc: var(--status-Available); --sc-ink: #03200E; }
.Responding { --sc: var(--status-Responding); --sc-ink: #FFFFFF; }
.OnScene { --sc: var(--status-OnScene); --sc-ink: #FFFFFF; }
.Transporting { --sc: var(--status-Transporting); --sc-ink: #FFFFFF; }
.AtDestination { --sc: var(--status-AtDestination); --sc-ink: #FFFFFF; }
.AtPost { --sc: var(--status-AtPost); --sc-ink: #241500; }
.Dedicated { --sc: var(--status-Dedicated); --sc-ink: #FFFFFF; }
.OutOfService { --sc: var(--status-OutOfService); --sc-ink: #FFFFFF; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Logo mark ----------
   Three connected nodes with a small pulse on the base link. Uses the
   brand tokens, so it follows the day/night theme. */
.logo-mark { display: block; flex: none; width: 24px; height: 24px; }
.logo-mark .lm-link { stroke: var(--brand-primary); }
.logo-mark .lm-node { fill: var(--text-primary); }
.logo-mark .lm-node-signal { fill: var(--brand-secondary); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-blue {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.btn-primary:hover, .btn-blue:hover { background: var(--brand-primary-hover); }

.btn-dark, .btn-secondary {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-green, .btn-success {
  background: var(--status-success);
  border-color: var(--status-success);
  color: #03200E;
}

.btn-red, .btn-danger {
  background: var(--status-critical);
  border-color: var(--status-critical);
  color: #FFFFFF;
}

.btn-yellow, .btn-warning {
  background: var(--status-warning);
  border-color: var(--status-warning);
  color: #241500;
}

/* ---------- Status badges ----------
   <span class="badge Available">Available</span>, or with a semantic
   modifier: badge-success / badge-warning / badge-critical / badge-active. */
.badge {
  --sc: var(--status-neutral);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sc) 16%, transparent);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc);
  flex: none;
}
.badge.solid { background: var(--sc); border-color: var(--sc); color: var(--sc-ink, #fff); }
.badge.solid::before { background: currentColor; }
.badge-success { --sc: var(--status-success); }
.badge-warning { --sc: var(--status-warning); }
.badge-critical { --sc: var(--status-critical); }
.badge-active { --sc: var(--status-active); }
.badge-neutral { --sc: var(--status-neutral); }

/* ---------- Incident priority ----------
   <span class="priority priority-1">P1</span> … priority-4. Shape and text
   change with acuity as well as colour. */
.priority {
  --pc: var(--status-neutral);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 5px;
  border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent);
  border-left: 3px solid var(--pc);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.priority-1 { --pc: var(--status-critical); background: var(--status-critical); border-color: var(--status-critical); color: #fff; }
.priority-1::before { content: "\25B2"; font-size: 9px; }
.priority-2 { --pc: var(--status-warning); }
.priority-2::before { content: "\25C6"; font-size: 9px; color: var(--status-warning); }
.priority-3 { --pc: var(--status-active); }
.priority-4 { --pc: var(--status-neutral); color: var(--text-secondary); }

/* ---------- Panels & stat cards ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sc, var(--brand-primary));
  border-radius: var(--radius);
}
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1.05; }
.stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Alerts ---------- */
.alert {
  --ac: var(--status-active);
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  border-left: 4px solid var(--ac);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ac) 12%, var(--surface));
  color: var(--text-primary);
}
.alert-success { --ac: var(--status-success); }
.alert-warning { --ac: var(--status-warning); }
.alert-critical { --ac: var(--status-critical); }

/* ---------- Data tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  padding: 7px 8px;
  white-space: nowrap;
}
.data-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:nth-child(even) { background: var(--zebra); }
.data-table tbody tr:hover { background: var(--hover); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 80; }
.modal {
  background: var(--background-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}

/* Respect users who ask for less motion: no attention animations at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}