/* ==========================================================================
   BASE — CSS Variables, Resets, Typography, Body, Scrollbar, Utilities
   Split from custom.css — Dash auto-loads all CSS in assets/ alphabetically.
   Prefixed 00- to ensure variables load before other files.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --text-primary: #f1f5f9;
    --text-secondary: #b0bec5;
    --text-muted: #8896a6;
    --text-muted-accessible: #b0bec5;
    --text-subtle-accessible: #8896a6;
    --text-body-accessible: #cbd5e1;
    --border-color: #2a2a3a;
    --accent-blue: #60a5fa;
    --accent-green: #34d399;
    /* Override Dash 4.0 light-mode defaults for dark theme */
    --Dash-Fill-Inverse-Strong: #16161f;
    --Dash-Text-Primary: #e2e8f0;
    --Dash-Text-Strong: #f1f5f9;
    --Dash-Text-Weak: #b0bec5;
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.15);
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.06);
    --Dash-Fill-Interactive-Strong: #60a5fa;
    --Dash-Fill-Primary-Hover: rgba(96, 165, 250, 0.1);
    --Dash-Fill-Primary-Active: rgba(96, 165, 250, 0.2);
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f8fafc;
        --bg-card: #ffffff;
        --text-primary: #1e293b;
        --text-secondary: #475569;
        --text-muted: #64748b;
        --border-color: #e2e8f0;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary) !important;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#page-content > div {
    animation: fadeIn 0.25s ease-out;
    padding: 0.25rem;
}

/* Prevent headings from hiding behind the fixed header when scrolled to */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
    scroll-margin-top: 100px;
}

/* Main content area */
.main-content {
    margin-left: 250px;
    padding: 90px 1.5rem 2rem 1.5rem;
    min-height: 100vh;
}

