/* ============================================================
   STOXGEN — Light / Dark Mode Theme
   File: theme.css — Include in ALL HTML pages
   Usage: <link rel="stylesheet" href="theme.css">
          <script src="theme.js"></script>
   ============================================================ */

/* ── DARK MODE (Default) ─────────────────────────────────── */
:root {
  --gold:#F5C842;--gold-dim:#C9A030;
  --green:#00E676;--red:#FF4C4C;--blue:#4FC3F7;--purple:#CE93D8;--orange:#FF9800;
  --green-bg:rgba(0,230,118,0.08);--red-bg:rgba(255,76,76,0.08);
  --gold-bg:rgba(245,200,66,0.08);--blue-bg:rgba(79,195,247,0.08);
  --bg:#070B13;--bg2:#0C1220;--bg3:#111827;--bg4:#182032;--bg5:#1E2A40;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.1);
  --text:#E8EDF8;--muted:#7A8499;
  --shadow:rgba(0,0,0,0.4);
  --mode-icon:'🌙';
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:#F0F4F8;
  --bg2:#FFFFFF;
  --bg3:#F8FAFC;
  --bg4:#EEF2F7;
  --bg5:#E2E8F0;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.14);
  --text:#0F172A;
  --muted:#64748B;
  --shadow:rgba(0,0,0,0.08);
  --green-bg:rgba(0,160,80,0.08);
  --red-bg:rgba(220,38,38,0.07);
  --gold-bg:rgba(202,138,4,0.08);
  --blue-bg:rgba(14,116,144,0.07);
  --mode-icon:'☀️';

  /* Override green/red for readability on light */
  --green:#16803A;
  --red:#DC2626;
  --blue:#0E7490;
}

/* ── LIGHT MODE SPECIFIC OVERRIDES ──────────────────────────*/
[data-theme="light"] body { color: var(--text); }

[data-theme="light"] .topbar,
[data-theme="light"] .sidebar,
[data-theme="light"] nav {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 3px var(--shadow);
}

[data-theme="light"] .hero-bg,
[data-theme="light"] .left-bg { opacity: 0.4; }

[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}

[data-theme="light"] .ticker-wrap { background: var(--bg2) !important; }

[data-theme="light"] .stat-card,
[data-theme="light"] .market-card,
[data-theme="light"] .feat-card,
[data-theme="light"] .news-card,
[data-theme="light"] .plan-card,
[data-theme="light"] .ipo-card,
[data-theme="light"] .thread-card,
[data-theme="light"] .job-card,
[data-theme="light"] .expert-card,
[data-theme="light"] .poll-card {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px var(--shadow);
}

[data-theme="light"] .ai-insight-card {
  background: linear-gradient(135deg, rgba(202,138,4,0.08), rgba(202,138,4,0.03)) !important;
}

[data-theme="light"] table thead th { background: var(--bg4) !important; }

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select,
[data-theme="light"] .of-input,
[data-theme="light"] .of-select,
[data-theme="light"] .ci,
[data-theme="light"] .cs,
[data-theme="light"] .cg-input,
[data-theme="light"] .cg-select {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .tb-btn,
[data-theme="light"] .action-btn,
[data-theme="light"] .filter-btn,
[data-theme="light"] .fb,
[data-theme="light"] .jf {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

[data-theme="light"] .hero h1 { color: var(--text) !important; }
[data-theme="light"] .hero p { color: var(--muted) !important; }
[data-theme="light"] .section-title { color: var(--text) !important; }
[data-theme="light"] .section-sub { color: var(--muted) !important; }

[data-theme="light"] .sparkline.up { stroke: #16803A !important; }
[data-theme="light"] .sparkline.dn { stroke: #DC2626 !important; }

[data-theme="light"] .chat-messages { background: var(--bg3) !important; }
[data-theme="light"] .ai .msg-bubble { background: var(--bg2) !important; border-color: var(--border) !important; }

[data-theme="light"] footer { background: var(--bg2) !important; border-color: var(--border) !important; }
[data-theme="light"] .sebi-notice { background: rgba(0,0,0,0.03) !important; }

/* ── TRANSITION ──────────────────────────────────────────── */
body, .topbar, .sidebar, nav, .main,
.stat-card, .market-card, .feat-card, .plan-card,
.thread-card, .job-card, .expert-card,
.form-input, .form-select, .tb-btn {
  transition: background 0.3s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
#themeToggleBtn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
#themeToggleBtn:hover {
  border-color: var(--gold-dim);
  background: var(--bg4);
}
[data-theme="light"] #themeToggleBtn {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  color: #0F172A;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}