/* ════════════════════════════════════════════════════════════════════════════
   ZeroAlgo design system — "Kesar & Kāgaz"
   ════════════════════════════════════════════════════════════════════════════
   One shared sheet for every dashboard template. Identity: warm ivory text on
   deep indigo-ink, brass-saffron brand accent, conventional (but never
   colour-alone) profit/loss semantics, tabular-numeral mono for all data.

   Loaded AFTER each template's inline <style> so its overrides win ties;
   utility overrides that must beat runtime-injected Tailwind CDN styles use
   !important (the pre-existing pattern in index.html).

   Security note: served from /static ('self' in CSP — no new CSP entries
   needed). No external fonts; system faces only (offline/on-prem safe).
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "ZeroAI Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    local("Geist Variable"),
    local("Geist"),
    url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "ZeroAI Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    local("Geist Mono"),
    url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2");
}

:root {
  /* ── Ink (surfaces) ── */
  --ink-0: #0c0f16;            /* page ground — warm black            */
  --ink-1: #121622;            /* panel surface                       */
  --ink-2: #1a2030;            /* raised / hover surface              */
  --ink-3: #232b3f;            /* active surface                      */
  /* ── Kāgaz (text) ── */
  --paper: #ece7db;            /* primary text — warm ivory           */
  --muted: #98a0b3;
  --faint: #5c667d;
  /* ── Kesar (brand) ── */
  --brass: #d9a441;
  --brass-bright: #e8bb63;
  --brass-soft: rgba(217, 164, 65, 0.14);
  --brass-line: rgba(217, 164, 65, 0.45);
  /* ── Market semantics (never colour-alone: pair with ▲▼ or +/−) ── */
  --up: #3bd0a6;
  --up-soft: rgba(59, 208, 166, 0.12);
  --down: #f47d72;
  --down-soft: rgba(244, 125, 114, 0.12);
  --warn: #e5b567;
  --info: #8fa8e8;
  /* ── Hairlines (warm, from ivory not grey) ── */
  --line: rgba(236, 231, 219, 0.09);
  --line-strong: rgba(236, 231, 219, 0.18);
  /* ── Type roles ──
     Geist gives the dashboard a sharper modern product feel; Geist Mono keeps
     market numbers crisp and terminal-like. Both prefer local installs and use
     the existing jsDelivr font-src allow-list as a graceful web fallback. */
  --font-display: "ZeroAI Geist", Geist, "Aptos Display", Aptos, "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui: "ZeroAI Geist", Geist, Aptos, "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-data: "ZeroAI Geist Mono", "Geist Mono", "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", ui-monospace, monospace;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { scrollbar-color: #2b3347 transparent; }
body {
  background:
    radial-gradient(ellipse 60rem 28rem at 12% -8%, rgba(217, 164, 65, 0.07), transparent),
    radial-gradient(ellipse 50rem 30rem at 88% -4%, rgba(143, 168, 232, 0.05), transparent),
    linear-gradient(180deg, #10131d 0%, var(--ink-0) 40%, #090b11 100%) !important;
  color: var(--paper) !important;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;   /* tabular figures everywhere, always */
}

h1, h2, h3, .panel-title, .tab-btn, .brand-display {
  font-family: var(--font-display);
  letter-spacing: 0;
}

/* Data face: every table cell + explicitly tagged numbers. Slashed zero so
   O/0 can never be misread on an order ticket. */
td, .num, .kpi-value, .money {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums slashed-zero;
}
th,
code,
kbd,
pre,
.font-mono {
  font-family: var(--font-data) !important;
}

::selection { background: var(--brass-soft); color: var(--paper); }

/* ── Tailwind-utility re-skin (markup uses these everywhere; overriding the
      handful of utilities re-skins thousands of nodes without markup churn) ── */
.bg-gray-900 { background: linear-gradient(180deg, rgba(26, 32, 48, 0.92), rgba(16, 20, 32, 0.92)) !important; }
.bg-gray-800 { background: rgba(26, 32, 48, 0.75) !important; }
.bg-gray-700 { background: rgba(35, 43, 63, 0.85) !important; }
.border-gray-800, .border-gray-700, .border-gray-600 { border-color: var(--line) !important; }
.text-gray-200, .text-gray-300 { color: var(--paper) !important; }
.text-gray-400, .text-gray-500 { color: var(--muted) !important; }
.text-gray-600, .text-gray-700 { color: var(--faint) !important; }
.text-white { color: var(--paper) !important; }
/* Profit / loss / info recolour — keep the class names the JS already emits */
.text-green-400, .text-emerald-400, .text-emerald-300, .text-green-300 { color: var(--up) !important; }
/* …but page-title headings that used emerald as the BRAND colour go brass:
   green is reserved for profit, not identity. */
h1.text-emerald-400, h2.text-emerald-400, .font-semibold.text-emerald-400 { color: var(--brass-bright) !important; }
a.text-emerald-400, a[class*="text-emerald"] { color: var(--brass-bright) !important; }
.text-red-400, .text-red-300, .text-rose-400 { color: var(--down) !important; }
.text-yellow-300, .text-yellow-400, .text-amber-300 { color: var(--warn) !important; }
.text-blue-300, .text-blue-400, .text-sky-300 { color: var(--info) !important; }
.text-orange-300 { color: var(--brass-bright) !important; }
.bg-emerald-700, .bg-emerald-600, .bg-green-700 { background: rgba(59, 208, 166, 0.16) !important; border: 1px solid rgba(59, 208, 166, 0.4) !important; color: var(--up) !important; }
.bg-emerald-700:hover, .bg-emerald-600:hover, .hover\:bg-emerald-600:hover { background: rgba(59, 208, 166, 0.26) !important; }
.bg-red-700, .bg-red-600 { background: var(--down-soft) !important; border: 1px solid rgba(244, 125, 114, 0.4) !important; color: var(--down) !important; }

/* ── Panels / cards ────────────────────────────────────────────────────────── */
.panel, .bg-gray-900 {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
.kpi-card {
  background: linear-gradient(180deg, rgba(35, 43, 63, 0.55), rgba(16, 20, 32, 0.85));
  border: 1px solid var(--line);
  border-radius: 9px;
}
.kpi-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.kpi-value { font-weight: 700; color: var(--info); }
.kpi-card.good .kpi-value { color: var(--up); }
.kpi-card.bad  .kpi-value { color: var(--down); }
/* Colour-blind safety: direction glyph paired with the colour, always */
.kpi-card.good .kpi-value::after { content: " â–²"; font-size: 0.72em; vertical-align: 0.12em; }
.kpi-card.bad  .kpi-value::after { content: " â–¼"; font-size: 0.72em; vertical-align: 0.12em; }
.up::after   { content: " â–²"; font-size: 0.72em; }
.down::after { content: " â–¼"; font-size: 0.72em; }
.pill-good { background: var(--up-soft) !important;   color: var(--up) !important;   border: 1px solid rgba(59, 208, 166, 0.35); }
.pill-bad  { background: var(--down-soft) !important; color: var(--down) !important; border: 1px solid rgba(244, 125, 114, 0.35); }
.pill-mid  { background: rgba(143, 168, 232, 0.10) !important; color: var(--info) !important; border: 1px solid rgba(143, 168, 232, 0.30); }

/* ── Chrome: topbar + tab rail ─────────────────────────────────────────────── */
.topbar {
  background: rgba(12, 15, 22, 0.88) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
}
.tab-rail { background: rgba(12, 15, 22, 0.72) !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(16px); }
.tab-btn { color: var(--muted); font-weight: 700; }
.tab-btn:hover { color: var(--paper); }
.tab-btn.active {
  color: var(--brass-bright) !important;
  border-color: var(--line) !important;
  border-bottom-color: var(--brass-line) !important;
  background: linear-gradient(180deg, var(--brass-soft), rgba(18, 22, 34, 0.9)) !important;
}
.status-pill, #market-badge, #paper-badge {
  border: 1px solid var(--line) !important;
  background: rgba(18, 22, 34, 0.8) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
  background: rgba(12, 15, 22, 0.85) !important;
  border-color: var(--line-strong) !important;
  color: var(--paper) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brass-line) !important;
  box-shadow: 0 0 0 3px var(--brass-soft) !important;
}
input[type=range] { accent-color: var(--brass); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--brass-line) !important;
  outline-offset: 2px;
}
label { color: var(--muted); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
thead { background: rgba(18, 22, 34, 0.96) !important; }
th { color: var(--faint) !important; letter-spacing: 0.1em; }
td, th { border-color: var(--line) !important; }
tbody tr:hover { background: rgba(217, 164, 65, 0.04); }

/* ── Scrollbars / tooltip ──────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: #2b3347 !important; }
.tooltip .tip { background: var(--ink-2) !important; border-color: var(--line-strong) !important; color: var(--paper) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   SIGNATURE — The Bazaar Line.
   4px ribbon fixed to the very top of every page mapping the NSE session
   (09:15 → 15:30 IST). Pre-open: faint amber. Open: brass→teal fill grows as
   the session elapses, with a breathing "now" marker. Closed: cooled ash.
   State + --session-pct are set by the small inline script in each template.
   ════════════════════════════════════════════════════════════════════════════ */
#bazaar-line {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 999;
  background: rgba(236, 231, 219, 0.05);
  pointer-events: none;
}
#bazaar-line .bzr-fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--session-pct, 0) * 1%);
  background: linear-gradient(90deg, var(--brass) 0%, #cdbb5a 55%, var(--up) 100%);
  transition: width 1s linear;
}
#bazaar-line .bzr-now {
  position: absolute; top: 50%; left: calc(var(--session-pct, 0) * 1%);
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
  background: var(--brass-bright);
  box-shadow: 0 0 8px 2px rgba(217, 164, 65, 0.55);
}
#bazaar-line.bzr-preopen .bzr-fill { width: 100%; background: rgba(229, 181, 103, 0.16); }
#bazaar-line.bzr-preopen .bzr-now  { display: none; }
#bazaar-line.bzr-closed  .bzr-fill { width: 100%; background: rgba(236, 231, 219, 0.10); transition: none; }
#bazaar-line.bzr-closed  .bzr-now  { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #bazaar-line .bzr-now { animation: bzr-breathe 2.6s ease-in-out infinite; }
}
@keyframes bzr-breathe {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(217, 164, 65, 0.40); }
  50%      { box-shadow: 0 0 11px 3px rgba(217, 164, 65, 0.70); }
}

