/* ===================================================================
   CEORater — TEK2day Finance design language (cosmetic-only override)
   Loaded AFTER style.css. Changes colours / fonts / corners ONLY.
   No layout or content changes. Remove this <link> to revert.
   =================================================================== */

/* 1. Token remap — flips every var()-driven surface at once. */
:root {
  --primary-blue: #ff9f1c;
  --primary-blue-dark: #b97a14;
  --primary-blue-light: #ffb347;
  --success-green: #2fd47f;
  --success-green-dark: #1f9657;
  --warning-amber: #ff9f1c;
  --danger-red: #ff4d42;
  --neutral-gray: #8a8878;
  --text-primary: #e8e6df;
  --text-secondary: #b9b6aa;
  --text-muted: #8a8878;
  --bg-primary: #000000;
  --bg-card: #070705;
  --border-light: #1c1b14;
  --border-medium: #2b2a1e;

  --fin-bg: #000;
  --fin-panel: #070705;
  --fin-panel-2: #0c0c09;
  --fin-line: #1c1b14;
  --fin-line-2: #2b2a1e;
  --fin-text: #e8e6df;
  --fin-muted: #8a8878;
  --fin-amber: #ff9f1c;
  --fin-amber-dim: #b97a14;
  --fin-cyan: #38c8d8;
  --fin-green: #2fd47f;
  --fin-mono: "IBM Plex Mono", Consolas, monospace;
  --fin-sans: "Archivo", system-ui, sans-serif;
}

/* 2. Typography */
body {
  font-family: var(--fin-mono) !important;
  background: var(--fin-bg) !important;
  color: var(--fin-text) !important;
}
h1, h2, h3, h4, .font-sans, button, input, select {
  font-family: var(--fin-sans);
}
/* Card numerals use clean mono; the CEORater logo & other Orbitron marks
   stay Orbitron (scoped to .ceo-card only). */
.ceo-card .font-orbitron {
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  letter-spacing: 0.01em !important;
}

/* 3. Surface flips: light app chrome -> dark panels */
.bg-white { background-color: var(--fin-panel) !important; color: var(--fin-text) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: var(--fin-panel-2) !important; }
.bg-gray-900, .bg-black { background-color: var(--fin-bg) !important; }

/* Text colours that assume a light background */
.text-gray-900, .text-slate-900, .text-gray-800, .text-slate-800 { color: var(--fin-text) !important; }
.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600 { color: var(--fin-text) !important; }
.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400 { color: var(--fin-muted) !important; }

/* Borders */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--fin-line) !important; }

/* 4. Amber accent for former-blue utilities (belt-and-braces with config) */
.text-blue-500, .text-blue-600, .text-blue-400 { color: var(--fin-amber) !important; }
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--fin-amber) !important; color: #000 !important; }
.border-blue-500, .border-blue-600 { border-color: var(--fin-amber) !important; }
.ring-blue-500 { --tw-ring-color: var(--fin-amber) !important; }

/* 5. Squared edges */
[class*="rounded"] { border-radius: 3px !important; }

/* 6. Inline stats-bar (index.html <style>) -> dark */
#statCardContainer .stats-bar { background: var(--fin-panel) !important; border-color: var(--fin-line) !important; box-shadow: none !important; }
#statCardContainer .stat-item-primary { background: #0c1a10 !important; }
#statCardContainer .stat-label { color: var(--fin-muted) !important; }
#statCardContainer .stat-value { color: var(--fin-text) !important; }

/* 7. Header/main shadows read heavy on dark — soften */
.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-sm { box-shadow: 0 0 0 1px var(--fin-line) !important; }

/* ===================================================================
   8. Component-level matches to the approved mockup
   =================================================================== */

