/* =========================================================
   DARK MODE THEME — COMPLETE
   ========================================================= */

/* Dark theme variables */
[data-theme="dark"] {
    /* Core palette — dark theme */
    --bg: #0f1419;
    --panel: rgba(20, 25, 40, 0.96);
    --panel-border: rgba(100, 150, 255, 0.08);
    --text: #e8edf8;
    --muted: #8a95b5;

    /* Brand colors (adjusted for dark) */
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: rgba(59, 130, 246, 0.12);
    --primary-glow: rgba(59, 130, 246, 0.25);
    --accent: #06b6d4;
    --accent-soft: rgba(6, 182, 212, 0.12);

    /* Topbar — deep dark with subtle glow */
    --topbar-bg: linear-gradient(135deg, #0a0f1a 0%, #111927 50%, #0d1929 100%);
    --topbar-border: rgba(100, 150, 255, 0.1);
    --topbar-text: #e8edf8;
    --topbar-muted: rgba(100, 150, 255, 0.6);

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Shadows (darker, less intense) */
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* =========================================================
   BACKGROUND COLORS
   ========================================================= */

[data-theme="dark"] body,
[data-theme="dark"] html {
    background: var(--bg);
    color: var(--text);
}

[data-theme="dark"] .panel-section {
    background: var(--panel);
    border-color: var(--panel-border);
}

[data-theme="dark"] .info-card {
    background: rgba(30, 40, 65, 0.7);
    border-color: rgba(100, 150, 255, 0.1);
    color: var(--text);
}

[data-theme="dark"] .info-card:hover {
    background: rgba(40, 55, 85, 0.8);
}

[data-theme="dark"] .info-label {
    color: var(--muted);
}

[data-theme="dark"] .info-value {
    color: var(--text);
}

/* =========================================================
   TEXT COLORS
   ========================================================= */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text);
}

[data-theme="dark"] a {
    color: var(--primary);
}

[data-theme="dark"] a:hover {
    color: var(--primary-hover);
}

/* =========================================================
   INTERACTIVE ELEMENTS
   ========================================================= */

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #3b82f6 100%);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .btn-secondary {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-hover);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(100, 150, 255, 0.15);
    color: var(--text);
}

[data-theme="dark"] input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(100, 150, 255, 0.3);
}

/* =========================================================
   STATUS COLORS
   ========================================================= */

