/* css/theme-light.css
   Light-mode overrides for Markets in Vitro.
   Loaded AFTER style.css and chart.css.
   All rules scoped to [data-bs-theme="light"] so dark mode is untouched.
*/

/* ============================================================
   1. BODY & BOOTSTRAP UTILITY OVERRIDES
   ============================================================ */

/*
 * Bootstrap's .bg-dark uses: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity,1)) !important
 * Simply overriding background-color doesn't work because Bootstrap's own
 * !important rule with the same specificity wins (loaded later via head-base).
 * Solution: redefine --bs-dark-rgb in light mode so ALL bg-dark usages become light.
 */
html[data-bs-theme="light"] {
    /*
     * DO NOT override --bs-dark-rgb: it breaks .text-dark (used in alert boxes).
     * Instead, override .bg-dark directly with higher specificity.
     */
    --bs-body-color: #212529;
    /* Override custom theme's black success color for light mode */
    --bs-success: #f0f2f5;
    --bs-success-rgb: 240, 242, 245;
    /* text-info is light lavender (#f4e4fc) — invisible on white. Use a readable purple. */
    --bs-info: #6f42c1;
    --bs-info-rgb: 111, 66, 193;
}

/*
 * .text-white override: Bootstrap uses rgba(var(--bs-white-rgb),...) !important.
 * We can NOT redefine --bs-white-rgb because that breaks .bg-white (navbar).
 * Instead, use a double-class trick for higher specificity than Bootstrap's single .text-white.
 */
html[data-bs-theme="light"] .text-white:not(.navbar *):not(.btn):not(.badge):not([class*="bg-"]):not(.card-header *) {
    --bs-text-opacity: 1;
    color: #212529 !important;
}
/* Ensure card-header text stays white when header has SOLID colored background */
/* Only for headers with opaque sector/theme colors (not rgba transparent) */
html[data-bs-theme="light"] .card-header[style*="background: var(--color_rotation"] .text-white,
html[data-bs-theme="light"] .card-header[style*="background: var(--color_rotation"] h4,
html[data-bs-theme="light"] .card-header[style*="background: var(--color_rotation"] h5 {
    color: #fff !important;
}

/* Badges MUST keep white text on dark colored backgrounds */
html[data-bs-theme="light"] .badge {
    color: #fff !important;
}
/* Badges with light/bright bg need dark text for contrast */
html[data-bs-theme="light"] .badge.bg-warning,
html[data-bs-theme="light"] .badge.bg-light,
html[data-bs-theme="light"] .badge.text-dark,
html[data-bs-theme="light"] .badge[style*="background:#16ff6a"],
html[data-bs-theme="light"] .badge[style*="background: #16ff6a"],
html[data-bs-theme="light"] .badge[style*="background-color:#16ff6a"],
html[data-bs-theme="light"] .badge[style*="background-color: #16ff6a"],
html[data-bs-theme="light"] .badge[style*="background:#97ffc4"],
html[data-bs-theme="light"] .badge[style*="background: #97ffc4"],
html[data-bs-theme="light"] .badge[style*="background-color:#97ffc4"],
html[data-bs-theme="light"] .badge[style*="background-color: #97ffc4"],
html[data-bs-theme="light"] .badge[style*="background:#ffd166"],
html[data-bs-theme="light"] .badge[style*="background: #ffd166"],
html[data-bs-theme="light"] .badge[style*="background-color:#ffd166"],
html[data-bs-theme="light"] .badge[style*="background-color: #ffd166"],
html[data-bs-theme="light"] .badge[style*="background:#ffc107"],
html[data-bs-theme="light"] .badge[style*="background-color:#ffc107"],
html[data-bs-theme="light"] .badge[style*="background:#66ffb2"],
html[data-bs-theme="light"] .badge[style*="background-color:#66ffb2"],
html[data-bs-theme="light"] .badge[style*="background:var(--color_accumulation)"],
html[data-bs-theme="light"] .badge[style*="background:var(--color_impulse_bullish)"],
html[data-bs-theme="light"] .badge[style*="background:var(--color_lei_expansion)"],
html[data-bs-theme="light"] .badge[style*="background:var(--color_lei_recovery)"] {
    color: #000 !important;
}

/* Alert boxes — always dark text regardless of parent */
html[data-bs-theme="light"] .alert,
html[data-bs-theme="light"] .alert-warning,
html[data-bs-theme="light"] .alert-info,
html[data-bs-theme="light"] .alert-danger,
html[data-bs-theme="light"] .alert-success,
html[data-bs-theme="light"] .alert p,
html[data-bs-theme="light"] .alert span,
html[data-bs-theme="light"] .alert strong,
html[data-bs-theme="light"] .alert li {
    color: #212529 !important;
}

/* Active buttons — dark text on colored bg (except btn-primary: white text, see below) */
html[data-bs-theme="light"] .btn-success,
html[data-bs-theme="light"] .btn-danger,
html[data-bs-theme="light"] .btn-warning {
    color: #000 !important;
}

/* Toggle buttons with colored bg — black text */
html[data-bs-theme="light"] .btn-group .btn.active,
html[data-bs-theme="light"] .btn-check:checked + .btn {
    color: #000 !important;
}

/* Fallback: direct override with highest specificity */
html[data-bs-theme="light"] .bg-dark {
    background-color: #eef3f8 !important;
    color: #212529;
}

/* bg-success sections (market commentary, page headers) → light gray */
html[data-bs-theme="light"] .bg-success {
    background-color: #eef3f8 !important;
}

