/* Design tokens and the light/dark theme.

   Colours are CSS variables holding RGB channels, mapped to Tailwind colour
   names in base.html (bg, surface, surface2, surface3, line, line2, ink,
   ink2, ink3, brand, bull, bear), so `bg-surface/80` and friends work and
   one set of classes covers both themes. Light is the default; `html.dark`
   (the header toggle, remembered in localStorage) swaps the values.

   The palette follows the "NepalStockAnalysis widget library" reference;
   dark-mode greys are a little lighter than the reference for legible
   small text. */

:root {
    --bg: 238 240 246;
    --surface: 255 255 255;
    --surface2: 244 245 250;
    --surface3: 236 238 245;
    --line: 221 224 237;
    --line2: 232 234 244;
    --ink: 12 15 30;
    --ink2: 72 80 112;
    --ink3: 112 120 158;
    --brand: 59 91 219;
    --brand2: 47 74 196;
    --bull: 13 148 72;
    --bear: 214 58 58;
}

html.dark {
    color-scheme: dark;
    --bg: 7 10 18;
    --surface: 14 18 32;
    --surface2: 19 24 40;
    --surface3: 24 30 48;
    --line: 28 34 56;
    --line2: 34 40 64;
    --ink: 221 227 248;
    --ink2: 140 150 190;
    --ink3: 98 108 145;
    --brand: 104 130 242;
    --brand2: 84 112 232;
    --bull: 30 184 98;
    --bear: 240 90 86;
}

/* ── Shared building blocks (reference "widget" look) ── */
.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 12px; }
.card-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink3)); }
.num { font-family: "DM Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 6px; font-family: "DM Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill-up { color: rgb(var(--bull)); background: rgb(var(--bull) / .10); }
.pill-down { color: rgb(var(--bear)); background: rgb(var(--bear) / .10); }
.pill-flat { color: rgb(var(--ink3)); background: rgb(var(--surface2)); }
.up { color: rgb(var(--bull)); }
.down { color: rgb(var(--bear)); }
.flat { color: rgb(var(--ink3)); }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--bull) / .45); } 50% { box-shadow: 0 0 0 5px rgb(var(--bull) / 0); } }
.live-dot { animation: livePulse 2s infinite; }

