/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Component Overrides
   Hardcoded rgba values that bypass the variable system
   ═══════════════════════════════════════════════════════ */

/* --- Ambient Gradient Background --- */
body.light-mode {
    --void: #F8FAFF;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(27, 168, 224, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 30%, rgba(27, 168, 224, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(92, 224, 255, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #F0F8FF 0%, #E8F4FD 30%, #EBF8FF 55%, #E5FBFF 80%, #F0F8FF 100%);
    background-attachment: fixed;
}

/* --- Kill all glass blur in light mode (except sidebar, top panel & content cards) --- */
body.light-mode .period-selector,
body.light-mode .modal,
body.light-mode .modal-content,
body.light-mode .modal-water,
body.light-mode .modal-water .modal-content,
body.light-mode .report-filter-bar,
body.light-mode .ai-backdrop,
body.light-mode .splash-container,
body.light-mode .form-input,
body.light-mode .form-textarea {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- Sidebar --- */
body.light-mode .sidebar {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(27, 168, 224, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(27, 168, 224, 0.02) 0%, transparent 60%),
        linear-gradient(180deg, #FCFBFF 0%, #FDFCFF 50%, #FCFBFF 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        2px 0 10px rgba(36, 137, 189, 0.5),
        4px 0 20px rgba(36, 137, 189, 0.35),
        6px 0 36px rgba(36, 137, 189, 0.18);
    animation: sidebar-glow-breathe-light 4s ease-in-out infinite;
}

@keyframes sidebar-glow-breathe-light {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
            2px 0 10px rgba(36,137,189,0.5),
            4px 0 20px rgba(36,137,189,0.35),
            6px 0 36px rgba(36,137,189,0.18);
    }
    50% {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
            2px 0 14px rgba(36,137,189,0.7),
            5px 0 28px rgba(36,137,189,0.5),
            8px 0 44px rgba(36,137,189,0.28);
    }
}

@keyframes ai-panel-glow-breathe-light {
    0%, 100% {
        box-shadow: -4px 0 16px rgba(36,137,189,0.06),
            -4px 0 64px rgba(36,137,189,0.08),
            -8px 0 20px rgba(36,137,189,0.3),
            -15px 0 40px rgba(36,137,189,0.15);
    }
    50% {
        box-shadow: -4px 0 20px rgba(36,137,189,0.1),
            -4px 0 70px rgba(36,137,189,0.14),
            -10px 0 28px rgba(36,137,189,0.45),
            -18px 0 50px rgba(36,137,189,0.25);
    }
}

body.light-mode .sidebar::before {
    background-image:
        linear-gradient(rgba(27, 168, 224, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 168, 224, 0.12) 1px, transparent 1px);
}

body.light-mode .sidebar::after {
    background:
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.8) 55%, transparent 100%) 0 -100vh / 100% 30px no-repeat,
        linear-gradient(180deg, #1BA8E0 0%, #1BA8E0 50%, #5CE0FF 100%);
}

/* top-panel ::after gradient border inherited from dark mode */


body.light-mode .nav-item:hover {
    background: linear-gradient(90deg, rgba(36, 137, 189, 0.08) 0%, rgba(36, 137, 189, 0.04) 60%, transparent 100%);
}

body.light-mode .nav-item.active {
    background: linear-gradient(90deg, rgba(36, 137, 189, 0.12) 0%, rgba(36, 137, 189, 0.06) 60%, transparent 100%);
    color: #1BA8E0;
}

body.light-mode .nav-item.active .nav-icon {
    color: #1BA8E0;
}

body.light-mode .nav-item.active .nav-label {
    background: linear-gradient(90deg, #1BA8E0, #5CE0FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .nav-separator {
    background: linear-gradient(to right, transparent, rgba(46, 204, 48, 0.2) 30%, rgba(27, 168, 224, 0.2) 70%, transparent);
}

body.light-mode .logo::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.9) 55%, transparent 100%) -100vw 0 / 30px 100% no-repeat,
        linear-gradient(90deg, transparent, rgba(27, 168, 224, 0.3) 30%, rgba(36, 137, 189, 0.4) 50%, rgba(27, 168, 224, 0.3) 70%, transparent);
}


