/* =============================================================================
   ECLIPSEFAN THEME - MAP & CONTROLS
   =============================================================================
   Dark/Astro theme overrides for map tiles, Leaflet controls, control panels,
   geolocate button, and skyline toggle.
   Depends on: design-tokens.css
   ============================================================================= */

/* =============================================================================
   13. MAP TILE FILTERS (for themes)
   ============================================================================= */

/* Dark background for map container to avoid white flash during tile loading */
[data-theme="dark"] .leaflet-container,
[data-theme="dark"] #map {
    background: #1a1a1a;
}

[data-theme="astro"] .leaflet-container,
[data-theme="astro"] #map {
    background: #000;
}

/* Dark map tiles filter for Astro mode */
[data-theme="astro"] .leaflet-tile-pane {
    filter:
        brightness(0.6)
        sepia(1)
        hue-rotate(-20deg)
        saturate(0.8)
        contrast(1.1);
}

/* Dim map overlays (KML lines, markers, etc.) in Dark mode */
[data-theme="dark"] .leaflet-overlay-pane,
[data-theme="dark"] .leaflet-marker-pane {
    filter: brightness(0.7) saturate(0.8);
}

/* Apply red filter to map overlays (KML lines, markers, etc.) in Astro mode */
[data-theme="astro"] .leaflet-overlay-pane,
[data-theme="astro"] .leaflet-marker-pane,
[data-theme="astro"] .leaflet-shadow-pane {
    filter:
        brightness(0.5)
        sepia(1)
        hue-rotate(-20deg)
        saturate(1.2);
}

/* Ensure map controls adapt to theme */
.leaflet-control {
    background-color: var(--color-map-control-bg) !important;
    border-color: var(--color-map-control-border) !important;
    color: var(--color-text-primary) !important;
}

.leaflet-control a {
    color: var(--color-text-primary) !important;
    background-color: var(--color-map-control-bg) !important;
}

.leaflet-control a:hover {
    background-color: var(--color-bg-tertiary) !important;
}

/* Scale control — même style que les boutons +/- (leaflet-bar) */
.leaflet-control-scale-line {
    background: var(--color-map-control-bg) !important;
    color: var(--color-text-primary) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65) !important;
    text-shadow: none !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
}

/* Attribution control theming for dark/astro modes */
[data-theme="dark"] .leaflet-control-attribution,
[data-theme="astro"] .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.7) !important;
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .leaflet-control-attribution a,
[data-theme="astro"] .leaflet-control-attribution a {
    color: var(--color-text-secondary) !important;
}

/* =============================================================================
   14. CONTROL PANEL THEMING
   =============================================================================
   Overrides for the map control panels in Dark and Astro modes
   ============================================================================= */

/* Dark mode panel overrides */
[data-theme="dark"] .custom-layers-control .control-panel,
[data-theme="dark"] .custom-layers-control .layers-panel {
    background: var(--color-bg-overlay);
    color: var(--color-text-primary);
}

