/*
  Aerodesk — Command Center landing (PRIMARY).
  ========================================================================
  Scoped under `html.command-mode`, which bootstrap.js adds by default on
  every host (production + beta). Per-user opt-out:
    localStorage.setItem('aerodeskCommand','off'); location.reload();
  …falls back to the classic shell (main.css untouched).
*/

html.command-mode { --cc-cyan: #38e0ff; }

html.command-mode .cc-root {
  --cc-cyan: #38e0ff;
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  color: #d8f6ff;
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}
html.command-mode .cc-root.cc-hidden,
html.command-mode .cc-l-root.cc-hidden,
html.command-mode .cc-home.cc-hidden {
  display: none;
}

/* Ambient backdrop — cyan core glow, edge vignette, faint grid. */
html.command-mode .cc-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(56, 224, 255, 0.12), rgba(2, 6, 18, 0) 58%),
    radial-gradient(circle at 50% 50%, rgba(2, 6, 18, 0) 52%, rgba(2, 6, 18, 0.88) 100%),
    repeating-linear-gradient(0deg, rgba(56, 224, 255, 0.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(56, 224, 255, 0.04) 0 1px, transparent 1px 46px),
    #03060f;
}

/* Header */
html.command-mode .cc-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
}
html.command-mode .cc-brand {
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 14px;
  text-shadow: 0 0 14px rgba(56, 224, 255, 0.5);
}
html.command-mode .cc-brand span {
  color: var(--cc-cyan);
  opacity: 0.8;
}
/* Lower-right power / sign-out control. Default state speaks the cyan HUD
   vocabulary; hover/focus shifts to a warm danger tint so it reads clearly
   as "this logs you out". Anchored to .cc-root (position: fixed), so it only
   shows on the landing and disappears with it. */
html.command-mode .cc-power {
  position: absolute;
  right: 26px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #bfefff;
  background: radial-gradient(circle at 50% 38%, rgba(18, 40, 52, 0.9), rgba(8, 18, 26, 0.72));
  border: 1px solid rgba(56, 224, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 6px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 14px rgba(56, 224, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease, transform 0.18s ease;
  z-index: 6;
}
html.command-mode .cc-power svg {
  width: 24px;
  height: 24px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(56, 224, 255, 0.45));
}
html.command-mode .cc-power:hover,
html.command-mode .cc-power:focus-visible {
  color: #ff8473;
  border-color: rgba(255, 122, 107, 0.65);
  background: radial-gradient(circle at 50% 38%, rgba(52, 22, 22, 0.92), rgba(26, 10, 10, 0.74));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 90, 70, 0.35),
    inset 0 0 16px rgba(255, 122, 107, 0.18);
  transform: translateY(-1px);
  outline: none;
}
html.command-mode .cc-power:hover svg,
html.command-mode .cc-power:focus-visible svg {
  filter: drop-shadow(0 0 7px rgba(255, 110, 90, 0.55));
}
html.command-mode .cc-power:active {
  transform: translateY(0) scale(0.95);
}
@media (prefers-reduced-motion: reduce) {
  html.command-mode .cc-power { transition: none; }
}

/* Stage — holds the centered core with launcher nodes orbiting it. */
html.command-mode .cc-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Ops core ---- */
html.command-mode .cc-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(56vmin, 460px);
  height: min(56vmin, 460px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
html.command-mode .cc-core-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 18px rgba(56, 224, 255, 0.25));
}
html.command-mode .cc-ring {
  fill: none;
  stroke: var(--cc-cyan);
  transform-box: fill-box;
  transform-origin: center;
}
html.command-mode .cc-ring-outer { stroke-width: 1.4; opacity: 0.55; animation: ccSpin 60s linear infinite; }
html.command-mode .cc-ring-mid { stroke-width: 1; opacity: 0.22; }
html.command-mode .cc-ring-arc { stroke-width: 3; opacity: 0.9; stroke-linecap: round; animation: ccSpinRev 24s linear infinite; }
html.command-mode .cc-ring-inner { stroke-width: 1.2; opacity: 0.4; animation: ccSpin 36s linear infinite; }
html.command-mode .cc-ring-core { stroke-width: 1.4; opacity: 0.7; }
html.command-mode .cc-tick { stroke: var(--cc-cyan); stroke-width: 1; opacity: 0.25; }
html.command-mode .cc-tick-long { opacity: 0.55; stroke-width: 1.4; }
html.command-mode .cc-ticks { animation: ccSpinRev 120s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes ccSpin { to { transform: rotate(360deg); } }
@keyframes ccSpinRev { to { transform: rotate(-360deg); } }

/* Center readout */
html.command-mode .cc-core-readout {
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1.1;
}
html.command-mode .cc-zulu {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: clamp(26px, 5vmin, 46px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #eaffff;
  text-shadow: 0 0 18px rgba(56, 224, 255, 0.6);
}
html.command-mode .cc-zulu span {
  font-size: 0.5em;
  color: var(--cc-cyan);
  margin-left: 4px;
  vertical-align: super;
}
html.command-mode .cc-mt {
  margin-top: 6px;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: clamp(12px, 1.8vmin, 16px);
  color: #9fd9ee;
  letter-spacing: 0.08em;
}
html.command-mode .cc-date {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(56, 224, 255, 0.7);
}

/* ---- Launcher nodes ---- */
html.command-mode .cc-nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
html.command-mode .cc-node {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #cdeefb;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
}
html.command-mode .cc-node-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(56, 224, 255, 0.18), rgba(56, 224, 255, 0.02) 70%), rgba(8, 18, 38, 0.7);
  border: 1px solid rgba(56, 224, 255, 0.45);
  box-shadow: inset 0 0 14px rgba(56, 224, 255, 0.12), 0 0 16px rgba(56, 224, 255, 0.10);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
html.command-mode .cc-node-icon { width: 26px; height: 26px; display: grid; place-items: center; }
html.command-mode .cc-node-icon svg { width: 26px; height: 26px; color: var(--cc-cyan); filter: drop-shadow(0 0 5px rgba(56, 224, 255, 0.5)); }
html.command-mode .cc-node-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(56, 224, 255, 0.3);
}
html.command-mode .cc-node:hover { transform: translate(-50%, -50%) scale(1.09); color: #eaffff; }
html.command-mode .cc-node:hover .cc-node-ring {
  border-color: var(--cc-cyan);
  background: radial-gradient(circle at 50% 40%, rgba(56, 224, 255, 0.34), rgba(56, 224, 255, 0.04) 70%), rgba(10, 24, 48, 0.85);
  box-shadow: inset 0 0 18px rgba(56, 224, 255, 0.22), 0 0 28px rgba(56, 224, 255, 0.32);
}

/* Small-viewport fallback: nodes flow as a centered row at the bottom. */
html.command-mode .cc-nodes--list {
  position: absolute;
  inset: auto 0 4% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 26px;
  pointer-events: none;
}
html.command-mode .cc-nodes--list .cc-node {
  position: static;
  transform: none;
}
html.command-mode .cc-nodes--list .cc-node:hover { transform: scale(1.09); }

/* ---- Stats footer ---- */
html.command-mode .cc-stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 54px;
  padding: 16px 26px 26px;
}
html.command-mode .cc-stat { text-align: center; }
html.command-mode .cc-stat-val {
  display: block;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 26px;
  font-weight: 700;
  color: #eaffff;
  text-shadow: 0 0 12px rgba(56, 224, 255, 0.45);
}
html.command-mode .cc-stat-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(56, 224, 255, 0.65);
}