/* bg-secondary (FAQ accordion, liquidity model legend) → light */
html[data-bs-theme="light"] .bg-secondary {
    background-color: #eef3f8 !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .bg-secondary .accordion-button,
html[data-bs-theme="light"] .bg-secondary .accordion-body,
html[data-bs-theme="light"] .bg-secondary p,
html[data-bs-theme="light"] .bg-secondary span,
html[data-bs-theme="light"] .bg-secondary li {
    color: #212529 !important;
}

/* Accordion buttons and bodies in light mode */
html[data-bs-theme="light"] .accordion-button {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .accordion-item {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

/* text-white → dark text everywhere in light mode */
html[data-bs-theme="light"] .text-white,
html[data-bs-theme="light"] .bg-dark .text-white,
html[data-bs-theme="light"] .bg-success .text-white,
html[data-bs-theme="light"] .card .text-white {
    color: #212529 !important;
}
html[data-bs-theme="light"] .text-white-50,
html[data-bs-theme="light"] .bg-dark .text-white-50 {
    color: rgba(33, 37, 41, 0.5) !important;
}

/* text-light → dark text */
html[data-bs-theme="light"] .text-light {
    color: #495057 !important;
}

/* border-light adjustments */
html[data-bs-theme="light"] .border-light {
    border-color: #dee2e6 !important;
}

/* border-secondary in light mode */
html[data-bs-theme="light"] .border-secondary {
    border-color: #dee2e6 !important;
}

/* Card text inside bg-dark cards */
html[data-bs-theme="light"] .bg-dark .card-title,
html[data-bs-theme="light"] .bg-dark .card-text,
html[data-bs-theme="light"] .bg-dark p,
html[data-bs-theme="light"] .bg-dark span,
html[data-bs-theme="light"] .bg-dark small,
html[data-bs-theme="light"] .bg-dark h1,
html[data-bs-theme="light"] .bg-dark h2,
html[data-bs-theme="light"] .bg-dark h3,
html[data-bs-theme="light"] .bg-dark h4,
html[data-bs-theme="light"] .bg-dark h5,
html[data-bs-theme="light"] .bg-dark h6,
html[data-bs-theme="light"] .bg-dark label,
html[data-bs-theme="light"] .bg-dark td,
html[data-bs-theme="light"] .bg-dark th {
    color: #212529;
}

/* Form controls in dark containers → light bg in light mode */
html[data-bs-theme="light"] .bg-dark .form-control,
html[data-bs-theme="light"] .bg-dark .form-select {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* ============================================================
   2. NAVBAR — stays white in both modes
   ============================================================ */

/* Navbar stays white with dark text in both themes — no inversion needed. */

/* Ensure burger button always visible on mobile */
@media (max-width: 991px) {
    .navbar-toggler {
        display: flex !important;
        flex-shrink: 0;
        padding: 4px 8px !important;
        z-index: 10;
    }
    .navbar-toggler-icon {
        width: 1.2em !important;
        height: 1.2em !important;
    }
    .navbar .navbar-brand span {
        font-size: 0.85rem;
    }
}
/* Dark mode burger: handled in style.css (the stylesheet EVERY page loads),
   by setting Bootstrap's own --bs-navbar-toggler-icon-bg on the icon. The
   filter: invert(1) that used to live here is gone on purpose: with both in
   place the two cancel and the icon turns white on white again. The navbar is
   white in both themes, so its border stays dark too. */

/* Theme toggle button — show correct icon/label via CSS (no JS delay) */
/* Light mode: show moon icon + "Dark Mode" label */
html[data-bs-theme="light"] .theme-icon-light { display: none !important; }
html[data-bs-theme="light"] .theme-label-light { display: none !important; }
/* Dark mode: show sun icon + "Light Mode" label */
html[data-bs-theme="dark"] .theme-icon-dark { display: none !important; }
html[data-bs-theme="dark"] .theme-label-dark { display: none !important; }

/* ============================================================
   3. CHART CANVAS & LEGEND
   ============================================================ */

/*
 * Chart canvas has hardcoded dark gradient in chart.css:
 *   background: linear-gradient(to bottom, #00081A 0%, #00081A 40%, #0333aee1 100%)
 * Must override with !important and exact selector.
 */
html[data-bs-theme="light"] .spn-chart-canvas {
    background: linear-gradient(to bottom, #ffffff 0%, #f0f4f8 100%) !important;
}
/* Legend sidebar has background-color: #000 in chart.css */
html[data-bs-theme="light"] .spn-chart-legend {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-left: 1px solid #dee2e6;
}
/* Legend structural text (titles, pane labels) — black */
html[data-bs-theme="light"] .spn-chart-legend strong,
html[data-bs-theme="light"] .spn-chart-legend p {
    color: #212529 !important;
}
/*
 * Legend row labels: do NOT force black on ALL spans/divs —
 * the colored text labels must keep their series color.
 * Only override text that doesn't have an inline style color.
 */
html[data-bs-theme="light"] .spn-chart-legend div:not([style*="color"]) {
    color: #212529 !important;
}
html[data-bs-theme="light"] .spn-chart-legend span:not([style*="color"]) {
    color: #212529 !important;
}
/* Chart dropdown menus */
html[data-bs-theme="light"] .spn-chart .dropdown-menu {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .spn-chart .dropdown-menu .dropdown-item,
html[data-bs-theme="light"] .spn-chart .dropdown-menu .form-check-label {
    color: #212529 !important;
}
html[data-bs-theme="light"] .spn-chart .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0,0,0,0.05) !important;
}
/* Chart error text */
html[data-bs-theme="light"] .spn-chart-error {
    color: #dc3545;
}
/* Chart wrapper — ensure no dark leak from parent */
html[data-bs-theme="light"] .spn-chart-wrapper {
    background-color: transparent;
}

/* ============================================================
   4. BUTTONS — all outline variants visible in light mode
   ============================================================ */

/* btn-outline-primary: teal text/border (matches style.css dark override) */
html[data-bs-theme="light"] .btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent;
}
html[data-bs-theme="light"] .btn-outline-primary:not(.active) {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
html[data-bs-theme="light"] .btn-outline-primary.active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
html[data-bs-theme="light"] .btn-outline-primary:hover {
    background-color: rgba(26, 153, 166, 0.1) !important;
    color: var(--bs-primary) !important;
}

/* btn-outline-light: invisible on white → use teal (same as primary) */
html[data-bs-theme="light"] .btn-outline-light {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}
html[data-bs-theme="light"] .btn-outline-light:hover {
    background-color: rgba(26, 153, 166, 0.1) !important;
    color: var(--bs-primary) !important;
}
html[data-bs-theme="light"] .btn-outline-light.active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* btn-outline-secondary: use dark border/text */
html[data-bs-theme="light"] .btn-outline-secondary {
    color: #495057 !important;
    border-color: #adb5bd !important;
}
html[data-bs-theme="light"] .btn-outline-secondary:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* btn-outline-warning: keep orange but ensure visibility */
html[data-bs-theme="light"] .btn-outline-warning {
    color: #e67e00 !important;
    border-color: #e67e00 !important;
}

/* btn-dark on light bg: invert to outlined style */
html[data-bs-theme="light"] .btn-dark {
    background-color: #212529 !important;
    color: #fff !important;
}

/* btn-primary — always white text (override Bootstrap's --bs-btn-color) */
html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="light"] .btn-primary.dropdown-toggle,
html[data-bs-theme="light"] .dropdown-toggle.btn-primary,
html[data-bs-theme="light"] .spn-chart-toolbar .btn-primary,
html[data-bs-theme="light"] .spn-chart-toolbar .dropdown-toggle,
html[data-bs-theme="light"] .spn-ticker-dropdown .btn,
html[data-bs-theme="light"] .spn-data-dropdown .btn,
html[data-bs-theme="light"] .spn-show-dropdown .btn,
html[data-bs-theme="light"] .spn-indicator-group-dropdown .btn,
html[data-bs-theme="light"] .spn-timeframe-dropdown .btn,
html[data-bs-theme="light"] .spn-timeframe-buttons .btn.active,
html[data-bs-theme="light"] .spn-timeframe-buttons .btn.btn-primary,
html[data-bs-theme="light"] select.form-select.bg-dark {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    color: #fff !important;
}
html[data-bs-theme="light"] .spn-indicator-group-dropdown .btn *,
html[data-bs-theme="light"] .spn-indicator-group-label {
    color: #fff !important;
}
/* btn-outline-primary in chart toolbars — turquoise text (not white) */
html[data-bs-theme="light"] .spn-chart-toolbar .btn-outline-primary,
html[data-bs-theme="light"] .spn-btn-legend-desktop,
html[data-bs-theme="light"] .spn-btn-legend-mobile {
    color: var(--bs-primary) !important;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
/* Analysis Chart modal — turquoise toolbar buttons: white text in light mode */
html[data-bs-theme="light"] #analysisChartModal .btn {
    color: #fff !important;
}
html[data-bs-theme="light"] #analysisChartModal .btn svg {
    fill: #fff !important;
}
/* Close button — black icon on light header background */
html[data-bs-theme="light"] #analysisChartModal .ac-close-btn {
    background-color: transparent !important;
    border-color: #212529 !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] #analysisChartModal .ac-close-btn svg {
    fill: #212529 !important;
}
/* Analysis Chart modal — Overlays dropdown: teal bg + white text in light mode */
html[data-bs-theme="light"] #analysisOverlayMenu {
    background-color: var(--bs-primary, #1a99a6) !important;
    border-color: var(--bs-primary, #1a99a6) !important;
}
html[data-bs-theme="light"] #analysisOverlayMenu .dropdown-item {
    color: #fff !important;
}
html[data-bs-theme="light"] #analysisOverlayMenu .dropdown-item:hover,
html[data-bs-theme="light"] #analysisOverlayMenu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.15) !important;
}
html[data-bs-theme="light"] #analysisOverlayMenu .dropdown-divider {
    border-color: rgba(255,255,255,0.3) !important;
}
html[data-bs-theme="light"] #analysisOverlayMenu .form-select,
html[data-bs-theme="light"] #analysisOverlayMenu select.form-select.bg-dark {
    background-color: rgba(0,0,0,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
}
html[data-bs-theme="light"] #analysisOverlayMenu select.form-select option {
    background-color: var(--bs-primary, #1a99a6);
    color: #fff;
}
html[data-bs-theme="light"] #analysisOverlayMenu .text-muted {
    color: rgba(255,255,255,0.8) !important;
}
/* Analysis Chart modal — legend light mode */
html[data-bs-theme="light"] #analysisChartLegend {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
}
html[data-bs-theme="light"] #analysisChartLegend > div {
    color: #333 !important;
}