[data-theme="dark"] .custom-layers-control .layers-title,
[data-theme="dark"] .custom-layers-control .panel-title,
[data-theme="dark"] .custom-layers-control .time-display {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-theme="dark"] .custom-layers-control .panel-section-title {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .custom-layers-control .layers-radio,
[data-theme="dark"] .custom-layers-control .layers-checkbox,
[data-theme="dark"] .custom-layers-control .shadow-toggle,
[data-theme="dark"] .custom-layers-control .panel-checkbox {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .custom-layers-control .layers-divider,
[data-theme="dark"] .custom-layers-control .panel-section {
    border-color: var(--color-border);
}

[data-theme="dark"] .custom-layers-control .legend-opacity label,
[data-theme="dark"] .custom-layers-control .panel-slider-row span {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .custom-layers-control .legend-credit {
    color: var(--color-text-tertiary);
    border-color: var(--color-border);
}

[data-theme="dark"] .custom-layers-control .legend-credit a {
    color: var(--color-accent);
}

[data-theme="dark"] .custom-layers-control .btn-row button {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .custom-layers-control .btn-row button:hover {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .custom-layers-control .btn-row button.active {
    background: var(--color-accent);
    color: var(--color-button-primary-text);
    border-color: var(--color-accent-hover);
}

[data-theme="dark"] .custom-layers-control .help-btn-inline {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .custom-layers-control .help-btn-inline:hover {
    background: var(--color-bg-secondary);
}

/* Astro mode panel overrides - red spectrum only */
[data-theme="astro"] .custom-layers-control .control-panel,
[data-theme="astro"] .custom-layers-control .layers-panel {
    background: var(--color-bg-overlay);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .custom-layers-control .layers-title,
[data-theme="astro"] .custom-layers-control .panel-title,
[data-theme="astro"] .custom-layers-control .time-display {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-theme="astro"] .custom-layers-control .panel-section-title {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .custom-layers-control .layers-radio,
[data-theme="astro"] .custom-layers-control .layers-checkbox,
[data-theme="astro"] .custom-layers-control .shadow-toggle,
[data-theme="astro"] .custom-layers-control .panel-checkbox {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .custom-layers-control .layers-divider,
[data-theme="astro"] .custom-layers-control .panel-section {
    border-color: var(--color-border);
}

[data-theme="astro"] .custom-layers-control .legend-opacity label,
[data-theme="astro"] .custom-layers-control .panel-slider-row span {
    color: var(--color-text-tertiary);
}

[data-theme="astro"] .custom-layers-control .legend-credit {
    color: var(--color-text-tertiary);
    border-color: var(--color-border);
}

[data-theme="astro"] .custom-layers-control .legend-credit a {
    color: var(--color-accent);
}

[data-theme="astro"] .custom-layers-control .btn-row button {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="astro"] .custom-layers-control .btn-row button:hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .custom-layers-control .btn-row button.active {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-accent);
}

[data-theme="astro"] .custom-layers-control .help-btn-inline {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="astro"] .custom-layers-control .help-btn-inline:hover {
    background: var(--color-bg-secondary);
}

/* Astro mode SVG icons - make them red */
[data-theme="astro"] .custom-layers-control .control-panel svg,
[data-theme="astro"] .custom-layers-control .layers-panel svg {
    stroke: var(--color-text-primary);
}

/* Astro mode form inputs - red accent */
[data-theme="astro"] .custom-layers-control input[type="checkbox"],
[data-theme="astro"] .custom-layers-control input[type="radio"] {
    accent-color: var(--color-accent);
}

/* Dark mode form inputs */
[data-theme="dark"] .custom-layers-control input[type="checkbox"],
[data-theme="dark"] .custom-layers-control input[type="radio"] {
    accent-color: var(--color-accent);
}

/* Astro mode range sliders */
[data-theme="astro"] .custom-layers-control input[type="range"] {
    accent-color: var(--color-accent);
}

[data-theme="dark"] .custom-layers-control input[type="range"] {
    accent-color: var(--color-accent);
}


/* Dark mode sampler images - dim slightly */
[data-theme="dark"] .custom-layers-control .layer-card img {
    filter: brightness(0.7) saturate(0.8);
}

/* Astro mode sampler images - red night vision */
[data-theme="astro"] .custom-layers-control .layer-card img {
    filter:
        brightness(0.5)
        sepia(1)
        hue-rotate(-20deg)
        saturate(1.2);
}

/* Geolocate button */
[data-theme="dark"] .geolocate-btn {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .geolocate-btn:hover,
[data-theme="dark"] .geolocate-btn:active {
    background: var(--color-bg-tertiary);
}

[data-theme="astro"] .geolocate-btn {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .geolocate-btn:hover,
[data-theme="astro"] .geolocate-btn:active {
    background: var(--color-bg-tertiary);
}

/* --- Dark/Astro mode: Skyline toggle button --- */
[data-theme="dark"] .skyline-toggle {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .skyline-toggle:hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .skyline-toggle {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="astro"] .skyline-toggle:hover {
    background: var(--color-bg-secondary);
}