/* ============================================================
   ARGUS UI — design system
   "Night-ops instrument console"

   One stylesheet, consumed system-wide. Pages opt in by using the
   .a-* component classes; global layers (fonts, form controls,
   focus, scrollbars) apply everywhere immediately so non-migrated
   pages stay coherent during rollout.

   Palette rationale:
     * Amber is the interaction colour — instrument/night-vision
       lighting; operators work this UI at 02:00. Cyan is retired.
     * Red is RESERVED for threat (hot scores, clone flags,
       destructive actions). If it's red, it matters.
     * Veld green marks identity / confirmed / positive.
   Type:
     * Barlow Semi Condensed — headings & labels (road-signage DNA)
     * IBM Plex Sans — body
     * IBM Plex Mono — every plate, timestamp, coordinate, count
   ============================================================ */

:root {
  /* Surfaces */
  --a-ink:    #090D12;   /* page background */
  --a-ink-2:  #0D131A;   /* app shell */
  --a-panel:  #141B23;   /* raised console surface */
  --a-panel-2:#18212B;   /* elevated hover surface */
  --a-inset:  #0F151C;   /* wells: maps, detail rows, code */
  --a-line:   #273342;   /* structural hairline */
  --a-line2:  #1B2530;   /* softer inner hairline */
  --a-blue-1: #38BDF8;
  --a-blue-2: #0EA5E9;
  --a-blue-3: #1D4ED8;

  /* Text */
  --a-text:   #D8E2EA;
  --a-dim:    #8796A5;
  --a-faint:  #5F6D7A;
  --a-strong: #F2F6F9;

  /* Signals */
  --a-amber:      #38BDF8;  /* interaction / primary blue */
  --a-amber-dim:  #0EA5E9;
  --a-amber-glow: rgba(56, 189, 248, 0.18);
  --a-red:        #E4593F;  /* threat only */
  --a-red-glow:   rgba(228, 89, 63, 0.12);
  --a-green:      #8FB573;  /* identity / positive */
  --a-green-glow: rgba(143, 181, 115, 0.12);
  --a-violet:     #818CF8;  /* behavioural/odd-hour class */

  /* Type */
  --a-font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --a-font-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --a-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Geometry — machined, not rounded */
  --a-r: 6px;
  --a-r-lg: 8px;
  --a-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
  --a-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* ---- Global layer (applies everywhere, now) ------------------- */

body {
  font-family: var(--a-font-body) !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(56, 189, 248, 0.10), transparent 34rem),
    linear-gradient(180deg, #0A0F15 0%, var(--a-ink) 44rem) !important;
  color: var(--a-text);
}

::selection { background: var(--a-amber-glow); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.20) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.20); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.34); }
*::-webkit-scrollbar-track { background: transparent; }

/* Form controls — retint base.html's slate/cyan scheme to the system.
   !important needed to win over the base inline sheet's !important. */
input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], input[type="date"], input[type="time"],
input[type="number"], input[type="url"], input[type="tel"],
input[type="search"], input:not([type]),
textarea, select {
  background-color: var(--a-inset) !important;
  border-color: var(--a-line) !important;
  color: var(--a-text) !important;
  caret-color: var(--a-amber);
  border-radius: var(--a-r);
  font-family: var(--a-font-body);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="datetime-local"], input[type="number"] {
  font-family: var(--a-font-mono);
  font-size: 0.85rem;
}
input, textarea, select {
  min-height: 2.25rem;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--a-amber-dim) !important;
  box-shadow: 0 0 0 2px var(--a-amber-glow);
}
input::placeholder, textarea::placeholder {
  color: var(--a-faint) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--a-inset) inset !important;
  -webkit-text-fill-color: var(--a-text) !important;
  caret-color: var(--a-amber);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--a-amber);
}

:focus-visible {
  outline: 2px solid var(--a-amber-dim);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- App shell --------------------------------------------------- */

.a-app-shell {
  display: flex !important;
  height: 100vh;
  min-height: 100vh;
  background: transparent;
}

.a-sidebar {
  width: 15.5rem;
  display: flex !important;
  flex-direction: column !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.99), rgba(7, 12, 20, 0.99));
  border-right: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 10px 0 34px rgba(0, 0, 0, 0.22);
}

.a-brand { color: var(--a-amber); }

.a-brand-panel {
  padding: 1rem;
  border-bottom: 1px solid var(--a-line2);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent);
}

