/* views/loadingView.css */

/* Das Haupt-Overlay: Nur der Spinner, kein grauer Vollbild-Hintergrund */
.loading-overlay {
    position: fixed;
    left: 50%;
    bottom: 218px; /* Nähe Forecast-Box, bei Bedarf anpassen */
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 9999; /* Über allen Leaflet-Layern */
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

/* Der Modifikator für den aktiven Zustand */
.loading-overlay--visible {
    opacity: 1;
}

/* Der reine CSS-Spinner (Keine Bilder nötig!) */
.loading-overlay__spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid transparent; /* transparent Rahmen, nur Top-Farbe sichtbar */
    border-top-color: #0078A8; /* Akzentfarbe */
    box-shadow: none;
    animation: spin 0.8s linear infinite;
}

/* Modal state: center the overlay and allow it to block interaction */
.loading-overlay--modal {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 10001; /* Above backdrop (9999) and notification (10000) */
}

.loading-overlay--visible.loading-overlay--modal {
    opacity: 1;
}

/* Remove default browser focus ring when element is focused programmatically */
.loading-overlay:focus {
    outline: none;
}

/* Dedicated backdrop for the loading spinner modal */
.loading-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10000; /* under the modal overlay (10001) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.loading-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Die Rotations-Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}