/* --- Top Panel --- */
body.light-mode .top-panel {
    background:
        radial-gradient(ellipse at 10% 50%, rgba(27, 168, 224, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 50%, rgba(27, 168, 224, 0.02) 0%, transparent 50%),
        linear-gradient(90deg, #FCFBFF 0%, #FDFCFF 50%, #FCFBFF 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: topPanelBreatheLight 4s ease-in-out infinite;
}

@keyframes topPanelBreatheLight {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
            0 2px 10px rgba(36,137,189,0.5),
            0 4px 20px rgba(36,137,189,0.35),
            0 6px 36px rgba(36,137,189,0.18);
    }
    50% {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
            0 2px 14px rgba(36,137,189,0.7),
            0 5px 28px rgba(36,137,189,0.5),
            0 8px 44px rgba(36,137,189,0.28);
    }
}

body.light-mode .search-bar {
    background: transparent;
    color: #334155 !important;
    caret-color: #334155 !important;
}

body.light-mode .search-bar::placeholder {
    color: #94A3B8 !important;
}

body.light-mode .search-bar:focus {
    border-color: var(--corona);
    background: rgba(255, 255, 255, 0.15);
    color: #334155 !important;
    caret-color: #334155 !important;
}

body.light-mode .search-icon {
    color: #475569 !important;
}

body.light-mode .search-results {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        0 4px 16px rgba(36, 137, 189, 0.06),
        0 16px 64px rgba(36, 137, 189, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .search-result-item:hover {
    background: rgba(36, 137, 189, 0.04);
}

body.light-mode .search-result-highlighted {
    background: rgba(36, 137, 189, 0.04);
}

/* --- A-Z Filter Ribbon Container --- */
body.light-mode .az-filter-ribbon {
    background: transparent !important;
    border-bottom-color: rgba(36, 137, 189, 0.15) !important;
}

/* --- A-Z Filter Buttons --- */
body.light-mode .az-filter-btn {
    background: none !important;
    color: #94a3b8 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
}

body.light-mode .az-filter-btn.active {
    background: none !important;
    color: var(--corona) !important;
    border: none !important;
    border-bottom: 2px solid var(--corona) !important;
    font-weight: 600 !important;
}

body.light-mode .az-filter-btn:hover:not(.active) {
    background: none !important;
    color: var(--corona) !important;
    border-bottom-color: var(--corona) !important;
}

/* --- User Profile --- */
body.light-mode .user-profile-btn {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
}

body.light-mode .user-profile-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(36, 137, 189, 0.2), 0 0 40px rgba(36, 137, 189, 0.1);
}

body.light-mode .user-avatar {
    background: rgba(28, 111, 153, 0.1);
    border-color: rgba(28, 111, 153, 0.3);
    color: var(--corona);
}

/* --- Profile Popover --- */
body.light-mode .profile-popover {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        0 4px 16px rgba(36, 137, 189, 0.06),
        0 16px 64px rgba(36, 137, 189, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* profile-popover ::before gradient border ring inherited from dark mode — no override needed */

body.light-mode .profile-menu-item:hover {
    background: rgba(36, 137, 189, 0.06);
}

body.light-mode #orgSwitcher {
    background: rgba(241, 245, 249, 0.8);
}

body.light-mode .profile-popover .custom-select-option {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .profile-popover .custom-select-option:hover {
    background: rgba(36, 137, 189, 0.08);
}

body.light-mode .profile-popover .custom-select-option.selected {
    background: rgba(36, 137, 189, 0.12);
}

/* --- Popover Nav Group (Light) --- */
body.light-mode .popover-nav-btn {
    color: #475569;
}

body.light-mode .popover-nav-btn svg {
    stroke: #94a3b8;
}

body.light-mode .popover-nav-btn:hover {
    color: #1BA8E0;
    background: rgba(36, 137, 189, 0.06);
}

body.light-mode .popover-nav-btn:hover svg {
    stroke: #1BA8E0;
}

body.light-mode .popover-nav-btn--logout {
    color: #94a3b8;
}

body.light-mode .popover-nav-btn--logout:hover {
    color: var(--corona);
    background: rgba(36, 137, 189, 0.06);
}

body.light-mode .popover-nav-btn--logout:hover svg {
    stroke: var(--corona);
}

/* --- News Bell & Popover (Light) --- */
body.light-mode .news-bell-btn {
    color: #64748b;
    border-color: rgba(36, 137, 189, 0.25);
    animation: bellBreathingGlowLight 4s ease-in-out infinite;
}

@keyframes bellBreathingGlowLight {
    0%, 100% { box-shadow: 0 0 6px rgba(36, 137, 189, 0.1), 0 0 12px rgba(36, 137, 189, 0.04); }
    50% { box-shadow: 0 0 10px rgba(36, 137, 189, 0.2), 0 0 20px rgba(36, 137, 189, 0.08); }
}

body.light-mode .news-bell-btn::before {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .news-bell-btn:hover {
    color: var(--corona);
    box-shadow: 0 4px 24px rgba(36, 137, 189, 0.2), 0 0 40px rgba(36, 137, 189, 0.1);
}

body.light-mode .news-bell-btn .news-dot {
    background: var(--corona);
    box-shadow: 0 0 6px rgba(36, 137, 189, 0.4);
}

body.light-mode .news-popover {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 0 12px rgba(36,137,189,0.15) !important;
}

body.light-mode .news-popover-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        0 4px 16px rgba(36, 137, 189, 0.06),
        0 16px 64px rgba(36, 137, 189, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .news-popover-panel::before {
    background: linear-gradient(90deg, transparent, rgba(27, 168, 224, 0.2), rgba(36, 137, 189, 0.35), rgba(36, 137, 189, 0.2), transparent);
}

body.light-mode .news-item:hover {
    background: rgba(36, 137, 189, 0.06);
}

/* --- Notification Toggle (Light) --- */
body.light-mode .notification-toggle + .notification-toggle {
    border-top-color: rgba(36, 137, 189, 0.08);
}

body.light-mode .notification-toggle-text {
    color: #475569;
}

body.light-mode .notification-toggle-slider {
    background: rgba(36, 137, 189, 0.1);
    border-color: rgba(36, 137, 189, 0.15);
}

body.light-mode .notification-toggle-slider::after {
    background: #94a3b8;
}

body.light-mode .notification-toggle input:checked + .notification-toggle-slider {
    background: rgba(27, 168, 224, 0.2);
    border-color: #1BA8E0;
}

body.light-mode .notification-toggle input:checked + .notification-toggle-slider::after {
    background: #1BA8E0;
}

/* --- Changelog (Light) --- */
body.light-mode .changelog-entry {
    border-image: linear-gradient(180deg, #1BA8E0, #2489BD) 1;
}

body.light-mode .changelog-entry + .changelog-entry {
    border-top-color: rgba(36, 137, 189, 0.08);
}

body.light-mode .changelog-tag {
    color: #1BA8E0;
    background: rgba(27, 168, 224, 0.08);
    border-color: rgba(27, 168, 224, 0.2);
}

/* --- FAQ (Light) --- */
body.light-mode .faq-item {
    border-bottom-color: rgba(36, 137, 189, 0.08);
}

body.light-mode .faq-header {
    color: #1e293b;
}

body.light-mode .faq-header:hover {
    color: #1BA8E0;
}

body.light-mode .faq-body p {
    color: #475569;
}

/* Help & Guides — Light Mode */
body.light-mode .help-feature-card {
    background: rgba(36, 137, 189, 0.04);
    transition: none;
    animation: breathingGlow 4s ease-in-out infinite;
}
body.light-mode .help-feature-card h4 {
    color: #2489BD;
}
body.light-mode .help-feature-card p {
    color: #475569;
}
body.light-mode .help-callout {
    background: rgba(36, 137, 189, 0.04);
    transition: none;
    animation: breathingGlow 4s ease-in-out infinite;
}
body.light-mode .help-callout p {
    color: #475569;
}
body.light-mode .help-step {
    background: rgba(36, 137, 189, 0.04);
    transition: none;
    animation: breathingGlow 4s ease-in-out infinite;
}
body.light-mode .help-step-desc {
    color: #475569;
}
body.light-mode .help-nav-list li {
    color: #475569;
}

/* --- Breathing Glow Animation --- */
@keyframes breathingGlow {
    0%, 100% { box-shadow: 0 0 4px 0px rgba(36, 137, 189, 0.10); }
    50%      { box-shadow: 0 0 8px 3px rgba(36, 137, 189, 0.35); }
}

@keyframes breathingGlowDark {
    0%, 100% { box-shadow: 0 0 4px 0px rgba(74, 173, 224, 0.08); }
    50%      { box-shadow: 0 0 8px 3px rgba(74, 173, 224, 0.25); }
}

/* --- Stat Cards --- */
body.light-mode .stat-card,
body.light-mode .chart-card,
body.light-mode .export-card,
body.light-mode .help-feature-card,
body.light-mode .help-callout {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 12px rgba(36, 137, 189, 0.08), 0 4px 24px rgba(36, 137, 189, 0.04);
    animation: breathingGlowLight 4s ease-in-out infinite;
}

@keyframes breathingGlowLight {
    0%, 100% { box-shadow: 0 2px 12px rgba(36, 137, 189, 0.08), 0 4px 24px rgba(36, 137, 189, 0.04); }
    50%      { box-shadow: 0 2px 16px rgba(36, 137, 189, 0.15), 0 6px 32px rgba(36, 137, 189, 0.08); }
}

/* Thicker gradient border in light mode to match dark mode visual weight */
body.light-mode .glass-card::before,
body.light-mode .stat-card::before,
body.light-mode .chart-card::before,
body.light-mode .export-card::before,
body.light-mode .auth-box::before,
body.light-mode .splash-box::before,
body.light-mode .help-feature-card::before,
body.light-mode .help-callout::before {
    padding: 2px;
}

body.light-mode .stat-card:hover,
body.light-mode .chart-card:hover,
body.light-mode .export-card:hover,
body.light-mode .help-feature-card:hover,
body.light-mode .help-callout:hover {
    background: rgba(255, 255, 255, 0.75);
    animation: none;
    box-shadow: 0 4px 20px rgba(36, 137, 189, 0.15), 0 8px 40px rgba(36, 137, 189, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px 4px rgba(36, 137, 189, 0.3);
}

/* --- Battery Passport Navigator Cards (light mode) --- */
body.light-mode .bp-nav-card {
    background: rgba(255, 255, 255, 0.7);
}

body.light-mode #scopeBreakdownChart,
body.light-mode #countryBreakdownChart,
body.light-mode #analyticsScopeChart {
    filter: drop-shadow(0 0 16px rgba(74, 173, 224, 0.5));
}

/* --- Emissions Map --- */
body.light-mode .emissions-map-wrap {
    background: transparent;
    position: relative;
}

body.light-mode .emissions-map {
    filter: drop-shadow(0 0 3px rgba(36, 137, 189, 0.25));
}

body.light-mode .emissions-map-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at center, black 40%, transparent 95%);
    mask-image: radial-gradient(ellipse 80% 75% at center, black 40%, transparent 95%);
    z-index: 0;
    pointer-events: none;
}

body.light-mode .emissions-map-wrap > * {
    position: relative;
    z-index: 1;
}

body.light-mode .emissions-map path,
body.light-mode .emissions-map .mainland {
    fill: rgba(36, 137, 189, 0.5);
}

body.light-mode .emissions-map path:hover,
body.light-mode .emissions-map g:hover > path {
    fill: rgba(36, 137, 189, 0.2);
}

body.light-mode .emissions-map-tooltip {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(36, 137, 189, 0.3);
    color: #0F172A;
}

body.light-mode .emissions-map-legend-bar {
    background: linear-gradient(90deg, rgba(27, 168, 224, 0.1), #2489BD);
}

/* --- Tables --- */
body.light-mode .table-container {
    background: linear-gradient(#FBFCFF, #FBFCFF) padding-box, var(--grad-corona-border) border-box;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(27, 168, 224, 0.08), 0 4px 24px rgba(27, 168, 224, 0.04);
    animation: breathingGlowLight 4s ease-in-out infinite;
}

body.light-mode .table-container:hover {
    animation: none;
    box-shadow: 0 4px 20px rgba(36, 137, 189, 0.15), 0 8px 40px rgba(36, 137, 189, 0.08);
}

body.light-mode thead {
    background: linear-gradient(135deg, rgba(36, 137, 189, 0.08) 0%, rgba(36, 137, 189, 0.14) 50%, rgba(36, 137, 189, 0.08) 100%);
}

body.light-mode th {
    color: #1BA8E0;
    border-bottom: none;
}


body.light-mode .table-container--scrollable thead th {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.92) 0%, rgba(237, 245, 255, 0.92) 50%, rgba(240, 248, 255, 0.92) 100%);
}

/* Light mode scrollbar styling for scrollable tables */
body.light-mode .table-container--scrollable::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(36, 137, 189, 0.1);
    margin-top: 42px;
}

body.light-mode .table-container--scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1BA8E0, #2489BD);
    border: 2px solid rgba(241, 245, 249, 0.9);
}

body.light-mode .table-container--scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1BA8E0, #2489BD);
    border: 2px solid rgba(241, 245, 249, 0.9);
}

body.light-mode .table-container--scrollable {
    scrollbar-color: rgba(27, 168, 224, 0.6) rgba(241, 245, 249, 0.9);
}

body.light-mode td {
    border-bottom-color: rgba(36, 137, 189, 0.08);
}

body.light-mode tbody tr:hover {
    background: rgba(36, 137, 189, 0.06);
    box-shadow: inset 0 1px 0 rgba(36, 137, 189, 0.2), inset 0 -1px 0 rgba(36, 137, 189, 0.2);
}

body.light-mode #businessUnitsTableBody tr:hover {
    background: rgba(36, 137, 189, 0.06);
}

/* --- Business Unit Detail --- */
body.light-mode .bu-detail-back {
    background: rgba(36, 137, 189, 0.06);
}

body.light-mode .bu-detail-back:hover {
    background: rgba(36, 137, 189, 0.1);
}

body.light-mode .bu-meta-badge {
    background: rgba(36, 137, 189, 0.06);
}

body.light-mode .bu-water-placeholder {
    background: rgba(36, 137, 189, 0.04);
}

/* --- Forms --- */
body.light-mode .form-input,
body.light-mode .form-textarea {
    background: rgba(241, 245, 249, 0.8);
}

body.light-mode .form-select {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

body.light-mode .form-input:focus,
body.light-mode .form-textarea:focus {
    border: 1px solid transparent;
    border-image: var(--grad-corona-border) 1;
    background: #FFFFFF;
    box-shadow: 0 0 20px rgba(74, 173, 224, 0.2);
}

body.light-mode .form-select:focus {
    border: 1px solid transparent;
    border-image: var(--grad-corona-border) 1;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 0 0 20px rgba(74, 173, 224, 0.2);
}

body.light-mode .form-input:-webkit-autofill,
body.light-mode .form-input:-webkit-autofill:hover,
body.light-mode .form-input:-webkit-autofill:focus,
body.light-mode .form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(241, 245, 249, 0.8) inset !important;
    -webkit-text-fill-color: #0F172A !important;
}

/* Date input calendar icon — blue in light mode */
body.light-mode input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232489BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

/* --- Modals --- */
body.light-mode .modal {
    background: rgba(255, 255, 255, 0.6);
}

body.light-mode .modal-content {
    background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)) padding-box, var(--grad-corona-border) border-box;
    box-shadow:
        0 4px 16px rgba(36, 137, 189, 0.06),
        0 24px 80px rgba(36, 137, 189, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-mode .modal-content::before {
    background: linear-gradient(90deg, transparent, rgba(27, 168, 224, 0.06), rgba(36, 137, 189, 0.08), rgba(36, 137, 189, 0.06), transparent);
}

body.light-mode #addCalculationModal .modal-content {
    animation: modalEnter 0.25s ease-out, modalBreathingGlowLight 4s ease-in-out 0.25s infinite;
}