/* Analysis Chart modal — bottom nav bar light mode */
html[data-bs-theme="light"] #analysisChartModal .ac-bottom-nav {
    background: #eef3f8 !important;
    border-top-color: #dee2e6 !important;
}
/* Bottom nav close button — black icon in light mode */
html[data-bs-theme="light"] #analysisChartModal .ac-bottom-nav .btn {
    color: #fff !important;
}
/* Alert boxes — dark text in light mode (white in dark mode is set inline) */
html[data-bs-theme="light"] .alert-warning {
    color: #664d03 !important;
}

/* Candle range / gap slider track — gray in light mode (matches dark mode appearance) */
html[data-bs-theme="light"] .candle-range-track {
    background: #ccc !important;
}
html[data-bs-theme="light"] .candle-range-handle {
    background: #fff !important;
    border-color: var(--bs-primary, #1a99a6) !important;
}

/* Candle range / gap numeric inputs — teal in light mode */
html[data-bs-theme="light"] .candle-range-input {
    background: var(--bs-primary, #1a99a6) !important;
    border-color: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
}

/* Stock Screener tab buttons — black text on colored background in light mode */
html[data-bs-theme="light"] .screener-tabs .nav-link {
    color: #000 !important;
}
html[data-bs-theme="light"] .screener-tabs .nav-link.active {
    color: #000 !important;
}
/* Outline-primary dropdown buttons in chart areas — white bg, keep default text */
/* But filled primary buttons used as map/regime selectors need white text */
html[data-bs-theme="light"] #mapRegimeSelector .btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary);
    color: #fff !important;
    border-color: var(--bs-primary);
}

/* ============================================================
   5. DROPDOWN MENUS — black-dropdown → light in light mode
   ============================================================ */

[data-bs-theme="light"] .dropdown-menu.black-dropdown {
    background-color: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
}
[data-bs-theme="light"] .dropdown-menu.black-dropdown .dropdown-item {
    color: #212529;
}
[data-bs-theme="light"] .dropdown-menu.black-dropdown .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-menu.black-dropdown .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--bs-primary);
}
[data-bs-theme="light"] .dropdown-menu.black-dropdown .dropdown-item.active,
[data-bs-theme="light"] .dropdown-menu.black-dropdown .dropdown-item.active:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

/* text-muted body dropdown overrides */
[data-bs-theme="light"] body.text-muted .dropdown-menu.black-dropdown,
[data-bs-theme="light"] body.text-muted .dropdown-menu.black-dropdown .dropdown-item {
    color: #212529 !important;
}
[data-bs-theme="light"] body.text-muted .dropdown-toggle {
    color: #212529 !important;
}

/* ============================================================
   6. CHART TOOLBAR DROPDOWNS
   ============================================================ */

[data-bs-theme="light"] .spn-show-dropdown .dropdown-menu {
    background-color: rgba(248, 249, 250, 0.98);
    border: 1px solid #dee2e6;
    color: #212529;
}
[data-bs-theme="light"] .spn-show-dropdown .dropdown-menu label,
[data-bs-theme="light"] .spn-show-dropdown .dropdown-menu .form-check-label {
    color: #212529 !important;
}
[data-bs-theme="light"] .spn-show-dropdown .dropdown-menu .form-check-input {
    border-color: rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] .spn-data-dropdown .dropdown-menu,