.a-brand-panel a {
  display: block;
}

.a-brand-caption {
  font-size: 0.66rem;
  color: var(--a-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-label {
  font-family: var(--a-font-display);
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.13em !important;
  color: var(--a-faint) !important;
  padding: 1.15rem 0.72rem 0.42rem !important;
}

.a-nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  margin-bottom: 0.18rem;
  min-height: 2.25rem;
  padding: 0.48rem 0.72rem;
  border-radius: var(--a-r);
  color: var(--a-dim);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.a-nav-link:hover {
  color: var(--a-text);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(135, 150, 165, 0.10);
}
.a-nav-link-active {
  color: var(--a-strong);
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.20), rgba(14, 165, 233, 0.07));
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: inset 3px 0 0 var(--a-amber), 0 8px 22px rgba(14, 165, 233, 0.10);
}

.a-sidebar nav > div,
.a-sidebar nav .space-y-0\.5 {
  display: block;
}

.a-sidebar nav .space-y-0\.5 > * + * {
  margin-top: 0.18rem;
}

.a-main { background: transparent; }
.a-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}

.a-user-card {
  padding: 0.75rem;
  border-top: 1px solid var(--a-line2);
  background: rgba(9, 13, 18, 0.28);
}

.a-sidebar nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}

/* ---- Page scaffolding ------------------------------------------ */

.a-page-head { margin-bottom: 1.1rem; }
.a-page-title {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: #E8EEF3;
  line-height: 1.1;
}
.a-page-sub {
  font-size: 0.8rem;
  color: var(--a-dim);
  margin-top: 0.2rem;
}

/* ---- Console panel + modules ------------------------------------ */

.a-console {
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow-soft);
}
.a-console-body { padding: 1.25rem 1.5rem; }

.a-card {
  background:
    linear-gradient(180deg, rgba(16, 25, 41, 0.98), rgba(9, 15, 26, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow-soft);
}
.a-card-pad { padding: 1.15rem 1.25rem; }
.a-card-head {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--a-line2);
}
.a-card-title {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-strong);
}
.a-kpi {
  position: relative;
  overflow: hidden;
}
.a-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.75), transparent);
  opacity: .55;
}
.a-kpi-healthy::before { background: linear-gradient(90deg, var(--a-green), transparent); }
.a-kpi-warn::before { background: linear-gradient(90deg, var(--a-amber), transparent); }
.a-kpi-violet::before { background: linear-gradient(90deg, var(--a-violet), transparent); }
.a-kpi-label {
  font-family: var(--a-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--a-dim);
}
.a-kpi-value {
  margin-top: 0.42rem;
  font-family: var(--a-font-mono);
  font-size: clamp(1.55rem, 2.15vw, 2rem);
  line-height: 1;
  font-weight: 600;
  color: var(--a-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}
.a-kpi-foot {
  margin-top: 0.48rem;
  font-size: 0.72rem;
  color: var(--a-faint);
}

/* The scope readout — the signature element. A live mono strip that
   always states exactly what's about to run. */
.a-readout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: var(--a-inset);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  font-family: var(--a-font-mono);
  font-size: 0.72rem;
  color: var(--a-dim);
  white-space: nowrap;
  overflow: hidden;
}
.a-readout .r-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-amber);
  flex-shrink: 0;
  animation: a-breathe 2.4s ease-in-out infinite;
}
@keyframes a-breathe { 0%,100% {opacity:1;} 50% {opacity:.35;} }
.a-readout b { color: var(--a-text); font-weight: 500; }
.a-readout .r-sep { color: var(--a-faint); }

/* ---- Search workspace ----------------------------------------------- */

