/* ============================================================
   clarIQ — Dark Intelligence shared stylesheet
   Design reference: design-system-b.html (live token/component doc)
   Mockup reference: redesign-option-b.html

   Load order: AFTER the Tailwind CDN script and AFTER any
   page-level <style> block, so the compat layer wins.

   Structure:
     1. Tokens (:root)
     2. Base element styles
     3. Component classes (.panel, .btn-*, .chip-*, sidebar, statusbar…)
     4. Tailwind compat layer (remaps existing utility classes
        used in JS-generated markup — do NOT delete rules here
        without grepping for the class in JS template literals)
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #0b0e14;
  --panel:     #11151f;
  --panel-2:   #161b28;
  --panel-3:   #1c2232;   /* input backgrounds */
  --line:      #1f2637;
  --line-hi:   #2a3349;

  --ink:       #e6eaf2;
  --ink-2:     #9aa4b8;
  --ink-3:     #5f6b82;

  --green:     #4ade80;
  --green-dim: rgba(74, 222, 128, 0.12);
  --green-bd:  rgba(74, 222, 128, 0.25);
  --green-ink: #0a1a0f;   /* text on green buttons */
  --cyan:      #22d3ee;
  --cyan-dim:  rgba(34, 211, 238, 0.08);
  --cyan-bd:   rgba(34, 211, 238, 0.18);
  --purple:    #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.1);
  --purple-bd: rgba(167, 139, 250, 0.25);

  --up:        #4ade80;
  --down:      #f87171;
  --down-dim:  rgba(248, 113, 113, 0.1);
  --down-bd:   rgba(248, 113, 113, 0.25);
  --warn:      #fbbf24;
  --warn-dim:  rgba(251, 191, 36, 0.1);
  --warn-bd:   rgba(251, 191, 36, 0.25);
  --neutral:   #9aa4b8;

  --r-sm:  6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 99px;

  --glow-green: 0 0 12px rgba(74, 222, 128, 0.2);
  --glow-cyan:  0 0 12px rgba(34, 211, 238, 0.2);

  --font-ui:   'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── 2. Base ───────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.mono, .font-mono {
  font-family: var(--font-mono) !important;
  font-feature-settings: 'tnum';
}
::selection { background: var(--green-dim); }
hr { border: none; border-top: 1px solid var(--line); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a4560; }

/* ── 3. Components ─────────────────────────────────────────── */

/* Panels / cards */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel-head {
  display: flex; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 { font-size: 13px; font-weight: 600; }

/* Buttons */
.btn {
  font-family: inherit; font-weight: 600; font-size: 12.5px;
  padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-hi);
  background: var(--panel-2); color: var(--ink-2);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn:hover { color: var(--ink); border-color: #3a4560; }
.btn-primary {
  background: var(--green); color: var(--green-ink);
  border-color: var(--green); font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.1); color: var(--green-ink); }
.btn-cyan { background: var(--cyan-dim); color: var(--cyan); border-color: var(--cyan-bd); }
.btn-cyan:hover { background: rgba(34, 211, 238, 0.15); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-danger { background: var(--down-dim); color: var(--down); border-color: var(--down-bd); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.18); }
.btn-sm { font-size: 11.5px; padding: 5px 11px; }
.btn-lg { font-size: 14px; padding: 10px 22px; }

/* Chips / score pills — JetBrains Mono intentionally */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--r-sm); border: 1px solid;
  font-family: var(--font-mono);
}
.chip-good    { background: var(--green-dim);  color: var(--green);  border-color: var(--green-bd); }
.chip-mid     { background: var(--warn-dim);   color: var(--warn);   border-color: var(--warn-bd); }
.chip-low     { background: var(--down-dim);   color: var(--down);   border-color: var(--down-bd); }
.chip-cyan    { background: var(--cyan-dim);   color: var(--cyan);   border-color: var(--cyan-bd); }
.chip-purple  { background: var(--purple-dim); color: var(--purple); border-color: var(--purple-bd); }
.chip-neutral { background: var(--panel-2);    color: var(--ink-3);  border-color: var(--line); }