[data-bs-theme="light"] .spn-timeframe-dropdown .dropdown-menu {
    background-color: rgba(248, 249, 250, 0.98);
    border: 1px solid #dee2e6;
}
[data-bs-theme="light"] .spn-data-dropdown .dropdown-menu .dropdown-item,
[data-bs-theme="light"] .spn-timeframe-dropdown .dropdown-menu .dropdown-item {
    color: #212529;
}
[data-bs-theme="light"] .spn-data-dropdown .dropdown-menu .dropdown-item:hover,
[data-bs-theme="light"] .spn-timeframe-dropdown .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--bs-primary);
}
[data-bs-theme="light"] .spn-data-dropdown .dropdown-menu .dropdown-item.active,
[data-bs-theme="light"] .spn-timeframe-dropdown .dropdown-menu .dropdown-item.active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* FRED/Economy dropdowns */
[data-bs-theme="light"] .economy-dropdown {
    background-color: #fff;
    color: #212529;
    border: 1px solid rgba(26, 153, 166, 0.4);
}
[data-bs-theme="light"] .economy-dropdown option {
    background-color: #fff;
    color: #212529;
}
[data-bs-theme="light"] .economy-dropdown optgroup {
    background-color: #eef3f8;
    color: var(--bs-primary);
}

/* ============================================================
   7. BLOG — cards, text, accordion
   ============================================================ */

[data-bs-theme="light"] .blog-card {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .blog-card:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .blog-card + .blog-card,
[data-bs-theme="light"] .blog-card-divider {
    border-top-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .blog-card-title {
    color: #212529;
}
[data-bs-theme="light"] .blog-card-meta {
    color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme="light"] .blog-card-snippet {
    color: rgba(0, 0, 0, 0.65);
}
[data-bs-theme="light"] #blog-count-label {
    color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme="light"] .blog-card-footer {
    border-top-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .blog-card-footer-left {
    color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme="light"] .icon-button {
    border-color: rgba(0, 0, 0, 0.12);
    color: #212529;
}
[data-bs-theme="light"] .icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
}
[data-bs-theme="light"] .blog-latest-card {
    background: rgba(0, 0, 0, 0.03);
}

/* Accordion/blog body text */
[data-bs-theme="light"] .accordion-body,
[data-bs-theme="light"] .blog-post-text {
    color: #212529 !important;
}

/* Blog TOC sidebar */
[data-bs-theme="light"] .blog-toc-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme="light"] .blog-toc-item a {
    color: #212529;
}
[data-bs-theme="light"] .blog-toc-item.active-blog {
    background-color: rgba(0, 0, 0, 0.05);
}

/* bg-success sections: all text dark in light mode */
html[data-bs-theme="light"] section.bg-success,
html[data-bs-theme="light"] section.bg-success p,
html[data-bs-theme="light"] section.bg-success span,
html[data-bs-theme="light"] section.bg-success small,
html[data-bs-theme="light"] section.bg-success li,
html[data-bs-theme="light"] section.bg-success h1,
html[data-bs-theme="light"] section.bg-success h2,
html[data-bs-theme="light"] section.bg-success h3,
html[data-bs-theme="light"] section.bg-success h4,
html[data-bs-theme="light"] section.bg-success h5,
html[data-bs-theme="light"] section.bg-success h6,
html[data-bs-theme="light"] section.bg-success label,
html[data-bs-theme="light"] section.bg-success div,
html[data-bs-theme="light"] section.bg-success dd,
html[data-bs-theme="light"] section.bg-success dt,
html[data-bs-theme="light"] section.bg-success dl,
html[data-bs-theme="light"] section.bg-success td,
html[data-bs-theme="light"] section.bg-success th {
    color: #212529;
}
html[data-bs-theme="light"] .bg-success .text-white,
html[data-bs-theme="light"] .bg-success .text-white-50 {
    color: #212529 !important;
}
html[data-bs-theme="light"] .bg-success .lead {
    color: #495057;
}

/* ============================================================
   8. LOGIN / MEMBER AREA
   ============================================================ */

[data-bs-theme="light"] [data-page="login"] .card {
    border-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] [data-page="login"] .form-control {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}
[data-bs-theme="light"] [data-page="login"] .form-control::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="light"] [data-page="login"] .form-check-input {
    background-color: #fff;
    border-color: #dee2e6;
}
[data-bs-theme="light"] [data-page="login"] a.text-white-50:hover,
[data-bs-theme="light"] [data-page="login"] a.text-white:hover {
    color: var(--bs-primary) !important;
}