@keyframes modalBreathingGlowLight {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(36, 137, 189, 0.06),
            0 0 10px rgba(27, 168, 224, 0.06),
            0 0 20px rgba(36, 137, 189, 0.05),
            0 0 34px rgba(124, 200, 230, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(36, 137, 189, 0.06),
            0 0 16px rgba(27, 168, 224, 0.15),
            0 0 30px rgba(36, 137, 189, 0.12),
            0 0 48px rgba(124, 200, 230, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

body.light-mode .modal-content::after {
    background: linear-gradient(90deg, transparent, rgba(27, 168, 224, 0.3), rgba(36, 137, 189, 0.45), rgba(36, 137, 189, 0.3), transparent);
}

body.light-mode .modal-header {
    border-bottom-color: rgba(36, 137, 189, 0.1);
}

body.light-mode .modal-footer {
    border-top-color: rgba(36, 137, 189, 0.1);
}

/* --- Water Modal --- */
body.light-mode .modal-water {
    background: rgba(255, 255, 255, 0.6);
}

body.light-mode .modal-water .modal-content {
    background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)) padding-box, var(--grad-corona-border) border-box;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.1), 0 0 40px rgba(36, 137, 189, 0.08);
}

/* --- Toast --- */
body.light-mode .toast {
    background: rgba(36, 137, 189, 0.1);
    border-color: rgba(36, 137, 189, 0.6);
    box-shadow: 0 4px 20px rgba(36, 137, 189, 0.15);
    color: #1A4B6B;
}

