/* =============================================================================
   cockpit-canon.css
   Visual override layer applied to engineering plans + master cockpit so they
   speak the same language as orbis.expert v2 (and orbis.restaurant):
     - pure black background
     - neon green #81FF28 as the only accent
     - Inter (display/body) + DM Mono (labels) + DM Serif Display (italic)
     - transparent cards with thin white-10 borders (codex FAQ pattern)
     - clean status colours: green #22C55E / yellow #FFD500 / red #FF3333 / blue #3B82F6
   Loaded via <link rel="stylesheet"> in the head of each plan/cockpit HTML.
   Uses !important strategically because target files set their own :root vars.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --neon: #81FF28 !important;
  --canon-bg: #000000 !important;
  --canon-surface: #0a0a0a !important;
  --canon-border: rgba(255, 255, 255, 0.1) !important;
  --canon-border-hover: rgba(255, 255, 255, 0.25) !important;
  --canon-text: #ffffff !important;
  --canon-gray: #b0b0b0 !important;
  --canon-gray-soft: #808080 !important;
  --status-green: #22C55E !important;
  --status-yellow: #FFD500 !important;
  --status-red: #FF3333 !important;
  --status-blue: #3B82F6 !important;
}

html, body {
  background: #000000 !important;
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* Headers: display weight + tight tracking, like main site. */
h1, h2, h3, h4, .title, .composite-score {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* Common surface elements: tables, cards, sections, summary blocks. */
table, .card, .section, .summary, .container,
.cockpit-card, .product-card, .priority-card,
.composite-score-card, .maturity-trail, .plan-card,
.gap-row, .risk-chips, .risk-chip,
header, main, article, aside {
  background: transparent !important;
  background-image: none !important;
}

/* Borders: thin + light, hover brightens. */
.card, .cockpit-card, .product-card, .priority-card,
.composite-score-card, .maturity-trail, .plan-card,
.gap-row, table, section, fieldset {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  transition: border-color 0.3s ease;
}

.card:hover, .cockpit-card:hover, .product-card:hover,
.priority-card:hover, .plan-card:hover, .gap-row:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Table cells inherit the same thin grid. */
th, td {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
th {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #b0b0b0 !important;
}

/* Status dots: canon palette. Targets typical .dot.red etc + raw colour classes. */
.dot.red,    .red-dot,    [data-status="red"],    .status-red    { background: #FF3333 !important; box-shadow: 0 0 8px rgba(255, 51, 51, 0.4) !important; }
.dot.yellow, .yellow-dot, [data-status="yellow"], .status-yellow { background: #FFD500 !important; box-shadow: 0 0 8px rgba(255, 213, 0, 0.4) !important; }
.dot.green,  .green-dot,  [data-status="green"],  .status-green  { background: #81FF28 !important; box-shadow: 0 0 8px rgba(129, 255, 40, 0.4) !important; }
.dot.blue,   .blue-dot,   [data-status="blue"],   .status-blue   { background: #3B82F6 !important; box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important; }

/* Counters / progress badges: transparent + neon text on active. */
.counter, .badge, .pill, .chip, .stat {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #b0b0b0 !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 0 !important;
}
.counter.active, .badge.active, .pill.active, .chip.active {
  border-color: #81FF28 !important;
  color: #81FF28 !important;
  background: rgba(129, 255, 40, 0.08) !important;
}

/* Big numerals (composite scores): display weight Inter, neon when standout. */
.score-value, .big-number, .composite-score-value {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

/* Buttons: outline + neon, mirror site CTAs. */
button, .btn, a.btn, a[role="button"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
button:hover, .btn:hover, a.btn:hover, a[role="button"]:hover {
  border-color: #81FF28 !important;
  color: #81FF28 !important;
}

/* Links: neon green. */
a:not(.btn):not([role="button"]) {
  color: #81FF28 !important;
}
a:not(.btn):not([role="button"]):hover {
  text-shadow: 0 0 8px rgba(129, 255, 40, 0.4) !important;
}

/* Inline code blocks: minimal. */
code, pre {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #b0b0b0 !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  border-radius: 0 !important;
}

/* Section headers + uppercase labels: mono font. */
.section-header, .label, .meta, [class*="label"], [class*="header-"] {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #b0b0b0 !important;
}

/* Selection highlight + scrollbar polish to match the panel. */
::selection { background: #81FF28; color: #000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* Sparkles layer (matches panel + main site). Host div injected by cockpit-canon.js. */
#cockpit-sparkles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-in;
}
#cockpit-sparkles.loaded { opacity: 1; }

/* Ensure content sits above sparkles. */
body > *:not(#cockpit-sparkles) {
  position: relative;
  z-index: 1;
}