/* Divider */
[data-bs-theme="light"] .divider-with-text {
    color: rgba(0, 0, 0, 0.4);
}
[data-bs-theme="light"] .divider-with-text::before,
[data-bs-theme="light"] .divider-with-text::after {
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   9. DASHBOARD / MEMBER CARDS
   ============================================================ */

[data-bs-theme="light"] [data-page="dashboard"] .card {
    border-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .member-card {
    border-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .member-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================================
   10. PRICING CARDS
   ============================================================ */

[data-bs-theme="light"] .pricing-card {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
[data-bs-theme="light"] .pricing-card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .pricing-price .price-period {
    color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme="light"] .pricing-features li {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   11. TRUST BADGES & REVIEWS
   ============================================================ */

[data-bs-theme="light"] .miv-trust-badge {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme="light"] .miv-trust-badge:hover {
    border-color: rgba(212, 169, 53, 0.5);
}
[data-bs-theme="light"] .miv-trust-badge-title {
    color: #212529;
}
[data-bs-theme="light"] .miv-trust-badge-sub {
    color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme="light"] .miv-trust-review {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme="light"] .miv-trust-review-text {
    color: rgba(0, 0, 0, 0.7);
}
[data-bs-theme="light"] .miv-trust-review-author {
    color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme="light"] .miv-trust-disclaimer {
    color: rgba(0, 0, 0, 0.35);
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* ============================================================
   12. FOOTER / AUDIO BAR
   ============================================================ */

[data-bs-theme="light"] #global-audio-bar {
    background: rgba(240, 242, 245, 0.95);
    color: #212529;
}

/* ============================================================
   13. INPUT STYLING
   ============================================================ */

[data-bs-theme="light"] .text-white-input {
    color: #212529 !important;
    border-color: #dee2e6;
}
[data-bs-theme="light"] .text-white-input::placeholder {
    color: #6c757d !important;
}

/* ============================================================
   14. MODALS — full light mode override
   ============================================================ */

/* Das Schliesskreuz jedes Modals.
 *
 * DIE SPEZIFITAETSFALLE, gemessen am 2026-09-16: style.css setzt
 * `#subscribeModal .btn-close { filter: invert(1) }`. Ein ID-Selektor (1-1-0)
 * schlaegt JEDE Anzahl von Klassen, also auch die beiden Regeln direkt
 * darunter (0-3-1). Im Hellmodus faerbt theme-light.css den Modalgrund auf
 * #fff -- und das Kreuz blieb invertiert, also WEISS AUF WEISS. Unsichtbar,
 * und der Besucher kommt aus dem Fenster nicht heraus.
 *
 * `#blogImageModal` stand hier bereits MIT seiner ID und war deshalb korrekt;
 * `#subscribeModal` war schlicht vergessen worden. Wer ein neues Modal mit
 * einer ID-Regel in style.css einfaerbt, muss dieselbe ID auch hier nennen --
 * eine Klassenregel kann sie nicht erreichen.
 *
 * Gewollt ist: schwarz auf weiss im Hellmodus, weiss auf schwarz im
 * Dunkelmodus (letzteres macht die Grundregel in style.css von allein). */
html[data-bs-theme="light"] .modal .btn-close,
html[data-bs-theme="light"] .btn-close.white-close,
html[data-bs-theme="light"] #blogImageModal .btn-close,
html[data-bs-theme="light"] #subscribeModal .btn-close {
    filter: none;
    /* Bootstrap gibt .btn-close eine Grunddeckkraft von .5. Auf einem weissen
       Grund ist ein halbdurchsichtiges Kreuz genau der graue Fleck, der als
       "deaktiviert" gelesen wird. */
    opacity: 1;
}

/* Beruehrbarkeit: 32x32 CSS-Pixel liegen unter den 44, die iOS und Android als
   Mindestgroesse fuer ein Bedienelement nennen -- bei einem Fenster, das sich
   ungefragt oeffnet, ist das der Unterschied zwischen "weggeklickt" und
   "dreimal danebengetippt". Gilt in beiden Themes, steht aber hier, weil
   theme-light.css als letztes Stylesheet geladen wird. */
.modal-header .btn-close {
    padding: 0.75rem;
    margin-right: -0.25rem;
}

/* Modal content in light mode — override bg-dark text-white */
html[data-bs-theme="light"] .modal-content.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .modal-content.text-white,
html[data-bs-theme="light"] .modal-content.text-light {
    color: #212529 !important;
}
html[data-bs-theme="light"] .modal-content .text-white {
    color: #212529 !important;
}
html[data-bs-theme="light"] .modal-content .form-control.bg-dark,
html[data-bs-theme="light"] .modal-content .form-select.bg-dark {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
html[data-bs-theme="light"] .modal-content .form-control.text-white,
html[data-bs-theme="light"] .modal-content .form-select.text-white {
    color: #212529 !important;
}

/* ============================================================
   15. STATUS BOX / OVERVIEW CARDS
   ============================================================ */

[data-bs-theme="light"] .status-box-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ============================================================
   16. CHART COLOR OVERRIDES — Energy sector + Subtle BGs
   ============================================================ */

html[data-bs-theme="light"] {
    --color_rotation_energy: #555555;
    --color_white: #333333;
    --color_benchmark: #000000;
    --color_tk_XLE: #555555;
    --miv-subtle-bg: rgba(0,0,0,0.04);
    --miv-subtle-bg-strong: rgba(0,0,0,0.07);
    --miv-subtle-border: rgba(0,0,0,0.1);
    /* Darker green for light mode — #16ff6a is too bright on white */
    --color_green: #0a8a3a;
    --color_impulse_bullish: #0a8a3a;
    --color_accumulation: #5cd88a;
    --color_bull_trend: #0a8a3a;
    --color_green_dim: rgba(10, 138, 58, 0.5);
    /* More intense yellow for EMA 20 — #ffd166 is too pale on white */
    --color_yellow: #e6a800;
}

/* Green text — darker for light mode readability */
html[data-bs-theme="light"] .text-green,
html[data-bs-theme="light"] .fred-green {
    color: #0a8a3a !important;
}
html[data-bs-theme="light"] .fred-lightgreen {
    color: #2eaa5a !important;
}
/* Signal colors — slightly darker for readability on white */
html[data-bs-theme="light"] .spn-signal-bull {
    color: #0a8a3a !important;
}
html[data-bs-theme="light"] .spn-signal-bottom {
    color: #2eaa5a !important;
}
html[data-bs-theme="light"] .zone-accumulation {
    color: #2eaa5a !important;
}

/* Darkpool table sticky header — light mode */
html[data-bs-theme="light"] .dp-sticky-header {
    background: #eef3f8;
}

/* Darkpool chart description text — black in light mode */
html[data-bs-theme="light"] .dp-desc-text {
    color: #212529 !important;
}

/* Theme Sector dropdown — white text on colored background */
html[data-bs-theme="light"] .spn-theme-select {
    color: #fff !important;
}
html[data-bs-theme="light"] .spn-theme-select option {
    background: #fff;
    color: #212529;
}

/*
 * Inline color override — only target elements WITHOUT a background.
 * Elements with both background + color in their style need their text color preserved.
 */
html[data-bs-theme="light"] [style*="color:#fff"]:not([style*="background"]),
html[data-bs-theme="light"] [style*="color: #fff"]:not([style*="background"]),
html[data-bs-theme="light"] [style*="color:white"]:not([style*="background"]),
html[data-bs-theme="light"] [style*="color: white"]:not([style*="background"]) {
    color: #212529 !important;
}

[data-bs-theme="dark"] {
    --miv-subtle-bg: rgba(255,255,255,0.05);
    --miv-subtle-bg-strong: rgba(255,255,255,0.1);
    --miv-subtle-border: rgba(255,255,255,0.1);
}

/* ============================================================
   17. TABLE / HEATMAP OVERRIDES — COMPREHENSIVE
   ============================================================ */

/*
 * ALL tables in light mode: white bg, dark text, light borders.
 * This catches .table, .table-dark, .data-table, .spn-theme-table,
 * and any other table variant used across the site.
 */
html[data-bs-theme="light"] .table,
html[data-bs-theme="light"] .table-dark,
html[data-bs-theme="light"] .data-table,
html[data-bs-theme="light"] .spn-theme-table,
html[data-bs-theme="light"] table {
    --bs-table-bg: #fff;
    --bs-table-color: #212529;
    --bs-table-border-color: #dee2e6;
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-hover-bg: #f0f2f5;
    --bs-table-accent-bg: transparent;
    background-color: #fff !important;
    color: #212529 !important;
}
/*
 * CRITICAL: Bootstrap 5.3 tables use box-shadow: inset 0 0 0 9999px ...
 * which covers ALL inline background-color values. Reset on ALL cells.
 */
html[data-bs-theme="light"] table td,
html[data-bs-theme="light"] table th {
    --bs-table-accent-bg: transparent;
    box-shadow: none !important;
}

/*
 * Table cells: white bg via CSS variable (NOT !important), so inline
 * style="background:..." on conditionally-colored cells naturally wins.
 * Only text color and borders use !important.
 */
html[data-bs-theme="light"] .table th,
html[data-bs-theme="light"] .table td,
html[data-bs-theme="light"] .table-dark th,
html[data-bs-theme="light"] .table-dark td,
html[data-bs-theme="light"] .data-table th,
html[data-bs-theme="light"] .data-table td,
html[data-bs-theme="light"] .spn-theme-table th,
html[data-bs-theme="light"] .spn-theme-table td {
    background-color: #fff;  /* NO !important — inline styles will override */
    color: #212529;          /* NO !important — signal classes like .spn-signal-bear will override */
    border-color: #dee2e6 !important;
}

/* Sticky table headers — opaque light bg */
html[data-bs-theme="light"] thead[style*="background"],
html[data-bs-theme="light"] .data-table thead,
html[data-bs-theme="light"] .spn-theme-table thead {
    background-color: #e9ecef !important;
}
html[data-bs-theme="light"] .data-table thead th,
html[data-bs-theme="light"] .spn-theme-table thead th,
html[data-bs-theme="light"] thead th {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Table row hover — light tint */
html[data-bs-theme="light"] .table-hover tbody tr:hover,
html[data-bs-theme="light"] .spn-theme-table tbody tr:hover,
html[data-bs-theme="light"] .spn-sector-table tbody tr:hover,
html[data-bs-theme="light"] .spn-stocks-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Table active/selected row — outline only, NO fill (keeps text readable) */
html[data-bs-theme="light"] tbody tr.table-active,
html[data-bs-theme="light"] .spn-stocks-table tbody tr.table-active,
html[data-bs-theme="light"] .spn-sector-table tbody tr.table-active,
html[data-bs-theme="light"] .spn-theme-table tbody tr.table-active {
    background-color: transparent !important;
    --bs-table-active-bg: transparent !important;
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: -1px;
    border-left: none !important;
}
html[data-bs-theme="light"] tbody tr.table-active td {
    --bs-table-active-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-active-color: #212529 !important;
    color: #212529 !important;
    box-shadow: none !important;
}

/* Heatmap active row — dark outline for visibility */
html[data-bs-theme="light"] .spn-stocks-table--heatmap tbody tr.table-active {
    outline: 2px solid #212529 !important;
}
/* Industry cell: preserve sector color + text color on active row */
html[data-bs-theme="light"] .spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-industry {
    box-shadow: none !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
}
/* All heatmap active cells: keep text dark, no overlay */
html[data-bs-theme="light"] .spn-stocks-table--heatmap tbody tr.table-active td {
    box-shadow: none !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-active-color: #212529 !important;
    color: #212529 !important;
}

/* Screener ticker cells — keep colored backgrounds readable */
html[data-bs-theme="light"] .spn-theme-table td[class*="spn-tk-"] {
    color: #fff !important; /* white text on colored sector bg is correct */
}
/* Energy sector — white text on dark gray bg */
html[data-bs-theme="light"] .spn-sector-energy {
    color: #fff !important;
}

/* Pattern detection boxes (stock screener) */
html[data-bs-theme="light"] div[style*="background:rgba(0,0,0"] {
    background: var(--miv-subtle-bg) !important;
}

/* Screener signal-na text */
html[data-bs-theme="light"] .spn-signal-na {
    color: rgba(0,0,0,0.4) !important;
}

/* Heatmap empty cells */
html[data-bs-theme="light"] .spn-heatmap-cell[style*="background: #333"] {
    background: #e9ecef !important;
}

/* Screener stock count text */
html[data-bs-theme="light"] #screenerStockCount {
    color: #212529 !important;
}

/* Insider search form — dark labels and fields in light mode */
html[data-bs-theme="light"] .search-label {
    color: #212529 !important;
}
html[data-bs-theme="light"] .search-field {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}
html[data-bs-theme="light"] .search-field:focus {
    background-color: #fff !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 153, 166, 0.25) !important;
}
html[data-bs-theme="light"] .search-field::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
html[data-bs-theme="light"] .search-field option {
    background-color: #fff;
    color: #212529;
}

/* COT/Commodities screener table cells with specific dark bg colors */
html[data-bs-theme="light"] td[style*="background-color: #22"],
html[data-bs-theme="light"] td[style*="background-color: #1a1a"],
html[data-bs-theme="light"] td[style*="background-color: #333"],
html[data-bs-theme="light"] th[style*="background-color: #22"],
html[data-bs-theme="light"] th[style*="background-color: #1a1a"] {
    background-color: #fff !important;
}

/* Scrollable table containers */
html[data-bs-theme="light"] .table-responsive {
    background-color: #fff;
}

/* Neutralize table-dark in light mode — all hardcoded table-dark tables
   should render with light colors instead */
html[data-bs-theme="light"] .table-dark {
    --bs-table-bg: #fff !important;
    --bs-table-color: #212529 !important;
    --bs-table-border-color: #dee2e6 !important;
    --bs-table-striped-bg: #f8f9fa !important;
    --bs-table-striped-color: #212529 !important;
    --bs-table-hover-bg: #e9ecef !important;
    --bs-table-hover-color: #212529 !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Sticky heatmap columns — explicit white background in light mode
   (Industry excluded: it uses inline sector-color backgrounds) */
html[data-bs-theme="light"] .spn-heatmap-ticker,
html[data-bs-theme="light"] .spn-heatmap-rank,
html[data-bs-theme="light"] .spn-stocks-table td.spn-heatmap-ticker,
html[data-bs-theme="light"] .spn-stocks-table td.spn-heatmap-rank {
    background: #fff !important;
    background-color: #fff !important;
    color: #212529 !important;
    box-shadow: none !important;
}

/* Active row sticky columns in light mode */
html[data-bs-theme="light"] .spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-ticker,
html[data-bs-theme="light"] .spn-stocks-table--heatmap tbody tr.table-active td.spn-heatmap-rank {
    background: #e9ecef !important;
}

/* table-dark thead — force turquoise header background in light mode
   (Bootstrap table-dark sets thead bg to #212529 with high specificity) */
html[data-bs-theme="light"] .table-dark thead th,
html[data-bs-theme="light"] .table-dark > thead > tr > th {
    background-color: var(--bs-primary, #1a99a6) !important;
    color: #fff !important;
}

/* Sector overview table — light mode */
html[data-bs-theme="light"] .spn-sector-table {
    --bs-table-bg: #fff !important;
    --bs-table-color: #212529 !important;
}

/* Sector table mobile sticky-column headers — match the rest of the
   light-mode header bar (primary color) instead of falling back to the
   dark default applied by chart.css. */
@media (max-width: 767.98px) {
    html[data-bs-theme="light"] table.spn-sector-table thead th:nth-child(1),
    html[data-bs-theme="light"] table.spn-sector-table thead th:nth-child(4),
    html[data-bs-theme="light"] table.spn-sector-table thead th:nth-child(5) {
        background-color: var(--bs-primary, #1a99a6) !important;
    }
}

/* ============================================================
   18. GAUGE OVERRIDES
   ============================================================ */

/* SVG gauge text should be dark in light mode */
html[data-bs-theme="light"] .gauge-value-position {
    color: #212529;
}
/* Gauge SVG needle — black in light mode */
html[data-bs-theme="light"] #needle,
html[data-bs-theme="light"] #daily-needle,
html[data-bs-theme="light"] #weekly-needle,
html[data-bs-theme="light"] [id$="-needle"] {
    fill: #212529 !important;
    stroke: #212529 !important;
}
/* SVG gauge center dot */
html[data-bs-theme="light"] svg circle[fill="#fff"],
html[data-bs-theme="light"] svg circle[fill="white"] {
    fill: #212529 !important;
}
/* Market Cap rotation gauge — light center, black needle (both overview and detail page) */
html[data-bs-theme="light"] #rotationGauge circle[fill="#00081A"],
html[data-bs-theme="light"] .rotation-center {
    fill: #f8f9fa !important;
    stroke: #dee2e6 !important;
}
html[data-bs-theme="light"] #rotationGauge line[stroke="white"],
html[data-bs-theme="light"] #rotationGauge line[stroke="#fff"],
html[data-bs-theme="light"] #rotationGauge line[stroke="#ffffff"],
html[data-bs-theme="light"] .rotation-needle {
    stroke: #212529 !important;
}
html[data-bs-theme="light"] .rotation-center-dot {
    fill: transparent !important;
}
/* Gauge SVG text elements */
html[data-bs-theme="light"] .gauge-block text,
html[data-bs-theme="light"] .gauge-block .gauge-label {
    fill: #212529;
}

/* ============================================================
   19. OVERVIEW CARD BACKGROUNDS
   ============================================================ */

html[data-bs-theme="light"] .spn-overview-card {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html[data-bs-theme="light"] .spn-overview-card .card-body {
    color: #212529;
}

/* Market phase / impulse / candle images — use light variants (no CSS filter needed) */
html[data-bs-theme="light"] .gauge-img,
html[data-bs-theme="light"] img[src*="images/candles"],
html[data-bs-theme="light"] img[src*="images/market_phase"],
html[data-bs-theme="light"] img[src*="images/impulse"] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* X (Twitter) icon — invert white logo to black in light mode */
html[data-bs-theme="light"] .follow-icon img[src*="icons/x.png"] {
    filter: invert(1);
}

/* ============================================================
   20. DARK BACKGROUND OVERRIDES
   ============================================================ */

/* bg-black → light in light mode */
html[data-bs-theme="light"] .bg-black {
    background-color: #eef3f8 !important;
}

/*
 * COMPREHENSIVE: Override ALL dark backgrounds in light mode.
 * Any element with text-white class was designed for dark bg.
 * Any element with inline background using dark hex codes.
 * Any element using bg-dark, bg-success, bg-secondary.
 */
html[data-bs-theme="light"] section.text-white,
html[data-bs-theme="light"] section[style*="background"] {
    background: #fff !important;
    color: #212529;
}
/* Cards inside dark containers */
html[data-bs-theme="light"] .card.bg-dark {
    background: #eef3f8 !important;
    border: 1px solid #d0dce8 !important;
    color: #212529 !important;
}

/* Bootstrap gray utility variables — make light in light mode */
html[data-bs-theme="light"] {
    --bs-gray-700: #eef3f8;
    --bs-gray-800: #f8f9fa;
    --bs-gray-900: #fff;
}

/* Page-specific class overrides */
html[data-bs-theme="light"] .summary-card {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6;
}
html[data-bs-theme="light"] .summary-card .label {
    color: #495057 !important;
}
html[data-bs-theme="light"] .filter-bar {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6;
}
html[data-bs-theme="light"] .subgroup-header {
    background-color: #e9ecef !important;
}
html[data-bs-theme="light"] .tool-card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
html[data-bs-theme="light"] .workflow-step {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
html[data-bs-theme="light"] .golden-rule {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.08)) !important;
}
/* Breadth regime summary cards */
html[data-bs-theme="light"] #regime-summary-section {
    background: #fff !important;
}
html[data-bs-theme="light"] #regime-summary-section .card {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}
/* Mag10 gradient cards */
html[data-bs-theme="light"] .mag10-card-gradient {
    background: #eef3f8 !important;
    border: 1px solid #d0dce8 !important;
}
/* Mag10 info cards */
html[data-bs-theme="light"] .mag10-card {
    background: #eef3f8 !important;
    border: 1px solid #d0dce8 !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .mag10-card p,
html[data-bs-theme="light"] .mag10-card span,
html[data-bs-theme="light"] .mag10-card small,
html[data-bs-theme="light"] .mag10-card h5,
html[data-bs-theme="light"] .mag10-card h6 {
    color: #212529 !important;
}
/* Remove white inner boxes — blend with parent */
html[data-bs-theme="light"] .mag10-card fieldset,
html[data-bs-theme="light"] .mag10-card-gradient fieldset {
    border-color: #d0dce8 !important;
}
/* Ratio indicator cards below the cycle */
html[data-bs-theme="light"] .mag10-stock-row:hover {
    background: rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] .mag10-stock-row.selected-row {
    background: transparent !important;
    outline: 2px solid var(--bs-primary);
}
/* TradingView container */
html[data-bs-theme="light"] .tradingview-widget-container {
    background-color: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Email/form input dark background override */
html[data-bs-theme="light"] input[style*="1a1a2e"],
html[data-bs-theme="light"] input[style*="background-color: #1a1a2e"] {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Chart inline legend bar — bottom tags */
html[data-bs-theme="light"] .spn-chart-inline-legend span,
html[data-bs-theme="light"] .tv-legend span {
    color: #212529 !important;
}

/* Liquidity flow chart — light mode box colors */
html[data-bs-theme="light"] .institution-box {
    background: rgba(240, 242, 245, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .institution-box .institution-title {
    color: #212529 !important;
}
html[data-bs-theme="light"] .institution-box .institution-value {
    color: #212529 !important;
}
/* TGA and RRP boxes → yellow */
html[data-bs-theme="light"] .institution-box.tga,
html[data-bs-theme="light"] .institution-box.rrp {
    background: rgba(255, 193, 7, 0.25) !important;
    border-color: #ffc107 !important;
}
/* FED box → light green (keep existing) */
html[data-bs-theme="light"] .institution-box.fed {
    background: rgba(10, 138, 58, 0.12) !important;
    border-color: #0a8a3a !important;
    color: #212529 !important;
}
/* Flowchart section background */
html[data-bs-theme="light"] #liquidity-flowchart-section {
    background: #eef3f8 !important;
}
/* Flow arrows → light green */
html[data-bs-theme="light"] .flow-arrow,
html[data-bs-theme="light"] svg path[fill="#16ff6a"],
html[data-bs-theme="light"] .arrow-positive {
    fill: #2eaa5a !important;
    color: #2eaa5a !important;
}
/* FED Phase cards → semitransparent phase colors */
html[data-bs-theme="light"] div[style*="border: 2px solid #97ffc4"] {
    background: rgba(151, 255, 196, 0.15) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #16ff6a"] {
    background: rgba(22, 255, 106, 0.15) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #ff8c00"] {
    background: rgba(255, 140, 0, 0.12) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #ff4455"] {
    background: rgba(255, 68, 85, 0.12) !important;
}
/* Dollar impact cards */
html[data-bs-theme="light"] div[style*="border: 2px solid #ff5252"] {
    background: rgba(255, 82, 82, 0.1) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #4CAF50"] {
    background: rgba(76, 175, 80, 0.1) !important;
}

/* FED Policy Stance and Economic Outlook cards → blue */
html[data-bs-theme="light"] .liquidity-info-card {
    background: rgba(24, 88, 255, 0.08) !important;
    border: 1px solid rgba(24, 88, 255, 0.25) !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .liquidity-info-card h5 {
    color: #212529 !important;
}

/* ETF flow table — remove fill colors in light mode, keep text colors */
html[data-bs-theme="light"] .flow-strong-positive {
    background-color: transparent !important;
    color: #0a8a3a !important;
}
html[data-bs-theme="light"] .flow-strong-negative {
    background-color: transparent !important;
    color: #dc3545 !important;
}
/* ETF table headers */
html[data-bs-theme="light"] .etf-table th {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
html[data-bs-theme="light"] .etf-table th.sortable:hover {
    background-color: rgba(26, 153, 166, 0.85) !important;
}

/* ALL form-select dropdowns in dark containers → teal with white text */
html[data-bs-theme="light"] .filter-bar .form-select,
html[data-bs-theme="light"] .form-select[style*="background-color: var(--bs-gray"],
html[data-bs-theme="light"] .form-select[style*="background-color:var(--bs-gray"] {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}
html[data-bs-theme="light"] .filter-bar .form-select option {
    background-color: #fff !important;
    color: #212529 !important;
}
html[data-bs-theme="light"] .filter-bar {
    background: #eef3f8 !important;
    border: 1px solid #d0dce8;
}

/* text-muted and text-secondary — darker in light mode for readability */
html[data-bs-theme="light"] .text-muted {
    color: #495057 !important;
}
html[data-bs-theme="light"] .text-secondary {
    color: #495057 !important;
}
/* Override Bootstrap --bs-secondary-color for light mode */
html[data-bs-theme="light"] {
    --bs-secondary-color: #495057;
}

/* Chart.js — global defaults for light mode */
html[data-bs-theme="light"] canvas {
    --chartjs-tick-color: #000;
    --chartjs-grid-color: rgba(0,0,0,0.1);
}

/* Breadth page — reference boxes with dark bg → semitransparent border color */
html[data-bs-theme="light"] div[style*="background: rgba(30, 30, 50"] {
    background: transparent !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #4dabf7"] {
    background: rgba(77, 171, 247, 0.08) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #ffd166"] {
    background: rgba(255, 209, 102, 0.08) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #ff6b6b"] {
    background: rgba(255, 107, 107, 0.08) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #51cf66"] {
    background: rgba(81, 207, 102, 0.08) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #845ef7"] {
    background: rgba(132, 94, 247, 0.08) !important;
}
html[data-bs-theme="light"] div[style*="border: 2px solid #f783ac"] {
    background: rgba(247, 131, 172, 0.08) !important;
}
/* Composite Regime Score box — no fill */
html[data-bs-theme="light"] div[style*="border: 2px solid var(--bs-primary)"] {
    background: transparent !important;
}
/* Breadth overview dropdown → turquoise with white text */
html[data-bs-theme="light"] #breadth-overview-section .form-select,
html[data-bs-theme="light"] #breadth-overview-section select {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

/* Dual images: show correct version per theme — no JS delay */
html[data-bs-theme="light"] .candle-dark { display: none !important; }
html[data-bs-theme="dark"] .candle-light { display: none !important; }
/* Chart logos: black version for dark mode, bright for light mode */
html[data-bs-theme="light"] .chart-logo-dark { display: none !important; }
html[data-bs-theme="dark"] .chart-logo-light { display: none !important; }

/* Seasonal Analysis — preserve conditional text coloring */
html[data-bs-theme="light"] .text-positive {
    color: #0a8a3a !important;
}
html[data-bs-theme="light"] .text-negative {
    color: #dc3545 !important;
}
html[data-bs-theme="light"] .text-neutral {
    color: #6c757d !important;
}

/* Seasonal Analysis page — light mode overrides */
html[data-bs-theme="light"] .seasonal-table th {
    background: var(--bs-primary) !important;
    color: #fff !important;
}
html[data-bs-theme="light"] .seasonal-table th:hover {
    background: rgba(26, 153, 166, 0.85) !important;
}
html[data-bs-theme="light"] .seasonal-table tr:hover {
    background: rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] .seasonal-filters .form-select,
html[data-bs-theme="light"] .seasonal-chart-controls .form-select {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}
html[data-bs-theme="light"] .seasonal-filters label,
html[data-bs-theme="light"] .seasonal-chart-controls .form-check-label {
    color: #212529 !important;
}
/* Seasonal chart canvas — light blue bg */
html[data-bs-theme="light"] #seasonalChartContainer,
html[data-bs-theme="light"] .seasonal-chart-container {
    background: #eef3f8 !important;
}

/* ============================================================
   21. SCROLLBAR STYLING (optional, Webkit only)
   ============================================================ */

[data-bs-theme="light"] ::-webkit-scrollbar-track {
    background: #eef3f8;
}
[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c4c8cc;
}
[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #a0a4a8;
}

/* Mobile sticky first column — light mode overrides */
@media (max-width: 767.98px) {
    html[data-bs-theme="light"] .data-table th:first-child,
    html[data-bs-theme="light"] .data-table td:first-child {
        background-color: #f8f9fa;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================
   Market Breadth gauge — light-mode adjustments
   Subtle background needs to be visible on white card surfaces.
============================================================ */
html[data-bs-theme="light"] .miv-breadth-gauge {
    background: rgba(0, 0, 0, 0.06) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}