/* ==================== RESET ====================
   Minimal modern reset — replaces Tailwind Preflight.
   Only the rules this app actually relies on. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; }
body { margin: 0; font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }

/* ==================== PASSWORD GATE ====================
   The login is the first IRYS surface. It must inherit the body's authored
   atmosphere (radial spotlight + vertical fade) instead of overwriting it,
   carry the same shimmer-edge contract every other card surface in the app
   carries, and behave as a real form (in-flight state, differentiated
   errors, focus-visible parity). All rules in this block are scoped to
   .pw-, .login-, or .password selectors. */

.pw-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  /* Translucent fill so the body's radial spotlight + linear vertical fade
     read through. The blur sits behind the modal to keep edge alignment
     visually clean without competing with the modal itself. */
  background: rgba(2,5,14,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}

.pw-modal {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 32px 32px 28px;
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

/* Shimmer-edge — the system's resting-elevation signature (DESIGN.md §4).
   Every card and KPI tile in the app carries this. The login modal is a
   card-shaped surface; it carries it too. No exceptions. */
.pw-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  border-radius: 1px;
  pointer-events: none;
}

.pw-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 10px;
}

.pw-brand-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Wordmark sits in the headline tier — IRYS is the loudest object on the
   surface, replacing the old "ACCESS REQUIRED" H2. Establishes character
   in one second. */
.pw-wordmark {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
}

.pw-tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
}

.pw-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: -6px; /* tighten to the input below */
}

.pw-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 150ms;
}
.pw-input::placeholder { color: rgba(255,255,255,0.50); }
.pw-input:focus { border-color: var(--accent-blue); }
.pw-input:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.pw-input-error { border-color: var(--bad) !important; }

.pw-error-msg {
  margin: 0;
  font-size: 12px;
  color: var(--bad);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.pw-btn {
  margin-top: 4px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out, opacity 200ms ease-out;
}
/* Canonical button-primary-hover token (DESIGN.md components.button-primary-hover). */
.pw-btn:hover { background: #6890ff; }
.pw-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}
.pw-btn-pending,
.pw-btn[disabled],
.pw-btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--accent-blue);
}
.pw-btn-pending:hover,
.pw-btn[disabled]:hover,
.pw-btn[aria-busy="true"]:hover {
  background: var(--accent-blue);
}

/* Footer line — frames context for cold landings. Label tier, decorative
   alpha so it sits visually beneath the action without competing. */
.pw-footer-note {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  text-align: center;
  line-height: 1.5;
}

@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}
.pw-shake { animation: pw-shake 0.5s ease; }

/* Narrow-phone responsiveness — the modal collapses padding so it stays
   clear of the viewport edge on a 360px-wide landscape phone in the yard. */
@media (max-width: 380px) {
  .pw-modal {
    padding: 28px 22px 22px;
    gap: 12px;
  }
  .pw-wordmark { font-size: 24px; }
}

/* IRYS dashboard styles — Aqsa midnight + ops dashboard hybrid */

:root {
  /* Functional colors layered onto Aqsa palette */
  --ok: #22C55E;          /* bright saturated green — ref */
  --warn: #F59E0B;        /* amber */
  --bad: #EF4444;         /* bright red */
  --accent-blue: #3B82F6;  /* info blue */
  --intecs-yellow: #FACC15;

  --surface-1: #111B33;    /* card panel — darker navy, less translucent */
  --surface-2: #16223D;
  --surface-3: #1D2C4F;
  --border-1: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.14);
}

* { box-sizing: border-box; }

html, body {
  /* Kill macOS/Chromium rubber-band overscroll so the white page
     behind the app never flashes when trackpad-scrolling past edges. */
  overscroll-behavior: none;
  background-color: #02050E;
}

body {
  margin: 0;
  /* Jost first so the next/font preload is actually consumed on first paint.
     AvantGarde is kept as a soft fallback for the rare environments where it's
     installed as a system font (we don't ship an @font-face for it). */
  font-family: var(--font-jost), 'AvantGarde', system-ui, sans-serif;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(30,64,175,0.25) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0A1226 0%, #050A18 60%, #02050E 100%);
  background-attachment: fixed;
  color: #fff;
  min-height: 100vh;
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

.app {
  position: relative;
  min-height: 100vh;
  padding: 20px 28px 40px;
}

.bg-spotlight {
  position: fixed;
  top: -200px; left: 50%;
  width: 1200px; height: 800px;
  margin-left: -600px;
  background: radial-gradient(ellipse at center, rgba(31,91,194,0.18) 0%, rgba(0,7,44,0) 60%);
  pointer-events: none;
  z-index: 0;
}

.app > * { position: relative; z-index: 1; }
.app > .bg-spotlight { position: fixed; }

/* ==================== HEADER ==================== */
.header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 18px;
}

