/* ═══════════════════════════════════════════════════════════════
   OPERATIONAL INTELLIGENCE DESIGN SYSTEM
   Extended tokens for dashboard, cockpit and graph surfaces.
   Layered on top of app.css — never redefines base tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Status semantic tokens ────────────────────────────────── */
  --op-healthy:        #10b981;
  --op-healthy-bg:     rgba(16,185,129,0.10);
  --op-healthy-border: rgba(16,185,129,0.22);
  --op-healthy-text:   #6ee7b7;

  --op-warning:        #f59e0b;
  --op-warning-bg:     rgba(245,158,11,0.10);
  --op-warning-border: rgba(245,158,11,0.22);
  --op-warning-text:   #fbbf24;

  --op-critical:        #ef4444;
  --op-critical-bg:     rgba(239,68,68,0.10);
  --op-critical-border: rgba(239,68,68,0.22);
  --op-critical-text:   #fca5a5;

  --op-neutral:        #64748b;
  --op-neutral-bg:     rgba(100,116,139,0.10);
  --op-neutral-border: rgba(100,116,139,0.18);
  --op-neutral-text:   #94a3b8;

  --op-running:        #7c3aed;
  --op-running-bg:     rgba(124,58,237,0.14);
  --op-running-border: rgba(124,58,237,0.28);
  --op-running-text:   #a78bfa;

  /* ── Risk tier tokens ──────────────────────────────────────── */
  --op-risk-critical-bg:     rgba(220,38,38,0.14);
  --op-risk-critical-border: rgba(220,38,38,0.30);
  --op-risk-critical-text:   #fca5a5;

  --op-risk-high-bg:     rgba(239,68,68,0.10);
  --op-risk-high-border: rgba(239,68,68,0.24);
  --op-risk-high-text:   #fca5a5;

  --op-risk-medium-bg:     rgba(245,158,11,0.10);
  --op-risk-medium-border: rgba(245,158,11,0.24);
  --op-risk-medium-text:   #fbbf24;

  --op-risk-low-bg:     rgba(16,185,129,0.08);
  --op-risk-low-border: rgba(16,185,129,0.20);
  --op-risk-low-text:   #6ee7b7;

  /* ── Intelligence accent tokens ────────────────────────────── */
  --op-intel-bg:     rgba(124,58,237,0.10);
  --op-intel-border: rgba(124,58,237,0.22);
  --op-intel-text:   #c4b5fd;
  --op-intel-glow:   rgba(124,58,237,0.18);

  /* ── Surface elevation hierarchy ──────────────────────────── */
  --op-surface-raised:   rgba(255,255,255,0.025);
  --op-surface-sunken:   rgba(0,0,0,0.18);
  --op-surface-overlay:  rgba(0,0,0,0.55);
  --op-surface-hover:    rgba(255,255,255,0.04);
  --op-surface-active:   rgba(255,255,255,0.06);

  /* ── Panel elevation shadows ───────────────────────────────── */
  --op-shadow-sm:    0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.20);
  --op-shadow-md:    0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.20);
  --op-shadow-lg:    0 8px 24px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.25);
  --op-shadow-panel: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.30);
  --op-shadow-graph: inset 0 0 0 1px rgba(255,255,255,0.04);
  --op-glow-accent:  0 0 20px rgba(124,58,237,0.15);

  /* ── Typography scale ──────────────────────────────────────── */
  --op-font-2xs:  9px;
  --op-font-xs:   10px;
  --op-font-sm:   11px;
  --op-font-base: 12px;
  --op-font-md:   13px;
  --op-font-lg:   14px;
  --op-font-xl:   16px;
  --op-font-2xl:  18px;
  --op-font-3xl:  22px;
  --op-font-hero: 28px;

  /* ── Spacing system ────────────────────────────────────────── */
  --op-gap-1: 4px;
  --op-gap-2: 8px;
  --op-gap-3: 12px;
  --op-gap-4: 16px;
  --op-gap-5: 20px;
  --op-gap-6: 24px;

  /* ── Control metrics ───────────────────────────────────────── */
  --op-control-xs:   24px;
  --op-control-sm:   28px;
  --op-control-base: 32px;
  --op-control-md:   36px;

  /* ── Border radius ─────────────────────────────────────────── */
  --op-radius-xs:   3px;
  --op-radius-sm:   5px;
  --op-radius-base: 7px;
  --op-radius-md:   9px;
  --op-radius-lg:   12px;
  --op-radius-pill: 9999px;

  /* ── Transition presets ────────────────────────────────────── */
  --op-t-fast:   0.10s ease;
  --op-t-base:   0.15s ease;
  --op-t-slow:   0.25s ease;
  --op-t-layout: 0.20s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Monospace font stack ──────────────────────────────────── */
  --op-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* ── Scrollbar ─────────────────────────────────────────────── */
  --op-scrollbar-w:     3px;
  --op-scrollbar-track: transparent;
  --op-scrollbar-thumb: rgba(255,255,255,0.10);
  --op-scrollbar-hover: rgba(255,255,255,0.18);

  /* ── Animation durations ───────────────────────────────────── */
  --op-anim-fade:    0.35s;
  --op-anim-slide:   0.20s;
  --op-anim-pulse:   2.0s;
  --op-anim-shimmer: 1.6s;
}