.search-console {
  overflow: clip;
}
.search-console-body {
  padding: 0;
}
.search-form-grid {
  display: grid;
  gap: 0;
}
.search-form-grid > * {
  padding: 1.1rem 1.35rem;
  border-top: 1px solid var(--a-line2);
}
.search-form-grid > *:first-child {
  border-top: 0;
}
.search-topline {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 1.25fr);
  gap: 1rem;
  align-items: end;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.055), transparent),
    rgba(9, 13, 18, 0.18);
}
.search-mode-seg {
  width: 100%;
}
.search-mode-seg .a-seg-opt {
  display: block;
  text-align: center;
}
.search-time-panel {
  padding: 0.85rem;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  background: var(--a-inset);
}
.search-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.search-workspace-with-rail {
  grid-template-columns: minmax(30rem, 1.25fr) minmax(22rem, 0.75fr);
}
.search-map-module {
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.055), transparent 11rem),
    rgba(15, 21, 28, 0.54);
  box-shadow: inset 0 1px 0 rgba(216, 226, 234, 0.035);
}
.search-workspace:not(.search-workspace-with-rail) .search-map-module {
  max-width: none;
}
.search-workspace:not(.search-workspace-with-rail) .map-square {
  aspect-ratio: 16 / 7;
  min-height: 25rem;
  max-height: 34rem;
}
.search-map-module #picker-map {
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(216, 226, 234, 0.025);
}
.search-map-module #radius-controls:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(17rem, 1.1fr) minmax(18rem, 1.2fr) minmax(16rem, 1fr);
  gap: 0.9rem 1rem;
  align-items: end;
}
.search-map-module #radius-controls:not(.hidden) > button {
  justify-self: start;
  align-self: center;
}
.search-map-module #cam-pick-controls:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(18rem, 1.1fr) auto;
  gap: 0.9rem 1rem;
  align-items: end;
}
.search-map-module #cam-pick-controls:not(.hidden) > .flex {
  justify-content: flex-end;
  gap: 1rem;
}
.search-side-rail {
  display: grid;
  gap: 1rem;
}
.search-workspace.hidden,
.search-side-rail.hidden {
  display: none !important;
}
.search-options-strip {
  background: rgba(15, 21, 28, 0.44);
}
.search-runbar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background:
    linear-gradient(180deg, rgba(9, 13, 18, 0.28), rgba(9, 13, 18, 0.46));
}
.search-runbar-copy {
  min-width: 0;
  margin-right: auto;
}
.search-results-panel {
  margin-top: 1.1rem;
}
.search-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--a-line);
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.075), transparent 62%),
    rgba(9, 13, 18, 0.20);
}
.search-results-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
}
.search-results-title h2 {
  font-family: var(--a-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--a-strong) !important;
  font-size: 0.95rem !important;
}
.search-bulkbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--a-line);
  background: var(--a-inset);
  font-size: 0.875rem;
}
.search-table-wrap {
  background: rgba(9, 13, 18, 0.08);
}
.search-results-table tbody {
  background: rgba(20, 27, 35, 0.54);
}
.search-results-table tbody + tbody {
  border-top: 1px solid var(--a-line);
}
.search-results-table .search-vehicle-row:hover {
  background: rgba(56, 189, 248, 0.075);
}

@media (max-width: 1180px) {
  .search-topline,
  .search-workspace,
  .search-workspace-with-rail,
  .search-map-module #radius-controls:not(.hidden),
  .search-map-module #cam-pick-controls:not(.hidden) {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .search-form-grid > * {
    padding: 0.95rem;
  }
  .search-runbar {
    align-items: stretch;
    flex-direction: column;
  }
  .search-runbar .a-btn {
    justify-content: center;
    width: 100%;
  }
  .search-results-head,
  .search-bulkbar {
    padding-inline: 0.95rem;
  }
}

/* Module = engineered fieldset. Eyebrow label sits ON the border. */
.a-module {
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  padding: 1rem;
  background: transparent;
}
.a-legend {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-dim);
  padding: 0 0.5rem;
}
.a-legend .l-accent { color: var(--a-amber); }

.a-hint { font-size: 0.72rem; color: var(--a-faint); line-height: 1.45; }
.a-label {
  display: block;
  font-family: var(--a-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-dim);
  margin-bottom: 0.3rem;
}

/* ---- Buttons ----------------------------------------------------- */