.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-clickable { cursor: pointer; transition: opacity 150ms; }
.brand-clickable:hover { opacity: 0.85; }
.brand-clickable:hover .brand-title { color: var(--accent-blue); }
.brand-mark {
  width: 88px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.brand-text { min-width: 0; }
.brand-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.brand-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav { display: flex; gap: 4px; margin-left: 24px; }
.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.85);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  transition: 200ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-btn:hover { color: #fff; background: var(--surface-1); }
.nav-btn.active {
  color: #fff;
  background: rgba(31,91,194,0.12);
  border-color: rgba(31,91,194,0.4);
}
.nav-badge {
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.header-meta { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.last-update { text-align: right; }
.meta-label { font-size: 10px; letter-spacing: 0.16em; color: rgba(255,255,255,0.85); text-transform: uppercase; }
.meta-value { font-size: 13px; font-weight: 500; margin-top: 2px; }

/* ==================== CAS · IRYS system page ==================== */

.cas-view {
  gap: 14px;
}
.cas-view .cas-hero {
  grid-template-columns: minmax(300px, 0.65fr) minmax(520px, 1.35fr);
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 4px;
}
.cas-view .cas-hero-summary-only {
  grid-template-columns: 1fr;
}
.cas-view .cas-hero .system-hero-signature {
  gap: 10px;
  padding-right: 18px;
  justify-content: center;
}
.cas-view .cas-hero .system-hero-field {
  gap: 8px;
}
.cas-hero-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cas-hero .system-hero-signature {
  justify-content: center;
}
.cas-hero .system-hero-bullets {
  align-items: stretch;
  gap: 8px;
}
.cas-hero .system-hero-bullet {
  justify-content: flex-start;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}
.cas-ring-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.cas-ring-num.ok { color: var(--ok); }
.cas-ring-num.bad { color: var(--bad); }
.cas-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.cas-summary-stat {
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cas-summary-value {
  color: rgba(255,255,255,0.92);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.cas-summary-label {
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cas-summary-stat.tone-ok .cas-summary-value { color: var(--ok); }
.cas-summary-stat.tone-warn .cas-summary-value { color: var(--warn); }
.cas-summary-stat.tone-bad .cas-summary-value { color: var(--bad); }
.cas-analysis-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.8fr) minmax(560px, 1.2fr);
  gap: 16px;
  align-items: stretch;
}
.cas-analysis-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cas-analysis-grid > .card > .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cas-analysis-grid .cas-table-wrap {
  flex: 1;
  max-height: 260px;
}
.cas-analysis-grid .cas-bars {
  flex: 1;
  justify-content: space-between;
}
.cas-alarms-card .cas-bars {
  gap: 10px;
}
.cas-alarms-card .cas-bar-row {
  grid-template-columns: minmax(220px, 300px) minmax(150px, 240px) 34px;
  justify-content: start;
}
.cas-history-card .cas-table {
  min-width: 680px;
}
.cas-health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cas-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
}
.cas-health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 82px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cas-health-pill.ok { color: var(--ok); background: rgba(34,197,94,0.10); }
.cas-health-pill.warn { color: var(--warn); background: rgba(245,158,11,0.10); }
.cas-health-pill.bad { color: var(--bad); background: rgba(239,68,68,0.10); }
.cas-health-pill .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.cas-readiness-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cas-readiness-pill.ok {
  color: var(--ok);
  background: rgba(34,197,94,0.10);
}
.cas-readiness-pill.bad {
  color: var(--bad);
  background: rgba(239,68,68,0.10);
}
.cas-readiness-pill .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.cas-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cas-bar-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.85fr) minmax(120px, 1fr) 40px;
  align-items: center;
  gap: 10px;
}
.cas-bar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
}
.cas-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.cas-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-blue);
}
.cas-bar-value {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.cas-line-chart {
  width: 100%;
  min-height: 132px;
  display: block;
  overflow: visible;
}
.cas-gridline {
  stroke: rgba(255,255,255,0.18);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}
.cas-line-area {
  fill: rgba(59,130,246,0.14);
}
.cas-line {
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 3;
}
.cas-line-dot {
  fill: rgba(255,255,255,0.92);
  stroke: var(--accent-blue);
  stroke-width: 1;
}
.cas-axis-label {
  fill: rgba(255,255,255,0.62);
  font-size: 11px;
}
.cas-device-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.cas-device-cell {
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 116px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.cas-device-cell.online { border-color: rgba(34,197,94,0.28); }
.cas-device-cell.lag { border-color: rgba(245,158,11,0.34); }
.cas-device-cell.offline { border-color: rgba(239,68,68,0.34); }
.cas-device-cell:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.cas-device-cell:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.cas-device-cell-head,
.cas-device-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cas-device-unit {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.cas-device-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}
.cas-device-alarm,
.cas-device-clear {
  min-height: 30px;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.3;
}
.cas-device-alarm {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.24);
  color: rgba(255,255,255,0.9);
}
.cas-device-clear {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.18);
  color: rgba(255,255,255,0.85);
}
.cas-device-open {
  margin-top: auto;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cas-detail-view {
  gap: 16px;
}
.cas-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.cas-detail-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.cas-detail-identity,
.cas-detail-status {
  position: relative;
  z-index: 1;
}
.cas-detail-unit {
  margin-top: 8px;
  color: rgba(255,255,255,0.96);
  font-size: 46px;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.cas-detail-subline {
  margin-top: 8px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  font-weight: 600;
}
.cas-detail-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cas-detail-active-alarm,
.cas-detail-clear {
  max-width: 340px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.cas-detail-active-alarm {
  color: rgba(255,255,255,0.92);
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.26);
}
.cas-detail-clear {
  color: rgba(255,255,255,0.86);
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
}
.cas-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.cas-detail-grid .cas-detail-kv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 18px;
}
.cas-detail-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cas-detail-health-metric {
  min-width: 0;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 11px;
  background: rgba(255,255,255,0.025);
}
.cas-detail-label {
  margin-bottom: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cas-detail-kv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cas-detail-kv {
  display: grid;
  grid-template-columns: minmax(94px, 0.48fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}
.cas-detail-kv span {
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cas-detail-kv strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 650;
}
.cas-detail-alarm-list {
  display: flex;
  flex-direction: column;
}
.cas-detail-alarm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cas-detail-alarm-row:first-child {
  padding-top: 0;
}
.cas-detail-alarm-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.cas-detail-alarm-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
}
.cas-detail-empty {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.cas-detail-back-link {
  width: fit-content;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cas-detail-back-link:hover {
  background: var(--surface-2);
  color: rgba(255,255,255,0.96);
}
.cas-detail-back-link:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}
.cas-table-wrap { max-height: 390px; }
.cas-event-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.cas-event-time {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.cas-severity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cas-severity.bad { color: var(--bad); background: rgba(239,68,68,0.10); }
.cas-severity.warn { color: var(--warn); background: rgba(245,158,11,0.10); }
.cas-severity.info { color: var(--accent-blue); background: rgba(59,130,246,0.10); }
.cas-severity .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.cas-video-id {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
}
.cas-evidence {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 3px 8px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.035);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .cas-view .cas-hero {
    grid-template-columns: 1fr;
  }
  .cas-view .cas-hero .system-hero-signature {
    border-right: none;
    border-bottom: 1px solid var(--border-1);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .cas-analysis-grid,
  .cas-detail-grid,
  .cas-summary-grid {
    grid-template-columns: 1fr;
  }
  .cas-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .cas-detail-hero {
    grid-template-columns: 1fr;
  }
  .cas-detail-status {
    align-items: flex-start;
  }
  .cas-detail-unit {
    font-size: 36px;
  }
  .cas-detail-health-grid,
  .cas-detail-grid .cas-detail-kv-list,
  .cas-summary-grid {
    grid-template-columns: 1fr;
  }
  .cas-bar-row {
    grid-template-columns: minmax(70px, 0.7fr) minmax(90px, 1fr) 34px;
  }
  .cas-detail-alarm-row {
    grid-template-columns: 1fr;
  }
  .cas-detail-alarm-meta {
    justify-content: flex-start;
  }
}

.date-range-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.date-range-copy {
  min-width: 146px;
  padding-right: 2px;
}
.date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.date-field input {
  height: 34px;
  width: 142px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 9px;
  color-scheme: dark;
}
.date-field input:hover { border-color: rgba(255,255,255,0.18); }
.date-field input[type="datetime-local"] { width: 188px; }
.date-field input:focus-visible,
.date-range-control .btn-sm:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-color: var(--accent-blue);
}
.date-range-control .btn-sm:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.btn-sm.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.btn-sm.primary:hover { background: #5a96ff; }

/* ==================== KPI ROW ==================== */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.kpi-tile.tone-ok { border-color: rgba(34,197,94,0.3); }
.kpi-tile.tone-bad { border-color: rgba(239,68,68,0.3); }
.kpi-tile.tone-warn { border-color: rgba(245,158,11,0.35); }

button.kpi-tile {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  width: 100%;
}
.kpi-tile.clickable { transition: 200ms; }
.kpi-tile.clickable:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.kpi-tile.clickable:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.kpi-tile.clickable.active {
  border-color: var(--warn);
  background: rgba(245,158,11,0.08);
  box-shadow: 0 0 0 1px var(--warn) inset;
}
.kpi-chev {
  margin-left: auto;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  line-height: 1;
}
.kpi-tile.clickable.active .kpi-chev { color: var(--warn); }

.kpi-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.kpi-flag.warn { color: var(--warn); font-size: 14px; }

.kpi-availability { display: flex; align-items: center; justify-content: center; gap: 16px; }

.kpi-big { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi-num {
  font-size: 56px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-num.kpi-ok { color: var(--ok); }
.kpi-num.kpi-bad { color: var(--bad); }
.kpi-icon-wrap, .kpi-check, .kpi-alert { color: rgba(255,255,255,0.5); }
.kpi-tile.tone-ok .kpi-check { color: var(--ok); }
.kpi-tile.tone-bad .kpi-alert { color: var(--bad); }

.kpi-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
}

.kpi-issue { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-issue-name { font-size: 18px; font-weight: 500; line-height: 1.1; margin-bottom: 6px; }
.kpi-issue-count { font-size: 28px; font-weight: 700; color: var(--warn); line-height: 1; }
.kpi-issue-graphic { color: var(--warn); flex: none; }

/* ===== KPI ROW — STRUCTURALLY VARIED TILES =====
   The Overview row deliberately rejects the 4-up identical-template trap
   PRODUCT.md anti-reference #1 names. Each tile carries a different content
   shape (ring / number+composition bar / dual split-fill / number+list) so
   a thumbnail of the row reads as an instrument cluster, not a SaaS hero. */

/* Slot 1 — Fleet availability: ring + ready/total fraction strip below. */
.kpi-tile-availability { gap: 8px; }
.kpi-avail-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--border-1);
  padding-top: 10px;
  margin-top: 4px;
}
.kpi-avail-frac {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-avail-frac-num {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.kpi-avail-frac-total { color: rgba(255,255,255,0.85); font-weight: 500; }
.kpi-avail-frac-sep { color: rgba(255,255,255,0.5); font-weight: 400; }
.kpi-avail-frac-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

/* Slot 2 — Fleet composition: total + hairline stacked bar + 4-up legend. */
.kpi-tile-composition { gap: 10px; }
.kpi-comp-num-row { display: flex; align-items: baseline; gap: 12px; }
.kpi-comp-num-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.kpi-comp-bar {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  gap: 2px;
}
.kpi-comp-seg {
  display: block;
  background: rgba(255,255,255,0.55);
  min-width: 8px;
}
.kpi-comp-seg:nth-child(1) { background: rgba(255,255,255,0.65); }
.kpi-comp-seg:nth-child(2) { background: rgba(255,255,255,0.50); }
.kpi-comp-seg:nth-child(3) { background: rgba(255,255,255,0.35); }
.kpi-comp-seg:nth-child(4) { background: rgba(255,255,255,0.22); }
.kpi-comp-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 2px;
}
.kpi-comp-legend-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kpi-comp-legend-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.kpi-comp-legend-count {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Slot 3 — Readiness split: two halves on a single tile with a dual-fill
   bar at the bottom. Status colors carry the loudest signal and pair with
   labels + glyphs (Three-Channel Status Rule). The whole tile sits on
   surface-1 with a single hairline divider; no side-stripes. */
.kpi-tile-readiness { gap: 12px; }

/* Symmetric body: NOT READY counter on the left, READY counter on the
   right, hairline divider rendered as a left-border on the READY half.
   Plain flexbox row — keeps both halves at flex: 1 so they mirror, and
   sidesteps the grid auto-placement that misfired on this tile twice. */
.kpi-readiness-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  position: relative;
}
.kpi-readiness-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-1);
  pointer-events: none;
}
.kpi-readiness-anchor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: background 200ms;
}
.kpi-readiness-anchor:hover { background: rgba(255,255,255,0.03); }
.kpi-readiness-anchor:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}
.kpi-readiness-anchor-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}