/* ---- Live reactor (STAR D0 on-time) drives the core arc ---- */
html.command-mode .cc-reactor-arc {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
}
html.command-mode .cc-reactor-arc.is-standby { stroke: rgba(56, 224, 255, 0.28); }
html.command-mode .cc-reactor-arc.is-good { stroke: #34d39b; filter: drop-shadow(0 0 6px rgba(52, 211, 155, 0.6)); }
html.command-mode .cc-reactor-arc.is-warn { stroke: #f5b54a; filter: drop-shadow(0 0 6px rgba(245, 181, 74, 0.6)); }
html.command-mode .cc-reactor-arc.is-bad  { stroke: #ff6b7b; filter: drop-shadow(0 0 6px rgba(255, 107, 123, 0.6)); }
html.command-mode .cc-reactor-label {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Bright neutral text + a dark halo so the STAR D0 readout stays
     legible over the glowing (often green) reactor ring, instead of
     blending into the cyan/green ring colors. */
  color: #e6f6ff;
  text-shadow:
    0 0 2px rgba(2, 8, 20, 0.95),
    0 0 6px rgba(2, 8, 20, 0.9),
    0 1px 2px rgba(2, 8, 20, 0.85);
}

/* ---- Footer radial KPI gauges ---- */
html.command-mode .cc-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
html.command-mode .cc-g-dial { position: relative; width: 86px; height: 86px; }
html.command-mode .cc-g-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html.command-mode .cc-g-track { fill: none; stroke: rgba(56, 224, 255, 0.14); stroke-width: 6; }
html.command-mode .cc-g-val {
  fill: none;
  stroke: var(--cc-cyan, #38e0ff);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(56, 224, 255, 0.5));
  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.command-mode .cc-g-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  color: #eaffff;
  text-shadow: 0 0 10px rgba(56, 224, 255, 0.4);
}
html.command-mode .cc-g-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(56, 224, 255, 0.65);
}

/* ---- Floating "return to command center" button ---- */
html.command-mode .cc-home {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 901;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--cc-cyan);
  background: radial-gradient(circle at 50% 40%, rgba(56, 224, 255, 0.2), rgba(8, 18, 38, 0.9));
  border: 1px solid rgba(56, 224, 255, 0.5);
  box-shadow: 0 0 18px rgba(56, 224, 255, 0.25);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
html.command-mode .cc-home:hover { box-shadow: 0 0 28px rgba(56, 224, 255, 0.45); transform: scale(1.06); }

/* ---- Cinematic entrance (plays each time the landing is shown) ---- */
html.command-mode .cc-root:not(.cc-hidden) { animation: ccFadeIn 0.5s ease both; }
html.command-mode .cc-root:not(.cc-hidden) .cc-core { animation: ccCoreIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.command-mode .cc-root:not(.cc-hidden) .cc-node { animation: ccNodeIn 0.5s ease both; }
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccCoreIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ccNodeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===================================================================== */
/* LAUNCHER — summon-anywhere radial palette (◎ / ⌘K)                    */
/* ===================================================================== */

/* In command mode the launcher replaces the sidebar; main fills the space
   (the .app-layout flex reflows cleanly since main is flex:1). */
html.command-mode .app-sidebar { display: none; }

html.command-mode .cc-l-root {
  --cc-cyan: #38e0ff;
  position: fixed;
  inset: 0;
  z-index: 950;
  font-family: Inter, system-ui, sans-serif;
}
html.command-mode .cc-l-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 16, 0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
html.command-mode .cc-l-stage { position: absolute; inset: 0; }

html.command-mode .cc-l-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 70vw);
  text-align: center;
  z-index: 2;
}
html.command-mode .cc-l-input {
  width: 100%;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-align: center;
  color: #eaffff;
  background: rgba(8, 18, 38, 0.8);
  border: 1px solid rgba(56, 224, 255, 0.5);
  border-radius: 999px;
  padding: 12px 18px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(56, 224, 255, 0.12), 0 0 26px rgba(56, 224, 255, 0.22);
}
html.command-mode .cc-l-input::placeholder { color: rgba(159, 217, 238, 0.6); }
html.command-mode .cc-l-hint {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(56, 224, 255, 0.6);
}

html.command-mode .cc-l-nodes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html.command-mode .cc-l-node {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #cdeefb;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease, color 0.16s ease;
}
html.command-mode .cc-l-node:hover { transform: translate(-50%, -50%) scale(1.08); color: #eaffff; }
html.command-mode .cc-l-node:hover .cc-node-ring,
html.command-mode .cc-l-node.cc-l-active .cc-node-ring {
  border-color: var(--cc-cyan);
  background: radial-gradient(circle at 50% 40%, rgba(56, 224, 255, 0.34), rgba(56, 224, 255, 0.04) 70%), rgba(10, 24, 48, 0.9);
  box-shadow: inset 0 0 18px rgba(56, 224, 255, 0.24), 0 0 30px rgba(56, 224, 255, 0.38);
}
html.command-mode .cc-l-node.cc-l-active { color: #eaffff; }
html.command-mode .cc-l-node.cc-l-dim { opacity: 0.22; }

html.command-mode .cc-l-nodes--list {
  position: absolute;
  inset: auto 0 8% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
}
html.command-mode .cc-l-nodes--list .cc-l-node { position: static; transform: none; }
html.command-mode .cc-l-nodes--list .cc-l-node:hover { transform: scale(1.08); }

/* Launcher entrance */
html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-backdrop { animation: ccFadeIn 0.22s ease both; }
html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-center { animation: ccCoreIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-node { animation: ccNodeIn 0.3s ease both; }

/* ===================================================================== */
/* DIVE TRANSITION (view swap) + per-section COMMAND HEADER              */
/* ===================================================================== */

html.command-mode .cc-t-root {
  position: fixed;
  inset: 0;
  z-index: 980;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(56, 224, 255, 0.22), rgba(3, 7, 16, 0.99) 56%);
}
html.command-mode .cc-t-root.cc-hidden { display: none; }
html.command-mode .cc-t-root::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cc-cyan), transparent);
  box-shadow: 0 0 18px rgba(56, 224, 255, 0.7);
  opacity: 0;
}
html.command-mode .cc-t-root.cc-t-cover { animation: ccTCover 0.45s ease-in forwards; }
html.command-mode .cc-t-root.cc-t-cover::before { animation: ccTScan 0.45s ease-in forwards; }
html.command-mode .cc-t-root.cc-t-reveal { animation: ccTReveal 0.6s ease-out forwards; }
@keyframes ccTCover { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccTReveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes ccTScan { from { top: 0; opacity: 0.9; } to { top: 100%; opacity: 0.3; } }

/* The app topbar IS the single header in command mode — full face-lift so
   it matches the deck on every section (it keeps all its real controls:
   clocks, auto-updating title, KPIs, user switcher). */
html.command-mode .app-topbar {
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.10), rgba(56, 224, 255, 0) 56px),
    var(--panel-deep, #0b1330);
  border-bottom: 1px solid rgba(56, 224, 255, 0.40);
  box-shadow: 0 2px 22px -8px rgba(56, 224, 255, 0.5);
}
html.command-mode .topbar-title {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #eaffff;
  text-shadow: 0 0 12px rgba(56, 224, 255, 0.5);
}
html.command-mode .topbar-clock-primary { text-shadow: 0 0 10px rgba(56, 224, 255, 0.5); }

/* Launcher control injected at the far left of .topbar-left. */
html.command-mode .cc-tb-launch {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #bfefff;
  background: rgba(56, 224, 255, 0.07);
  border: 1px solid rgba(56, 224, 255, 0.40);
  border-radius: 999px;
  padding: 6px 13px;
  margin-right: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html.command-mode .cc-tb-launch:hover {
  background: rgba(56, 224, 255, 0.15);
  border-color: var(--cc-cyan);
  box-shadow: 0 0 14px rgba(56, 224, 255, 0.32);
}
html.command-mode .cc-tb-launch kbd {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  background: rgba(56, 224, 255, 0.12);
  border: 1px solid rgba(56, 224, 255, 0.28);
  border-radius: 4px;
  padding: 1px 5px;
}

/* --- Every topbar element gets the deck treatment so the whole bar flows
       together with the Command Center --- */

/* Drop the desk-matrix basis caption (visual noise). */
html.command-mode .topbar-clock-basis { display: none; }

/* Live pulse dot. */
html.command-mode .topbar-live-dot.is-live {
  background: var(--cc-cyan);
  box-shadow: 0 0 9px rgba(56, 224, 255, 0.9);
}

/* Clocks → glowing mono readouts; Zulu in a HUD chip. */
html.command-mode .topbar-clock {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  letter-spacing: 0.06em;
  color: #bfe6f7;
}
html.command-mode .topbar-clock-primary {
  color: #eaffff;
  text-shadow: 0 0 10px rgba(56, 224, 255, 0.6);
  padding: 3px 11px;
  border: 1px solid rgba(56, 224, 255, 0.42);
  border-radius: 7px;
  background: rgba(56, 224, 255, 0.06);
  box-shadow: inset 0 0 10px rgba(56, 224, 255, 0.08);
}

/* KPI chips → glowing HUD pills. */
html.command-mode .topbar-kpi {
  border: 1px solid rgba(56, 224, 255, 0.32);
  background: rgba(56, 224, 255, 0.05);
  border-radius: 999px;
  box-shadow: inset 0 0 8px rgba(56, 224, 255, 0.06);
}
html.command-mode .topbar-kpi-value {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  color: #eaffff;
  text-shadow: 0 0 8px rgba(56, 224, 255, 0.4);
}
html.command-mode .topbar-kpi-label { color: rgba(56, 224, 255, 0.7); letter-spacing: 0.12em; }
html.command-mode .topbar-kpi-dot.is-info { background: var(--cc-cyan); box-shadow: 0 0 7px rgba(56, 224, 255, 0.8); }

/* Switch-user + user card → glassy HUD controls. */
html.command-mode .switch-user-label {
  color: rgba(56, 224, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
html.command-mode .user-switcher-select {
  background: rgba(56, 224, 255, 0.05);
  border: 1px solid rgba(56, 224, 255, 0.32);
  color: #cdeefb;
  border-radius: 7px;
}
html.command-mode .user-card {
  border: 1px solid rgba(56, 224, 255, 0.30);
  background: rgba(56, 224, 255, 0.05);
  border-radius: 999px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
html.command-mode .user-card:hover {
  border-color: var(--cc-cyan);
  background: rgba(56, 224, 255, 0.10);
  box-shadow: 0 0 14px rgba(56, 224, 255, 0.25);
}
html.command-mode .user-avatar {
  background: radial-gradient(circle at 50% 38%, rgba(56, 224, 255, 0.34), rgba(8, 18, 38, 0.92));
  border: 1px solid rgba(56, 224, 255, 0.5);
  color: #eaffff;
  box-shadow: 0 0 10px rgba(56, 224, 255, 0.3);
}
html.command-mode .user-card-name { color: #d6f1fb; }
html.command-mode .user-card-caret { color: rgba(56, 224, 255, 0.7); }

/* Notifications bell → cyan. */
html.command-mode .notifications-bell {
  border: 1px solid rgba(56, 224, 255, 0.30);
  background: rgba(56, 224, 255, 0.05);
  color: #bfe6f7;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.command-mode .notifications-bell:hover {
  border-color: var(--cc-cyan);
  box-shadow: 0 0 14px rgba(56, 224, 255, 0.3);
}

/* Title — a small cyan marker for the HUD feel. */
html.command-mode .topbar-title::before { content: "▸ "; color: var(--cc-cyan); }

/* ===================================================================== */
/* SECTION DATA TABLES — header rows become HUD readout bands. We touch    */
/* ONLY the header (background + uppercase cyan); cell values and the      */
/* semantic row colors (STAR D0 results, desk categories) are untouched.   */
/* ===================================================================== */
html.command-mode thead th,
html.command-mode table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: rgba(56, 224, 255, 0.92);
  /* Composite the cyan tint over an OPAQUE panel. A bare semi-transparent
     fill let scrolling rows ghost through sticky headers (position:sticky
     thead) — most visibly when the security log is expanded to thousands
     of rows and scrolled. Layering over --panel-deep keeps the look but
     makes the header solid so nothing bleeds through. */
  background:
    linear-gradient(rgba(56, 224, 255, 0.06), rgba(56, 224, 255, 0.06)),
    var(--panel-deep, #0b1330);
}
/* A glowing rule under the header band. */
html.command-mode thead {
  box-shadow: 0 1px 0 0 rgba(56, 224, 255, 0.30), 0 6px 12px -10px var(--cc-cyan);
}

/* ===================================================================== */
/* STAR D0 SUMMARY TILES — command-deck glass + cyan glow on the gauges.   */
/* The semantic STATUS colors (D0 green / Late red / Pending purple / …)   */
/* are left completely intact; we only re-frame the tiles and glow the     */
/* empty ring tracks + numbers so they match the Command Center gauges.    */
/* ===================================================================== */
html.command-mode .star-d0-hero,
html.command-mode .star-d0-context,
html.command-mode .star-d0-status-rings .star-d0-ring--small {
  border: 1px solid rgba(56, 224, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.05), rgba(56, 224, 255, 0) 80px),
    var(--panel-deep, #0b1330);
  box-shadow: inset 0 0 0 1px rgba(56, 224, 255, 0.06), 0 0 14px rgba(56, 224, 255, 0.06);
}
/* Swap the plain white top-edge highlight for cyan. */
html.command-mode .star-d0-hero::before,
html.command-mode .star-d0-context::before,
html.command-mode .star-d0-status-rings .star-d0-ring--small::before {
  background: linear-gradient(90deg, transparent, rgba(56, 224, 255, 0.45) 30%, rgba(56, 224, 255, 0.45) 70%, transparent);
}
/* Small gauge tiles get a hover glow like the command nodes. */
html.command-mode .star-d0-status-rings .star-d0-ring--small {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html.command-mode .star-d0-status-rings .star-d0-ring--small:hover {
  border-color: rgba(56, 224, 255, 0.6);
  box-shadow: 0 0 22px rgba(56, 224, 255, 0.16);
}
/* Empty ring tracks glow cyan; the SVG gets a soft cyan halo. */
html.command-mode .star-d0-ring-track { stroke: rgba(56, 224, 255, 0.16); }
html.command-mode .star-d0-ring-svg { filter: drop-shadow(0 0 8px rgba(56, 224, 255, 0.22)); }
/* Center readouts glow (status text colors keep their hue underneath). */
html.command-mode .star-d0-ring-pct,
html.command-mode .star-d0-ring-count,
html.command-mode .star-d0-ring-share,
html.command-mode .star-d0-tile-value {
  text-shadow: 0 0 10px rgba(56, 224, 255, 0.35);
}

/* --------------------------------------------------------------------- */
/* Futuristic instrument-gauge upgrade for the STAR D0 dials.             */
/* Re-frames each flat donut as a lit HUD instrument: a tick-mark bezel   */
/* rings the rim, a scanner glint sweeps the hero, and the progress arc   */
/* gets a tone-matched glow. Pure CSS over the existing SVG (no markup     */
/* change); the semantic status colors stay exactly as authored. The      */
/* bezel pseudo-elements bleed ~8px past the SVG — every tile carries      */
/* 18px/20px padding + overflow:hidden, so they sit cleanly inside.        */
/* --------------------------------------------------------------------- */
html.command-mode .star-d0-ring-host {
  overflow: visible;
  isolation: isolate; /* local stacking context so the bezel z-order stays put */
}

/* Tick-mark bezel — short cyan graduations around the rim. A repeating
   conic gradient draws full spokes; the radial mask keeps only the outer
   ~5px band, so they read as ticks rather than spokes. */
html.command-mode .star-d0-ring-host::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -90deg,
    rgba(56, 224, 255, 0.55) 0deg 1.1deg,
    transparent 1.1deg 7.5deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  pointer-events: none;
  z-index: 0;
}

/* Scanner glint — a bright spot travels the hero's bezel band, giving the
   headline gauge a live / charging feel. Hero only, so the panel of five
   small rings stays calm. Masked to the same outer band, so it never
   touches (or muddies) the colored progress arc. */
html.command-mode .star-d0-ring--hero .star-d0-ring-host::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 318deg,
    rgba(56, 224, 255, 0.65) 350deg,
    rgba(170, 246, 255, 0.95) 358deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  pointer-events: none;
  z-index: 1;
  animation: ccD0Sweep 4.2s linear infinite;
}
@keyframes ccD0Sweep { to { transform: rotate(360deg); } }

/* Tone-matched glow on the progress arc — reads as a lit instrument.
   Uses the exact --star-d0-* semantic colors so the glow always tracks
   the arc's hue (green / amber / blue / red / purple). */
html.command-mode .star-d0-ring-arc {
  transition: stroke-dasharray 0.25s ease-out, filter 0.25s ease;
}
html.command-mode .star-d0-ring-arc.is-good     { filter: drop-shadow(0 0 5px var(--star-d0-good)); }
html.command-mode .star-d0-ring-arc.is-watch    { filter: drop-shadow(0 0 5px var(--star-d0-watch)); }
html.command-mode .star-d0-ring-arc.is-bad      { filter: drop-shadow(0 0 5px var(--star-d0-bad)); }
html.command-mode .star-d0-ring-arc.is-bad-dark { filter: drop-shadow(0 0 5px var(--star-d0-bad-dark)); }
html.command-mode .star-d0-ring-arc.is-pending  { filter: drop-shadow(0 0 5px var(--star-d0-pending)); }

/* Hero center — recessed glass well so the headline % sits in a lit
   bezel instead of floating. Re-skins the existing hero glow disc. */
html.command-mode .star-d0-ring--hero .star-d0-ring-center::before {
  background: radial-gradient(circle at 50% 42%, rgba(56, 224, 255, 0.12), rgba(8, 16, 34, 0) 70%);
  box-shadow:
    inset 0 0 20px rgba(56, 224, 255, 0.20),
    0 0 0 1px rgba(56, 224, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html.command-mode .star-d0-ring--hero .star-d0-ring-host::before { animation: none; }
}

/* ===================================================================== */
/* LOGIN → command-console glass panel. The Breeze Dispatch SVG stays as   */
/* the backdrop; the floating form becomes a glowing HUD panel with cyan   */
/* fields and a console-style sign-in. We DON'T touch the card's           */
/* positioning (bootstrap.js anchors it to the SVG's form-area) — only its */
/* surface + the field styling.                                            */
/* ===================================================================== */
html.command-mode .login-card {
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.07), rgba(56, 224, 255, 0) 120px),
    rgba(8, 16, 34, 0.82);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  border: 1px solid rgba(56, 224, 255, 0.42);
  border-radius: 10px;
  padding: 24px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(56, 224, 255, 0.08),
    0 0 30px rgba(56, 224, 255, 0.18),
    0 22px 60px rgba(0, 0, 0, 0.5);
}
html.command-mode .login-card input[type="text"],
html.command-mode .login-card input[type="password"] {
  background: rgba(56, 224, 255, 0.05);
  border: 1px solid rgba(56, 224, 255, 0.30);
  color: #eaffff;
  border-radius: 7px;
}
html.command-mode .login-card input::placeholder { color: rgba(159, 217, 238, 0.55); }
html.command-mode .login-card input:focus {
  border-color: var(--cc-cyan);
  background: rgba(56, 224, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(56, 224, 255, 0.4), 0 0 16px rgba(56, 224, 255, 0.2);
  outline: none;
}
html.command-mode .login-card label { color: rgba(56, 224, 255, 0.85); }
html.command-mode .login-card .btn.primary {
  width: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
/* New Breeze Dispatch logo (cyan). The ?v query busts the browser cache
   since the filename is unchanged; the cyan accent wash replaces the old
   blue one to match the new emblem. */
html.command-mode .login-screen {
  background-image:
    radial-gradient(800px 600px at 50% 35%, rgba(56, 224, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 28%, rgba(5, 10, 26, 0.45) 80%, #050a1a 100%),
    url("../assets/breeze-dispatch-logo.svg?v=2");
}

/* ===================================================================== */
/* SECTION CANVAS — faint console grid behind each section's content so   */
/* every module reads as a screen on the deck. Cards/panels sit on top    */
/* unchanged (they keep their own glass background + legibility).          */
/* ===================================================================== */
html.command-mode main.main {
  background:
    radial-gradient(circle at 50% -10%, rgba(56, 224, 255, 0.06), rgba(3, 7, 16, 0) 45%),
    repeating-linear-gradient(0deg, rgba(56, 224, 255, 0.022) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(56, 224, 255, 0.022) 0 1px, transparent 1px 48px),
    var(--bg, #060a1b);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.command-mode .cc-ring-outer,
  html.command-mode .cc-ring-arc,
  html.command-mode .cc-ring-inner,
  html.command-mode .cc-ticks { animation: none; }
  html.command-mode .cc-root:not(.cc-hidden),
  html.command-mode .cc-root:not(.cc-hidden) .cc-core,
  html.command-mode .cc-root:not(.cc-hidden) .cc-node,
  html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-backdrop,
  html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-center,
  html.command-mode .cc-l-root:not(.cc-hidden) .cc-l-node { animation: none; }
  html.command-mode .cc-node,
  html.command-mode .cc-l-node,
  html.command-mode .cc-home,
  html.command-mode .cc-power,
  html.command-mode .cc-tb-launch,
  html.command-mode .user-card,
  html.command-mode .notifications-bell { transition: none; }
}

/* ===================================================================== */
/* THEME SWEEP — bespoke HUD treatments for the rest of the app's        */
/* signature visuals, in the same vocabulary as the STAR D0 gauges:      */
/* bezel tracks, tone-matched glow, cyan accents. All command-mode-only  */
/* and additive (glow / border / shadow) — no layout or color-semantic   */
/* changes, so production (which never carries .command-mode) is intact. */
/* ===================================================================== */

/* ---- Bid Cycle data-viz: coverage / demand / weekend / daily bars ---- */
/* Coverage chart tracks → recessed instrument wells; the green coverage
   fill and red shortfall glow in their own hue so the eye reads surplus
   vs deficit instantly. */
html.command-mode #bidAppView .bid-cov-track {
  background: rgba(2, 10, 20, 0.55);
  box-shadow: inset 0 0 0 1px rgba(56, 224, 255, 0.18), inset 0 0 10px rgba(0, 0, 0, 0.5);
}
html.command-mode #bidAppView .bid-cov-cov { box-shadow: 0 0 10px rgba(29, 212, 161, 0.5); }
html.command-mode #bidAppView .bid-cov-short {
  opacity: 0.7;
  box-shadow: 0 0 10px rgba(255, 107, 123, 0.6);
}
html.command-mode #bidAppView .bid-cov-demand { border-right-color: rgba(56, 224, 255, 0.7); }

/* Demand preview bars → cyan-lit columns; peak hours flare brighter. */
html.command-mode #bidAppView .bid-demand-bar.weekday {
  box-shadow: inset 0 1px 0 rgba(170, 246, 255, 0.45), 0 0 8px rgba(56, 224, 255, 0.30);
}
html.command-mode #bidAppView .bid-demand-col.is-peak .bid-demand-bar.weekday {
  box-shadow: inset 0 1px 0 rgba(200, 250, 255, 0.7), 0 0 14px rgba(56, 224, 255, 0.55);
}

/* Weekend-off breakdown bar → instrument well with glowing segments and
   thin cyan dividers between them. */
html.command-mode #bidAppView .bid-weekend-bar {
  background: rgba(2, 10, 20, 0.55);
  box-shadow: inset 0 0 0 1px rgba(56, 224, 255, 0.20);
}
html.command-mode #bidAppView .bid-weekend-seg { box-shadow: inset -1px 0 0 0 rgba(56, 224, 255, 0.35); }
html.command-mode #bidAppView .bid-weekend-seg.off-both  { box-shadow: inset -1px 0 0 0 rgba(56, 224, 255, 0.35), 0 0 10px rgba(52, 211, 153, 0.45); }
html.command-mode #bidAppView .bid-weekend-seg.off-one   { box-shadow: inset -1px 0 0 0 rgba(56, 224, 255, 0.35), 0 0 10px rgba(251, 191, 36, 0.45); }

/* Daily-totals bars → cyan track + the busiest day flares. */
html.command-mode #bidAppView .bid-daily-bar {
  box-shadow: inset 0 1px 0 rgba(170, 246, 255, 0.35), 0 0 6px rgba(56, 224, 255, 0.20);
}
html.command-mode #bidAppView .bid-daily-col.is-max .bid-daily-bar {
  box-shadow: inset 0 1px 0 rgba(200, 250, 255, 0.7), 0 0 14px rgba(56, 224, 255, 0.5);
}

/* ---- Universal Dashboard: coverage trend chart ---------------------- */
/* The canvas is JS-drawn, so we frame it as a lit HUD instrument; the
   .coverage-trend-card already gets corner brackets from the HUD skin. */
html.command-mode #coverageChart {
  background: rgba(2, 10, 20, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(56, 224, 255, 0.20),
    inset 0 0 24px rgba(56, 224, 255, 0.06),
    0 0 18px rgba(56, 224, 255, 0.08);
}

/* ---- Scheduler: TODAY marker → glowing console cell ------------------ */
html.command-mode .slot.is-today {
  border-color: #7cc4ff;
  box-shadow:
    inset 0 3px 0 0 #5eb5ff,
    0 0 0 1px rgba(94, 181, 255, 0.5),
    0 0 16px rgba(94, 181, 255, 0.30);
}
html.command-mode .day-today-badge {
  border-color: rgba(124, 196, 255, 0.8);
  box-shadow: 0 0 12px rgba(94, 181, 255, 0.35);
  text-shadow: 0 0 8px rgba(124, 196, 255, 0.5);
}

/* ---- Notifications center → cyan HUD panel -------------------------- */
/* Alert count keeps its red (it's a warning) but gains a beacon glow. */
html.command-mode .notifications-bell-badge {
  box-shadow: 0 0 0 2px rgba(8, 16, 34, 0.95), 0 0 10px rgba(226, 75, 74, 0.75);
}
html.command-mode .notifications-panel {
  border: 1px solid rgba(56, 224, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.05), rgba(56, 224, 255, 0) 90px),
    var(--panel-deep, #0b1330);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 224, 255, 0.06),
    0 0 26px rgba(56, 224, 255, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.command-mode .notifications-panel-head {
  border-bottom-color: rgba(56, 224, 255, 0.28);
  box-shadow: 0 1px 0 0 rgba(56, 224, 255, 0.18);
}
html.command-mode .notification-item {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html.command-mode .notification-item:hover {
  border-color: rgba(56, 224, 255, 0.45);
  box-shadow: inset 2px 0 0 0 var(--cc-cyan), 0 0 16px rgba(56, 224, 255, 0.10);
}
/* Each kind's status dot glows in its own hue. */
html.command-mode .notification-item-icon[data-kind="request"]  { box-shadow: 0 0 10px rgba(31, 116, 223, 0.65); }
html.command-mode .notification-item-icon[data-kind="edct"]     { box-shadow: 0 0 10px rgba(106, 90, 205, 0.65); }
html.command-mode .notification-item-icon[data-kind="callout"]  { box-shadow: 0 0 10px rgba(195, 59, 72, 0.7); }
html.command-mode .notification-item-icon[data-kind="faa"]      { box-shadow: 0 0 10px rgba(179, 121, 31, 0.7); }
html.command-mode .notification-item-icon[data-kind="coverage"] { box-shadow: 0 0 10px rgba(31, 138, 92, 0.7); }

/* ---- Status badges → tone-matched glow ----------------------------- */
/* Only the semantic (colored) badges glow; plain count chips stay flat. */
html.command-mode .badge.allowed,
html.command-mode .badge.badge-ok {
  box-shadow: inset 0 0 0 1px rgba(29, 212, 161, 0.25), 0 0 10px rgba(29, 212, 161, 0.18);
}
html.command-mode .badge.denied,
html.command-mode .badge.danger,
html.command-mode .badge.badge-critical {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 123, 0.25), 0 0 10px rgba(255, 107, 123, 0.20);
}
html.command-mode .badge.warn {
  box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.25), 0 0 10px rgba(245, 165, 36, 0.18);
}

/* ===================================================================== */
/* THEME SWEEP — BATCH 2: scheduler pills, blackout cells, supervisor    */
/* briefing, desk assignment, status tags, sparklines. Same rules:       */
/* command-mode-only, additive (glow / shadow / animation), no layout or */
/* color-semantic changes; production stays untouched.                   */
/* ===================================================================== */

/* ---- Scheduler shift pills ----------------------------------------- */
/* Routine pills stay calm (the 3px colored left border is the semantic
   indicator and glowing dozens of pills reads noisy). We animate only
   the two states that should grab the eye: OPEN slots and duty
   violations. A neutral cyan hover lift already comes from the HUD skin. */

/* OPEN slots → an amber beacon so available shifts pulse for attention. */
html.command-mode .shift-pill.open,
html.command-mode .week-shift-row.open {
  animation: ccOpenBeacon 2.4s ease-in-out infinite;
}
@keyframes ccOpenBeacon {
  0%, 100% {
    border-color: rgba(255, 200, 100, 0.55);
    box-shadow: inset 0 0 8px rgba(255, 200, 100, 0.06);
  }
  50% {
    border-color: rgba(255, 200, 100, 0.95);
    box-shadow: 0 0 12px rgba(255, 200, 100, 0.4), inset 0 0 10px rgba(255, 200, 100, 0.14);
  }
}

/* DUTY VIOLATIONS → enhance the existing red inset ring with an alert
   pulse. Specificity beats the base rule so the ring is preserved. */
html.command-mode .shift-pill.is-duty-violation,
html.command-mode .week-shift-row.is-duty-violation {
  animation: ccDutyPulse 2s ease-in-out infinite;
}
@keyframes ccDutyPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(232, 96, 102, 0.5), 0 0 8px rgba(232, 96, 102, 0.25); }
  50%      { box-shadow: inset 0 0 0 1px rgba(232, 96, 102, 0.85), 0 0 16px rgba(232, 96, 102, 0.5); }
}

/* ---- Scheduler BLACKOUT cells → pulsing red vignette ---------------- */
/* Swap the busy diagonal stripes for a softer glowing red edge that
   breathes, so the cell reads as "locked" without the pattern noise. */
html.command-mode .slot.is-blackout {
  background-image: radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(224, 68, 91, 0.22) 100%);
  animation: ccBlackoutPulse 3s ease-in-out infinite;
}
@keyframes ccBlackoutPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(224, 68, 91, 0.35), inset 0 0 18px rgba(224, 68, 91, 0.14); }
  50%      { box-shadow: inset 0 0 0 1px rgba(224, 68, 91, 0.6),  inset 0 0 28px rgba(224, 68, 91, 0.28); }
}
html.command-mode .day-blackout-badge {
  box-shadow: 0 0 12px rgba(224, 68, 91, 0.3);
  text-shadow: 0 0 8px rgba(255, 130, 145, 0.4);
}