.a-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.35rem;
  border-radius: var(--a-r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.a-btn:hover { transform: translateY(-1px); }
.a-btn-primary {
  background: var(--a-amber);
  color: #16110A;
  border-color: var(--a-amber);
}
.a-btn-primary:hover { background: #7DD3FC; border-color: #7DD3FC; }
.a-btn-primary:disabled { opacity: .5; cursor: default; }
.a-btn-ghost {
  background: transparent;
  color: var(--a-dim);
  border-color: var(--a-line);
}
.a-btn-ghost:hover { color: var(--a-text); border-color: var(--a-dim); }
.a-btn-danger {
  background: transparent;
  color: var(--a-red);
  border-color: rgba(228, 89, 63, 0.4);
}
.a-btn-danger:hover { background: var(--a-red-glow); }

/* Small text-link style action */
.a-link {
  color: var(--a-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color .12s ease;
}
.a-link:hover { color: var(--a-amber); }

/* ---- Segmented control (ANPR / BLE) ------------------------------ */

.a-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--a-inset);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
}
.a-seg-opt {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1.1rem;
  border-radius: 1px;
  color: var(--a-dim);
  transition: all .12s ease;
}
.a-seg input:checked + .a-seg-opt {
  background: var(--a-amber);
  color: #16110A;
}

/* ---- Tabs (Presets / Manual) — keeps legacy .search-tab hooks ---- */

.search-tab {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  color: var(--a-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.search-tab:hover { color: var(--a-text); }
.search-tab.active { color: var(--a-amber); border-bottom-color: var(--a-amber); }

/* ---- Preset cards -------------------------------------------------- */

.a-preset {
  text-align: left;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--a-line);
  border-left: 2px solid var(--a-line);
  border-radius: var(--a-r);
  background: var(--a-inset);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.a-preset:hover { border-color: var(--a-dim); border-left-color: var(--a-amber); }
.a-preset-title {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a-text);
}
.a-preset-desc {
  font-size: 0.72rem;
  color: var(--a-faint);
  margin-top: 0.25rem;
  line-height: 1.4;
}
.a-preset-hot { border-left-color: var(--a-amber); }
.a-preset-hot .a-preset-title { color: var(--a-amber); }

/* Guided steps note */
.a-note {
  border: 1px solid var(--a-line);
  border-left: 2px solid var(--a-amber);
  border-radius: var(--a-r);
  background: var(--a-amber-glow);
  padding: 0.75rem 0.9rem;
  font-size: 0.75rem;
  color: var(--a-text);
}
.a-note .n-step { font-family: var(--a-font-mono); color: var(--a-amber); }

/* ---- Geo mode buttons — keeps legacy .geo-mode-btn hooks ----------- */

.geo-mode-btn {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--a-r);
  border: 1px solid var(--a-line);
  background: var(--a-inset);
  color: var(--a-dim);
  cursor: pointer;
  transition: all .15s;
}
.geo-mode-btn.active {
  border-color: var(--a-amber-dim);
  background: var(--a-amber-glow);
  color: var(--a-amber);
}

/* ---- Slider — keeps legacy .argus-slider hook ----------------------- */

input[type="range"].argus-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background-color: var(--a-line) !important;
  border: none !important;
  border-radius: 2px;
  outline: none;
  padding: 0 !important;
}
input[type="range"].argus-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--a-amber);
  border: 2px solid var(--a-ink);
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"].argus-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--a-amber);
  border: 2px solid var(--a-ink);
  border-radius: 50%;
  cursor: pointer;
}

/* ---- Badges / signal chips ------------------------------------------ */

.a-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-family: var(--a-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--a-r);
  border: 1px solid var(--a-line);
  background: var(--a-inset);
  color: var(--a-dim);
}
.a-badge-red    { border-color: rgba(228,89,63,.45);  background: var(--a-red-glow);   color: var(--a-red); }
.a-badge-amber  { border-color: rgba(56,189,248,.45); background: var(--a-amber-glow); color: var(--a-amber); }
.a-badge-green  { border-color: rgba(143,181,115,.4); background: var(--a-green-glow); color: var(--a-green); }
.a-badge-violet { border-color: rgba(155,140,201,.4); background: rgba(155,140,201,.12); color: var(--a-violet); }

/* ---- Data table ------------------------------------------------------ */

.a-table { width: 100%; font-size: 0.82rem; }
.a-table thead th {
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-dim);
  text-align: left;
  padding: 0.62rem 1rem;
  background: rgba(5, 10, 18, 0.46);
  border-bottom: 1px solid var(--a-line);
}
.a-table tbody tr { border-top: 1px solid var(--a-line2); }
.a-table tbody tr:hover { background: rgba(56,189,248,0.045); }
.a-table td { padding: 0.68rem 1rem; vertical-align: top; }

.a-mono { font-family: var(--a-font-mono); }
.a-plate {
  font-family: var(--a-font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--a-amber);
}
a.a-plate:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Score cells — red is reserved for hot */
.a-score      { font-family: var(--a-font-mono); font-weight: 600; }
.a-score-hot  { color: var(--a-red); }
.a-score-warm { color: var(--a-amber); }
.a-score-cool { color: var(--a-dim); }

/* ---- Legacy Tailwind harmonisation --------------------------------
   Lifts older screens while they are migrated to the .a-* components. */

