/* ==========================================================================
   MoneyLens Universal Theme Synchronization System (Light & Dark)
   Applies consistent styling across all 40+ pages in public_html
   ========================================================================== */

/* ── Smooth Theme Transitions ── */
body, .main-content, .topnav, .ml-footer, .fe-hero, .ml-hero, .hero, .ot-hero,
.calc-card, .lcard, .card-back, .hh-card, .ht-card, .raw-box, .gl-card {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ==========================================================================
   1. GLOBAL & SCOPED VARIABLES (Light Theme)
   Covers: About, Contact, Knowledge, Research, Goals, Terms, Privacy, 404
   ========================================================================== */
[data-theme="light"] {
  --bg: #f8f7f4;
  --bg2: #ffffff;
  --surface: #ffffff;
  --surface-h: #f3f1ec;
  --surface-a: #eae7e0;
  --border: #e2dfd7;
  --border-l: #cdc9bf;
  --text: #1e293b;
  --text2: #475569;
  --muted: #64748b;
  --accent: #ea580c;
  --accent-d: rgba(234, 88, 12, 0.08);
  --accent-h: #c2410c;
  --sky: #2563eb;
  --sky-d: rgba(37, 99, 235, 0.08);

  /* open-account scoped variables */
  --bg-0: #f8f7f4;
  --bg-1: #ffffff;
  --bg-2: #f1ede6;
  --bg-3: #eae5dc;
  --line: #e2dfd7;
  --line-2: #cdc9bf;
  --ink: #141210;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --silver: #475569;
  --silver-2: #94a3b8;
}

/* Scoped 12-variable containers */
[data-theme="light"] :is(.gl-hero, .gl-sec, .gl-cta, .ab-hero, .ab-stats, .ab-story, .ab-values, .ab-timeline-sec, .ab-cta, .ct-hero, .ct-methods, .ct-form-sec, .ct-faq, .lr-hero, .lr-grid-sec, .lr-cta, .ts-hero, .ts-content, .ts-cta, .nf-sec) {
  --b: #f8f7f4;
  --ch: #ffffff;
  --gr: #f1ede6;
  --bd: #e2dfd7;
  --bdl: #cdc9bf;
  --mt: #64748b;
  --sv: #475569;
  --lt: #334155;
  --w: #0f172a;
  --gb: rgba(255, 255, 255, 0.9);
  --gbd: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .gl-hero-grad {
  background: linear-gradient(180deg, rgba(248, 247, 244, 0.85) 0%, rgba(248, 247, 244, 0.6) 40%, rgba(248, 247, 244, 0.95) 80%, var(--b) 100%) !important;
}
[data-theme="light"] .gl-gridbg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
}
[data-theme="light"] .gl-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .gl-card:hover {
  box-shadow: 0 12px 32px rgba(234, 88, 12, 0.1) !important;
}

/* ==========================================================================
   2. FUND EXPLORER (funds.php) — Dark Theme Overrides
   ========================================================================== */
[data-theme="dark"] .fe-hero {
  background: linear-gradient(170deg, #0a0a0c 0%, #121318 40%, #16171e 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .fe-hero h1 {
  color: #f5f0eb !important;
}
[data-theme="dark"] .hero-desc {
  color: #a8a29e !important;
}
[data-theme="dark"] .hero-search-center .search-input-wrap input {
  background: #151518 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f5f0eb !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .hero-search-center .search-input-wrap input::placeholder {
  color: #71717a !important;
}
[data-theme="dark"] .hh-card,
[data-theme="dark"] .ht-card,
[data-theme="dark"] .hero-suggestions .hs-chip {
  background: #151518 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f5f0eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .hh-card:hover,
[data-theme="dark"] .ht-card:hover,
[data-theme="dark"] .hero-suggestions .hs-chip:hover {
  border-color: #ea580c !important;
  background: #1c1c21 !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.15) !important;
}
[data-theme="dark"] .hh-card .hh-logo,
[data-theme="dark"] .ht-card .ht-logo {
  background: #1c1c21 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .hh-card .hh-name,
[data-theme="dark"] .ht-card .ht-name {
  color: #f5f0eb !important;
}
[data-theme="dark"] .hero-houses .hh-title,
[data-theme="dark"] .hero-topfunds .ht-title,
[data-theme="dark"] .hero-suggestions .hs-label {
  color: #71717a !important;
}
[data-theme="dark"] .fe-fb {
  background: #151518 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .fe-fr select,
[data-theme="dark"] .fe-fr .fe-search-wrap input {
  background: #0f0f12 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f0eb !important;
}
[data-theme="dark"] .fe-tw {
  background: #151518 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .fe-t th {
  color: #a1a1aa !important;
}
[data-theme="dark"] .fe-t td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .fe-t tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .fe-t .fn {
  color: #f8fafc !important;
}
[data-theme="dark"] .fe-t .fn a {
  color: #f8fafc !important;
}
[data-theme="dark"] .fe-t .nv {
  color: #f8fafc !important;
}
[data-theme="dark"] .fe-pag a,
[data-theme="dark"] .fe-pag span.pg {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

/* ==========================================================================
   3. CALCULATORS (calculators.php) — Light Theme Overrides
   ========================================================================== */
[data-theme="light"] .ml-hero {
  background: linear-gradient(170deg, #faf9f7 0%, #f3f0eb 40%, #fdf8f3 100%) !important;
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .ml-fc {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .ml-fc-val {
  color: #0f172a !important;
}
[data-theme="light"] .ml-fc-lbl {
  color: #64748b !important;
}
[data-theme="light"] .ml-h-title {
  color: #0f172a !important;
}
[data-theme="light"] .ml-h-sub {
  color: #475569 !important;
}
[data-theme="light"] .calc-tabs {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .calc-tab {
  color: #64748b !important;
}
[data-theme="light"] .calc-tab:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
[data-theme="light"] .calc-tab.active {
  background: rgba(234, 88, 12, 0.1) !important;
  color: #ea580c !important;
}
[data-theme="light"] .calc-form,
[data-theme="light"] .calc-card,
[data-theme="light"] .calc-chart-wrap,
[data-theme="light"] .calc-ct-section {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .calc-field label {
  color: #475569 !important;
}
[data-theme="light"] .calc-field input,
[data-theme="light"] .calc-field select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .fr {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .fr-search-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .fr-dd {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .fr-dd-opt {
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .fdo-name,
[data-theme="light"] .fr-name,
[data-theme="light"] .calc-card-fund {
  color: #0f172a !important;
}
[data-theme="light"] .fr-amt-inp {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .cci-val {
  color: #0f172a !important;
}
[data-theme="light"] .calc-ct-head {
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .calc-ct-head h4 {
  color: #0f172a !important;
}
[data-theme="light"] .calc-ct th {
  color: #64748b !important;
}
[data-theme="light"] .calc-ct td {
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .calc-ct tr.tot-row td {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-top: 2px solid rgba(234, 88, 12, 0.2) !important;
}

/* ==========================================================================
   4. COMPARE (compare.php) — Light Theme Overrides
   ========================================================================== */
[data-theme="light"] body.page-compare,
[data-theme="light"] .page-compare {
  background: #f8f7f4 !important;
}
[data-theme="light"] .hero {
  background: linear-gradient(170deg, #faf9f7 0%, #f3f0eb 40%, #fdf8f3 100%) !important;
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .hero-title {
  color: #0f172a !important;
}
[data-theme="light"] .hero-sub {
  color: #475569 !important;
}
[data-theme="light"] .hero-stats {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .hs-val {
  color: #0f172a !important;
}
[data-theme="light"] .lcard {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .lname {
  color: #0f172a !important;
}
[data-theme="light"] .lintro {
  color: #475569 !important;
}
[data-theme="light"] .cwrap {
  border-color: #e2dfd7 !important;
}
[data-theme="light"] .card-back {
  background-color: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .cb-name,
[data-theme="light"] .dhname,
[data-theme="light"] .kval,
[data-theme="light"] .fname {
  color: #0f172a !important;
}
[data-theme="light"] .dh {
  background: #f8fafc !important;
  border: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .k,
[data-theme="light"] .dc {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .dch h3 {
  color: #0f172a !important;
}
[data-theme="light"] .ftable td {
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ==========================================================================
   5. SIMULATOR & CASHFLOW — Light Theme Overrides
   ========================================================================== */
[data-theme="light"] body.page-simulator,
[data-theme="light"] .page-simulator,
[data-theme="light"] body.page-cashflow,
[data-theme="light"] .page-cashflow {
  background: #f8f7f4 !important;
  color: #1e293b !important;
}
[data-theme="light"] .ot-hero {
  background: linear-gradient(170deg, #faf9f7 0%, #f3f0eb 40%, #fdf8f3 100%) !important;
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .ot-title {
  color: #0f172a !important;
}
[data-theme="light"] .ot-sub {
  color: #475569 !important;
}
[data-theme="light"] .ot-fbar,
[data-theme="light"] .ot-tcard,
[data-theme="light"] .ot-mc {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .ot-fsel,
[data-theme="light"] .ot-dir,
[data-theme="light"] .ot-pb {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
[data-theme="light"] .ot-fn,
[data-theme="light"] .ot-mc-nm {
  color: #0f172a !important;
}
[data-theme="light"] .ot-mt td {
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .ot-mt thead tr {
  border-bottom: 1px solid #e2dfd7 !important;
}

/* ==========================================================================
   6. AUTHENTICATION PAGES (login.php & register.php)
   ========================================================================== */
[data-theme="light"] body.page-login,
[data-theme="light"] .page-login .main-wrap,
[data-theme="light"] body.page-register,
[data-theme="light"] .page-register .main-wrap {
  background: #f8f7f4 !important;
  color: #1e293b !important;
}
[data-theme="light"] .raw-box {
  background: #ffffff !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .raw-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .raw-input:focus {
  border-color: #ea580c !important;
  background: #ffffff !important;
}
[data-theme="light"] .raw-title,
[data-theme="light"] .raw-stat-v {
  color: #0f172a !important;
}
[data-theme="light"] .raw-sub,
[data-theme="light"] .raw-label,
[data-theme="light"] .raw-stat-l {
  color: #64748b !important;
}
[data-theme="light"] .raw-stat {
  border-color: #e2dfd7 !important;
}

/* ==========================================================================
   7. NAVBAR, MOBILE DRAWER & FOOTER CONSISTENCY
   ========================================================================== */
[data-theme="light"] .topnav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .topnav-links a {
  color: #475569 !important;
}
[data-theme="light"] .topnav-links a:hover,
[data-theme="light"] .topnav-links a.active {
  color: #ea580c !important;
  background: rgba(234, 88, 12, 0.08) !important;
}
[data-theme="light"] .topnav-logo-text {
  color: #0f172a !important;
}
[data-theme="light"] .theme-toggle-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(234, 88, 12, 0.1) !important;
  color: #ea580c !important;
  border-color: #ea580c !important;
}
[data-theme="light"] .btn-ghost {
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .btn-ghost:hover {
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
}
[data-theme="light"] .topnav-links-m {
  background: #ffffff !important;
  border-bottom: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .topnav-links-m a {
  color: #334155 !important;
}
[data-theme="light"] .topnav-links-m a:hover,
[data-theme="light"] .topnav-links-m a.active {
  color: #ea580c !important;
  background: rgba(234, 88, 12, 0.08) !important;
}
[data-theme="light"] .ml-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2dfd7 !important;
}
[data-theme="light"] .ml-footer .ml-f-logo-txt,
[data-theme="light"] .ml-footer .ml-f-h {
  color: #0f172a !important;
}
[data-theme="light"] .ml-footer .ml-f-desc,
[data-theme="light"] .ml-footer .ml-f-links a,
[data-theme="light"] .ml-footer .ml-f-bot {
  color: #64748b !important;
}
[data-theme="light"] .ml-footer .ml-f-links a:hover {
  color: #ea580c !important;
}