/* ── Operational scrollbar utility ────────────────────────────── */
.op-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--op-scrollbar-thumb) var(--op-scrollbar-track);
}
.op-scroll::-webkit-scrollbar       { width: var(--op-scrollbar-w); height: var(--op-scrollbar-w); }
.op-scroll::-webkit-scrollbar-track { background: var(--op-scrollbar-track); }
.op-scroll::-webkit-scrollbar-thumb { background: var(--op-scrollbar-thumb); border-radius: 2px; }
.op-scroll::-webkit-scrollbar-thumb:hover { background: var(--op-scrollbar-hover); }

/* ── Utility: panel containment ────────────────────────────────── */
.op-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  contain: layout style;
}

/* ── Utility: operational label ────────────────────────────────── */
.op-label {
  font-size: var(--op-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted-2);
  font-weight: 500;
}

/* ── Utility: monospace id display ─────────────────────────────── */
.op-mono-id {
  font-family: var(--op-mono);
  font-size: var(--op-font-sm);
  letter-spacing: 0.3px;
}

/* ── Status badge ───────────────────────────────────────────────── */
.op-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--op-font-xs);
  padding: 2px 8px;
  border-radius: var(--op-radius-pill);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.op-badge--healthy  { background: var(--op-healthy-bg);  color: var(--op-healthy-text);  border-color: var(--op-healthy-border); }
.op-badge--warning  { background: var(--op-warning-bg);  color: var(--op-warning-text);  border-color: var(--op-warning-border); }
.op-badge--critical { background: var(--op-critical-bg); color: var(--op-critical-text); border-color: var(--op-critical-border); }
.op-badge--neutral  { background: var(--op-neutral-bg);  color: var(--op-neutral-text);  border-color: var(--op-neutral-border); }
.op-badge--running  { background: var(--op-running-bg);  color: var(--op-running-text);  border-color: var(--op-running-border); }
.op-badge--intel    { background: var(--op-intel-bg);    color: var(--op-intel-text);    border-color: var(--op-intel-border); }

/* ── Metric value typography ────────────────────────────────────── */
.op-metric-hero {
  font-size: var(--op-font-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}
.op-metric-xl   { font-size: var(--op-font-3xl); font-weight: 700; line-height: 1; }
.op-metric-lg   { font-size: var(--op-font-2xl); font-weight: 700; line-height: 1; }
.op-metric-md   { font-size: var(--op-font-xl);  font-weight: 600; line-height: 1; }
.op-metric-sm   { font-size: var(--op-font-lg);  font-weight: 600; line-height: 1; }

/* Color modifiers */
.op-color--healthy  { color: var(--op-healthy); }
.op-color--warning  { color: var(--op-warning); }
.op-color--critical { color: var(--op-critical); }
.op-color--neutral  { color: var(--op-neutral); }
.op-color--running  { color: var(--op-running-text); }
.op-color--intel    { color: var(--op-intel-text); }

/* ── Section divider ────────────────────────────────────────────── */
.op-divider {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Confidence/risk progress bar ───────────────────────────────── */
.op-bar-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  flex-shrink: 0;
}
.op-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--op-t-slow);
}
.op-bar-fill--healthy  { background: var(--op-healthy); }
.op-bar-fill--warning  { background: var(--op-warning); }
.op-bar-fill--critical { background: var(--op-critical); }
.op-bar-fill--intel    { background: var(--accent); }

/* ── Operational keyframes ──────────────────────────────────────── */
@keyframes op-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes op-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.75); }
}

@keyframes op-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes op-spin {
  to { transform: rotate(360deg); }
}

@keyframes op-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--op-intel-glow); }
  50%       { box-shadow: 0 0 12px 3px var(--op-intel-glow); }
}

/* ── Loading skeleton ───────────────────────────────────────────── */
.op-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: op-shimmer var(--op-anim-shimmer) infinite linear;
  border-radius: var(--op-radius-sm);
}

/* ── Operational spinner ────────────────────────────────────────── */
.op-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--op-intel-bg);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: op-spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .op-skeleton { animation: none; }
  .op-spinner  { animation: none; }
  @keyframes op-fade-in { from { opacity: 1; transform: none; } }
  @keyframes op-pulse-dot { 50% { opacity: 1; transform: none; } }
}