/* ---- Supervisor briefing items → severity rails + glowing dots ------ */
html.command-mode .briefing-item { transition: box-shadow 0.18s ease; }
html.command-mode .briefing-item.briefing-critical { box-shadow: inset 3px 0 8px -3px rgba(255, 107, 123, 0.6); }
html.command-mode .briefing-item.briefing-warn     { box-shadow: inset 3px 0 8px -3px rgba(245, 165, 36, 0.55); }
html.command-mode .briefing-item.briefing-info     { box-shadow: inset 3px 0 8px -3px rgba(31, 116, 223, 0.55); }
html.command-mode .briefing-critical .briefing-dot { filter: drop-shadow(0 0 5px var(--red)); }
html.command-mode .briefing-warn .briefing-dot     { filter: drop-shadow(0 0 5px var(--accent-tan)); }
html.command-mode .briefing-info .briefing-dot     { filter: drop-shadow(0 0 5px var(--blue)); }

/* ---- Desk Assignment → cyan hover rail + tactical desk-ID chip ------ */
html.command-mode tr.desk-assign-row:hover td { background: rgba(56, 224, 255, 0.06); }
html.command-mode tr.desk-assign-row:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--cc-cyan); }
html.command-mode .desk-id-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(56, 224, 255, 0.08);
  border: 1px solid rgba(56, 224, 255, 0.30);
  color: #cdeffb;
  box-shadow: 0 0 8px rgba(56, 224, 255, 0.12);
}
html.command-mode .desk-assign-partial-pill { box-shadow: 0 0 10px rgba(255, 195, 130, 0.3); }

