/* ==========================================================================
   NEPSE AI — theme.css
   Thin layer on top of Bootstrap 5.3. Only brand tokens + a handful of
   components Bootstrap doesn't ship (KPI accent ring, signal pills,
   contribution bars, sector heatmap, hero gradient, sidebar active state).
   Everything else uses Bootstrap utilities/components.
   ========================================================================== */

:root{
  --brand:#2563eb; --brand2:#1d4ed8;
  --up:#16a34a; --down:#dc2626; --gold:#d97706; --cyan:#0891b2; --purple:#7c3aed;
}
[data-bs-theme="dark"]{
  --bs-body-bg:#070d18; --bs-body-color:#e8f0ff; --bs-border-color:rgba(255,255,255,.09);
  --bs-secondary-color:#8fa3bf; --bs-tertiary-color:#5b7390;
  --surface:#0d1726; --surface-2:#101f33; --surface-3:#16263d;
  --brand:#3b82f6; --up:#19d27d; --down:#ff5d77; --gold:#f5a623; --cyan:#22b8d6; --purple:#a855f7;
  --hero-1:#16243c; --hero-2:#22406e; --hero-3:#2c5a8a;
}
[data-bs-theme="light"]{
  --bs-body-bg:#eef3f9; --bs-body-color:#0d1b2a; --bs-border-color:rgba(13,27,42,.10);
  --surface:#ffffff; --surface-2:#f6f9fd; --surface-3:#eef3f9;
  --brand:#2563eb; --up:#16a34a; --down:#dc2626; --gold:#d97706; --cyan:#0891b2; --purple:#7c3aed;
  --hero-1:#16243c; --hero-2:#26467a; --hero-3:#2f72a8;
}

body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bs-body-bg)}
.font-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.text-brand{color:var(--brand)!important}
.bg-surface{background:var(--surface)!important}
.bg-surface-2{background:var(--surface-2)!important}
.card{background:var(--surface);border-color:var(--bs-border-color)}
.border-soft{border-color:var(--bs-border-color)!important}

/* brand button */
.btn-brand{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--brand2);--bs-btn-hover-border-color:var(--brand2);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--brand2);--bs-btn-focus-shadow-rgb:37,99,235}

/* semantic colors */
.text-up{color:var(--up)!important}.text-down{color:var(--down)!important}
.text-gold{color:var(--gold)!important}.text-cyan{color:var(--cyan)!important}.text-purple{color:var(--purple)!important}

/* logo */
.brand-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--cyan));font-weight:800}
.brand-logo.lg{width:44px;height:44px;border-radius:12px;font-size:18px}

/* KPI card accent icon */
.kpi-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;flex:0 0 auto}
.kpi-v{font-size:1.55rem;font-weight:800;letter-spacing:-.5px;line-height:1.1}

/* signal pill */
.sig{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:700;line-height:1}
.sig.sm{padding:2px 9px;font-size:.72rem}
.sig-buy{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up)}
.sig-hold{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
.sig-sell{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down)}

/* hero gradient banner */
.hero-gradient{background:linear-gradient(135deg,var(--hero-1),var(--hero-2) 70%,var(--hero-3));color:#fff}
.hero-grid::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--bs-border-color) 1px,transparent 1px),linear-gradient(90deg,var(--bs-border-color) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse 100% 90% at 50% 0%,#000 25%,transparent 90%);opacity:.5;pointer-events:none}

/* sidebar links */
.side-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;
  background:transparent;color:var(--bs-secondary-color);border-radius:10px;padding:9px 12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:.15s}
.side-link:hover{background:var(--surface-2);color:var(--bs-body-color)}
.side-link.active{background:color-mix(in srgb,var(--brand) 14%,transparent);border-color:color-mix(in srgb,var(--brand) 35%,transparent);color:var(--brand)}
.side-link .bi{font-size:1.05rem;width:18px;text-align:center}

/* contribution bars (explainability) */
.contrib{height:9px;border-radius:5px;background:var(--surface-3);position:relative;overflow:hidden}
.contrib .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--bs-border-color)}
.contrib .fill{position:absolute;top:0;bottom:0;border-radius:3px}

/* sector heatmap cell */
.heat{height:46px;border-radius:9px;display:grid;place-items:center;font-weight:800}

/* sparkline / mini canvases */
.spark{width:100%;height:38px}

/* hero index sparkline */
.idx-spark{width:100%;height:80px}

/* dot */
.dot{width:9px;height:9px;border-radius:3px;display:inline-block}

/* stock card hover */
.lift{transition:transform .18s, box-shadow .18s}
.lift:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* login backdrop */
.auth-wrap{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
.auth-wrap::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 900px 480px at 50% -5%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%);pointer-events:none}

/* live status dot */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--bs-border-color);background:var(--surface)}
.ticker-track{display:inline-block;padding-block:6px;animation:tick 60s linear infinite}
.ticker-track:hover{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .item{display:inline-flex;gap:7px;padding-inline:18px;border-right:1px solid var(--bs-border-color);font-size:.78rem}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* chart wrappers keep a fixed height so Chart.js can size */
.chart-h-sm{height:90px}.chart-h-md{height:210px}.chart-h-lg{height:240px}.chart-h-xl{height:260px}

.cursor-pointer{cursor:pointer}