/* ── Privacy blur ("." key): screen-share safety — blurs all data cells,
      KPI values and anything tagged .money. UI chrome stays readable. ─────── */
body.privacy td,
body.privacy .kpi-value,
body.privacy .money { filter: blur(7px); }
#privacy-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink-2); border: 1px solid var(--brass-line); color: var(--paper);
  padding: 7px 14px; border-radius: 999px; font-size: 11px; z-index: 1000;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
#privacy-toast.show { opacity: 1; }

/* ── Motion budget: one orchestrated load — panels rise in, 40ms stagger.
      Live-tick flashes get helper classes. All gated on reduced-motion. ───── */
@media (prefers-reduced-motion: no-preference) {
  /* Opacity-only fade — intentionally NO transform. A transform (even the
     identity matrix left behind by animation-fill-mode) turns the element into
     a stacking context + containing block, which traps absolutely-positioned
     dropdowns like the F&O symbol autocomplete behind sibling content. Fading
     opacity keeps the orchestrated stagger with zero layout side-effects. */
  .tab-content.active > * { animation: zfade 0.35s ease both; }
  .tab-content.active > *:nth-child(2) { animation-delay: 0.04s; }
  .tab-content.active > *:nth-child(3) { animation-delay: 0.08s; }
  .tab-content.active > *:nth-child(4) { animation-delay: 0.12s; }
  .tab-content.active > *:nth-child(5) { animation-delay: 0.16s; }
  .flash-up   { animation: zflash-up 0.6s ease-out; }
  .flash-down { animation: zflash-down 0.6s ease-out; }
}
@keyframes zfade { from { opacity: 0; } }
@keyframes zflash-up   { 0% { background: var(--up-soft); }   100% { background: transparent; } }
@keyframes zflash-down { 0% { background: var(--down-soft); } 100% { background: transparent; } }

/* ── F&O symbol autocomplete must float above the chain content below it.
      The config bar (first child of #tab-fo) holds the search input + its
      absolute dropdown; lift the whole bar into its own stacking context above
      the panels/selects beneath, so the dropdown is never hidden behind a
      native <select> in the content. ─────────────────────────────────────── */
#tab-fo > div:first-child { position: relative; z-index: 30; }
#fo-autocomplete { z-index: 60; }

/* ── Touch + small screens: 44px minimum targets; cockpit collapses to a
      prioritized single column (P&L band → positions → controls). ─────────── */
@media (max-width: 768px) {
  .tab-btn, button { min-height: 44px; }
  .topbar { flex-wrap: wrap; row-gap: 6px; }
}