/* ========================================
   Loading-Overlay (Ladescreen)

   Vollflaechiges Overlay mit drei rotierenden Ringen, das laengere
   Vorgaenge ueberdeckt. Zwei Varianten:

     .loading-overlay                  -> generisch, whitelabel-faehig
                                          (Ringe aus --primary-color)
     .loading-overlay--audatis         -> audatis-Logofarben

   Welche Variante ausgeliefert wird, entscheidet
   $conf_manager_loading_screen ('audatis' | 'generic') je Installation.

   position: fixed / absolute ist hier Zweck der Komponente: das Overlay
   deckt den Viewport ab, die Ringe liegen uebereinander.
   ======================================== */
.loading-overlay {
    /* Dunkler Schleier in beiden Themes -> Schrift bleibt weiss. */
    --loading-overlay-bg: rgba(0, 0, 0, 0.6);
    --loading-overlay-fg: #ffffff;

    /* Generische Ringe: eine Markenfarbe in drei Abstufungen. */
    --loading-ring-1: var(--primary-color, #007abb);
    --loading-ring-2: color-mix(in srgb, var(--primary-color, #007abb) 70%, #ffffff);
    --loading-ring-3: color-mix(in srgb, var(--primary-color, #007abb) 45%, #ffffff);

    --loading-ring-size: 200px;
    --loading-ring-width: 8px;

    /* Gesamtneigung des Ring-Konstrukts in der Bildschirmebene: dreht alle
       drei Ellipsen gemeinsam, ohne ihre Lage zueinander zu aendern.
       Setzt den Scheitel des dritten Rings auf den tiefsten Punkt. */
    --loading-ring-tilt: 22deg;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--loading-overlay-bg);

    z-index: var(--z-loading-overlay, 1000000);
    /* display schaltet loading-overlay.js, damit die Opacity-Transition in
       beide Richtungen laeuft: display und opacity im selben Frame zu setzen
       wuerde sie ueberspringen. */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.loading-overlay.active {
    opacity: 1;
}

.loading-overlay--audatis {
    --loading-ring-1: var(--error-color, #c84646);
    --loading-ring-2: var(--success-color, #7ea820);
    --loading-ring-3: var(--primary-color, #007abb);
}

/* Generische Variante: ein gewoehnlicher Ladekreis statt des audatis-Konstrukts.
   Ein einzelner Strich, vorn in voller Deckkraft, nach hinten in Transparenz
   auslaufend. Die anderen beiden Ringe entfallen — das Markup bleibt fuer
   beide Varianten dasselbe. */
.loading-overlay--generic .loading-ring:nth-child(n + 2) {
    display: none;
}

.loading-overlay--generic .loading-ring:nth-child(1) {
    border: 0;
    /* Verlauf ueber den ganzen Kreis: bei 360deg (= vorn, in Drehrichtung)
       volle Farbe, von dort nach hinten auf transparent. */
    background: conic-gradient(from 0deg, transparent 0%, var(--loading-ring-1) 100%);
    /* Innenflaeche ausstanzen — aus der Scheibe wird ein Strich. */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--loading-ring-width)), #000 calc(100% - var(--loading-ring-width)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--loading-ring-width)), #000 calc(100% - var(--loading-ring-width)));
    animation: loading-spin 1s linear infinite;
}

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

/* Hochkontrast: Schleier vertiefen. */
:root[data-contrast="high"] .loading-overlay {
    --loading-overlay-bg: rgba(0, 0, 0, 0.8);
}

/* Hochkontrast, generische Variante: --primary-color ist dort dunkler
   (#003e60) und geht auf dem Schleier unter — Ringe aufhellen. Die
   audatis-Variante bleibt ausgenommen, ihre Logofarben stehen fest. */
:root[data-contrast="high"] .loading-overlay:not(.loading-overlay--audatis) {
    --loading-ring-1: color-mix(in srgb, var(--primary-color, #007abb) 35%, #ffffff);
    --loading-ring-2: color-mix(in srgb, var(--primary-color, #007abb) 25%, #ffffff);
    --loading-ring-3: color-mix(in srgb, var(--primary-color, #007abb) 15%, #ffffff);
}

.loading-overlay-inner {
    position: relative;
    width: var(--loading-ring-size);
    height: var(--loading-ring-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--loading-ring-size);
    height: var(--loading-ring-size);
    border: 0 solid transparent;
    border-radius: 50%;
}

/* Je Ring nur eine Kante -> der 3D-Kipp erzeugt den umlaufenden Bogen. */
.loading-ring:nth-child(1) {
    border-bottom-width: var(--loading-ring-width);
    border-color: var(--loading-ring-1);
    animation: loading-ring-1 2s linear infinite;
}

.loading-ring:nth-child(2) {
    border-right-width: var(--loading-ring-width);
    border-color: var(--loading-ring-2);
    animation: loading-ring-2 2s linear infinite;
}

.loading-ring:nth-child(3) {
    border-top-width: var(--loading-ring-width);
    border-color: var(--loading-ring-3);
    animation: loading-ring-3 2s linear infinite;
}

.loading-overlay-text {
    color: var(--loading-overlay-fg);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    /* Ueber den Ringen, damit lange Texte lesbar bleiben. */
    position: relative;
    max-width: calc(var(--loading-ring-size) - 40px);
    /* Wie .toast-message: ein langes Wort (Dateiname) sprengt den Ring sonst. */
    overflow-wrap: break-word;
}

/* rotate() steht vorn und wirkt damit zuletzt: es kippt die fertig
   projizierten Ellipsen gemeinsam auf dem Bildschirm. Der rotateZ-Lauf
   dahinter schickt weiterhin das sichtbare Segment die Ellipse entlang. */
@keyframes loading-ring-1 {
    0%   { transform: rotate(var(--loading-ring-tilt)) rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
    100% { transform: rotate(var(--loading-ring-tilt)) rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes loading-ring-2 {
    0%   { transform: rotate(var(--loading-ring-tilt)) rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
    100% { transform: rotate(var(--loading-ring-tilt)) rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes loading-ring-3 {
    0%   { transform: rotate(var(--loading-ring-tilt)) rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
    100% { transform: rotate(var(--loading-ring-tilt)) rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

/* Weniger Bewegung: langsamer statt gar nicht — ganz ohne Animation ist
   nicht mehr erkennbar, dass etwas laeuft. */
@media (prefers-reduced-motion: reduce) {
    .loading-ring {
        animation-duration: 6s;
    }

    /* Der Ladekreis laeuft ohnehin doppelt so schnell wie das audatis-Konstrukt
       — gleiche Verlangsamung, eigener Wert. */
    .loading-overlay--generic .loading-ring:nth-child(1) {
        animation-duration: 3s;
    }
}

/* Schmale Breite: Ringe kleiner, sonst stossen sie an den Rand. */
@media (max-width: 480px) {
    .loading-overlay {
        --loading-ring-size: 140px;
        --loading-ring-width: 6px;
    }
}