.bg-slate-900,
.bg-slate-900\/40,
.bg-slate-900\/60,
.bg-slate-900\/90,
.bg-slate-900\/95 {
  background-color: rgba(20, 27, 35, 0.94) !important;
}
.border-slate-800,
.border-slate-700 {
  border-color: var(--a-line) !important;
}
.text-cyan-300,
.text-cyan-400 {
  color: #38BDF8 !important;
}
.bg-cyan-500 {
  background-color: #38BDF8 !important;
}
.bg-cyan-500\/15 {
  background-color: rgba(56, 189, 248, 0.15) !important;
}
.bg-cyan-500\/20 {
  background-color: rgba(56, 189, 248, 0.20) !important;
}
.bg-cyan-500\/70 {
  background-color: rgba(56, 189, 248, 0.70) !important;
}
.border-cyan-400,
.border-cyan-500\/40 {
  border-color: rgba(56, 189, 248, 0.46) !important;
}
.hover\:text-cyan-300:hover,
.hover\:text-cyan-400:hover {
  color: #7DD3FC !important;
}
.hover\:bg-cyan-400:hover {
  background-color: #7DD3FC !important;
}
.rounded-lg { border-radius: var(--a-r-lg) !important; }
.rounded-md, .rounded { border-radius: var(--a-r) !important; }

/* Dashboard/product polish for legacy utility-heavy fragments. */
.a-card .bg-slate-800\/60,
.a-card .bg-slate-800,
.a-card .bg-slate-900 {
  background-color: rgba(15, 23, 42, 0.72) !important;
}

.a-card a.inline-flex {
  min-height: 1.95rem;
  border-color: rgba(56, 189, 248, 0.20) !important;
}

.a-card a.inline-flex:hover {
  border-color: rgba(56, 189, 248, 0.42) !important;
  background-color: rgba(56, 189, 248, 0.10) !important;
}

.a-card .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(39, 51, 66, 0.84) !important;
}

.a-card input[type="text"],
.a-card select {
  background-color: rgba(4, 10, 18, 0.62) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
}

.a-card input[type="text"]:focus,
.a-card select:focus {
  border-color: rgba(56, 189, 248, 0.58) !important;
}

.a-card nav a,
.a-card nav span {
  border-color: rgba(56, 189, 248, 0.20) !important;
}

/* ---- Operations workspace ------------------------------------------ */

.ops-shell {
  max-width: 112rem;
}

.ops-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.ops-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
  font-size: 0.78rem;
  color: var(--a-faint);
}

.ops-breadcrumb a {
  color: var(--a-dim);
}

.ops-breadcrumb a:hover {
  color: var(--a-amber);
}

.ops-filter-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1rem;
}

.ops-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--a-line2);
  margin-bottom: 1rem;
}

.ops-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--a-dim);
  font-size: 0.82rem;
  white-space: nowrap;
}

.ops-tab:hover {
  color: var(--a-text);
}

.ops-tab-active {
  color: var(--a-strong);
  border-bottom-color: var(--a-amber);
}

.ops-tab-count {
  color: var(--a-faint);
  font-family: var(--a-font-mono);
  font-size: 0.72rem;
}

.ops-case-panel {
  background:
    linear-gradient(180deg, rgba(16, 25, 41, 0.98), rgba(9, 15, 26, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow-soft);
}

.ops-case-row {
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}

.ops-case-row:hover {
  background: rgba(56, 189, 248, 0.045);
}

.ops-case-ref {
  font-family: var(--a-font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--a-amber);
}

.ops-detail-hero {
  padding: 1.25rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.11), transparent 34rem),
    linear-gradient(180deg, rgba(16, 25, 41, 0.98), rgba(9, 15, 26, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow-soft);
}

.ops-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 1.35rem;
  margin-top: 1rem;
}

.ops-meta-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--a-faint);
}

.ops-meta-value {
  display: block;
  margin-top: 0.1rem;
  color: var(--a-text);
}

.ops-form-shell {
  max-width: 58rem;
}

.ops-form-section {
  padding: 1.15rem;
  margin-bottom: 1rem;
}

.ops-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ops-sticky-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 0.25rem;
  background: linear-gradient(180deg, transparent, rgba(9, 13, 18, 0.96) 34%);
}

@media (max-width: 760px) {
  .ops-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ops-form-grid {
    grid-template-columns: 1fr;
  }
}