/* Active nav tab + view toggle: blue -> amber */
.watchlist-tab.active,
.view-toggle.active { background-color: var(--fin-amber) !important; color: #000 !important; }
.watchlist-tab:not(.active), .view-toggle:not(.active) { color: var(--fin-muted) !important; }

/* Pastel chip / badge backgrounds (cards, banner) -> dark panels */
.bg-blue-50, .bg-green-50, .bg-red-50, .bg-yellow-50, .bg-purple-50, .bg-emerald-50,
.bg-sky-50, .bg-amber-50 { background-color: var(--fin-panel-2) !important; }
.border-blue-200, .border-green-200, .border-red-200, .border-yellow-200,
.border-purple-200, .border-emerald-200, .border-sky-200 { border-color: var(--fin-line) !important; }
/* progress-bar tracks */
.bg-blue-200, .bg-green-200, .bg-red-200, .bg-yellow-200, .bg-purple-200 { background-color: var(--fin-line) !important; }
/* chip LABEL text (standalone, single-class) -> muted */
.text-blue-800, .text-yellow-800, .text-purple-800, .text-emerald-800 { color: var(--fin-muted) !important; }

/* Score badges (CEORater / Alpha / RevCAGR pills + card hero):
   drop tier gradients -> dark chip with amber number (matches mockup) */
.score-badge-excellent, .score-badge-good, .score-badge-average, .score-badge-poor {
  background: var(--fin-panel-2) !important;
  color: var(--fin-amber) !important;
  border: 1px solid var(--fin-line-2) !important;
}
.ceorater-hero { background: #040403 !important; border: 1px solid var(--fin-line) !important; }
.ceorater-hero p { color: var(--fin-amber) !important; }              /* CEORaterScore -> gold */
.ceorater-hero p:first-child { color: var(--fin-muted) !important; }  /* "CEORaterScore" label */

/* Component-chip VALUE numbers (amber for the brand, keep comp grade amber) */
.text-blue-600, .text-purple-600 { color: var(--fin-amber) !important; }
.bg-purple-600 { background-color: var(--fin-amber) !important; }

/* Founder tags (filled pastel pill -> amber outline) — compound selectors so
   these win over the chip-label rules above */
.bg-green-100.text-green-800,
.bg-purple-100.text-purple-700 {
  background-color: transparent !important;
  border: 1px solid var(--fin-amber-dim) !important;
  color: var(--fin-amber) !important;
}

/* CEO name links -> cyan (finance accent for tickers/links) */
.ceo-name-link { color: var(--fin-cyan) !important; }

/* Semantic up/down stays green/red */
.text-green-600, .text-green-700 { color: var(--fin-green) !important; }
.text-red-600, .text-red-700 { color: #ff4d42 !important; }

/* Card -> clean dark panel, uniform border (no amber rail), no white ring */
.ceo-card {
  background: var(--fin-panel) !important;
  border: 1px solid var(--fin-line) !important;
  box-shadow: none !important;
}

/* ===================================================================
   9. Kill leftover WHITE / light styling that washes out on dark
   =================================================================== */

/* Hover variants that flip to light grey (table rows, list items, buttons) */
[class*="hover:bg-gray"]:hover,
[class*="hover:bg-slate"]:hover,
[class*="hover:bg-white"]:hover { background-color: #14130b !important; }

/* Semi-transparent white backgrounds (e.g. bg-white/90 on +/★ buttons) */
[class*="bg-white/"] { background-color: var(--fin-panel-2) !important; }

/* Card action buttons (+/★) */
.watchlist-star, .compare-btn {
  background-color: var(--fin-panel-2) !important;
  border-color: var(--fin-line) !important;
}

/* Table row hover (explicit, beats Tailwind's generated hover utility) */
.ceo-table-row:hover td { background-color: #14130b !important; }

/* Any element still painted pure white */
[style*="background: white"], [style*="background:#fff"], [style*="background-color: white"] {
  background-color: var(--fin-panel) !important;
}

/* Hardcoded light hex backgrounds living in style.css (override by selector) */
.card-action-cluster {
  background: var(--fin-panel-2) !important;
  border-color: var(--fin-line) !important;
  box-shadow: none !important;
}
.ceo-card a.details-link, .ceo-card .view-details-link {
  background: transparent !important;
  color: var(--fin-text) !important;       /* View Details -> white */
  border: none !important;
}
.ceo-card a.details-link:hover, .ceo-card .view-details-link:hover {
  background: transparent !important;
  color: var(--fin-amber) !important;
}
.score-weight-bar { background: var(--fin-line) !important; }
#resultsCount {
  background-color: var(--fin-panel-2) !important;
  color: var(--fin-muted) !important;
  border: 1px solid var(--fin-line) !important;
}
#ceoTableView th {
  background-color: var(--fin-panel) !important;
  color: var(--fin-amber-dim) !important;
  border-bottom-color: var(--fin-line-2) !important;
}
#ceoTableView th:hover { background-color: var(--fin-panel-2) !important; }
#ceoTableView td { border-bottom-color: #121109 !important; }
#ceoTableView tr:hover { background-color: #14130b !important; }
.auth-bottom-bar, .fixed-cta {
  background: rgba(7,7,5,0.92) !important;
  border-top-color: var(--fin-line) !important;
}

/* ===================================================================
   10. CEO card refinements (per review)
   CEORaterScore = gold; Alpha / RevCAGR / Comp values = white;
   magnitude bars = calm cyan; no amber rail.
   =================================================================== */
/* All three sub-score VALUES -> white, LABELS -> muted (by size, so the
   tier colour green/yellow/red on Rev CAGR no longer leaks through) */
.ceo-card .grid p.text-2xl { color: var(--fin-text) !important; }
.ceo-card .grid p.text-xs  { color: var(--fin-muted) !important; }
.ceo-card .score-progress { background-color: var(--fin-cyan) !important; }

/* Summary statistics row: clean mono numerals (logo stays Orbitron) */
#statCardContainer .stat-value,
.mobile-stats-grid [class*="orbitron"] {
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  letter-spacing: 0.01em !important;
}

/* ===================================================================
   11. CEO detail modal — carry the exact card language through
   =================================================================== */
/* Mono numerals (logo stays Orbitron) */
#ceoDetailModal .font-orbitron {
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  letter-spacing: 0.01em !important;
}
/* Big CEORaterScore hero -> dark box, gold number, muted label */
.modal-ceorater-section {
  background: #040403 !important;
  border: 1px solid var(--fin-line) !important;
}
.modal-ceorater-section h4 { color: var(--fin-muted) !important; }
.modal-ceorater-section .font-orbitron { color: var(--fin-amber) !important; }
/* Sub-score chips: values white, labels + captions muted, bars cyan */
#ceoDetailModal .text-4xl { color: var(--fin-text) !important; }
#ceoDetailModal h4.text-sm { color: var(--fin-muted) !important; }
#ceoDetailModal .text-blue-700,
#ceoDetailModal .text-purple-700,
#ceoDetailModal .text-green-700,
#ceoDetailModal .text-yellow-700,
#ceoDetailModal .text-red-700 { color: var(--fin-muted) !important; }
#ceoDetailModal .score-progress { background-color: var(--fin-cyan) !important; }

/* Watchlist count badge: was white-on-light-grey (unreadable) */
#watchlistCount {
  background-color: var(--fin-panel-2) !important;
  color: var(--fin-amber) !important;
  border: 1px solid var(--fin-amber-dim) !important;
}
/* General catch for other light-grey fills */
.bg-gray-400, .bg-gray-300, .bg-gray-200 { background-color: var(--fin-line-2) !important; }