[data-theme="dark"] .status-banner.loading {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .status-banner.error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .status-banner.success {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .status-banner.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .empty-state {
    background: linear-gradient(135deg, rgba(30, 40, 65, 0.5) 0%, rgba(40, 55, 85, 0.5) 100%);
    border-color: rgba(100, 150, 255, 0.15);
}

/* =========================================================
   COMPONENTS
   ========================================================= */

[data-theme="dark"] .topbar {
    background: var(--topbar-bg);
    border-bottom-color: var(--topbar-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .nav-btn {
    color: var(--topbar-muted);
}

[data-theme="dark"] .nav-btn:hover,
[data-theme="dark"] .nav-btn.active {
    color: var(--topbar-text);
}

[data-theme="dark"] .panel-title-row {
    color: var(--text);
    border-color: var(--panel-border);
}

[data-theme="dark"] .context-chip {
    background: rgba(100, 150, 255, 0.1);
    border-color: rgba(100, 150, 255, 0.15);
    color: var(--text);
}

/* =========================================================
   MAPS & LAYERS
   ========================================================= */

[data-theme="dark"] .leaflet-container {
    background: linear-gradient(135deg, #0d1419 0%, #111927 100%);
}

[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: var(--panel);
    border-color: var(--panel-border);
}

[data-theme="dark"] .leaflet-popup-content {
    color: var(--text);
}

[data-theme="dark"] .leaflet-control {
    background: var(--panel);
    border-color: var(--panel-border);
}

[data-theme="dark"] .leaflet-control a {
    color: var(--text);
}

[data-theme="dark"] .leaflet-control a:hover {
    background: rgba(100, 150, 255, 0.1);
    color: var(--primary-hover);
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.2);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 150, 255, 0.4);
}

/* =========================================================
   CHARTS & DATA VIZ
   ========================================================= */

[data-theme="dark"] .chart-container {
    background: rgba(30, 40, 65, 0.5);
    border-color: var(--panel-border);
}

/* =========================================================
   TRANSITIONS
   ========================================================= */

html {
    scroll-behavior: smooth;
}

/* Smooth theme transition */
body,
.btn,
.panel-section,
.info-card,
input,
textarea,
select {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease;
}

/* Prevent flashing when toggling theme */
[data-theme-transitioning] * {
    transition: none !important;
}

/* =========================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================= */

@media (prefers-contrast: more) {
    [data-theme="dark"] {
        --text: #ffffff;
        --muted: #b0c4de;
        --panel: rgba(10, 15, 30, 0.98);
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] body,
    [data-theme="dark"] .btn,
    [data-theme="dark"] .panel-section {
        transition: none;
    }
}
/* =========================================================
   DARK MODE FIX — REAL WHITE BACKGROUNDS
   ========================================================= */

[data-theme="dark"] .group,
[data-theme="dark"] .info-card,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .dl-menu,
[data-theme="dark"] .float-win,
[data-theme="dark"] .legend,
[data-theme="dark"] .basemap-options,
[data-theme="dark"] .sd-section,
[data-theme="dark"] .sd-hero,
[data-theme="dark"] .story-hero,
[data-theme="dark"] .sd-adv-card,
[data-theme="dark"] .sd-summary,
[data-theme="dark"] .sd-chart-msg {
    background: rgba(18, 27, 48, 0.96) !important;
    border-color: rgba(100, 150, 255, 0.16) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] .group .title,
[data-theme="dark"] .group .items,
[data-theme="dark"] .item,
[data-theme="dark"] .item .name,
[data-theme="dark"] .mw-layers-title,
[data-theme="dark"] .details-subtitle,
[data-theme="dark"] .empty-state h3,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] .sd-section-title,
[data-theme="dark"] .sd-section-kicker,
[data-theme="dark"] .sd-label,
[data-theme="dark"] .sd-hint,
[data-theme="dark"] .sd-hero-title,
[data-theme="dark"] .sd-hero-text {
    color: #e8edf8 !important;
}

[data-theme="dark"] .item .eye,
[data-theme="dark"] .chart-reset-btn,
[data-theme="dark"] .mw-chart-btn,
[data-theme="dark"] .mw-legend-chip,
[data-theme="dark"] .sd-chip,
[data-theme="dark"] .basemap-toggle,
[data-theme="dark"] .basemap-mini,
[data-theme="dark"] .btn,
[data-theme="dark"] .icon-btn {
    background: rgba(24, 36, 62, 0.92) !important;
    border-color: rgba(100, 150, 255, 0.16) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] .item .eye:hover,
[data-theme="dark"] .group .title:hover,
[data-theme="dark"] .chart-reset-btn:hover,
[data-theme="dark"] .mw-chart-btn:hover,
[data-theme="dark"] .mw-legend-chip:hover,
[data-theme="dark"] .sd-chip:hover,
[data-theme="dark"] .basemap-toggle:hover {
    background: rgba(34, 52, 86, 0.96) !important;
    color: #ffffff !important;
}

[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .sd-select,
[data-theme="dark"] .sd-input {
    background: rgba(24, 36, 62, 0.92) !important;
    border-color: rgba(100, 150, 255, 0.18) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] select:hover,
[data-theme="dark"] input:hover,
[data-theme="dark"] textarea:hover,
[data-theme="dark"] .sd-select:hover,
[data-theme="dark"] .sd-input:hover,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .sd-select:focus,
[data-theme="dark"] .sd-input:focus {
    background: rgba(30, 45, 75, 0.96) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip,
[data-theme="dark"] .leaflet-control-attribution {
    background: rgba(18, 27, 48, 0.96) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] .leaflet-bar a {
    background: rgba(24, 36, 62, 0.96) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] .leaflet-bar a:hover {
    background: rgba(34, 52, 86, 0.96) !important;
}
/* =========================================================
   DARK MODE FIX — STORY TEXT CARDS
   ========================================================= */

[data-theme="dark"] .story-panel-card {
    background: rgba(18, 27, 48, 0.90) !important;
    border-color: rgba(100, 150, 255, 0.20) !important;
    color: #e8edf8 !important;
}

[data-theme="dark"] .story-panel-title,
[data-theme="dark"] .story-panel-card .story-panel-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .story-panel-text,
[data-theme="dark"] .story-panel-card .story-panel-text {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .story-panel-kicker {
    color: #38bdf8 !important;
}

[data-theme="dark"] .story-panel-stat {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    color: #7dd3fc !important;
}

/* Dernière slide */
[data-theme="dark"] .story-panel:last-child .story-panel-card,
[data-theme="dark"] .story-panel:last-child .story-panel-title,
[data-theme="dark"] .story-panel:last-child .story-panel-text {
    color: #f8fafc !important;
}