/* Score / signal pills, sortable table headers (used across pages). */
.score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; font-family: "DM Mono", ui-monospace, monospace; }
.score-strong-buy, .signal-Buy, .signal-Strong-Buy { background: rgb(var(--bull) / .15); color: rgb(var(--bull)); }
.score-buy { background: rgb(var(--bull) / .08); color: rgb(var(--bull)); }
.score-neutral, .signal-Neutral { background: rgb(var(--surface2)); color: rgb(var(--ink2)); }
.score-sell, .signal-Sell { background: rgb(var(--bear) / .08); color: rgb(var(--bear)); }
.score-strong-sell, .signal-Strong-Sell { background: rgb(var(--bear) / .15); color: rgb(var(--bear)); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sort-active { color: rgb(var(--brand)); }
.table-wrap { overflow-x: auto; }

/* ── Legacy Tailwind greys in dark mode ──
   Pages not yet moved to the token classes still use Tailwind's gray / white
   utilities; in dark mode these map them onto the same palette. */
.dark body.bg-gray-50 { background-color: rgb(var(--bg)); }
.dark .bg-white { background-color: rgb(var(--surface)); }
.dark .bg-white\/80 { background-color: rgb(var(--surface2) / .85); }
.dark .bg-gray-50 { background-color: rgb(var(--surface2)); }
.dark .bg-gray-50\/60 { background-color: rgb(var(--surface2) / .6); }
.dark .bg-gray-100,
.dark .bg-gray-100\/80 { background-color: rgb(var(--surface3)); }
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-50\/50:hover,
.dark .hover\:bg-gray-100:hover { background-color: rgb(var(--surface3)); }
.dark .border-gray-50 { border-color: rgb(var(--line2)); }
.dark .border-gray-100 { border-color: rgb(var(--line)); }
.dark .border-gray-200,
.dark .border-gray-200\/60 { border-color: rgb(var(--line)); }
.dark .text-gray-900 { color: rgb(var(--ink)); }
.dark .text-gray-800 { color: rgb(var(--ink)); }
.dark .text-gray-700 { color: rgb(var(--ink2)); }
.dark .text-gray-600 { color: rgb(var(--ink2)); }
.dark .text-gray-500 { color: rgb(var(--ink2)); }
.dark .text-gray-400 { color: rgb(var(--ink3)); }
.dark .text-gray-300 { color: rgb(var(--ink3) / .8); }
.dark .text-gray-200 { color: rgb(var(--ink3) / .6); }
.dark .focus\:ring-brand-100:focus { --tw-ring-color: rgb(var(--brand) / .35); }

/* Gain / loss tints */
.dark .text-green-700,
.dark .text-green-500 { color: rgb(var(--bull)); }
.dark .text-green-600\/70 { color: rgb(var(--bull) / .8); }
.dark .text-red-700,
.dark .text-red-500 { color: rgb(var(--bear)); }
.dark .text-red-600\/70 { color: rgb(var(--bear) / .8); }
.dark .bg-green-50,
.dark .bg-green-50\/60 { background-color: rgb(var(--bull) / .12); }
.dark .bg-green-100 { background-color: rgb(var(--bull) / .2); }
.dark .bg-red-50,
.dark .bg-red-50\/60 { background-color: rgb(var(--bear) / .12); }
.dark .bg-red-100 { background-color: rgb(var(--bear) / .2); }
.dark .border-green-100,
.dark .border-green-200\/60 { border-color: rgb(var(--bull) / .3); }
.dark .border-red-100,
.dark .border-red-200\/60 { border-color: rgb(var(--bear) / .3); }
.dark .bg-gradient-to-r.from-green-50 { background-image: none; background-color: rgb(var(--bull) / .12); }
.dark .bg-gradient-to-r.from-red-50 { background-image: none; background-color: rgb(var(--bear) / .12); }
.dark .bg-gradient-to-r.from-gray-50 { background-image: none; background-color: rgb(var(--surface2)); }

/* Other accents */
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }
.dark .text-amber-700 { color: #fbbf24; }
.dark .text-amber-600 { color: #f59e0b; }
.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18); }
.dark .text-sky-600 { color: #38bdf8; }

/* Template-specific styles */
.dark .card-ad,
.dark .card-turnover { background: rgb(var(--surface)); }
.dark .ring-bg { stroke: rgb(var(--line)); }
.dark .ticker-dot-flat { background: rgb(var(--ink3)); }
.dark tr.stock-row:nth-child(even) { background-color: rgb(var(--surface2) / .6); }
.dark tr.stock-row:hover,
.dark tr.broker-row:hover { background-color: rgb(var(--surface3)) !important; }
.dark tr.broker-row.open { background-color: rgb(var(--brand) / .15); }
.dark .bar-track { background: rgb(var(--surface3)); }
.dark .tab-btn.active { color: rgb(var(--brand)); border-color: rgb(var(--brand)); }
.dark .sector-chip.active { box-shadow: 0 0 0 2px rgb(var(--brand)); }
.dark th.sortable:hover,
.dark th.sort-active,
.dark th.sort-active .sort-icon { color: rgb(var(--brand)); }

.dark .chg-up { background: rgb(var(--bull) / .14); color: rgb(var(--bull)); }
.dark .chg-down { background: rgb(var(--bear) / .14); color: rgb(var(--bear)); }
.dark .chg-flat { background: rgb(var(--surface3)); color: rgb(var(--ink3)); }

.dark .heat-strong-up { background: rgb(var(--bull) / .22); }
.dark .heat-up { background: rgb(var(--bull) / .11); }
.dark .heat-down { background: rgb(var(--bear) / .11); }
.dark .heat-strong-down { background: rgb(var(--bear) / .22); }

@keyframes flashGreenDark { 0% { background-color: rgb(var(--bull) / .35); } 100% { background-color: transparent; } }
@keyframes flashRedDark { 0% { background-color: rgb(var(--bear) / .35); } 100% { background-color: transparent; } }
.dark .flash-up { animation-name: flashGreenDark; }
.dark .flash-down { animation-name: flashRedDark; }

/* ── Theme-specific images (logo) ── */
.theme-dark-only { display: none; }
.theme-light-only { display: contents; }
.dark .theme-dark-only { display: contents; }
.dark .theme-light-only { display: none; }

/* Toggle icon: moon in light theme (switch to dark), sun in dark theme. */
.theme-dark-only-icon { display: none; }
.dark .theme-light-only-icon { display: none; }
.dark .theme-dark-only-icon { display: block; }