/* ==========================================================
   app-darkmode.css – Dark Mode supplementary overrides
   Primary dark-mode theming is handled via CSS custom properties
   in style.css under [data-bs-theme="dark"].
   This file handles only edge cases that tokens cannot cover.
   ========================================================== */

/* Cookie Consent – Dark mode panel refinements */
[data-bs-theme="dark"] #cookies-policy { color: var(--text-primary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__alert {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #cookies-policy .cookies__expandable {
    background-color: var(--bg-subtle) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookies__save {
    border-top-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookies__title { color: var(--text-primary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__intro p { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__label { color: var(--text-primary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__info { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__definitions { color: var(--text-tertiary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__name,
[data-bs-theme="dark"] #cookies-policy .cookies__duration { color: var(--text-tertiary) !important; }
[data-bs-theme="dark"] #cookies-policy .cookies__description { color: var(--text-tertiary) !important; }

[data-bs-theme="dark"] #cookies-policy .cookies__details {
    color: var(--accent) !important;
}
[data-bs-theme="dark"] #cookies-policy .cookies__details:hover {
    color: var(--accent-hover) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookies__btn {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookiesBtn__link,
[data-bs-theme="dark"] #cookies-policy .cookiesBtn,
[data-bs-theme="dark"] #cookies-policy button {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookiesBtn__link:hover,
[data-bs-theme="dark"] #cookies-policy .cookiesBtn:hover,
[data-bs-theme="dark"] #cookies-policy button:hover {
    background-color: var(--accent-hover) !important;
}

[data-bs-theme="dark"] #cookies-policy .cookies__category input[type="checkbox"] + .cookies__box:after {
    background-color: var(--accent);
}

[data-bs-theme="dark"] #cookies-policy .cookies__category input[type="checkbox"]:checked + .cookies__box:after {
    background-color: var(--accent-hover);
}

[data-bs-theme="dark"] #cookies-policy .cookies__category input[type="checkbox"] + .cookies__box:before {
    background-color: #ffffff;
}

/* ==========================================================
   Usage tab – cards, chart cards, Leaflet map, spinner
   Bootstrap's own --bs-card-bg overrides our var(--bg-surface)
   when data-bs-theme="dark" is set, so we re-assert ours.
   ========================================================== */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .chart-card,
[data-bs-theme="dark"] .card.h-100 {
    --bs-card-bg: var(--bg-surface);
    --bs-card-color: var(--text-primary);
    --bs-card-border-color: var(--border-subtle);
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .chart-card .card-header {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .card-header i {
    color: var(--text-tertiary) !important;
}

[data-bs-theme="dark"] .card-body {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* Bootstrap utility colour overrides used inside the cards */
[data-bs-theme="dark"] .bg-transparent {
    background-color: transparent !important;
}

/* Loading spinner shown while the map geocodes */
[data-bs-theme="dark"] #mapLoading {
    background-color: var(--bg-surface);
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] #mapLoading .text-muted {
    color: var(--text-secondary) !important;
}

/* Leaflet map – proper dark theme via the classic invert+hue-rotate trick.
   Renders OpenStreetMap tiles inverted so light backgrounds become dark while
   colours stay roughly intact (water-blue stays blue, parks stay green, etc.). */
[data-bs-theme="dark"] .leaflet-container {
    background-color: #1a1d21 !important;
}
[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.85);
}
/* Markers, popups, controls live above the tile pane and should NOT be inverted */
[data-bs-theme="dark"] .leaflet-marker-pane,
[data-bs-theme="dark"] .leaflet-shadow-pane,
[data-bs-theme="dark"] .leaflet-overlay-pane,
[data-bs-theme="dark"] .leaflet-popup-pane,
[data-bs-theme="dark"] .leaflet-control-container {
    filter: none;
}
[data-bs-theme="dark"] .leaflet-control-zoom a,
[data-bs-theme="dark"] .leaflet-bar a {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
[data-bs-theme="dark"] .leaflet-control-zoom a:hover,
[data-bs-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--bg-subtle) !important;
}
[data-bs-theme="dark"] .leaflet-control-attribution {
    background-color: rgba(22, 22, 24, 0.8) !important;
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .leaflet-control-attribution a {
    color: var(--accent) !important;
}
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .leaflet-popup-close-button {
    color: var(--text-secondary) !important;
}