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

[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;
}

/* 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;
}