/*
 * Loading spinners for the dashboard. Pure CSS, no callbacks needed.
 * Dash loads every .css in assets/ automatically.
 *
 * 1. First visit, before Dash has started: Dash shows <div class="_dash-loading">Loading...</div>.
 * 2. While the map and markers are being built: Dash marks #map-holder with data-dash-is-loading.
 * 3. While a station's statistics are being prepared: same for #station-info.
 *
 * Spinners 2 and 3 appear only if loading takes longer than a moment, so quick updates don't flash.
 */

:root {
    --spinner-size: 48px;
    --spinner-ring: rgba(0, 51, 102, 0.15);
    --spinner-arc: #003366;
}

@keyframes n4c-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes n4c-appear { to { opacity: 1; } }

/* ---------- 1. first page load ---------- */
._dash-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #ffffff;
    color: transparent;          /* hide Dash's "Loading..." text */
    font-size: 0;
}
._dash-loading::before {
    content: "Loading the dashboard";
    position: absolute;
    top: calc(50% + var(--spinner-size));
    left: 50%;
    transform: translateX(-50%);
    color: #003366;
    font: 15px/1.4 sans-serif;
    white-space: nowrap;
}

/* the spinning ring, shared by all three cases */
._dash-loading::after,
#map-holder[data-dash-is-loading="true"]::after,
body:has(#station-info[data-dash-is-loading="true"])::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--spinner-size);
    height: var(--spinner-size);
    box-sizing: border-box;
    border: 5px solid var(--spinner-ring);
    border-top-color: var(--spinner-arc);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: n4c-spin 0.8s linear infinite;
}

/* ---------- 2. map and markers being built ---------- */
#map-holder[data-dash-is-loading="true"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1500;               /* above the map and tabs, below the station panel (2000) */
    background: rgba(255, 255, 255, 0.6);
}
#map-holder[data-dash-is-loading="true"]::before,
#map-holder[data-dash-is-loading="true"]::after {
    opacity: 0;
}
#map-holder[data-dash-is-loading="true"]::before {
    animation: n4c-appear 0s 0.3s forwards;
}
#map-holder[data-dash-is-loading="true"]::after {
    z-index: 1501;
    animation: n4c-spin 0.8s linear infinite, n4c-appear 0s 0.3s forwards;
}

/* ---------- 3. station statistics being prepared: shown in the side panel's place ---------- */
body:has(#station-info[data-dash-is-loading="true"])::before {
    content: "";
    position: fixed;
    top: 69px;                   /* below the header */
    right: 0;
    bottom: 0;
    width: min(480px, 100%);
    z-index: 2100;
    background: #FFFFFF;
    box-shadow: -8px 0 24px rgba(0, 31, 61, 0.18);
    opacity: 0;
    animation: n4c-appear 0s 0.15s forwards;
}
body:has(#station-info[data-dash-is-loading="true"])::after {
    z-index: 2101;
    left: calc(100% - min(240px, 50%));   /* centre of the panel */
    opacity: 0;
    animation: n4c-spin 0.8s linear infinite, n4c-appear 0s 0.15s forwards;
}

/* people who prefer less motion get a slower spin */
@media (prefers-reduced-motion: reduce) {
    ._dash-loading::after,
    #map-holder[data-dash-is-loading="true"]::after,
    body:has(#station-info[data-dash-is-loading="true"])::after {
        animation-duration: 2.5s;
    }
}