.kpi-split-fill {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.kpi-split-fill-ready { background: var(--ok); display: block; min-width: 4px; }
.kpi-split-fill-bad   { background: var(--bad); display: block; }

/* Slot 4 — Open alerts: count + freshest-3 list-line preview.
   Replaces the redundant TOTAL/READY pair with the operationally loudest
   surface on Overview. The header already declares .nav-badge for this
   count but never renders it — this tile makes it visible. */
.kpi-tile-alerts { gap: 10px; }
.kpi-alerts-num-row { display: flex; align-items: baseline; gap: 12px; }
.kpi-alerts-num-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.kpi-alerts-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi-alerts-row {
  display: grid;
  grid-template-columns: 8px auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
}
.kpi-alerts-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bad);
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
  display: inline-block;
}
.kpi-alerts-unit {
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.kpi-alerts-msg {
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kpi-alerts-time {
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
}
.kpi-alerts-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
}
.kpi-alerts-empty-mark { color: var(--ok); display: inline-flex; }

/* ==================== RING GAUGE ==================== */
.ring-gauge { position: relative; flex: none; }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.ring-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ring-value { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-sub { font-size: 11px; color: rgba(255,255,255,0.85); margin-top: 4px; }

/* ==================== MID ROW ==================== */
.mid-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* Dashboard fits the viewport: KPI row gets the top half, mid row the bottom. */
.app[data-screen-label="IRYS Dashboard"] {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  overflow: hidden;
}
.app[data-screen-label="IRYS Dashboard"] .overview {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-row {
  margin-bottom: 0;
  min-height: 0;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 32px;
}

/* Dashboard sizing tweaks (text contrast handled globally now). */
.app[data-screen-label="IRYS Dashboard"] .kpi-title { font-size: 13px; margin-bottom: 0; }
.app[data-screen-label="IRYS Dashboard"] .kpi-num { font-size: 96px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-meta { font-size: 15px; margin-top: 0; }
.app[data-screen-label="IRYS Dashboard"] .kpi-check svg,
.app[data-screen-label="IRYS Dashboard"] .kpi-alert svg { width: 72px; height: 72px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-icon-wrap svg { width: 64px; height: 64px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-availability { gap: 24px; flex: 1; }
.app[data-screen-label="IRYS Dashboard"] .kpi-availability .ring-value { font-size: 36px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-availability .ring-sub { font-size: 14px; }

/* Dashboard-scoped sizing for the four new KPI shapes. The 100dvh viewport
   contract (top row at 50% height) means each tile renders larger than
   on system pages, so number scale and meta gaps grow proportionally. */
.app[data-screen-label="IRYS Dashboard"] .kpi-tile-availability { padding: 24px 28px 20px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-avail-frac-num { font-size: 22px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-avail-frac-label { font-size: 11px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-count { font-size: 22px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-bar { height: 8px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-readiness-anchor .kpi-num { font-size: 88px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-split-fill { height: 8px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-tile-alerts .kpi-num { font-size: 72px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-num-label { font-size: 12px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-row { font-size: 13px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-time { font-size: 12px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-empty { font-size: 13px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-tile-composition .kpi-num { font-size: 72px; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-num-label { font-size: 12px; }
.app[data-screen-label="IRYS Dashboard"] .mid-row {
  margin-bottom: 0;
  min-height: 0;
}
.app[data-screen-label="IRYS Dashboard"] .mid-row > .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app[data-screen-label="IRYS Dashboard"] .mid-row > .card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
}
.card-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.card-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.card-body { padding: 20px; }

/* DONUT BREAKDOWN */
.breakdown-donut { display: flex; align-items: stretch; gap: 20px; min-height: 0; height: 100%; }
.donut { position: relative; flex: none; align-self: center; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.donut-top { font-size: 9px; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); text-transform: uppercase; }
.donut-big { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.donut-sub { font-size: 11px; color: rgba(255,255,255,0.85); margin-top: 2px; }

/* The unit-name list on the Overview mid-row. Replaces the legacy
   per-subsystem legend so the dispatcher reads names, not percentages.
   Subsystem totals move into a compact tag strip below the list. */
.breakdown-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.breakdown-list-head {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.breakdown-list-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}
.breakdown-unit {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  text-decoration: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.breakdown-unit:hover { background: var(--surface-2); }
.breakdown-unit:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  background: var(--surface-2);
}
.breakdown-unit-id {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
}
.breakdown-unit-cause { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.breakdown-unit-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
}
.breakdown-unit-dot-muted { background: rgba(255,255,255,0.5); }
.breakdown-unit-cause-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breakdown-unit-time {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}
.breakdown-unit-chev {
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  transition: 200ms;
}
.breakdown-unit:hover .breakdown-unit-chev,
.breakdown-unit:focus-visible .breakdown-unit-chev {
  color: var(--accent-blue);
  transform: translateX(2px);
}
.breakdown-list-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: 150ms;
}
.breakdown-list-more:hover,
.breakdown-list-more:focus-visible {
  color: var(--accent-blue);
  background: var(--surface-2);
  outline: none;
}
.breakdown-list-more-chev { font-size: 13px; line-height: 1; }
.breakdown-tags {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-1);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.breakdown-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-1);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: 150ms;
}
.breakdown-tag:hover,
.breakdown-tag.hover { background: var(--surface-2); border-color: var(--border-2); }
.breakdown-tag:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.breakdown-tag-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.breakdown-tag-label { color: rgba(255,255,255,0.85); }
.breakdown-tag-count { color: #fff; font-weight: 700; }
.breakdown-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
}
.breakdown-empty-mark { line-height: 0; }
.breakdown-empty-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
}
.breakdown-empty-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

/* SYSTEM HEALTH */
.sys-health {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.sys-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: 200ms;
}
.sys-cell:hover { border-color: var(--border-2); transform: translateY(-2px); }
.sys-cell-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.sys-cell-link::after {
  content: "›";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  transition: 200ms;
}
.sys-cell-link:hover::after { color: var(--accent-blue); transform: translateX(2px); }
.sys-cell-link:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.sys-cell-link:focus-visible::after { color: var(--accent-blue); }

/* Fuel page */
.fuel-view { display: flex; flex-direction: column; gap: 16px; }
/* Shared /system/* page header — back button inline with the title block,
   matching the unit-detail page header (.detail-head). */
.fuel-head { display: flex; align-items: center; gap: 24px; margin-bottom: 4px; }
.fuel-title-row { display: flex; align-items: center; gap: 14px; flex: 1; }
.sys-icon-inline {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(31,91,194,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
}
.kpi-unit { font-size: 0.4em; font-weight: 600; color: rgba(255,255,255,0.85); margin-left: 6px; }

/* Values that should be pure white across the whole app
   (overrides the global label-tier default for these specific spots). */
.kv-value,
.lube-circle.paused .lube-state { color: #fff; }

/* Fuel card: ring gauge + kv-list side by side */
.fuel-card-row { display: flex; align-items: center; gap: 24px; }
.fuel-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.fuel-gauge-delta { font-size: 11px; font-weight: 600; }

/* Lube card: pulsing cycle badge + kv-list */
.lube-card-row { display: flex; align-items: center; gap: 24px; }
.lube-badge { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.lube-circle {
  width: 120px; height: 120px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid;
  transition: 200ms;
}
.lube-circle .lube-state { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; }
.lube-circle .lube-state-sub { font-size: 10px; color: rgba(255,255,255,0.85); margin-top: 4px; }
.lube-circle.running {
  border-color: var(--ok);
  background: rgba(34,197,94,0.06);
  animation: lube-pulse 1.8s ease-in-out infinite;
}
.lube-circle.running .lube-state { color: var(--ok); }
.lube-circle.paused {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
}
.lube-circle.paused .lube-state { color: rgba(255,255,255,0.85); }
/* Logger offline — neutral grey ring, no pulse, dimmed text. */
.lube-circle.nodata {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
}
.lube-circle.nodata .lube-state { color: rgba(255,255,255,0.5); }
.lube-circle.nodata .lube-state-sub { letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
@keyframes lube-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}
.lube-faults { font-size: 12px; font-weight: 600; }
.lube-faults.ok { color: var(--ok); }
.lube-faults.bad { color: var(--bad); }
.lube-faults.nodata { color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }

/* Fire card: 5-indicator ANSUL status panel — wraps responsively so it
   reads as a single horizontal strip when wide and a 3+2 grid when narrow. */
.fire-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.fire-ind {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex; align-items: flex-start; gap: 10px;
}
.fire-ind-light { margin-top: 2px; }
.fire-ind-light {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex: none;
}
.fire-ind.ok  .fire-ind-light { background: var(--ok); box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
.fire-ind.bad .fire-ind-light { background: var(--bad); box-shadow: 0 0 0 4px rgba(239,68,68,0.2); animation: fire-throb 1.4s ease-in-out infinite; }
/* Logger offline: neutral grey light — explicitly NOT green (false
   reassurance) and NOT red (false alarm). Conveys "unknown" only. */
.fire-ind.nodata .fire-ind-light { background: rgba(255,255,255,0.35); box-shadow: 0 0 0 4px rgba(255,255,255,0.06); }
@keyframes fire-throb {
  0%, 100% { box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.fire-ind-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fire-ind-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
/* Event-history message — wraps to as many lines as the string needs. */
.fire-ind-state { font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fire-ind.ok     .fire-ind-state { color: var(--ok); }
.fire-ind.bad    .fire-ind-state { color: var(--bad); }
.fire-ind.warn .fire-ind-light { background: var(--warn); box-shadow: 0 0 0 4px rgba(229,192,78,0.18); }
.fire-ind.warn .fire-ind-state { color: var(--warn); }
.fire-ind.nodata .fire-ind-state { color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }

/* System cross-link nav (top of each /system/* page) */
.system-nav {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
}
.system-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: 200ms;
}
.system-nav-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.system-nav-item.active {
  background: var(--surface-2);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent-blue) inset;
}
.system-nav-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
}
.sys-head {
  display: flex; align-items: center; gap: 10px;
  align-self: stretch;
  min-height: 44px;
}
.sys-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(31,91,194,0.12);
  color: var(--accent-blue);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.sys-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 16px; }
.sys-sub { font-size: 10px; color: rgba(255,255,255,0.85); letter-spacing: 0.12em; text-transform: uppercase; line-height: 14px; min-height: 14px; }
.sys-head > div { display: flex; flex-direction: column; justify-content: center; min-height: 36px; }
.dot { width: 6px; height: 6px; border-radius: 999px; }
.dot-warn { background: var(--warn); }
.dot-bad { background: var(--bad); }
.dot-ok { background: var(--ok); }

/* ==================== UNIT TABLE ==================== */
.unit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.search {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 6px 10px;
  color: rgba(255,255,255,0.85);
}
.search:focus-within { border-color: rgba(31,91,194,0.5); }
.search input {
  background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 13px; color: #fff;
  width: 160px;
}

.table-fleet-filter {
  position: relative;
  display: inline-flex; align-items: center;
}
.table-fleet-filter select {
  appearance: none;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 7px 28px 7px 12px;
  color: #fff;
  font-family: inherit; font-size: 13px;
  cursor: pointer;
  outline: none;
}
.table-fleet-filter select:hover { border-color: rgba(255,255,255,0.18); }
.table-fleet-filter select:focus { border-color: rgba(31,91,194,0.5); }
.table-fleet-filter .caret {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.85);
  pointer-events: none;
}

.toggle-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 999px;
}
.toggle-pill input { accent-color: var(--accent-blue); }

.reset-filters-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: 150ms;
}
.reset-filters-btn:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: rgba(255,255,255,0.95);
}
.table-wrap { overflow-x: auto; max-height: 540px; overflow-y: auto; }
.unit-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.unit-table thead { position: sticky; top: 0; background: rgba(6,16,40,0.95); backdrop-filter: blur(8px); z-index: 2; }
.unit-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-1);
}
.unit-table th.sortable { cursor: pointer; user-select: none; }
.unit-table th.sortable:hover { color: #fff; }
.unit-table th.active { color: #fff; }
.th-inner { display: inline-flex; align-items: center; gap: 6px; }
.sort-ico { font-size: 9px; opacity: 0.6; }
.sys-th { display: inline-flex; align-items: center; gap: 6px; }
.sys-th svg { width: 14px; height: 14px; color: var(--accent-blue); }

.unit-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
  vertical-align: middle;
}
/* Zebra striping — applied to every other data row in tbody. */
.unit-table tbody tr.unit-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.unit-row { cursor: pointer; transition: 100ms; }
.unit-row:hover,
.unit-table tbody tr.unit-row:nth-child(even):hover { background: var(--surface-2); }
.unit-id { font-weight: 600; font-variant-numeric: tabular-nums; }
.unit-id-link { color: inherit; text-decoration: none; }
.unit-id-link:hover { text-decoration: underline; text-decoration-color: var(--accent-blue); text-underline-offset: 3px; }
.muted { color: rgba(255,255,255,0.85); }

.conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  letter-spacing: 0.02em;
}
.conn-pill .conn-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.conn-pill.on  { color: var(--ok);  border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.10); }
.conn-pill.on .conn-dot  { background: var(--ok); box-shadow: 0 0 6px rgba(34,197,94,0.7); }
.conn-pill.off { color: var(--bad); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.10); }
.conn-pill.off .conn-dot { background: var(--bad); box-shadow: 0 0 6px rgba(239,68,68,0.7); }
.rc.bad { color: var(--bad); font-weight: 500; }
.rc.muted { color: rgba(255,255,255,0.85); }
.empty-row { text-align: center; padding: 60px 0 !important; color: rgba(255,255,255,0.85); }

.app.density-compact .unit-table td { padding: 8px 12px; }
.app.density-compact .unit-table th { padding: 10px 12px; }

/* ==================== UNITS VIEW (/units page-scope) ==================== */

/* Visually-hidden live region — announces filter changes to assistive tech
   without occupying any visual space. Mirrors the standard sr-only idiom. */
.units-view .units-sr-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page-scoped focus-visible vocabulary — matches the Overview/Alerts pages:
   2px accent-blue outline + 3px offset on standalone controls, 1px inset
   ring on table rows so the row itself reads as the focus target without
   pushing content. */
.units-view .reset-filters-btn:focus-visible,
.units-view .table-fleet-filter select:focus-visible,
.units-view .segmented .tab:focus-visible,
.units-view .search-clear:focus-visible,
.units-view .filter-chip:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.units-view .search:focus-within {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-color: var(--accent-blue);
}
.units-view .unit-table th.sortable:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}
.units-view .unit-row:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
  background: var(--surface-2);
}

/* Quieter unsorted glyph; bumped active glyph to 11px so a NOC operator at
   typical viewing distance can read sort direction without leaning in. */
.units-view .sort-ico { font-size: 11px; opacity: 0.4; }
.units-view th.active .sort-ico { opacity: 1; }

/* Search input clear button + keyboard hint kbd. The kbd is a faint hint
   that `/` focuses the input — discoverable without crowding. */
.units-view .search { position: relative; padding-right: 8px; }
.units-view .search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: 150ms;
}
.units-view .search-clear:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.units-view .search-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0;
}

/* Standardize control radii in the actions row — search 10, fleet 10,
   segmented 10, reset 10. One shape vocabulary across siblings. */
.units-view .segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 10px;
}
.units-view .segmented .tab {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: 200ms;
}
.units-view .segmented .tab:hover { color: #fff; }
.units-view .segmented .tab.active { background: var(--accent-blue); color: #fff; }
.units-view .fault-filter .tab {
  padding-inline: 10px;
}
.units-view .fault-filter .tab.active {
  background: rgba(239,68,68,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.45);
}

.units-view .reset-filters-btn {
  border-radius: 10px;
}

/* Faults cell — collapses the prior four binary device columns into a single
   icon-and-label row. Only failing subsystems render; OK rows show an em-dash
   in muted tone so the eye still anchors on a per-row mark. */
.units-view .faults-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.units-view .faults-cell.faults-none {
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  letter-spacing: 0;
}
.units-view .fault-pip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 999px;
  color: var(--bad);
  text-transform: uppercase;
}
.units-view .fault-pip svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}
.units-view .fault-pip-label { font-size: 10px; }

/* NOT-READY left-edge anchor — a 2px hairline at the row's left edge gives
   the eye a single anchoring stripe to scan down the table. The Status chip
   still carries glyph+label, the Faults cell carries the per-subsystem icon
   set, and Root Cause carries the rich label — Three Channels intact. */
.units-view .unit-row.not-ready td:first-child {
  box-shadow: inset 2px 0 0 var(--bad);
}

/* Empty-state recovery block — replaces the old un-actionable single-line
   "No units match filters" text with a diagnostic + per-filter remove chips
   + a single Clear all action. */
.units-view .empty-state-cell {
  padding: 48px 16px !important;
  text-align: center;
}
.units-view .empty-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.units-view .empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.units-view .empty-state-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.units-view .empty-state-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 640px;
  margin-top: 4px;
}
.units-view .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: 150ms;
}
.units-view .filter-chip:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: #fff;
}
.units-view .filter-chip-label {
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.units-view .filter-chip-value {
  color: #fff;
  font-weight: 600;
}
.units-view .filter-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1;
}
.units-view .filter-chip:hover .filter-chip-x {
  background: rgba(239,68,68,0.18);
  color: var(--bad);
}
.units-view .filter-chip-clear-all {
  background: transparent;
  border-color: transparent;
  color: var(--accent-blue);
  font-weight: 600;
}
.units-view .filter-chip-clear-all:hover {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.35);
  color: var(--accent-blue);
}

/* Sentinel hairline — replaces the prior "Loading more…" text. A 2px tall
   accent-blue bar at 30% alpha pulses subtly so a power user can see the
   table is still extending without reading prose that duplicated the
   subtitle counter. */
.units-view .row-sentinel td {
  padding: 6px 0 !important;
  border-bottom: none;
}
.units-view .row-sentinel-bar {
  height: 2px;
  background: rgba(59,130,246,0.18);
  border-radius: 2px;
  animation: units-sentinel-pulse 1400ms ease-in-out infinite;
}
@keyframes units-sentinel-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.96); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

.units-view .row-end-cell {
  padding: 14px 0 !important;
  font-size: 12px;
  border-top: 1px solid var(--border-1);
  border-bottom: none;
}

/* Cursor on sortable header reads as a button now that it is keyboard-
   reachable; matches the pattern. */
.units-view .unit-table th.sortable { user-select: none; }

.table-foot {
  padding: 12px 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  border-top: 1px solid var(--border-1);
  text-align: center;
}

/* mini status */
.mini-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.mini-ok { color: var(--ok); }
.mini-warn { color: var(--warn); }
.mini-bad { color: var(--bad); }
.mini-label { font-size: 11px; }

/* CHIP */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.chip-md { font-size: 12px; padding: 5px 12px; }
.chip-sm { font-size: 10px; padding: 3px 8px; }
.chip-ok { color: var(--ok); background: rgba(34,197,94,0.1); }
.chip-bad { color: var(--bad); background: rgba(239,68,68,0.12); }
.chip-warn { color: var(--warn); background: rgba(245,158,11,0.12); }
.chip-dot { width: 6px; height: 6px; border-radius: 999px; }

/* ==================== TOOLTIP ==================== */
.tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: #0a1545;
  border: 1px solid var(--border-2);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* ==================== UNIT DETAIL ==================== */
.unit-detail { animation: fadeIn 300ms; }
.overview { animation: fadeIn 300ms; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.detail-head {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 18px;
}
.detail-toolbar {
  display: flex;
  justify-content: flex-start;
}
.back-btn {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: 200ms;
}
.back-btn:hover { background: var(--surface-2); color: #fff; border-color: var(--border-2); }

.detail-title-block { flex: 1; }
.detail-id {
  display: flex; align-items: center; gap: 14px;
  font-size: 32px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Telemetry freshness chip — sits next to the StatusChip in the title block.
   When the logger is offline we explicitly say "NO TELEMETRY" in --bad so the
   operator never has to infer freshness from the meta line below. Label-tier
   tracking and uppercase match the rest of the meta vocabulary on the page. */
.detail-freshness {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-1);
  font-variant-numeric: tabular-nums;
}
.detail-freshness.stale {
  color: var(--bad);
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
}
.detail-meta {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.dot-sep { color: rgba(255,255,255,0.4); }
.detail-vehicle {
  color: rgba(255,255,255,0.85);
  padding: 12px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
}

.root-cause-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04));
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 14px;
  margin-bottom: 18px;
}
.rcb-ico {
  width: 40px; height: 40px;
  background: rgba(239,68,68,0.18);
  color: var(--bad);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rcb-label {
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--bad); text-transform: uppercase; font-weight: 700;
}
.rcb-list { font-size: 16px; font-weight: 500; margin-top: 2px; }
/* Body wraps label + list so .rcb-actions can sit on the right without
   competing with the icon's flex sizing. */
.rcb-body { flex: 1; min-width: 0; }
.rcb-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
/* Banner action buttons — ghost-button look that picks up the banner's red
   accent on hover so they read as "actions on this incident", not generic
   navigation. Tight contrast on default to keep the banner from feeling busy. */
.unit-detail .rcb-actions .btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(239,68,68,0.3);
  color: #fff;
}
.unit-detail .rcb-actions .btn:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.5);
}

