/* ════════════════════════════════════════════════════════════
   SITE-WIDE THEME LAYER
   Loaded on every non-dashboard page (via partials/head.html, plus
   home/login). Gives the whole app working light/dark theming driven by
   html.theme-light, persisted by static/theme.js. The dashboard ships its
   own richer glass system in dashboard/dashboard.css.

   Strategy: (1) remap the Tailwind cyber-* palette tokens so every cyber
   utility flips, (2) override the handful of hardcoded dark hex utilities
   the pages actually use, (3) provide a shared frosted nav + toggle button.
   ════════════════════════════════════════════════════════════ */

:root {
  /* obs tokens (some shared partials reference these) — dark defaults */
  --obs-bg:#09090b; --obs-surface:#111116; --obs-card:#18181b;
  --obs-border:rgba(255,255,255,0.07); --obs-border-hi:rgba(255,255,255,0.18);
  --obs-text-1:#f4f4f5; --obs-text-2:#a1a1aa; --obs-text-3:#71717a; --obs-text-4:#52525b;
  --obs-brand:#c7f64b; --obs-green:#36d97e; --obs-red:#f87171; --obs-amber:#fbbf24;
  --obs-blue:#60a5fa; --obs-ai:#a78bfa; --obs-orange:#fb923c;
  --site-glass-bg: rgba(9,11,18,0.72);
  --site-glass-border: rgba(255,255,255,0.08);
}

html.theme-light {
  /* Tailwind cyber palette → light (drives bg/text/border-cyber-* utilities) */
  --color-cyber-bg:#eceff4; --color-cyber-surface:#ffffff; --color-cyber-card:#ffffff;
  --color-cyber-border:#d3d9e3; --color-cyber-dim:#94a3b8; --color-cyber-muted:#475569;
  --color-cyber-amber:#b45309; --color-cyber-cyan:#0e7490; --color-cyber-blue:#2563eb;
  --color-cyber-red:#dc2626; --color-cyber-green:#16a34a; --color-cyber-purple:#7c3aed;
  --color-cyber-orange:#ea580c; --color-cyber-magenta:#c026d3; --color-cyber-neon:#0e7490;

  /* obs tokens → light */
  --obs-bg:#eceff4; --obs-surface:#ffffff; --obs-card:#ffffff;
  --obs-border:rgba(15,23,42,0.10); --obs-border-hi:rgba(15,23,42,0.26);
  --obs-text-1:#0f172a; --obs-text-2:#334155; --obs-text-3:#64748b; --obs-text-4:#94a3b8;
  --obs-brand:#357600; --obs-green:#167a42; --obs-red:#dc2626; --obs-amber:#b45309;
  --obs-blue:#2563eb; --obs-ai:#7c3aed; --obs-orange:#ea580c;

  --site-glass-bg: rgba(255,255,255,0.74);
  --site-glass-border: rgba(15,23,42,0.10);
  color-scheme: light;
}