/* ---- Status pills / tags → tone-matched glow ----------------------- */
html.command-mode .time-clock-status-pill.is-open    { box-shadow: 0 0 10px rgba(60, 179, 113, 0.3); }
html.command-mode .time-clock-status-pill.is-done    { box-shadow: 0 0 10px rgba(31, 116, 223, 0.3); }
html.command-mode .time-clock-status-pill.is-pending { box-shadow: 0 0 10px rgba(255, 159, 67, 0.3); }
/* On-the-clock dot: a steady green halo on top of its existing pulse
   (filter doesn't collide with the keyframed box-shadow). */
html.command-mode .time-clock-dot--on { filter: drop-shadow(0 0 5px rgba(60, 179, 113, 0.8)); }
html.command-mode .junior-log-table .reason-tag.reason-junior { box-shadow: 0 0 8px rgba(255, 200, 100, 0.2); }
html.command-mode .junior-log-table .reason-tag.reason-pickup { box-shadow: 0 0 8px rgba(122, 162, 255, 0.2); }
html.command-mode .passdown-tag--reroute    { box-shadow: 0 0 8px rgba(255, 196, 58, 0.22); }
html.command-mode .passdown-tag--out,
html.command-mode .passdown-tag--unresolved { box-shadow: 0 0 8px rgba(224, 68, 91, 0.28); }
html.command-mode .passdown-tag--double     { box-shadow: 0 0 8px rgba(95, 188, 208, 0.24); }
html.command-mode .passdown-tag--cover      { box-shadow: 0 0 8px rgba(60, 179, 113, 0.24); }