/* --- Password Strength (light mode) --- */
body.light-mode .password-strength__bar { background: #e5e7eb; }
body.light-mode .password-strength__checklist li { color: #6b7280; }
body.light-mode .password-strength__icon { color: #9ca3af; }

/* --- Session Warning Toast (light mode) --- */
body.light-mode .session-warning-toast {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(217, 119, 6, 0.5);
    color: #92400e;
}
body.light-mode .session-warning-toast__btn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(217, 119, 6, 0.5);
    color: #92400e;
}

/* --- Theme Toggle Button --- */
body.light-mode .theme-toggle-btn {
    background: linear-gradient(#FCFBFF, #FCFBFF) padding-box, var(--grad-corona-border) border-box;
}

body.light-mode .theme-toggle-btn::before {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .theme-toggle-btn:hover {
    box-shadow: 0 4px 24px rgba(36, 137, 189, 0.2), 0 0 40px rgba(36, 137, 189, 0.1);
}

/* --- Buttons --- */
body.light-mode .btn-secondary {
    background: linear-gradient(#FCFBFF, #FCFBFF) padding-box, var(--grad-corona-border) border-box !important;
    color: #1BA8E0;
}

body.light-mode .btn-secondary:hover {
    background: rgba(36, 137, 189, 0.06);
    box-shadow: 0 4px 24px rgba(36, 137, 189, 0.1);
}

body.light-mode .btn-primary-premium {
    color: #1BA8E0;
    animation: btnPremiumGlowLight 4s ease-in-out infinite;
}

@keyframes btnPremiumGlowLight {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(27, 168, 224, 0.08),
            0 0 8px rgba(36, 137, 189, 0.06),
            0 0 12px rgba(124, 200, 230, 0.04);
    }
    50% {
        box-shadow:
            0 0 6px rgba(27, 168, 224, 0.2),
            0 0 14px rgba(36, 137, 189, 0.15),
            0 0 20px rgba(124, 200, 230, 0.1);
    }
}

body.light-mode .btn-primary-premium:hover {
    background: rgba(36, 137, 189, 0.06);
    box-shadow: 0 4px 24px rgba(36, 137, 189, 0.2), 0 0 40px rgba(36, 137, 189, 0.1);
}

body.light-mode .btn-primary-premium .btn-text {
    background: linear-gradient(135deg, #1BA8E0, #2489BD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .btn-primary-premium svg {
    stroke: #1BA8E0;
}

body.light-mode .btn-danger:hover {
    background: #B91C1C;
}

/* --- Badges (darker text for light bg) --- */
body.light-mode .badge-success {
    background: rgba(36, 137, 189, 0.12);
    color: #2489BD;
    border-color: rgba(36, 137, 189, 0.25);
}

body.light-mode .badge-scope-1 {
    background: rgba(27, 168, 224, 0.08);
    color: #2D7A2B;
    border-color: rgba(27, 168, 224, 0.2);
}

body.light-mode .badge-scope-2 {
    background: rgba(36, 137, 189, 0.08);
    color: #1A6B94;
    border-color: rgba(36, 137, 189, 0.2);
}

body.light-mode .badge-scope-3 {
    background: rgba(124, 200, 230, 0.08);
    color: #1A6B94;
    border-color: rgba(124, 200, 230, 0.25);
}

/* --- Period Selector --- */
body.light-mode .period-selector {
    background: rgba(255, 255, 255, 0.85);
    transition: none;
    animation: breathingGlow 4s ease-in-out infinite;
}

body.light-mode .period-selector select,
body.light-mode .period-selector .form-select {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.light-mode .period-selector select:focus,
body.light-mode .period-selector .form-select:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- Custom Dropdown --- */
body.light-mode .custom-select-trigger {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.light-mode .custom-select-trigger:hover {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .custom-select-dropdown {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        0 4px 16px rgba(36, 137, 189, 0.06),
        0 16px 64px rgba(36, 137, 189, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .custom-select-option:hover {
    background: rgba(36, 137, 189, 0.08);
}

body.light-mode .custom-select-option.selected {
    background: rgba(36, 137, 189, 0.1);
    color: #1BA8E0;
}

/* --- User Role Select (light mode) --- */
body.light-mode .user-role-select {
    background: rgba(255, 255, 255, 0.75);
}

body.light-mode .user-role-select:hover {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .user-role-select:focus {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(27, 168, 224, 0.25);
}

body.light-mode .user-role-select option {
    background: #FFFFFF;
    color: #1E293B;
}

/* --- Data Management Tabs --- */
body.light-mode .dm-tabs__tab:hover {
    color: #1BA8E0;
    background: transparent;
    border-bottom-color: #1BA8E0;
}

body.light-mode .dm-tabs__tab--active {
    color: #1BA8E0;
    border-bottom-color: #1BA8E0;
    background: transparent;
}

/* --- Report Filter Bar --- */
body.light-mode .report-filter-bar {
    background: rgba(255, 255, 255, 0.6);
    transition: none;
    animation: breathingGlow 4s ease-in-out infinite;
}

body.light-mode .report-filter-toggle:hover {
    background: rgba(36, 137, 189, 0.08);
}

body.light-mode .report-filter-active-count {
    background: rgba(36, 137, 189, 0.1);
    color: #1BA8E0;
    border-color: rgba(36, 137, 189, 0.2);
}

/* --- Auth & Splash --- */
@keyframes auth-glow-breathe-light {
    0%, 100% {
        box-shadow: 0 20px 80px rgba(0,0,0,0.1),
            0 0 40px rgba(36,137,189,0.12),
            0 0 80px rgba(36,137,189,0.08);
    }
    50% {
        box-shadow: 0 20px 80px rgba(0,0,0,0.1),
            0 0 50px rgba(36,137,189,0.2),
            0 0 90px rgba(36,137,189,0.14),
            0 0 15px rgba(36,137,189,0.3);
    }
}

@keyframes splash-glow-breathe-light {
    0%, 100% {
        box-shadow: 0 20px 80px rgba(0,0,0,0.1), 0 0 40px rgba(36,137,189,0.08),
            0 0 10px rgba(36,137,189,0.5), 0 0 20px rgba(36,137,189,0.25);
    }
    50% {
        box-shadow: 0 20px 80px rgba(0,0,0,0.1), 0 0 50px rgba(36,137,189,0.15),
            0 0 18px rgba(36,137,189,0.65), 0 0 36px rgba(36,137,189,0.35);
    }
}

body.light-mode .auth-box::after,
body.light-mode .splash-box::after {
    background:
        linear-gradient(90deg, transparent 30%, rgba(36,137,189,0.7) 50%, transparent 70%) 0 0 / 50% 2px no-repeat,
        linear-gradient(180deg, transparent 30%, rgba(36,137,189,0.7) 50%, transparent 70%) 100% 0 / 2px 50% no-repeat,
        linear-gradient(90deg, transparent 30%, rgba(36,137,189,0.7) 50%, transparent 70%) 0 100% / 50% 2px no-repeat,
        linear-gradient(180deg, transparent 30%, rgba(36,137,189,0.7) 50%, transparent 70%) 0 0 / 2px 50% no-repeat;
}

body.light-mode .auth-box {
    background: rgba(255, 255, 255, 0.30);
    border-width: 2px;
    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(36, 137, 189, 0.12),
        0 0 80px rgba(36, 137, 189, 0.08);
    animation: auth-glow-breathe-light 4s ease-in-out infinite;
}

body.light-mode .auth-title {
    background: linear-gradient(
        90deg,
        #1BA8E0 0%, #2489BD 15%, #7CC8E6 30%,
        #7CC8E6 32%, #fff 34%, #7CC8E6 36%,
        #2489BD 50%, #1BA8E0 65%,
        #2489BD 80%, #7CC8E6 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .auth-tab {
    color: rgba(15, 23, 42, 0.35);
}

body.light-mode .auth-tab.active {
    color: #1BA8E0;
    border-bottom-color: #1BA8E0;
}

body.light-mode .auth-tab:hover:not(.active) {
    color: rgba(15, 23, 42, 0.6);
}

body.light-mode .auth-tabs {
    border-bottom-color: rgba(36, 137, 189, 0.12);
}

body.light-mode .auth-error {
    background: rgba(36, 137, 189, 0.06);
    border-color: rgba(36, 137, 189, 0.2);
    color: #1BA8E0;
}

body.light-mode .auth-link a {
    color: #1BA8E0;
}

body.light-mode .auth-help-links a {
    color: #1BA8E0;
}

body.light-mode .signup-mode-btn.active {
    background: rgba(36, 137, 189, 0.1);
    color: #1BA8E0;
}

body.light-mode .signup-mode-btn:hover:not(.active) {
    background: rgba(36, 137, 189, 0.04);
}

body.light-mode .signup-mode-toggle {
    border-color: rgba(36, 137, 189, 0.15);
}

body.light-mode .splash-container {
    background: transparent;
}

body.light-mode .splash-box {
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.1), 0 0 40px rgba(36, 137, 189, 0.08),
        0 0 10px rgba(36, 137, 189, 0.5),
        0 0 20px rgba(36, 137, 189, 0.25);
    animation: splash-glow-breathe-light 4s ease-in-out infinite;
}

body.light-mode .splash-title {
    background: linear-gradient(
        90deg,
        #1BA8E0 0%, #2489BD 15%, #7CC8E6 30%,
        #7CC8E6 32%, #fff 34%, #7CC8E6 36%,
        #2489BD 50%, #1BA8E0 65%,
        #2489BD 80%, #7CC8E6 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .splash-loader {
    border-color: rgba(36, 137, 189, 0.15);
    border-top-color: #1BA8E0;
}

body.light-mode .spinner {
    border-color: rgba(36, 137, 189, 0.1);
    border-top-color: #1BA8E0;
}

/* --- AI Panel --- */
body.light-mode .ai-backdrop {
    background: rgba(255, 255, 255, 0.6);
}

body.light-mode .ai-chat-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-left-color: rgba(36, 137, 189, 0.12);
    box-shadow:
        -4px 0 16px rgba(36, 137, 189, 0.06),
        -4px 0 64px rgba(36, 137, 189, 0.08),
        -8px 0 20px rgba(36, 137, 189, 0.3),
        -15px 0 40px rgba(36, 137, 189, 0.15);
    animation: ai-panel-glow-breathe-light 4s ease-in-out infinite;
}

body.light-mode .ai-chat-panel::before {
    background: linear-gradient(180deg, #1590C0, #2489BD, #2489BD);
    opacity: 1;
    width: 2px;
}

body.light-mode .ai-chat-header {
    border-bottom-color: rgba(36, 137, 189, 0.1);
}

body.light-mode .ai-chat-messages {
    background: transparent;
}

body.light-mode .ai-message-content {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(36, 137, 189, 0.08);
}

body.light-mode .ai-message.user .ai-message-content {
    background: rgba(36, 137, 189, 0.06);
    border-color: rgba(36, 137, 189, 0.12);
}

body.light-mode .ai-message.user .ai-message-avatar {
    background: rgba(36, 137, 189, 0.1);
}

body.light-mode .ai-chat-input-area {
    border-top-color: rgba(36, 137, 189, 0.1);
}

body.light-mode .ai-chat-input {
    background: rgba(241, 245, 249, 0.8);
}

body.light-mode .ai-chat-input:focus {
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(36, 137, 189, 0.25);
}

/* --- AI Float Button --- */
body.light-mode .ai-float-button {
    box-shadow: -4px 0 24px rgba(36, 137, 189, 0.25);
}

body.light-mode .ai-float-button:hover {
    box-shadow: -6px 0 32px rgba(36, 137, 189, 0.4);
}

/* --- AI Assistant Page (embedded chat) --- */
body.light-mode .ai-page-header {
    background: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: rgba(36, 137, 189, 0.1);
}

body.light-mode .ai-page-messages {
    background: transparent !important;
}

body.light-mode .ai-page-input-area {
    background: rgba(255, 255, 255, 0.5) !important;
    border-top-color: rgba(36, 137, 189, 0.1);
}

/* --- Gradient text uses darker stops in light mode --- */
body.light-mode .stat-value,
body.light-mode .modal-title,
body.light-mode .ai-chat-title {
    background: linear-gradient(135deg, #1BA8E0 0%, #2489BD 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .page-title {
    background: linear-gradient(135deg, #1BA8E0, #2489BD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   AI INSIGHTS — Inline Dashboard Section
   ================================================================ */

.ai-insights-popover-anchor {
    position: relative;
}

.ai-insights-popover {
    display: none;
    position: fixed;
    top: auto;
    right: 1rem;
    width: 380px;
    max-width: calc(100vw - 2rem);
    background: rgba(10, 10, 18, 0.70);
    backdrop-filter: blur(4px);
    border: 1px solid transparent;
    border-image: var(--grad-corona-border) 1;
    border-radius: 0;
    padding: var(--space-4);
    z-index: var(--z-dropdown);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5),
                0 0 12px rgba(74, 173, 224, 0.45),
                0 0 24px rgba(74, 173, 224, 0.2);
    animation: insightsPopoverIn 0.2s ease-out;
}

.ai-insights-popover.open {
    display: block;
}

@keyframes insightsPopoverIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ai-insights-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(36, 137, 189, 0.1);
}

.ai-insights-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--corona-bright);
    letter-spacing: 0.02em;
}

.ai-insights-header-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-insights-header-btn:hover {
    color: var(--corona);
}

.ai-insights-header-btn.ai-insights-refresh:hover {
    transform: rotate(90deg);
}

.ai-insights-header-btn svg {
    width: 14px;
    height: 14px;
}

.ai-insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ai-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    opacity: 0;
    transform: translateX(-8px);
    animation: insightSlideIn 0.3s ease-out forwards;
}

.ai-insight-icon {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: var(--corona-bright);
    margin-top: 0.45rem;
}

.ai-insight-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.ai-insight-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

@keyframes insightSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ai-insights-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.ai-insights-dots {
    display: flex;
    gap: 4px;
}

.ai-insights-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--corona);
    animation: insightDotPulse 1.2s ease-in-out infinite;
}

.ai-insights-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-insights-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes insightDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

.ai-insights-empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.ai-insights-error {
    color: var(--danger);
    font-size: var(--text-sm);
}

body.light-mode .ai-insights-popover {
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 0 10px 5px rgba(36, 137, 189, 0.25);
}

body.light-mode .ai-insights-popover-header {
    border-bottom-color: rgba(36, 137, 189, 0.1);
}

body.light-mode .ai-insights-title {
    color: var(--corona);
}

body.light-mode .ai-insight-icon {
    background: var(--corona);
}

body.light-mode #dashboardPage > .page-header .btn-secondary {
    background: linear-gradient(#FCFBFF, #FCFBFF) padding-box, var(--grad-corona-border) border-box;
    color: var(--corona);
}

/* Period Comparison Delta Values */
.period-delta-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 700;
}

.period-delta-value.positive {
    color: var(--danger);
}

.period-delta-value.negative {
    color: var(--success);
}

.period-delta-value.neutral {
    color: var(--text-muted);
}

.stat-card.nested {
    animation: breathingGlowDark 4s ease-in-out infinite;
}

.stat-card.nested {
    background: transparent;
}

.stat-card.nested:hover {
    box-shadow: 0 0 20px var(--corona-glow);
}

body.light-mode .stat-card.nested {
    background: rgba(255, 255, 255, 0.4);
    animation: breathingGlowLight 4s ease-in-out infinite;
}

body.light-mode .compliance-gap-item {
    background: linear-gradient(#FCFBFF, #FCFBFF) padding-box, var(--grad-corona-border) border-box;
}