/* ── Base page ── */
html.theme-light body { background:#eceff4; color:#0f172a; }
html.theme-light body[style*="background"] { background:#eceff4 !important; }

/* ── Flip the recurring hardcoded dark hex utilities the pages use ── */
/* near-white text → dark ink */
html.theme-light .text-white,
html.theme-light .text-\[\#e2e8f0\],
html.theme-light .text-\[\#cbd5e1\],
html.theme-light .text-\[\#f8fafc\],
html.theme-light .text-\[\#f1f5f9\] { color:#0f172a !important; }
/* very-light slate kept for sub-labels but nudged darker for contrast on white */
html.theme-light .text-\[\#94a3b8\] { color:#64748b !important; }

/* dark page / panel backgrounds → light surfaces */
html.theme-light .bg-\[\#030712\],
html.theme-light .bg-\[\#030712\]\/80,
html.theme-light .bg-\[\#020617\],
html.theme-light .bg-\[\#0a0a0f\],
html.theme-light .bg-\[\#0a0f1e\],
html.theme-light .bg-\[\#08111f\],
html.theme-light .bg-\[\#0b1120\] { background-color:#f5f7fa !important; }
html.theme-light .bg-\[\#1e293b\],
html.theme-light .bg-\[\#0f172a\] { background-color:#e6eaf1 !important; }
html.theme-light .bg-\[\#1e293b\]\/40,
html.theme-light .bg-\[\#1e293b\]\/50,
html.theme-light .bg-\[\#1e293b\]\/60 { background-color:rgba(15,23,42,0.05) !important; }

/* dark borders → hairline */
html.theme-light .border-\[\#1e293b\],
html.theme-light .border-\[\#1e293b\]\/40,
html.theme-light .border-\[\#1e293b\]\/50,
html.theme-light .border-\[\#1e293b\]\/60,
html.theme-light .border-\[\#223044\],
html.theme-light .border-\[\#0f172a\] { border-color:rgba(15,23,42,0.12) !important; }

/* white-tint surfaces used on dark turn invisible on light → give a faint slate */
html.theme-light .bg-white\/5,
html.theme-light .bg-white\/\[0\.02\],
html.theme-light .bg-white\/\[\.02\] { background-color:rgba(15,23,42,0.04) !important; }

/* generic Tailwind slate/zinc darks occasionally used */
html.theme-light .bg-slate-900,
html.theme-light .bg-slate-950,
html.theme-light .bg-zinc-900,
html.theme-light .bg-gray-900,
html.theme-light .bg-black { background-color:#f5f7fa !important; }

/* ── Shared frosted nav (partials/nav.html uses bg-[#030712]/80) ── */
nav.sticky { -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); }
html.theme-light nav.sticky { background: var(--site-glass-bg) !important; border-color: rgba(15,23,42,0.10) !important; }
.app-shared-nav-inner { width:100%; max-width:72rem; height:3.5rem; }
.app-shared-nav-inner--legal { max-width:48rem; height:3rem; }
.app-shared-nav-inner--admin { max-width:80rem; }

.stackz-brand-mark {
  color:#101507;
  background:linear-gradient(145deg,#c7f64b,#36d97e);
  box-shadow:0 0 0 1px rgba(199,246,75,.18),0 8px 24px -12px rgba(199,246,75,.55);
}
.stackz-brand-accent { color:var(--obs-brand); }
.app-nav-link {
  display:inline-flex; align-items:center; min-height:30px; padding:5px 10px;
  border:1px solid transparent; border-radius:9px; text-decoration:none;
  color:var(--obs-text-3); font:700 9px/1 Manrope,sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.app-nav-link:hover { color:var(--obs-text-1); background:rgba(255,255,255,.05); }
.app-nav-link.is-active {
  color:var(--obs-brand); background:color-mix(in srgb,var(--obs-brand) 10%,transparent);
  border-color:color-mix(in srgb,var(--obs-brand) 24%,transparent);
}
html.theme-light .app-nav-link:hover { background:rgba(15,23,42,.05); }

/* ── Shared mobile navigation ── */
.mobile-tab-bar { display:none; }

/* ── Shared theme toggle button (nav + injected floating) ── */
.theme-toggle-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03);
  color:#94a3b8; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle-btn:hover { color:#fff; border-color:rgba(255,255,255,0.22); }
.theme-toggle-btn svg { width:16px; height:16px; }
html.theme-light .theme-toggle-btn { border-color:rgba(15,23,42,0.12); background:rgba(15,23,42,0.04); color:#475569; }
html.theme-light .theme-toggle-btn:hover { color:#0f172a; border-color:rgba(15,23,42,0.24); }
/* floating variant for pages without a nav slot */
.theme-toggle-btn.theme-toggle-floating {
  position:fixed; right:16px; bottom:16px; z-index:9998;
  width:40px; height:40px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); backdrop-filter:blur(12px);
}
html.theme-light .theme-toggle-btn.theme-toggle-floating { box-shadow:0 8px 24px rgba(15,23,42,0.16); background:rgba(255,255,255,0.85); }

    /* ── Generic page design tokens ──
       Several app pages (coach, community, …) ship their own dark-first token
       systems using these common names instead of the cyber and obs tokens. Override them
       for light so the page body, panels, and—critically—text flip correctly
       (otherwise near-white text lands on a light background). Accent tokens
       (--orange/--cyan/--green/…) are intentionally left alone. */
    html.theme-light {
      --page-bg:#eceff4; --bg:#eceff4; --bg2:#ffffff;
      --surface:#ffffff; --surface-panel:#ffffff; --surface-elevated:#f1f5f9; --surface-soft:#f5f7fa;
      --panel:#ffffff; --panel-2:#f5f7fa; --panel-3:#eef2f7; --card:#ffffff;
      --border:rgba(15,23,42,.12); --line:rgba(15,23,42,.12);
      --line-soft:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.18);
      --text:#0f172a; --text-primary:#0f172a; --text-secondary:#334155; --text-muted:#64748b; --text-inverse:#ffffff;
      --txt:#0f172a; --txt2:#334155; --txt3:#64748b; --muted:#64748b; --faint:#94a3b8;
    }

    @media (max-width:1023px) {
      .app-nav-links { display:none !important; }
      .mobile-tab-bar {
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100;
        height:calc(60px + env(safe-area-inset-bottom,0px));
        padding:4px 4px env(safe-area-inset-bottom,0px);
        align-items:stretch; justify-content:space-around;
        border-top:1px solid var(--obs-border);
        background:rgba(9,9,11,.94);
        -webkit-backdrop-filter:blur(18px) saturate(150%);
        backdrop-filter:blur(18px) saturate(150%);
      }
      .mobile-tab {
        display:flex; flex:1 1 0; min-width:0; flex-direction:column;
        align-items:center; justify-content:center; gap:2px; padding:5px 1px;
        color:var(--obs-text-3); text-decoration:none; border-radius:9px;
        transition:color .15s ease,background .15s ease;
      }
      .mobile-tab svg { width:19px; height:19px; flex-shrink:0; }
      .mobile-tab span {
        max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        font:650 8.5px/1.2 Manrope,sans-serif; letter-spacing:.01em;
      }
      .mobile-tab.active { color:var(--obs-brand); background:color-mix(in srgb,var(--obs-brand) 8%,transparent); }
      html.theme-light .mobile-tab-bar { background:rgba(255,255,255,.94); }
      .theme-toggle-btn.theme-toggle-floating {
        bottom:calc(72px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* ── App-page surface definition (light) ──
       coach/community/etc. build pills, fields, and cards with hardcoded dark
       rgba backgrounds that go invisible/flat on light. Give those classes a
       clean white surface + hairline border so light mode reads crisp. */
    html.theme-light .panel,
    html.theme-light .panel-2,
    html.theme-light .panel-3,
    html.theme-light .top-link,
    html.theme-light .connection-pill,
    html.theme-light .tool-btn,
    html.theme-light .field,
    html.theme-light .chip,
    html.theme-light .reaction-btn,
    html.theme-light .empty-state,
    html.theme-light .coach-starter-card,
    html.theme-light .prompt-btn,
    html.theme-light .mode-btn,
    html.theme-light .tb,
    html.theme-light .context-cell,
    html.theme-light .process-step,
    html.theme-light .compose textarea {
      background:#ffffff !important;
      border-color:rgba(15,23,42,0.12) !important;
    }
    html.theme-light .empty-state { background:#f8fafc !important; border-style:dashed !important; }
    html.theme-light .top-link:hover,
    html.theme-light .tool-btn:hover,
    html.theme-light .chip:hover,
    html.theme-light .reaction-btn:hover,
    html.theme-light .mode-btn:hover,
    html.theme-light .tb:hover,
    html.theme-light .coach-starter-card:hover,
    html.theme-light .prompt-btn:hover { background:#f1f5f9 !important; }

    /* ── Bespoke page surfaces (admin / x-ray / profile / trading) ──
       These pages set dark navy panel backgrounds, #1e293b borders, and
       near-white value text directly in their own <style> rules (not utility
       classes), so they need class-level overrides for light mode. */
    html.theme-light .stat-card,
    html.theme-light .user-row,
    html.theme-light .modal-card,
    html.theme-light .glow-card,
    html.theme-light .metric-card,
    html.theme-light .analysis-metric,
    html.theme-light .market-kv,
    html.theme-light .idea-card,
    html.theme-light .search-input,
    html.theme-light .dt-modal,
    html.theme-light .detail-card,
    html.theme-light .data-card,
    html.theme-light .insight-card {
      background:#ffffff !important;
      border-color:rgba(15,23,42,0.12) !important;
    }
    html.theme-light .user-row:hover { background:#f8fafc !important; }
    html.theme-light .analysis-metric-value,
    html.theme-light .market-kv-value,
    html.theme-light .wl-symbol,
    html.theme-light .detail-value { color:#0f172a !important; }
    html.theme-light .admin-tab:hover,
    html.theme-light .tab-btn:hover,
    html.theme-light .period-btn:hover,
    html.theme-light .sidebar-action:hover { color:#0f172a !important; }
    html.theme-light .modal-backdrop { background:rgba(15,23,42,0.4) !important; }