/* ---- Inline sparklines → stronger accent glow + a faint fill pulse -- */
html.command-mode .inline-viz-sparkline path { filter: drop-shadow(0 0 5px var(--view-accent)); }
html.command-mode .inline-viz-sparkline-fill { animation: ccSparkPulse 3s ease-in-out infinite; }
@keyframes ccSparkPulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.16; } }

@media (prefers-reduced-motion: reduce) {
  html.command-mode .shift-pill.open,
  html.command-mode .week-shift-row.open,
  html.command-mode .shift-pill.is-duty-violation,
  html.command-mode .week-shift-row.is-duty-violation,
  html.command-mode .slot.is-blackout,
  html.command-mode .inline-viz-sparkline-fill { animation: none; }
}

/* ===================================================================== */
/* SECURITY LOG — denser rows. The audit log expands to 5000 entries, so  */
/* the default cell padding adds up to a lot of wasted vertical space     */
/* when "Show all" is on. Tighten the rows (header stays a touch taller    */
/* for legibility) so far more entries are visible per screen.            */
/* ===================================================================== */
html.command-mode .security-log-table td {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.3;
}
html.command-mode .security-log-table thead th {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* Tighten the horizontal gap: the table spreads its slack width across all
   columns, so narrow ones (When / Actor / Action / Target) get a big
   trailing void before Details. Pin those four to their content width and
   let Details absorb the remainder, so the columns sit together on the
   left and Details fills the rest of the row. */
html.command-mode .security-log-table thead th:nth-child(-n + 4),
html.command-mode .security-log-table tbody td:nth-child(-n + 4) {
  width: 1%;
  white-space: nowrap;
}
html.command-mode .security-log-table thead th:nth-child(5),
html.command-mode .security-log-table tbody td:nth-child(5) {
  width: 100%;
}