.btn {
  background: transparent;
  border: 1px solid var(--border-2);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 200ms;
}
.btn:hover { background: var(--surface-2); }
.btn.primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}
.btn.primary:hover { background: #6890ff; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

/* ---- Failing-subsystem dominance ----
   When unit.online && subsystem === "NOT OK", the Card gets the
   .subsystem-card-fail (tonal border) + .dominant-fail (slightly amplified
   chrome) classes. Borrows the kpi-tile.tone-bad pattern at 30% alpha so the
   failing card visually leads without breaking the absolute side-stripe ban
   (full hairline border, not a left-stripe). When the logger is offline,
   no card gets this — honest grey wins (No-False-Reassurance Rule). */
.unit-detail .card.subsystem-card-fail {
  border-color: rgba(239,68,68,0.3);
  background: linear-gradient(180deg, rgba(239,68,68,0.04), transparent 60%), var(--surface-1);
}
/* Brighten the shimmer-edge on the failing card so the eye lands here first.
   Keeps the existing top-edge gradient pattern, just retints to --bad. */
.unit-detail .card.subsystem-card-fail::before {
  background: linear-gradient(90deg, transparent, rgba(239,68,68,0.45), transparent);
}
/* Lift the card head: bigger title, slightly heavier border between head and
   body, so the failing card's primary value sits at the top of the reading
   order. */
.unit-detail .card.dominant-fail .card-head {
  padding: 18px 22px;
  border-bottom-color: rgba(239,68,68,0.22);
}
.unit-detail .card.dominant-fail .card-title {
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--bad);
}
.unit-detail .card.dominant-fail .card-body {
  padding: 22px;
}

