/* Dark theme overrides for loading indicators and map popups.
   Scoped to data-theme or data-bs-theme = dark so theme.js switching works. */

/* Core dark theme variables and shared controls */
[data-theme="dark"],
[data-bs-theme="dark"] {
    --bg: #212529;
    --fg: #e6e6e6;
    --link: #62b0ff;
    --surface-1: #1f2937;
    --surface-2: #111827;
    --border: #374151;
    --panel-bg: rgba(13, 17, 23, 0.65);
    --panel-border: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .filter-toggle,
[data-bs-theme="dark"] .filter-toggle {
    background-color: var(--surface-1);
    border-color: var(--border);
}

[data-theme="dark"] .glass-effect,
[data-theme="dark"] .floating-panel,
[data-bs-theme="dark"] .glass-effect,
[data-bs-theme="dark"] .floating-panel {
    background: var(--panel-bg);
    border-color: var(--panel-border);
    color: var(--fg);
}

/* Keep focus ring visible on dark */
[data-theme="dark"] .btn:focus,
[data-theme="dark"] .btn:active:focus,
[data-theme="dark"] .btn-link.nav-link:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-check-input:focus,
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #0b1015, 0 0 0 0.25rem #258cfb;
}

[data-theme="dark"] .loading-indicator,
[data-bs-theme="dark"] .loading-indicator {
    color: #e5e7eb; /* text */
    transition: background 160ms ease, color 160ms ease;
}

    /* Bootstrap spinner */
    [data-theme="dark"] .loading-indicator .spinner-border,
    [data-bs-theme="dark"] .loading-indicator .spinner-border {
        color: #ffffff; /* spinner color */
    }

    /* Generic custom spinner fallback */
    [data-theme="dark"] .loading-indicator .spinner,
    [data-bs-theme="dark"] .loading-indicator .spinner {
        width: 2rem;
        height: 2rem;
        border: 0.25rem solid rgba(255,255,255,0.12);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spinner-rotate 0.75s linear infinite;
    }

@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}


/* Map popup content (Azure Maps or custom popup) */
[data-theme="dark"] .map-popup-content,
[data-bs-theme="dark"] .map-popup-content,
[data-theme="dark"] .popup,
[data-bs-theme="dark"] .popup,
[data-theme="dark"] .popup-content,
[data-bs-theme="dark"] .popup-content {
    background-color: #0b1220; /* very dark */
    color: #e6eef8; /* light text */
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 20px rgba(0,0,0,0.7);
    border-radius: 6px;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}


    /* Links / buttons inside popup */
    [data-theme="dark"] .map-popup-content a,
    [data-bs-theme="dark"] .map-popup-content a,
    [data-theme="dark"] .popup a,
    [data-bs-theme="dark"] .popup a {
        color: #90cdf4; /* blue-ish for contrast */
    }

    /* Popup close/controls */
    [data-theme="dark"] .map-popup-content .popup-close,
    [data-bs-theme="dark"] .map-popup-content .popup-close,
    [data-theme="dark"] .popup .close,
    [data-bs-theme="dark"] .popup .close {
        color: #cbd5e1;
        opacity: 0.95;
    }

    /* If popup triangles/arrows exist, tint them to match */
    [data-theme="dark"] .popup .popup-arrow,
    [data-bs-theme="dark"] .popup .popup-arrow,
    [data-theme="dark"] .map-popup-content::after,
    [data-bs-theme="dark"] .map-popup-content::after {
        filter: brightness(0.95) contrast(0.95);
    }

/* Small accessibility tweak: ensure text on spinner overlays is readable */
[data-theme="dark"] .loading-indicator .loading-text,
[data-bs-theme="dark"] .loading-indicator .loading-text {
    color: #e6eef8;
    text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}



/* ion rangeslider */

[data-theme="dark"] .irs--round .irs-line,
[data-bs-theme="dark"] .irs--round .irs-line {
    background-color: #2f3338;
}

[data-theme="dark"] .irs--round .irs-grid-pol,
[data-bs-theme="dark"] .irs--round .irs-grid-pol {
    background-color: #495057;
}

[data-theme="dark"] .irs--round .irs-grid-text,
[data-bs-theme="dark"] .irs--round .irs-grid-text {
    color: #6c757d;
}

[data-theme="dark"] .irs--round .irs-handle.state_hover, .irs--round .irs-handle:hover,
[data-bs-theme="dark"] .irs--round .irs-handle.state_hover, .irs--round .irs-handle:hover {
    background-color: #2a3037;
}

[data-theme="dark"] .irs--round .irs-handle,
[data-bs-theme="dark"] .irs--round .irs-handle {
    background-color: #212529;
}


/* Paginator navigation buttons (light theme) */
nav button:not([disabled]):hover {
    background-color: #eee;
}

nav button:not([disabled]):active {
    background-color: #aaa;
}


/* Paginator navigation buttons (dark theme) */
[data-theme="dark"] nav button:not([disabled]):hover,
[data-bs-theme="dark"] nav button:not([disabled]):hover {
    background-color: #3a4147;
}

[data-theme="dark"] nav button:not([disabled]):active,
[data-bs-theme="dark"] nav button:not([disabled]):active {
    background-color: #56606a;
}

/* QuickGrid paginator arrow glyphs are CSS background-image SVGs */
[data-theme="dark"] .paginator .go-previous,
[data-theme="dark"] .paginator .go-next,
[data-bs-theme="dark"] .paginator .go-previous,
[data-bs-theme="dark"] .paginator .go-next {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path fill="%23e6eef8" d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z" /></g></svg>');
}

[data-theme="dark"] .paginator .go-first,
[data-theme="dark"] .paginator .go-last,
[data-bs-theme="dark"] .paginator .go-first,
[data-bs-theme="dark"] .paginator .go-last {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path fill="%23e6eef8" d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect fill="%23e6eef8" height="2" width="20" y="20.5" x="2"/></g></svg>');
}

/* SVG infill for paginator buttons (dark theme) #e6e6e6*/
[data-theme="dark"] nav button:not([disabled]):hover svg,
[data-bs-theme="dark"] nav button:not([disabled]):hover svg,
[data-theme="dark"] nav button:not([disabled]):hover svg path,
[data-bs-theme="dark"] nav button:not([disabled]):hover svg path {
    fill: #e6eef8;
}

[data-theme="dark"] nav button:not([disabled]):active svg,
[data-bs-theme="dark"] nav button:not([disabled]):active svg,
[data-theme="dark"] nav button:not([disabled]):active svg path,
[data-bs-theme="dark"] nav button:not([disabled]):active svg path {
    fill: #cbd5e1;
}