/**
 * Bibercare CMS - SPA Loading Overlay (Content-Bereich)
 * Datei: public/assets/css/modules/spa-loader.css
 *
 * Funktionen:
 * - Loading-Spinner NUR im Content-Bereich (Header/Nav/Footer bleiben sichtbar)
 * - Overlay mit leichtem Hintergrund über .main-content
 * - Fade-In/Out Animation (opacity + visibility)
 * - Wird gesteuert durch Klasse .loaded (sichtbar → unsichtbar)
 * - Zeigt sich automatisch beim ersten Laden (kein JS nötig für Anzeige)
 *
 * Struktur in index.php:
 *   <div class="spa-content-wrapper">        ← position: relative
 *       <div class="spa-loader" id="spaLoader"> ← position: absolute (Content-Overlay)
 *       <main class="main-content">           ← Seiteninhalt
 *   </div>
 *
 * WICHTIG: Der Loader ist NICHT mehr position: fixed über die gesamte Seite.
 * Er deckt nur den Content-Bereich ab. Header, Navigation und Footer
 * bleiben immer sichtbar → kein weißes Vollbild-Blinken bei SPA-Navigation.
 *
 * Steuerung durch: public/assets/js/spa-router.js
 * Geladen als Core-CSS in: includes/header.php
 *
 * Nutzt CSS-Variablen aus: public/assets/css/style.css
 * --primary-color: #2c5aa0
 * --border-color: #e2e8f0
 * --text-light: #718096
 * --secondary-color: #f8f9fa
 *
 * Pfad: public/assets/css/modules/spa-loader.css
 */


/* ==========================================================================
   CONTENT WRAPPER – Positionierungs-Kontext für den Loader
   Umschließt #spaLoader + <main class="main-content"> in index.php
   ========================================================================== */

.spa-content-wrapper {
    position: relative;
    flex: 1;
    min-height: 50vh;
}


/* ==========================================================================
   LOADING OVERLAY – Nur über Content-Bereich
   Standard: sichtbar (opacity: 1)
   Versteckt durch: .spa-loader.loaded (opacity: 0, visibility: hidden)
   ========================================================================== */

.spa-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 18vh;
    background: rgba(248, 249, 250, 0.97);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Versteckter Zustand - nach Seitenladen / SPA-Navigation */
.spa-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ==========================================================================
   SPINNER – Rotierender Kreis
   Border-Trick: grauer Ring mit blauem Top-Segment
   ========================================================================== */

.spa-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary-color, #2c5aa0);
    border-radius: 50%;
    animation: spaSpinRotate 0.75s linear infinite;
}

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


/* ==========================================================================
   LABEL – Optionaler Text unter dem Spinner
   ========================================================================== */

.spa-loader-label {
    margin-top: 1rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light, #718096);
    letter-spacing: 0.02em;
}


/* ==========================================================================
   CONTENT FADE-IN – Sanfter Übergang beim Seitenwechsel
   .main-content bekommt kurz .spa-content-enter für Fade-In
   ========================================================================== */

.main-content.spa-content-enter {
    animation: spaContentFadeIn 0.3s ease forwards;
}

@keyframes spaContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   RESPONSIVE – Mobile Anpassungen
   ========================================================================== */

@media (max-width: 768px) {

    .spa-content-wrapper {
        min-height: 40vh;
    }

    .spa-loader {
        padding-top: 15vh;
    }

    .spa-loader-spinner {
        width: 34px;
        height: 34px;
        border-width: 2.5px;
    }

    .spa-loader-label {
        font-size: 0.75rem;
    }
}