/* Ops Control Center — Tahoe-dark design system.
   Single source of truth for color. Tailwind utilities map to these vars via
   tailwind.config in base.html (bg-surface, text-ink, border-line, etc.), so a
   future light theme is just a second :root block. Dark-only for now. */
:root {
  /* macOS-Tahoe dark: deep blue-black field, slightly elevated surfaces. */
  --color-bg:          #0a0c10;
  --color-surface:     #14171d;   /* cards */
  --color-elevated:    #1b1f27;   /* nested boxes, hovers, inputs */
  --color-line:        #2a2f3a;   /* borders */
  --color-ink:         #e7e9ee;   /* primary text */
  --color-muted:       #8b93a2;   /* secondary text */
  --color-accent:      #5b9dff;   /* macOS blue */
  --color-accent-ink:  #ffffff;

  /* Severity — vivid on dark, also used by the timeline + sparklines. */
  --color-severity-critical: #ff5d62;
  --color-severity-high:     #ff9f43;
  --color-severity-medium:   #ffce4a;
  --color-severity-low:      #35d29b;
}

html { color-scheme: dark; }
body { background: var(--color-bg); color: var(--color-ink); }

/* Slightly translucent, blurred header — the macOS toolbar feel. */
.occ-toolbar {
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-line);
}

/* Dark scrollbars so panes don't show light gutters. */
* { scrollbar-color: var(--color-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* Pulse — a fresh incident (<5 min) draws the eye without being obnoxious. */
@keyframes occ-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 93, 98, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 93, 98, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 93, 98, 0); }
}
.occ-pulse { animation: occ-pulse 1.8s ease-out infinite; }

/* Keyboard focus ring for j/k navigation. */
.occ-focused { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 12px; }

/* ---- Timeline (Part 1) ---- */
.occ-tl-rail { position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--color-line); }
.occ-tl-dot {
  position: absolute; left: 12px; width: 16px; height: 16px; border-radius: 9999px;
  border: 3px solid var(--color-bg); box-sizing: content-box;
}
.occ-tl-row:hover { background: var(--color-elevated); }

/* ---- Sparkline (Part 2) ---- */
.occ-spark { display: block; }
.occ-spark-fill { opacity: 0.16; }

/* Severity helpers usable in inline styles / SVG. */
.sev-critical { color: var(--color-severity-critical); }
.sev-high     { color: var(--color-severity-high); }
.sev-medium   { color: var(--color-severity-medium); }
.sev-low      { color: var(--color-severity-low); }

/* HTMX in-flight affordance. */
.htmx-request.occ-busy, .occ-busy.htmx-request { opacity: 0.6; pointer-events: none; }

/* Help / shortcut modal + generic dialog backdrop. */
.occ-modal-backdrop { background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--color-elevated); border: 1px solid var(--color-line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--color-ink);
}