/* Sidebar shell */
.ciq-shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.ciq-side {
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.ciq-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; }
.ciq-brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  color: var(--green-ink); font-weight: 800; font-size: 13px;
  font-family: var(--font-mono);
}
.ciq-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.ciq-brand-name em { font-style: normal; color: var(--green); }
.ciq-navlabel {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 14px 10px 6px; font-family: var(--font-mono);
}
.ciq-navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; font-size: 13px;
  cursor: pointer; border: none; background: none;
  font-family: inherit; width: 100%; text-align: left;
}
.ciq-navitem:hover { background: var(--panel-2); color: var(--ink); }
.ciq-navitem.active { background: var(--green-dim); color: var(--green); font-weight: 600; }
.ciq-navitem svg { width: 16px; height: 16px; flex-shrink: 0; }
.ciq-side-foot {
  margin-top: auto; padding: 10px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}

/* Status bar */
.ciq-statusbar {
  display: flex; align-items: center; gap: 24px; height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-family: var(--font-mono);
}
.ciq-live {
  display: flex; align-items: center; gap: 7px;
  color: var(--green); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.ciq-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: var(--glow-green);
  animation: ciq-pulse 2s infinite;
}
@keyframes ciq-pulse { 50% { opacity: 0.4; } }

/* Metric strip */
.ciq-metrics {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.ciq-metric { background: var(--panel); padding: 18px 20px; }
.ciq-metric .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); font-family: var(--font-mono);
}
.ciq-metric .val {
  font-size: 22px; font-weight: 600; margin-top: 8px;
  letter-spacing: -0.01em; font-family: var(--font-mono);
}
.ciq-metric .sub { font-size: 11.5px; margin-top: 4px; color: var(--ink-3); }
@media (max-width: 900px) { .ciq-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Risk gauge */
.ciq-gauge { display: flex; gap: 3px; }
.ciq-gauge i { height: 4px; flex: 1; border-radius: 2px; background: var(--line-hi); }
.ciq-gauge i.on-green { background: var(--green); }
.ciq-gauge i.on-warn  { background: var(--warn); }
.ciq-gauge i.on-red   { background: var(--down); }

/* Tables */
.ciq-table th, table.ciq th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); background: var(--panel);
}
.ciq-table td, table.ciq td {
  padding: 12px 16px; font-size: 13px;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.ciq-table tbody tr:hover td, table.ciq tbody tr:hover td { background: var(--panel-2); }
.ciq-table tbody tr:last-child td { border-bottom: none; }

/* Inputs */
.ciq-input, input.ciq, select.ciq, textarea.ciq {
  font-family: inherit; font-size: 13.5px;
  background: var(--panel-3); color: var(--ink);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 9px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ciq-input:focus, input.ciq:focus, select.ciq:focus, textarea.ciq:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}
.ciq-input::placeholder { color: var(--ink-3); }

/* ── 4. Tailwind compat layer ──────────────────────────────────
   Remaps utility classes that appear in existing markup and in
   JS template literals. This is what lets us restyle the
   dashboard's JS-generated HTML without editing the JS.
   Frequency data (dashboard.html): text-gray-400 ×299,
   text-gray-500 ×193, text-gray-600 ×135, bg-slate-700 ×79,
   bg-white ×55 … — keep this layer comprehensive.
   ─────────────────────────────────────────────────────────── */

/* Backgrounds: page */
.bg-gray-50, .dark\:bg-slate-900 { background-color: var(--bg) !important; }

/* Backgrounds: surfaces (cards) */
.bg-white, .bg-slate-800, .dark\:bg-slate-800 {
  background-color: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Backgrounds: elevated / hover surfaces */
.bg-gray-100, .bg-gray-200, .bg-slate-700, .dark\:bg-slate-700,
.bg-gray-300, .dark\:bg-slate-600 {
  background-color: var(--panel-2) !important;
  color: var(--ink-2);
}
.hover\:bg-gray-200:hover, .hover\:bg-gray-300:hover,
.dark\:hover\:bg-slate-600:hover, .hover\:bg-slate-600:hover {
  background-color: var(--panel-3) !important;
}

/* Text: primary */
.text-gray-900, .text-black, .text-gray-100, .dark\:text-gray-100,
.text-gray-800, .dark\:text-gray-200 { color: var(--ink) !important; }
/* Text: secondary */
.text-gray-700, .text-gray-300, .dark\:text-gray-300,
.text-gray-600 { color: var(--ink-2) !important; }
/* Text: tertiary */
.text-gray-500, .text-gray-400, .dark\:text-gray-400 { color: var(--ink-3) !important; }
.text-white { color: var(--ink) !important; }

/* Headings default to primary ink */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* Borders */
.border-gray-200, .border-gray-300, .border-slate-700,
.dark\:border-slate-700, .border-transparent { border-color: var(--line) !important; }
.border-slate-600, .dark\:border-slate-600, .border-slate-500,
.dark\:border-slate-500 { border-color: var(--line-hi) !important; }

/* Financial semantic text */
.text-green-600, .text-green-400, .dark\:text-green-400,
.text-green-500 { color: var(--up) !important; font-weight: 600; }
.text-red-600, .text-red-400, .dark\:text-red-400,
.text-red-500 { color: var(--down) !important; font-weight: 600; }
.text-yellow-600, .text-yellow-400, .text-yellow-500,
.text-orange-600, .text-orange-400, .text-orange-500,
.text-amber-600, .text-amber-400 { color: var(--warn) !important; font-weight: 600; }
.text-blue-600, .text-blue-400, .dark\:text-blue-400,
.text-blue-700, .text-blue-300 { color: var(--cyan) !important; }
.text-purple-600, .text-purple-400 { color: var(--purple) !important; }

/* Semantic tinted backgrounds (alerts, banners) */
.bg-green-100, .bg-green-900, .dark\:bg-green-900 {
  background-color: var(--green-dim) !important; color: var(--green) !important;
}
.bg-red-100, .bg-red-900, .dark\:bg-red-900 {
  background-color: var(--down-dim) !important; color: var(--down) !important;
}
.bg-yellow-100, .bg-amber-50, .dark\:bg-amber-900\/20, .bg-amber-900 {
  background-color: var(--warn-dim) !important; color: var(--warn) !important;
}
.bg-blue-100, .bg-blue-900, .dark\:bg-blue-900 {
  background-color: var(--cyan-dim) !important; color: var(--cyan) !important;
}

/* Buttons: solid colour utilities become Option B equivalents */
.bg-green-600, .bg-green-700, .dark\:bg-green-700, .dark\:bg-green-600 {
  background-color: var(--green) !important;
  color: var(--green-ink) !important;
  border: none !important;
}
.hover\:bg-green-700:hover, .dark\:hover\:bg-green-600:hover { filter: brightness(1.1); }
.bg-blue-600, .bg-blue-700, .dark\:bg-blue-700 {
  background-color: var(--green) !important;
  color: var(--green-ink) !important;
  border: none !important;
}
.hover\:bg-blue-700:hover, .dark\:hover\:bg-blue-600:hover { filter: brightness(1.1); }
.bg-purple-600, .bg-purple-700, .dark\:bg-purple-700 {
  background-color: var(--cyan-dim) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--cyan-bd) !important;
}
.hover\:bg-purple-700:hover, .dark\:hover\:bg-purple-600:hover {
  background-color: rgba(34, 211, 238, 0.15) !important;
}
.bg-red-600, .bg-red-700 {
  background-color: var(--down-dim) !important;
  color: var(--down) !important;
  border: 1px solid var(--down-bd) !important;
}

/* Inline style guards used by old code ("color:#ffffff !important") lose
   meaning on green buttons — green buttons need dark ink. If a button still
   renders white-on-green after conversion, remove its inline style attr. */

/* Shadows: flatten everything — depth comes from bg layers, not elevation */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl,
.dark\:shadow-slate-900\/50 { box-shadow: none !important; }

/* Rounded corners normalize */
.rounded-lg { border-radius: var(--r) !important; }
.rounded-xl { border-radius: var(--r-lg) !important; }

/* Form elements picked up broadly (Tailwind-styled inputs in JS templates) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background-color: var(--panel-3);
  color: var(--ink);
  border-color: var(--line-hi);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }