/* =============================================================================
   TERMINAL design system — COMPILED OUTPUT of valuation/static/valuation/scss/
   (main.scss → _tokens, _components, _tables, _skeletons).

   Loaded AFTER style.css. Backward-compatible token bridge: redefines the
   custom-property names existing rules already consume, so every page re-skins
   with no markup change. Chrome stays dark slate; ink-blue accent is reserved
   for interactive elements. Hand-kept in sync with the .scss sources because
   the app ships without a Sass build step (no runtime dependency).
   Re-compile: `sass scss/main.scss css/terminal.css --style=compressed`.
   ============================================================================= */

/* ---------- Tokens: LIGHT (backward-compat bridge) ---------- */
:root {
  --bg-main:#f4f6f8; --app-bg:#f4f6f8; --bg-primary:#f4f6f8;
  --bg-card:#ffffff; --surface:#ffffff; --bg-secondary:#ffffff;
  --surface-2:#f8fafc; --surface-el:#f8fafc;
  --border-subtle:#e4e9ef; --line:#e4e9ef; --border:#e4e9ef; --hair-strong:#d3dae2;
  --text-primary:#0f1720; --ink:#0f1720; --text-1:#0f1720;
  --text-secondary:#6b7683; --muted:#6b7683; --text-3:#6b7683;
  --ink-soft:#3a4653; --text-2:#3a4653;
  --brand-navy:#131a24; --navy:#131a24;
  --accent:#2251c4; --accent-hover:#1b429f; --primary:#2251c4; --primary-dk:#1b429f;
  --accent-wash:#eaf0fc;
  --buy-green:#0b815a; --pos:#0b815a; --success:#0b815a;
  --sell-red:#c6283c; --neg:#c6283c; --danger:#c6283c;
  --hold-amber:#b45309; --warning:#b45309; --gold:#b45309;
  --rv-navy:#2251c4; --rv-charcoal:#0f1720; --rv-rule:#e4e9ef; --rv-pos:#0b815a; --rv-neg:#c6283c;
  --pos-wash:rgba(11,129,90,.10); --neg-wash:rgba(198,40,60,.10); --amber-wash:rgba(180,83,9,.12);
  color-scheme: light;

  /* shape / elevation / fonts / chart (theme-independent) */
  --radius:6px; --radius-sm:4px;
  --shadow-sm:0 1px 2px rgba(15,23,32,.05);
  --shadow-md:0 1px 2px rgba(15,23,32,.05),0 1px 3px rgba(15,23,32,.04);
  --shadow-lg:0 4px 16px rgba(15,23,32,.10);
  --font-sans:"Inter","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --chart-bg:#0e1622; --chart-grid:rgba(255,255,255,.06); --chart-axis:#8592a3; --chart-a:#4c86f0; --chart-b:#7d8895;
  --bs-link-color:var(--accent); --bs-link-hover-color:var(--accent-hover); --bs-link-color-rgb:34,81,196;
}

/* ---------- Tokens: DARK (slate / charcoal) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --bg-main:#0e141b; --app-bg:#0e141b; --bg-primary:#0e141b;
    --bg-card:#141b24; --surface:#141b24; --bg-secondary:#141b24;
    --surface-2:#111821; --surface-el:#111821;
    --border-subtle:#243040; --line:#243040; --border:#243040; --hair-strong:#2f3d4e;
    --text-primary:#e6edf3; --ink:#e6edf3; --text-1:#e6edf3;
    --text-secondary:#8a97a6; --muted:#8a97a6; --text-3:#8a97a6;
    --ink-soft:#b8c2ce; --text-2:#b8c2ce;
    --brand-navy:#0c1119; --navy:#0c1119;
    --accent:#5b8def; --accent-hover:#4c86f0; --primary:#5b8def; --primary-dk:#4c86f0;
    --accent-wash:#16233a;
    --buy-green:#3fb984; --pos:#3fb984; --success:#3fb984;
    --sell-red:#f0616d; --neg:#f0616d; --danger:#f0616d;
    --hold-amber:#e0a33e; --warning:#e0a33e; --gold:#e0a33e;
    --rv-navy:#5b8def; --rv-charcoal:#e6edf3; --rv-rule:#243040; --rv-pos:#3fb984; --rv-neg:#f0616d;
    --pos-wash:rgba(63,185,132,.14); --neg-wash:rgba(240,97,109,.14); --amber-wash:rgba(224,163,62,.14);
    --shadow-sm:none; --shadow-md:none; --shadow-lg:0 4px 18px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-bs-theme="dark"] {
  --bg-main:#0e141b; --app-bg:#0e141b; --bg-primary:#0e141b;
  --bg-card:#141b24; --surface:#141b24; --bg-secondary:#141b24;
  --surface-2:#111821; --surface-el:#111821;
  --border-subtle:#243040; --line:#243040; --border:#243040; --hair-strong:#2f3d4e;
  --text-primary:#e6edf3; --ink:#e6edf3; --text-1:#e6edf3;
  --text-secondary:#8a97a6; --muted:#8a97a6; --text-3:#8a97a6;
  --ink-soft:#b8c2ce; --text-2:#b8c2ce;
  --brand-navy:#0c1119; --navy:#0c1119;
  --accent:#5b8def; --accent-hover:#4c86f0; --primary:#5b8def; --primary-dk:#4c86f0;
  --accent-wash:#16233a;
  --buy-green:#3fb984; --pos:#3fb984; --success:#3fb984;
  --sell-red:#f0616d; --neg:#f0616d; --danger:#f0616d;
  --hold-amber:#e0a33e; --warning:#e0a33e; --gold:#e0a33e;
  --rv-navy:#5b8def; --rv-charcoal:#e6edf3; --rv-rule:#243040; --rv-pos:#3fb984; --rv-neg:#f0616d;
  --pos-wash:rgba(63,185,132,.14); --neg-wash:rgba(240,97,109,.14); --amber-wash:rgba(224,163,62,.14);
  --shadow-sm:none; --shadow-md:none; --shadow-lg:0 4px 18px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-bs-theme="light"] { color-scheme: light; }

/* ---------- Base type ---------- */
.app-body { font-family: var(--font-sans); background: var(--bg-main); background-image: none; color: var(--text-primary); }
.tabular, .kpi-value, .data-cell, .rv-table td, .rv-matrix td, .num, td.n, th.n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em;
}