/* Main header bar */
.main-header {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Force gradient on topbar logo (override <a> tag color) */
.topbar-logo .umbrella-brand-logo {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.topbar-icon-btn {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.topbar-icon-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
}

.header-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-title {
    color: #e2e8f0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0;
    white-space: nowrap;
}

.header-title.header-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
}

.header-subtitle {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Show full text on hover for any truncated element */
[style*="text-overflow"], [style*="ellipsis"] {
    cursor: help;
}
[title]:hover {
    position: relative;
}
[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card, #1e293b);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: normal;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 1rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #34d399;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Footer */
.footer {
    text-align: center;
    padding: 1rem 2rem 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}
.footer p {
    margin-bottom: 0;
}

/* Dropdown base styling */
.Select-control {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.Select-menu-outer {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Disable Dash default loading overlays - we use skeleton loading instead */
.dash-loading-spinner,
._dash-loading,
._dash-loading-callback {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Loading Skeleton */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #1e1e2e 25%, #2a2a3a 50%, #1e1e2e 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-card {
    height: 120px;
    border-radius: 8px;
}

.skeleton-chart {
    height: 300px;
    border-radius: 8px;
}

/* Button group styling */
.btn-group .btn-outline-primary {
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-primary:hover {
    background-color: #3b82f6;
    color: white;
}

/* Export button */
.btn-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Theme Toggle */
.theme-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.2s;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Accessibility focus styles */
:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.nav-link:focus-visible,
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    left: -9999px;
    background: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: 500;
}

.skip-link:focus {
    left: 0;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus trap for modals */
[role="dialog"]:focus {
    outline: none;
}

/* Keyboard shortcut styling */
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

kbd {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: #1e1e2e;
    border: 1px solid #3a3a4a;
    border-radius: 4px;
    color: #60a5fa;
}

/* Animated gradient border */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #3b82f6);
    background-size: 300% 100%;
    border-radius: 14px;
    z-index: -1;
    animation: gradient-shift 3s ease infinite;
}

/* Layout presets */
.layout-compact .card {
    margin-bottom: 0.5rem !important;
}

.layout-compact h2 {
    font-size: 1.25rem !important;
}

.layout-compact h4 {
    font-size: 1rem !important;
}

.layout-compact .main-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

.layout-compact .hero-section {
    padding: 1.5rem !important;
}

.layout-analysis .main-content {
    padding-left: 2rem;
    padding-right: 2rem;
}

.layout-analysis .card {
    margin-bottom: 1.5rem !important;
}

.layout-analysis .js-plotly-plot {
    height: 400px !important;
}

.layout-trading .main-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.layout-trading .hero-section {
    display: none !important;
}

.layout-trading .live-ticker {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ============================================
   SCROLL & LOAD ANIMATIONS
   ============================================ */

/* Hidden state -- elements start invisible and shifted down */
.anim-ready {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state -- triggered by IntersectionObserver */
.anim-ready.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children: cards in a row animate one after another */
.anim-stagger > .anim-ready:nth-child(1) { transition-delay: 0s; }
.anim-stagger > .anim-ready:nth-child(2) { transition-delay: 0.08s; }
.anim-stagger > .anim-ready:nth-child(3) { transition-delay: 0.16s; }
.anim-stagger > .anim-ready:nth-child(4) { transition-delay: 0.24s; }
.anim-stagger > .anim-ready:nth-child(5) { transition-delay: 0.32s; }
.anim-stagger > .anim-ready:nth-child(6) { transition-delay: 0.40s; }

/* Hero section -- fade in from top on load */
.anim-hero {
    opacity: 0;
    transform: translateY(-16px);
    animation: anim-hero-in 0.7s ease-out 0.15s forwards;
}
@keyframes anim-hero-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Hero stat counters -- pop in with scale */
.anim-stat {
    opacity: 0;
    transform: scale(0.85);
    animation: anim-stat-in 0.5s ease-out forwards;
}
.anim-stat:nth-child(1) { animation-delay: 0.3s; }
.anim-stat:nth-child(2) { animation-delay: 0.4s; }
.anim-stat:nth-child(3) { animation-delay: 0.5s; }
.anim-stat:nth-child(4) { animation-delay: 0.6s; }
@keyframes anim-stat-in {
    to { opacity: 1; transform: scale(1); }
}

/* Metric cards -- slide up with slight bounce */
.anim-metric {
    opacity: 0;
    transform: translateY(20px);
    animation: anim-metric-in 0.5s ease-out forwards;
}
.anim-metric:nth-child(1) { animation-delay: 0.1s; }
.anim-metric:nth-child(2) { animation-delay: 0.18s; }
.anim-metric:nth-child(3) { animation-delay: 0.26s; }
.anim-metric:nth-child(4) { animation-delay: 0.34s; }
.anim-metric:nth-child(5) { animation-delay: 0.42s; }
.anim-metric:nth-child(6) { animation-delay: 0.50s; }
@keyframes anim-metric-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   COLORBLIND-SAFE MODE
   Replaces red/green with blue/orange palette
   Safe for deuteranopia, protanopia, tritanopia
   ============================================ */

body.colorblind-mode .metric-delta.positive,
body.colorblind-mode .text-success,
body.colorblind-mode .badge-success {
    color: #2563eb !important; /* Blue for positive */
}
body.colorblind-mode .metric-delta.negative,
body.colorblind-mode .text-danger,
body.colorblind-mode .badge-danger {
    color: #d97706 !important; /* Amber for negative */
}

/* Status badges */
body.colorblind-mode .status-connected,
body.colorblind-mode .status-badge.status-connected {
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    background: rgba(37, 99, 235, 0.1) !important;
}
body.colorblind-mode .status-disconnected,
body.colorblind-mode .status-badge.status-disconnected {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    background: rgba(217, 119, 6, 0.1) !important;
}

/* Alerts */
body.colorblind-mode .alert-success {
    background-color: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: #93c5fd !important;
}
body.colorblind-mode .alert-danger {
    background-color: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #fbbf24 !important;
}

/* Ticker changes */
body.colorblind-mode .ticker-change.positive { color: #2563eb !important; }
body.colorblind-mode .ticker-change.negative { color: #d97706 !important; }

/* Live dot */
body.colorblind-mode .live-dot { background: #2563eb !important; box-shadow: 0 0 8px #2563eb !important; }

/* Alert items */
body.colorblind-mode .alert-item.warning { background: rgba(217, 119, 6, 0.15) !important; }
body.colorblind-mode .alert-item.info { background: rgba(37, 99, 235, 0.15) !important; }

/* Contact form validation */
body.colorblind-mode .contact-alert[class*="success"] { border-color: #2563eb !important; }
body.colorblind-mode .contact-alert[class*="danger"] { border-color: #d97706 !important; }

/* ========== SECTION: Theme (Light Mode) ========== */
body.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f1f5f9;
    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --bg-sidebar: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;
    --border-color: #cbd5e1;
    /* Restore Dash 4.0 defaults for light mode */
    --Dash-Fill-Inverse-Strong: #fff;
    --Dash-Text-Primary: rgba(0, 18, 77, 0.87);
    --Dash-Text-Strong: rgba(0, 9, 38, 0.9);
    --Dash-Text-Weak: rgba(0, 12, 51, 0.65);
    --Dash-Stroke-Strong: rgba(0, 18, 77, 0.45);
    --Dash-Stroke-Weak: rgba(0, 24, 102, 0.1);
    --Dash-Fill-Interactive-Strong: #7f4bc4;
    --Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
    --Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
    --Dash-Fill-Disabled: rgba(0, 24, 102, 0.1);
}

body.theme-light .main-content {
    background: var(--bg-main);
    color: var(--text-primary);
}
/* Light mode: card elevation and borders */
body.theme-light .main-content [style*="border-radius: 8px"],
body.theme-light .main-content [style*="borderRadius: 8px"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border-color: #cbd5e1 !important;
}
body.theme-light .main-content .hero-stat {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
/* Stronger secondary text in light mode */
body.theme-light .main-content [style*="color: #94a3b8"],
body.theme-light .main-content [style*="color:#94a3b8"] {
    color: #334155 !important;
}
body.theme-light .main-content [style*="color: #64748b"],
body.theme-light .main-content [style*="color:#64748b"] {
    color: #475569 !important;
}

/* Light mode overrides for hardcoded dark backgrounds */
body.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
}

/* ==========================================================================
   LIGHT MODE: Comprehensive inline-style overrides
   The dashboard was built dark-first with 1600+ hardcoded inline styles.
   These CSS attribute selectors override them all in light mode.
   ========================================================================== */

/* --- Text color overrides (light-on-dark -> dark-on-light) --- */
body.theme-light .main-content h1, body.theme-light .main-content h2,
body.theme-light .main-content h3, body.theme-light .main-content h4,
body.theme-light .main-content h5, body.theme-light .main-content h6 {
    color: #0f172a !important;
}
body.theme-light .main-content p, body.theme-light .main-content span,
body.theme-light .main-content div, body.theme-light .main-content label,
body.theme-light .main-content li, body.theme-light .main-content td,
body.theme-light .main-content th {
    color: var(--text-primary);
}
/* Primary light text -> dark */
body.theme-light .main-content [style*="color: #e2e8f0"],
body.theme-light .main-content [style*="color:#e2e8f0"],
body.theme-light .main-content [style*="color: #f1f5f9"],
body.theme-light .main-content [style*="color:#f1f5f9"],
body.theme-light .main-content [style*="color: #cbd5e1"],
body.theme-light .main-content [style*="color:#cbd5e1"],
body.theme-light .main-content [style*="color: #d1d5db"],
body.theme-light .main-content [style*="color:#d1d5db"],
body.theme-light .main-content [style*="color: #e5e7eb"],
body.theme-light .main-content [style*="color:#e5e7eb"],
body.theme-light .main-content [style*="color: white"],
body.theme-light .main-content [style*="color: #fff"],
body.theme-light .main-content [style*="color:#fff"] {
    color: #0f172a !important;
}
/* Secondary/muted text -> medium dark */
body.theme-light .main-content [style*="color: #94a3b8"],
body.theme-light .main-content [style*="color:#94a3b8"] {
    color: #475569 !important;
}
body.theme-light .main-content [style*="color: #64748b"],
body.theme-light .main-content [style*="color:#64748b"] {
    color: #64748b !important;
}
body.theme-light .main-content [style*="color: #334155"],
body.theme-light .main-content [style*="color:#334155"] {
    color: #334155 !important;
}
/* Preserve accent colors -- blue, green, amber stay readable on light */

/* --- Background overrides (dark -> light) ---
   Dash/React renders style={backgroundColor: "#x"} as style="background-color: #x" in DOM.
   We match both background: and background-color: patterns. */
body.theme-light .main-content [style*="background: #0f172a"],
body.theme-light .main-content [style*="background:#0f172a"],
body.theme-light .main-content [style*="background-color: #0f172a"],
body.theme-light .main-content [style*="background-color:#0f172a"],
body.theme-light .main-content [style*="background: #111827"],
body.theme-light .main-content [style*="background:#111827"],
body.theme-light .main-content [style*="background-color: #111827"],
body.theme-light .main-content [style*="background-color:#111827"],
body.theme-light .main-content [style*="background: #1e293b"],
body.theme-light .main-content [style*="background:#1e293b"],
body.theme-light .main-content [style*="background-color: #1e293b"],
body.theme-light .main-content [style*="background-color:#1e293b"],
body.theme-light .main-content [style*="background: #0c1222"],
body.theme-light .main-content [style*="background:#0c1222"],
body.theme-light .main-content [style*="background-color: #0c1222"],
body.theme-light .main-content [style*="background-color:#0c1222"],
body.theme-light .main-content [style*="background: #1e1e2e"],
body.theme-light .main-content [style*="background:#1e1e2e"],
body.theme-light .main-content [style*="background-color: #1e1e2e"],
body.theme-light .main-content [style*="background-color:#1e1e2e"],
body.theme-light .main-content [style*="background: #0d1117"],
body.theme-light .main-content [style*="background:#0d1117"],
body.theme-light .main-content [style*="background: #1a1a2e"],
body.theme-light .main-content [style*="background:#1a1a2e"],
body.theme-light .main-content [style*="background-color: #1a1a2e"],
body.theme-light .main-content [style*="background-color:#1a1a2e"],
body.theme-light .main-content [style*="background: #172033"],
body.theme-light .main-content [style*="background:#172033"],
body.theme-light .main-content [style*="background: #16161f"],
body.theme-light .main-content [style*="background:#16161f"],
body.theme-light .main-content [style*="background-color: #16161f"],
body.theme-light .main-content [style*="background-color:#16161f"],
body.theme-light .main-content [style*="background: #2a2a3f"],
body.theme-light .main-content [style*="background:#2a2a3f"] {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}
/* Semi-transparent white overlays -> semi-transparent black */
body.theme-light .main-content [style*="background: rgba(255, 255, 255, 0.0"],
body.theme-light .main-content [style*="background: rgba(255,255,255,0.0"],
body.theme-light .main-content [style*="background: rgba(255, 255, 255, 0.1"],
body.theme-light .main-content [style*="background: rgba(255,255,255,0.1"] {
    background: rgba(0, 0, 0, 0.03) !important;
}
/* Dark gradient backgrounds */
body.theme-light .main-content [style*="linear-gradient"][style*="#0f172a"],
body.theme-light .main-content [style*="linear-gradient"][style*="#1e1e2e"],
body.theme-light .main-content [style*="linear-gradient"][style*="#111827"],
body.theme-light .main-content [style*="linear-gradient"][style*="#1e293b"] {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

/* --- Border overrides --- */
body.theme-light .main-content [style*="border-color: rgba(255"],
body.theme-light .main-content [style*="borderColor: rgba(255"],
body.theme-light .main-content [style*="border: 1px solid rgba(255"],
body.theme-light .main-content [style*="borderLeft: 1px solid rgba(255"],
body.theme-light .main-content [style*="borderRight: 1px solid rgba(255"],
body.theme-light .main-content [style*="borderTop: 1px solid rgba(255"],
body.theme-light .main-content [style*="borderBottom: 1px solid rgba(255"] {
    border-color: #e2e8f0 !important;
}
/* Colored left/top borders (accent) -- keep but lighten */
body.theme-light .main-content [style*="borderLeft: 3px solid #60a5fa"] {
    border-left-color: #3b82f6 !important;
}
body.theme-light .main-content [style*="borderLeft: 3px solid #10b981"] {
    border-left-color: #059669 !important;
}

/* --- Box shadow overrides --- */
body.theme-light .main-content [style*="box-shadow"],
body.theme-light .main-content [style*="boxShadow"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* --- Landing hero sections --- */
body.theme-light .main-content .landing-hero .landing-subtitle,
body.theme-light .main-content .landing-hero .landing-methodology {
    color: #475569 !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: #e2e8f0 !important;
}
body.theme-light .landing-badge {
    color: #0f172a !important;
}

/* --- Modals --- */
body.theme-light .modal-content {
    background: #ffffff !important;
    border-color: #b0bec5 !important;
    color: #0f172a !important;
}
body.theme-light .modal-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
    color: #0f172a !important;
}
body.theme-light .modal-body {
    background: #ffffff !important;
    color: #0f172a !important;
}
body.theme-light .modal-footer {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}
body.theme-light .modal-title {
    color: #0f172a !important;
}

/* --- Form controls (radio, checkbox, switch) --- */
body.theme-light .form-check-input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}
body.theme-light .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}
body.theme-light .form-check-label {
    color: #0f172a !important;
}

/* --- Tabs enhancements --- */
body.theme-light .nav-tabs {
    border-color: #b0bec5 !important;
}
body.theme-light .nav-tabs .nav-link:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.02) !important;
}
body.theme-light .tab-content {
    background: #ffffff !important;
}

/* Light mode alerts */
body.theme-light .alert {
    color: #0f172a !important;
}

body.theme-light .alert-info {
    background-color: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0c4a6e !important;
}

body.theme-light .alert-warning {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #78350f !important;
}

body.theme-light .alert-danger {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #7f1d1d !important;
}

/* Light mode - page structure */
body.theme-light .page-header .page-title {
    color: #0f172a !important;
}
body.theme-light .page-header .page-description {
    color: #475569 !important;
}

/* Light mode - hero section */
body.theme-light .hero-section {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
}
body.theme-light .hero-section p {
    color: #334155 !important;
}

/* Light mode - keep gradient titles */
body.theme-light .header-subtitle {
    color: #475569 !important;
}
body.theme-light .main-content label {
    color: #0f172a !important;
}
body.theme-light .form-label {
    color: #0f172a !important;
}

/* Light mode - badges and misc */
body.theme-light .main-content .badge {
    color: #0f172a !important;
}
body.theme-light .main-content .text-muted {
    color: #475569 !important;
}
body.theme-light .main-content a {
    color: #2563eb !important;
}
body.theme-light .card-body {
    color: #0f172a !important;
}
body.theme-light .card-header {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #b0bec5 !important;
}

/* Light mode - timeline and version history */
body.theme-light .timeline-item,
body.theme-light .version-entry {
    color: #334155 !important;
}

/* Light mode - tabs */
body.theme-light .nav-tabs .nav-link {
    color: #475569 !important;
}
body.theme-light .nav-tabs .nav-link.active {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: #b0bec5 !important;
}

/* ============================================
   LIGHT MODE -- COMPREHENSIVE ADDITIONAL OVERRIDES
   ============================================ */

/* Priority 1 -- Critical fixes */

/* 1. CSS variable overrides for bg-primary / bg-secondary */
body.theme-light {
    --bg-primary: #dfe6ee !important;
    --bg-secondary: #d1d9e6 !important;
}

/* 2. Main header -- light top bar */
body.theme-light .main-header {
    background: rgba(232, 237, 243, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
body.theme-light .topbar-logo span {
    color: #0f172a !important;
}

/* 3. Header settings button -- light text */
body.theme-light .header-settings-btn {
    color: #475569 !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

body.theme-light .header-settings-btn:hover {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

/* 4. Skeleton -- light shimmer */
body.theme-light .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important;
    background-size: 200% 100% !important;
}

/* 5. Hero metric value -- dark text (was #f1f5f9, invisible on white) */
body.theme-light .hero-metric-value {
    color: #0f172a !important;
}

/* 6. Breadcrumb current item */
body.theme-light .breadcrumb-current {
    color: #0f172a !important;
}

/* 7. Ticker symbol */
body.theme-light .ticker-symbol {
    color: #0f172a !important;
}

/* 8. Preferences button hover */
body.theme-light .preferences-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* 11. Heading overrides -- add h1, h5, h6 to existing h2/h3/h4 rule */
body.theme-light .main-content h1,
body.theme-light .main-content h5,
body.theme-light .main-content h6 {
    color: var(--text-primary) !important;
}

/* 17. Mobile menu button */
body.theme-light .mobile-menu-btn {
    background: #ffffff !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* 19. Breadcrumb nav */
body.theme-light .breadcrumb-nav {
    background: rgba(225, 232, 240, 0.8) !important;
}

/* 20. Breadcrumb items */
body.theme-light .breadcrumb-item {
    color: #475569 !important;
}

/* 23. Section divider */
body.theme-light .section-divider {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 25. Refresh slider rail */
body.theme-light .refresh-slider .rc-slider-rail {
    background: #e2e8f0 !important;
}

/* 26. Keyboard shortcut keys */
body.theme-light kbd {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #2563eb !important;
}

/* 28. Hero title -- keep gradient in light mode */

/* 29. Metric deltas -- keep green/red semantics in light mode */
body.theme-light .metric-delta.positive {
    color: #15803d !important;
}

body.theme-light .metric-delta.negative {
    color: #dc2626 !important;
}

/* Footer */
body.theme-light .footer {
    border-top: 1px solid #b0bec5 !important;
    color: #475569 !important;
}

body.theme-light .topbar-search-bar {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .topbar-search-input {
    color: #1e293b !important;
}

body.theme-light .topbar-icon-btn {
    color: #475569;
}

body.theme-light .topbar-icon-btn:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Contrast fixes -- Home (about-landing) & About (about-info-page)
   Defines accessible text-color CSS variables for dark and light themes.
   ========================================================================== */

/* --- Light mode ---------------------------------------------------------- */
body.theme-light {
    --text-muted-accessible: #475569;
    --text-subtle-accessible: #334155;
    --text-body-accessible: #475569;
}

/* Hero stat labels -- reinforce for light mode */
body.theme-light .about-landing .hero-stat-label {
    color: #334155 !important;
}

/* 27. Preferences / Settings offcanvas -- light mode */
body.theme-light .prefs-section {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}
body.theme-light #preferences-offcanvas {
    background: #f8fafc !important;
    color: #1e293b !important;
}
body.theme-light #preferences-offcanvas .offcanvas-header {
    color: #0f172a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.theme-light #preferences-offcanvas .offcanvas-title {
    color: #0f172a !important;
}
body.theme-light #preferences-offcanvas .btn-close {
    filter: none !important;
}
body.theme-light #preferences-offcanvas h6 {
    color: #1e293b !important;
}
body.theme-light #preferences-offcanvas label,
body.theme-light #preferences-offcanvas span,
body.theme-light #preferences-offcanvas div,
body.theme-light #preferences-offcanvas .shortcut-row span {
    color: #475569 !important;
}
body.theme-light #preferences-offcanvas h6 ~ div {
    color: #475569 !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .anim-ready,
    .anim-hero,
    .anim-stat,
    .anim-metric {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}