/* GPS card layout — coords + speed kv-list only. */
.gps-card-row { display: flex; align-items: center; gap: 24px; }


.kv-list { display: flex; flex-direction: column; gap: 4px; }
.kv {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kv:last-child { border-bottom: none; }
.kv-label { font-size: 13px; color: rgba(255,255,255,0.85); }
.kv-value { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kv-numeric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kv-numeric b { font-size: 14px; }
.delta-ok { font-size: 11px; color: var(--ok); font-weight: 500; }
.delta-bad { font-size: 11px; color: var(--bad); font-weight: 500; }
.val-ok { color: var(--ok); }
.val-warn { color: var(--warn); }
.val-bad { color: var(--bad); }
/* "No data" value treatment — neutral grey, looser tracking, never green
   or red. Used when the IRYS logger is offline and a number would be a lie. */
.val-nodata { color: rgba(255,255,255,0.5); letter-spacing: 0.06em; font-weight: 600; font-size: 11px; }
.ring-nodata { color: rgba(255,255,255,0.5); }

/* ==================== ALERTS ==================== */
/* Severity is currently binary in the data layer (Alert.severity is the
   literal type "critical"). The .sev-pill chip vocabulary is reused here
   to host a *subsystem* filter (fuel/lube/fire/gps/device) — the honest
   axis the maintenance lead can actually act on. Dead severity branches
   (sev-major / sev-minor / status-acknowledged) were stripped; reintroduce
   only when the data layer ships a real severity ladder. */
.alerts { animation: fadeIn 300ms; display: flex; flex-direction: column; gap: 16px; position: relative; }
.alerts-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.alerts-header-title { display: flex; flex-direction: column; }
.screen-title { font-size: 28px; font-weight: 700; line-height: 1; }
.screen-sub { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 6px; }
.alerts-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 12px; }
.tab {
  background: transparent; border: none; color: rgba(255,255,255,0.85);
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 200ms;
}
.tab:hover { color: #fff; }
.tab.active { background: var(--accent-blue); color: #fff; }

.sev-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.sev-pill {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: rgba(255,255,255,0.85);
  font-family: inherit; font-size: 11px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: 200ms;
}
.sev-pill:hover { border-color: var(--border-2); color: #fff; }
/* Subsystem pills: per-system accent color when active, mirroring the
   NOT READY BREAKDOWN palette on Overview (Fuel #FACC15, Lube #3B82F6,
   Fire #FF7500, GPS #A855F7) plus a neutral white-ish for Device and
   accent-blue for the All sentinel. */
.sev-pill.on.sev-all    { background: rgba(59,130,246,0.16); border-color: var(--accent-blue); color: #fff; }
.sev-pill.on.sev-fuel   { background: rgba(250,204,21,0.16); border-color: #FACC15; color: #FACC15; }
.sev-pill.on.sev-lube   { background: rgba(59,130,246,0.16); border-color: #3B82F6; color: #88a8ff; }
.sev-pill.on.sev-fire   { background: rgba(255,117,0,0.16);  border-color: #FF7500; color: #FF7500; }
.sev-pill.on.sev-gps    { background: rgba(168,85,247,0.16); border-color: #A855F7; color: #C084FC; }
.sev-pill.on.sev-device { background: rgba(255,255,255,0.10); border-color: var(--border-2); color: #fff; }

/* VOLUME CHART */
.volume-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 180px;
  padding: 4px 8px 0;
}
.volume-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 28px;
  padding: 0 4px 18px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.50);
  font-variant-numeric: tabular-nums;
}
.volume-ytick { line-height: 1; }
.volume-plot {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Subtle gridlines at top, midpoint, baseline. Decorative, not data. */
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-position: top, center, bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, 100% 1px;
}
.volume-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.vol-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.vol-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-blue), rgba(59,130,246,0.4));
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 2px;
  transition: 200ms;
}
.vol-bar:hover { background: linear-gradient(180deg, #88a8ff, var(--accent-blue)); }
.vol-num {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.volume-xaxis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  height: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  font-variant-numeric: tabular-nums;
}
.volume-xlabel-end { color: rgba(255,255,255,0.85); }

/* TIMELINE */
.timeline {
  position: relative;
  padding-left: 0;
  /* Scrollable like the unit table — sticky-headerless list. */
  max-height: 540px;
  overflow-y: auto;
}
.timeline-item {
  display: grid;
  grid-template-columns: 80px 16px 1fr 110px;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: 150ms;
}
/* Row tint by status — open rows wash a 4% red so the eye scan-stripes
   open vs resolved without a side-stripe (DESIGN.md absolute ban).
   Resolved rows are the system surface, no extra tint. Hover wins
   intentionally (higher specificity via :hover). */
.timeline-item.status-open { background: rgba(239,68,68,0.04); }
.timeline-item.status-resolved { background: transparent; }
.timeline-item:hover { background: var(--surface-1); }
.timeline-item:last-child { border-bottom: none; }
.tl-sentinel {
  padding: 16px 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
}
.tl-sentinel-end { color: rgba(255,255,255,0.85); border-top: 1px dashed var(--border-1); margin-top: 4px; }
.tl-time-main { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-time-date { font-size: 10px; color: rgba(255,255,255,0.85); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tl-marker {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  justify-self: center;
  position: relative;
}
.tl-marker.sev-critical { background: var(--bad); box-shadow: 0 0 0 4px rgba(239,68,68,0.20); }
/* Open critical alerts pulse softly so they read as live; resolved
   alerts dim the marker so it reads as past-tense. The pulse is
   suppressed under prefers-reduced-motion (see media query below). */
.timeline-item.status-open .tl-marker.sev-critical {
  animation: marker-pulse 1.4s ease-in-out infinite;
}
.timeline-item.status-resolved .tl-marker.sev-critical {
  opacity: 0.55;
  box-shadow: none;
}
@keyframes marker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(239,68,68,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.10); }
}

.tl-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* sev-tag is now a *subsystem* tag (sys-fuel / sys-lube / sys-fire /
   sys-gps / sys-device). It reuses the .sev-tag chip shape to keep CSS
   churn down. Color matches the NOT READY BREAKDOWN palette. */
.sev-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.sev-tag.sys-fuel   { color: #FACC15; }
.sev-tag.sys-lube   { color: #88a8ff; }
.sev-tag.sys-fire   { color: #FF7500; }
.sev-tag.sys-gps    { color: #C084FC; }
.sev-tag.sys-device { color: rgba(255,255,255,0.85); }
/* Legacy critical tag retained as a fallback — no live JSX path uses it
   today, but kept so any future severity-tier reintroduction works. */
.sev-tag.sev-critical { color: var(--bad); }
.tl-unit-link {
  background: transparent; border: none; color: var(--accent-blue);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 0;
  /* Underline-on-hover only — matches .unit-id-link, prevents 50+ stacked
     blue underlines from forming a column down the timeline. */
  text-decoration: none; text-underline-offset: 3px;
}
.tl-unit-link:hover { color: #88a8ff; text-decoration: underline; }
.tl-status {
  font-size: 9px; letter-spacing: 0.1em; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  margin-left: auto;
}
.tl-status.status-open { background: rgba(239,68,68,0.18); color: var(--bad); }
.tl-status.status-resolved { background: rgba(34,197,94,0.15); color: var(--ok); }
.tl-msg { font-size: 15px; margin-top: 4px; color: rgba(255,255,255,0.85); }
.tl-actions { display: flex; align-items: center; justify-content: flex-end; }
.btn-sm {
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: #fff; font-family: inherit; font-size: 11px;
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  transition: 150ms;
}
.btn-sm:hover { background: var(--surface-3); }
.btn-sm:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}
.resolved-badge { font-size: 11px; color: var(--ok); font-weight: 600; }

/* Empty state — replaces the silent blank when filtered.length === 0.
   Honest absence: label-tier headline at decorative tier (0.50 alpha)
   so the user reads "this is calm, not broken". */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 16px;
  text-align: center;
}
.tl-empty-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.tl-empty-sub { font-size: 13px; color: rgba(255,255,255,0.85); }
.tl-empty-action { margin-top: 8px; }

/* Toast — bottom-right confirmation for optimistic Resolve. The aria-live
   region is rendered into AlertsView.tsx; this styles it. Auto-dismisses
   in ~6s; Undo within that window reverts the resolve. */
.toast-region {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-size: 13px;
  color: #fff;
  animation: toast-in 200ms ease-out;
}
.toast-msg { color: rgba(255,255,255,0.85); }
.toast-msg .tabular-nums { color: #fff; font-weight: 600; }
.toast-undo {
  background: transparent;
  border: none;
  color: var(--accent-blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: 150ms;
}
.toast-undo:hover { color: #88a8ff; background: rgba(59,130,246,0.10); }
.toast-undo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVE / SCROLL ==================== */
@media (max-width: 1500px) {
  .kpi-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .kpi-row .kpi-tile.wide { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .app {
    padding: 16px 18px 32px;
  }
  .header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }
  .brand-mark {
    width: 72px;
    height: 46px;
  }
  .brand-title {
    font-size: 19px;
  }
  .brand-sub {
    font-size: 10px;
  }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .nav-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .header-meta {
    margin-left: auto;
  }
  .kpi-row,
  .mid-row,
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
  .app[data-screen-label="IRYS Dashboard"] {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .app[data-screen-label="IRYS Dashboard"] .overview {
    display: flex;
    flex-direction: column;
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile {
    padding: 20px;
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-num,
  .app[data-screen-label="IRYS Dashboard"] .kpi-readiness-anchor .kpi-num,
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile-alerts .kpi-num,
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile-composition .kpi-num {
    font-size: 56px;
  }
  .system-nav {
    overflow-x: auto;
    scroll-padding-inline: 6px;
  }
  .system-nav-item {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 40px;
  }
  .fuel-head {
    align-items: flex-start;
    gap: 14px;
  }
  .fuel-title-row {
    min-width: 0;
  }
  .table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .unit-table {
    min-width: 820px;
  }
}

@media (max-width: 620px) {
  .app {
    padding: 14px 12px 28px;
  }
  .header {
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .brand {
    gap: 10px;
  }
  .brand-mark {
    width: 58px;
    height: 38px;
  }
  .brand-title {
    font-size: 17px;
  }
  .brand-sub,
  .last-update {
    display: none;
  }
  .header-meta {
    gap: 8px;
  }
  .nav-btn {
    padding: 8px 10px;
    font-size: 11px;
  }
  .kpi-row,
  .mid-row,
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .kpi-tile,
  .card-body {
    padding: 16px;
  }
  .card-head {
    padding: 14px 16px;
  }
  .kpi-num {
    font-size: 44px;
  }
  .fuel-head {
    flex-wrap: wrap;
  }
  .sys-icon-inline {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .screen-title {
    font-size: 24px;
  }
  .screen-sub {
    overflow-wrap: anywhere;
  }
  .fuel-card-row,
  .lube-card-row,
  .gps-card-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lube-badge,
  .fuel-gauge {
    align-self: center;
  }
  .fire-panel {
    grid-template-columns: 1fr;
  }
  .date-range-control {
    width: 100%;
  }
  .date-field,
  .date-field input,
  .date-field input[type="datetime-local"] {
    width: 100%;
  }
}

/* ==================== LOADING SKELETONS ==================== */
@keyframes skeleton-pulse {
  0% { opacity: 0.55; }
  50% { opacity: 0.95; }
  100% { opacity: 0.55; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line { display: block; }
.skeleton-block { display: block; width: 100%; }

/* ==================== REDUCED MOTION ==================== */
/* Honor users who request reduced motion. The 300ms fade-in mounts on
   /, /alerts, and /unit-detail collapse to instant render. State pulses
   (lube running, fire fault, loading skeletons) stop animating but keep
   their colors so the signal is still readable. Login-error shake is a
   confirmation animation, also suppressed. State changes (hover, focus,
   bar fills) are transitions, not animations — left intact intentionally. */
@media (prefers-reduced-motion: reduce) {
  .overview,
  .alerts,
  .unit-detail,
  .lube-circle.running,
  .fire-ind.bad .fire-ind-light,
  .skeleton,
  .pw-shake,
  .timeline-item.status-open .tl-marker.sev-critical,
  .toast {
    animation: none;
  }
  /* Static glow stays so the open-vs-resolved signal is still readable. */
  .timeline-item.status-open .tl-marker.sev-critical {
    box-shadow: 0 0 0 4px rgba(239,68,68,0.20);
  }
}

/* ==========================================================================
   PER-SUBSYSTEM SYSTEM-PAGE HEROES (Phase 2B polish)
   Each /system/* page leads with a signature visualization that uses the
   subsystem's own grammar (not a generic 4-up KPI grid). The selectors are
   scoped to per-page wrappers (.lube-view, .fire-view, .gps-view,
   .device-view) so polish here doesn't bleed into shared atoms or other
   pages. The shared SystemNav and atoms live in components/ and are not
   touched by these rules.
   ========================================================================== */

/* Shared per-page focus ring (keyboard navigation parity with /units).
   Scoped per page wrapper so the rule still starts with the allowed prefix. */
.lube-view .unit-row:focus-visible,
.fire-view .unit-row:focus-visible,
.gps-view  .unit-row:focus-visible,
.device-view .unit-row:focus-visible {
  outline: 1px solid var(--accent-blue);
  outline-offset: -1px;
}
/* Quieter unsorted sort glyph so the active glyph wins. */
.lube-view .sort-ico,
.fire-view .sort-ico,
.gps-view  .sort-ico,
.device-view .sort-ico { opacity: 0.35; }
.lube-view th.active .sort-ico,
.fire-view th.active .sort-ico,
.gps-view  th.active .sort-ico,
.device-view th.active .sort-ico { opacity: 1; }

/* Active-filter pill: turns the toggle into a visible state when checked. */
.lube-view .toggle-pill.is-active,
.fire-view .toggle-pill.is-active,
.gps-view  .toggle-pill.is-active,
.device-view .toggle-pill.is-active,
.cas-view .toggle-pill.is-active {
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
  color: #fff;
}

/* Hero band (shared shape, per-page accent): a wide panel that sits in
   place of the 4-up KPI cluster. Two columns: a "signature" column with the
   subsystem's grammar (lube circle / fire indicator / conn
   pills), and a "field" column showing 56 unit cells. Resting flat with the
   shimmer-edge ::before. */
.system-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 28px;
  align-items: stretch;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
  overflow: hidden;
}
.system-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
}
.system-hero-signature {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-right: 24px;
  border-right: 1px solid var(--border-1);
  min-width: 0;
}
.system-hero-field {
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.system-hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.system-hero-readout {
  display: flex; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.system-hero-readout .num {
  font-size: 56px; font-weight: 700;
  line-height: 0.95; letter-spacing: -0.02em;
  color: #fff;
}
.system-hero-readout .num.ok  { color: var(--ok); }
.system-hero-readout .num.bad { color: var(--bad); }
.system-hero-readout .of {
  font-size: 13px; color: rgba(255,255,255,0.85);
  font-weight: 600; letter-spacing: 0.06em;
}
.system-hero-bullets {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.system-hero-bullet {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.system-hero-bullet .swatch {
  width: 8px; height: 8px; border-radius: 999px;
  flex: none;
}
.system-hero-bullet .count {
  color: #fff; font-weight: 600;
}
.system-hero-field-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.system-hero-field-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 56-cell unit grid used by Lube / Fire / Device. Compact, hover-tip per
   cell, dense enough that a fleet at-a-glance read is one second. */
.system-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
  gap: 6px;
  align-content: start;
}
.system-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

/* ===== /system/lube hero ===== */
.lube-hero-circle {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 3px solid var(--ok);
  background: rgba(34,197,94,0.06);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: lube-pulse 1.8s ease-in-out infinite;
  flex: none;
}
.lube-hero-circle.fault {
  border-color: var(--bad);
  background: rgba(239,68,68,0.08);
  animation: none;
}
.lube-hero-circle.idle {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  animation: none;
}
.lube-hero-circle .lube-hero-num {
  font-size: 30px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ok);
}
.lube-hero-circle.fault .lube-hero-num { color: var(--bad); }
.lube-hero-circle.idle  .lube-hero-num { color: rgba(255,255,255,0.85); }
.lube-hero-circle .lube-hero-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-top: 4px;
  color: rgba(255,255,255,0.85);
}
.lube-hero-stack {
  display: flex; align-items: center; gap: 18px;
}
.lube-view .lube-hero-summary-only {
  grid-template-columns: 1fr;
}
.lube-view .lube-hero-summary-only .system-hero-signature {
  border-right: none;
  padding-right: 0;
}
.lube-cell.run {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.45);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.25) inset;
}
.lube-cell.pause {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.lube-cell.fault {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
}
.lube-cell.nodata {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.lube-state-mini {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.lube-state-mini::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.lube-state-mini.run   { color: var(--ok); }
.lube-state-mini.pause { color: rgba(255,255,255,0.5); }
.lube-state-mini.nodata { color: rgba(255,255,255,0.5); letter-spacing: 0.12em; }

/* ===== /system/fire hero ===== */
.fire-view {
  gap: 12px;
}
.fire-view .system-hero {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.fire-view .system-hero-signature {
  gap: 10px;
  padding-right: 0;
  border-right: none;
  justify-content: space-between;
}

.fire-view .table-wrap {
  max-height: min(68vh, 720px);
}
.fire-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 0;
}
.fire-hero-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.fire-hero-cell.has-fault { border-color: rgba(239,68,68,0.35); }
.fire-hero-cell-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.fire-hero-cell-head .fire-ind-light {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.fire-hero-cell.calm .fire-ind-light  { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.fire-hero-cell.has-fault .fire-ind-light {
  background: var(--bad); box-shadow: 0 0 0 3px rgba(239,68,68,0.20);
  animation: fire-throb 1.4s ease-in-out infinite;
}
.fire-hero-cell-num {
  font-size: 22px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.fire-hero-cell.has-fault .fire-hero-cell-num { color: var(--bad); }
.fire-hero-cell-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}
.fire-cell.calm {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.30);
}
.fire-cell.alarm {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  animation: fire-throb 1.4s ease-in-out infinite;
}
.fire-cell.nodata {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
/* Fire table cells: glyph + literal state side-by-side. The MiniStatus
   atom already renders its own "OK" / "NOT OK" label — hide it inside
   this wrapper so the glyph reads alongside the literal state word
   ("TRIGGERED" / "DISCHARGED" / "LOST") without duplication. */
.fire-view .fire-cell-mix {
  display: inline-flex; align-items: center; gap: 8px;
}
.fire-view .fire-cell-mix .mini-label { display: none; }

/* ===== /system/gps ===== */
/* Coords cell — two-line stacked lat/lon. */
.gps-view .unit-table td.coords {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.gps-view .unit-table td.coords > div + div {
  color: rgba(255,255,255,0.65);
}
.gps-view .unit-table td.coords .val-nodata {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ===== /system/device hero ===== */
.device-view .system-hero {
  grid-template-columns: 1fr;
}
.device-view .system-hero-signature {
  border-right: none;
  padding-right: 0;
}
.device-hero-bands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
.device-hero-band {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.device-hero-band.fresh { border-color: rgba(34,197,94,0.30); }
.device-hero-band.lag   { border-color: rgba(245,158,11,0.30); }
.device-hero-band.stale { border-color: rgba(239,68,68,0.30); }
.device-hero-band.dark  { border-color: rgba(255,255,255,0.12); }
.device-hero-band-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.device-hero-band-num {
  font-size: 22px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.device-hero-band.fresh .device-hero-band-num { color: var(--ok); }
.device-hero-band.lag   .device-hero-band-num { color: var(--warn); }
.device-hero-band.stale .device-hero-band-num { color: var(--bad); }
.device-hero-band.dark  .device-hero-band-num { color: rgba(255,255,255,0.5); }
.device-hero-band-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}
.device-cell.online {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.40);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.20) inset;
}
.device-cell.lag {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.40);
}
.device-cell.stale {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.40);
}
.device-cell.dark {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

/* Narrow viewports — hero collapses to a single column. */
@media (max-width: 900px) {
  .system-hero,
  .fire-view .system-hero {
    grid-template-columns: 1fr;
  }
  .system-hero-signature,
  .fire-view .system-hero-signature {
    border-right: none;
    border-bottom: 1px solid var(--border-1);
    padding-right: 0;
    padding-bottom: 16px;
  }

}

@media (max-width: 620px) {
  .fire-view .fire-hero-strip {
    grid-template-columns: 1fr;
  }

}

/* Reduced-motion: kill the new pulses on the lube hero circle and fire
   alarm cells. Fire cell color/border still says "alarm"; Lube hero ring
   color still says "running". */
@media (prefers-reduced-motion: reduce) {
  .lube-hero-circle,
  .fire-cell.alarm,
  .fire-hero-cell.has-fault .fire-ind-light {
    animation: none;
  }
}

/* ==========================================================================
   KLUBHER — Fuel Station product, mounted at /station/*
   Reuses .card / .unit-table / .ring-* / .alerts-tabs / .tab. New classes
   here are scoped to .klubher-* so nothing leaks into the Fleet pages.
   ========================================================================== */

/* Brand mark in the standalone header — a softer surface than IRYS so the
   two areas read as separate products. */
.klubher-header .klubher-brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(31,91,194,0.10);
  color: var(--accent-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.klubher-header .nav .nav-btn { font-weight: 600; }

/* Section wrapper — same vertical rhythm as .overview / .fuel-view. */
.klubher-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tab row in the FMS card actions wraps cleanly when the card gets narrow. */
.klubher-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Tank selector — visually paired with the .alerts-tabs strip beside it. */
.klubher-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.klubher-select-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.klubher-select {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  color: #fff;
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
}
.klubher-select:focus-visible {
  outline: none;
  border-color: rgba(31,91,194,0.55);
}

/* Status chip — same vocabulary as the IRYS chips, slightly different
   shape so the eye treats the Klubher list as its own table. */
.klubher-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.klubher-chip-ok   { color: var(--ok);   background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.25); }
.klubher-chip-warn { color: var(--warn); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); }
.klubher-chip-bad  { color: var(--bad);  background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.30); }
.klubher-chip-na   { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Make sure long tables can still scroll within the card body. */
.klubher-table-wrap { max-height: 70vh; }

/* Plate-search box on the Transactions sub-tab. Reuses .search shell from
   the units page; gives it a stable min-width so the row doesn't reflow
   each time the user types. */
.klubher-tx-search { min-width: 220px; }

/* "—" placeholder used wherever the source CSV row was blank. */
.klubher-blank { color: rgba(255,255,255,0.35); }

/* ---- Inventory bar chart ------------------------------------------ */

.klubher-bar-chart-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 12px;
}
.klubher-bar-chart {
  display: block;
  min-width: 100%;
  height: 320px;
}
.klubher-bar-group { cursor: pointer; outline: none; }
.klubher-bar-group:focus-visible rect:nth-of-type(3) {
  filter: brightness(1.15);
}
.klubher-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.klubher-bar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.klubher-bar-legend-swatch {
  width: 18px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.12);
}
.klubher-bar-legend-swatch.online { background: #3B82F6; }
.klubher-bar-legend-swatch.fresh  { background: #F29B25; }
.klubher-bar-legend-swatch.sfl {
  background-color: rgba(255,255,255,0.04);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.20) 0 1.2px, transparent 1.2px 6px);
}

/* ---- Bar-chart tooltip -------------------------------------------- */

.klubher-bar-tip {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  pointer-events: none;       /* tooltip is decorative — never steals hover */
  font-size: 13px;
}
.klubher-bar-tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.klubher-bar-tip-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.klubher-bar-tip-dot.diesel { background: #F29B25; }
.klubher-bar-tip-dot.petrol { background: #A855F7; }
.klubher-bar-tip-num {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.klubher-bar-tip-pct {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  margin-left: 6px;
}
.klubher-bar-tip-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}
.klubher-bar-tip-kv > div {
  display: contents;
}
.klubher-bar-tip-kv dt {
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.klubher-bar-tip-kv dd {
  margin: 0;
}

/* ---- Inventory table tweaks --------------------------------------- */

.klubher-inventory-table th { white-space: nowrap; }
.klubher-inventory-table tbody tr.is-hovered {
  background: rgba(31,91,194,0.08);
}

/* ==========================================================================
   IRYS PORTAL — the entry point at /
   Single-tile screen for the active Fleet product.
   Fits one viewport (100dvh) like the Fleet overview does. No app Header
   here — the portal is its own thing.
   ========================================================================== */

.app[data-screen-label="IRYS Portal"] {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.portal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 32px 24px 24px;
  animation: portal-in 320ms ease-out both;
}
@keyframes portal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.portal-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-wordmark {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #fff;
}
.portal-tagline {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.portal-prompt {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ---- Tile grid ----------------------------------------------------- */

.portal-grid {
  display: grid;
  grid-template-columns: minmax(320px, 440px);
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 480px;
}

.portal-tile {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 32px 26px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.portal-tile::before {
  /* Subtle inner glow on hover — same vocabulary as .kpi-tile::before. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(31,91,194,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
  z-index: -1;
}
.portal-tile:hover,
.portal-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-blue);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  outline: none;
}
.portal-tile:hover::before,
.portal-tile:focus-visible::before {
  opacity: 1;
}

.portal-tile-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(31,91,194,0.12);
  color: var(--accent-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-tile-name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #fff;
}
.portal-tile-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

.portal-tile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 4px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border-1);
}
.portal-tile-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-tile-stats dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.portal-tile-stats dd {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.portal-stat-ok  { color: var(--ok); }
.portal-stat-bad { color: var(--bad); }

.portal-tile-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.portal-tile-arrow {
  transition: transform 200ms;
}
.portal-tile:hover .portal-tile-arrow,
.portal-tile:focus-visible .portal-tile-arrow {
  transform: translateX(4px);
}

/* ---- Narrow viewports --------------------------------------------- */

@media (max-width: 720px) {
  .portal { gap: 24px; padding: 24px 16px; }
  .portal-grid {
    grid-template-columns: minmax(240px, 480px);
    max-width: 480px;
  }
  .portal-wordmark { font-size: 24px; }
  .portal-tile-name { font-size: 24px; }
}

/* ---- Inventory tank grid ------------------------------------------- */

.klubher-tank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.klubher-tank-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 200ms;
}
.klubher-tank-card.tone-warn { border-color: rgba(245,158,11,0.35); }
.klubher-tank-card.tone-bad  { border-color: rgba(239,68,68,0.35); }
.klubher-tank-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.klubher-tank-id {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.klubher-tank-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
}
.klubher-fuel-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.klubher-fuel-diesel { color: #FACC15; background: rgba(250,204,21,0.10); }
.klubher-fuel-petrol { color: #A855F7; background: rgba(168,85,247,0.10); }
.klubher-tank-gauge {
  display: flex;
  justify-content: center;
}
.klubher-tank-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.klubher-tank-num.warn { color: var(--warn); }
.klubher-tank-num.bad  { color: var(--bad);  }
.klubher-tank-num.ok   { color: var(--ok);   }
.klubher-tank-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin: 0;
}
.klubher-tank-kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.klubher-tank-kv dt {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.klubher-tank-kv dd { margin: 0; font-size: 13px; }
.klubher-tank-flag {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bad);
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: 8px;
  padding: 6px 10px;
}

/* Header "N low" inline flag (Inventory screen-sub). */
.klubher-low-flag { color: var(--bad); font-weight: 600; }

/* Empty state inside the tank grid / chart cards. */
.klubher-empty {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* ---- Live-reading buttons (Temp / Water) --------------------------- */

.klubher-readout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.klubher-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: 200ms;
}
.klubher-readout:hover { border-color: var(--border-2); }
.klubher-readout.is-selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue) inset;
}
.klubher-readout.tone-warn { border-color: rgba(245,158,11,0.30); }
.klubher-readout.tone-bad  { border-color: rgba(239,68,68,0.30); }
.klubher-readout-id {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.klubher-readout-name {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.klubher-readout-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
}
.klubher-readout-num.ok   { color: #fff; }
.klubher-readout-num.warn { color: var(--warn); }
.klubher-readout-num.bad  { color: var(--bad);  }
.klubher-readout-unit {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-left: 4px;
}
.klubher-readout-num.na { color: rgba(255,255,255,0.45); }
.klubher-readout.tone-na { opacity: 0.72; }
.klubher-readout-secondary {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ---- Fuel Condition sub-nav --------------------------------------- */

.klubher-condition-subnav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- ISO 4406 cleanliness code ----------------------------------- */

.klubher-iso-code {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.klubher-iso-code.ok   { color: #fff; }
.klubher-iso-code.warn { color: var(--warn); }
.klubher-iso-code.bad  { color: var(--bad); }
.klubher-iso-code .over { color: var(--bad); }
.klubher-iso-sep {
  color: rgba(255,255,255,0.4);
  margin: 0 4px;
  font-weight: 500;
}
.klubher-iso-target {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* ---- Trend chart container ---------------------------------------- */

.trend-chart-wrap {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 8px;
}
.trend-chart {
  display: block;
  width: 100%;
  height: 220px;
}

/* ---- Narrow viewports --------------------------------------------- */

@media (max-width: 720px) {
  .klubher-actions { gap: 8px; }
  .klubher-tank-grid { grid-template-columns: 1fr; }
  .klubher-readout-grid { grid-template-columns: repeat(2, 1fr); }
  .trend-chart { height: 180px; }
}

/* ==================== UX-REVIEW REMEDIATION OVERRIDES ====================
   Appended after the ported stylesheet on purpose: the block above stays
   byte-comparable with the original Next.js CSS, and every deliberate
   deviation (a11y contrast, touch targets, semantic headings) lives here. */

/* Semantic headings — the type styles all come from the classes, so the only
   UA default to neutralize when div became h1/h2 is the margin. */
h1.screen-title, h2.card-title, h1.detail-id,
h1.portal-wordmark, h1.pw-wordmark, h1.sr-only {
  margin: 0;
}

/* Screen-reader-only heading + skip link (first focusable element on page). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -48px; z-index: 200;
  background: var(--accent-blue); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 150ms;
}
.skip-link:focus { top: 0; outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }

/* WCAG AA — meaningful secondary text was rgba(...,0.35–0.5) which lands
   under 4.5:1 on the navy surfaces at 10–11px. Raised to 0.65 (≈7:1).
   Purely decorative marks (separators, chevrons, bar tracks) keep the
   original faint values. */
.val-nodata, .ring-nodata,
.lube-circle.nodata .lube-state, .lube-circle.nodata .lube-state-sub,
.lube-faults.nodata, .lube-state-mini.pause, .lube-state-mini.nodata,
.klubher-readout-num.na, .klubher-chip-na,
.tl-empty-title, .system-hero-field-hint,
.device-hero-band.dark .device-hero-band-num,
.volume-yaxis, .volume-xlabel,
.kpi-avail-frac-sep {
  color: rgba(255,255,255,0.65);
}
.units-view .search-kbd { color: rgba(255,255,255,0.62); }
.units-view .faults-cell.faults-none { color: rgba(255,255,255,0.55); }

/* Touch targets — keep the compact visual weight but guarantee a hit area:
   36px on desktop, 44px on the ≤620px yard-phone breakpoint. */
.btn-sm, .tab, .sev-pill, .toggle-pill, .filter-chip, .nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px;
}
@media (max-width: 620px) {
  .btn-sm, .tab, .sev-pill, .toggle-pill, .filter-chip, .nav-btn {
    min-height: 44px;
  }
  .date-field input, .table-fleet-filter select { min-height: 44px; }
}

/* Auto-refresh stale flag — appended to the "Updated" header meta by app.js
   when the page could not refresh in time. */
.stale-flag {
  display: inline-block; vertical-align: middle;
  margin-left: 4px; padding: 2px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--warn);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 4px;
}

/* Acknowledge toast — secondary line clarifying the action is device-local. */
.toast-note {
  display: block; margin-top: 2px;
  font-size: 10px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
}

/* SVG sort glyphs (replaced the ▲▼↕ text characters). */
.sort-ico { display: inline-flex; align-items: center; }