/* ---------- Cards ---------- */
.card { border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--shadow-sm) !important; }
.card-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-subtle); font-weight: 600; }

/* ---------- Chrome: dark slate, flat ---------- */
.app-navbar { background: var(--brand-navy); background-image: none; backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: none; }

/* ---------- Interactive accent = ink-blue ---------- */
.text-primary, .card-header i.text-primary { color: var(--accent) !important; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.nav-tabs .nav-link.active { border-bottom-color: var(--accent); color: var(--text-primary); }
.text-bg-primary { background-color: var(--accent) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text { border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Chips / ratings ---------- */
.badge { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .02em; }

/* ---------- Chart surface (dark canvas both themes) ---------- */
.chart-surface { background: var(--chart-bg); border-radius: 0 0 var(--radius) var(--radius); position: relative; }

/* ---------- Valuation range bar (relative-valuation flagship data-viz) ---------- */
.val-range { position: relative; height: 34px; margin: 6px 0 2px; }
.val-range__track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sell-red) 0%, var(--hold-amber) 50%, var(--buy-green) 100%); opacity: .30; }
.val-range__span { position: absolute; top: 14px; height: 6px; border-radius: 3px; background: var(--accent); opacity: .5; }
.val-range__cmp, .val-range__fair { position: absolute; top: 6px; width: 2px; height: 22px; }
.val-range__cmp  { background: var(--text-primary); }
.val-range__fair { background: var(--accent); }
.val-range__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.val-range__tick.b { top: auto; bottom: 0; }

/* ---------- Tables: sticky, subtle zebra, hover, sortable ---------- */
.table thead th, .rv-table thead th, .screener-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-card); border-bottom: 1px solid var(--hair-strong);
}
.table-zebra > tbody > tr:nth-of-type(even) > * { background: var(--surface-2); }
.rv-table tbody tr:hover > *, .screener-table tbody tr:hover > * { background: var(--accent-wash); }
th.th-sort { cursor: pointer; user-select: none; }
th.th-sort:hover { color: var(--text-primary); }
th.th-sort .sort-arr { opacity: .35; font-size: .72em; margin-left: .28em; }
th[aria-sort="ascending"] .sort-arr, th[aria-sort="descending"] .sort-arr { opacity: 1; color: var(--accent); }

/* ---------- Skeletons + subtle transitions ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-secondary) 12%, transparent), transparent);
  animation: sk-shimmer 1.2s infinite; }
.skeleton-text { height: .72em; margin: .4em 0; }
.skeleton-title { height: 1.1em; width: 40%; margin: .2em 0 .6em; }
.skeleton-block { height: 100%; min-height: 3rem; }
.skeleton-kpi { height: 64px; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

.card, .btn, .sn-link, .nav-link, .form-control, .form-select, .hub-card, .kpi-card, .list-group-item {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* ---------- Scrollbars: quiet, cool ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) { *, .skeleton::after { animation: none !important; transition: none !important; } }