/* /Features/Dashboard/Pages/Dashboard.razor.rz.scp.css */
/* Fullscreen-Overlay für die Loader-Preview. Halbtransparenter Hintergrund zentriert den
   Loader mittig, damit beide Animations-Varianten groß und ungestört zu sehen sind. */

.retrofit-loader-overlay[b-l9b83k863s] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: pointer;
    backdrop-filter: blur(2px);
}
/* /Shared/RetrofitLoader.razor.rz.scp.css */
/*
 * Scoped CSS für den RetrofitLoader. Zwei eigenständig animierte SVG-Gruppen —
 * daher brauchen wir transform-box: fill-box + transform-origin: center, damit das
 * Zentrum der SVG-viewBox als Rotationspunkt genommen wird (sonst rotiert Chrome
 * um den Ursprung 0,0 und das Ganze fliegt aus dem Rahmen).
 */

/* Root-Wrapper: ohne Modifier ein transparenter Inline-Block (für kleine Inline-Loader
   in Tabellen-Zellen / Dialog-Bodies), mit `--panel` ein zentrierter Container, der das
   Panel-Look rechts unten an den Loader haengt. Kein Fullscreen-Overlay; Navigation und
   Buttons ausserhalb bleiben interaktiv — nur der Content-Bereich zeigt ein Panel. */
.retrofit-loader-root[b-3rg7nbqblr] {
    display: inline-block;
}

.retrofit-loader-root--panel[b-3rg7nbqblr] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    width: 100%;
}

/* Nur im Panel-Modus bekommt der Loader einen abgesetzten Kasten.
   min-width verhindert, dass der Container sich auf SVG-Breite zusammenzieht und der
   Label-Text dann Wort-pro-Zeile umbricht. max-width deckelt die Breite bei langen Texten.
   Werte nach User-Feedback kompakter gesetzt. */
.retrofit-loader-root--panel .retrofit-loader[b-3rg7nbqblr] {
    padding: 1rem 1.5rem;
    background: rgba(16, 22, 36, 0.85);
    border: 1px solid rgba(0, 230, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    gap: 0.5rem;
    min-width: 14rem;
    max-width: 24rem;
}

/* Label-Text im Panel darf natürlich fließen (normale Wortumbrüche, keine Silbentrennung
   am Zeichen). Ohne das bricht Chrome bei schmalen Containern gerne jedes Wort um. */
.retrofit-loader-root--panel .retrofit-loader__label[b-3rg7nbqblr] {
    white-space: normal;
    word-break: normal;
    max-width: 100%;
    line-height: 1.4;
}

.retrofit-loader[b-3rg7nbqblr] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* Brand-Cyan hart gesetzt — MudBlazor-Theme-Variablen sind beim ersten Paint noch nicht
       garantiert da, und im dunklen HUD-Theme wuerde currentColor sonst dem Text-Default
       (grau/anthrazit) folgen und der Spinner waere auf schwarzem Hintergrund kaum sichtbar. */
    color: #00E6FF;
}

/* Feste Pixelgroessen direkt am SVG (nicht am Outer-Container), weil der im Panel-Modus
   ein grosses min-width bekommt — saesse die Groesse am Container, wuerde sich das SVG
   auf 100 % dieser min-width aufblasen. So ist die SVG-Groesse garantiert exakt das, was
   die Size-Variante sagt. Werte nach User-Feedback (war 32 / 48 / 96). */
.retrofit-loader--small  .retrofit-loader__svg[b-3rg7nbqblr] { width: 32px; }
.retrofit-loader--medium .retrofit-loader__svg[b-3rg7nbqblr] { width: 48px; }
.retrofit-loader--large  .retrofit-loader__svg[b-3rg7nbqblr] { width: 56px; }

.retrofit-loader__svg[b-3rg7nbqblr] {
    height: auto;
    display: block;
    flex-shrink: 0;
}

.retrofit-loader__svg path[b-3rg7nbqblr] {
    fill: currentColor;
}

.retrofit-loader__outer[b-3rg7nbqblr],
.retrofit-loader__inner[b-3rg7nbqblr] {
    transform-box: fill-box;
    transform-origin: center;
}

/*
 * Animations-Varianten (Klassen auf dem Wrapper):
 *   - v-inner   = nur innen rotiert gegen den Uhrzeigersinn (Default)
 *   - v-outer   = nur außen rotiert im Uhrzeigersinn
 *   - v-counter = außen CW, innen CCW (gegenläufig)
 */

.retrofit-loader--v-inner .retrofit-loader__inner[b-3rg7nbqblr] {
    animation: retrofit-loader-spin-reverse-b-3rg7nbqblr 2s linear infinite;
}

.retrofit-loader--v-outer .retrofit-loader__outer[b-3rg7nbqblr] {
    animation: retrofit-loader-spin-b-3rg7nbqblr 2s linear infinite;
}

.retrofit-loader--v-counter .retrofit-loader__outer[b-3rg7nbqblr] {
    animation: retrofit-loader-spin-b-3rg7nbqblr 2s linear infinite;
}

.retrofit-loader--v-counter .retrofit-loader__inner[b-3rg7nbqblr] {
    animation: retrofit-loader-spin-reverse-b-3rg7nbqblr 3s linear infinite;
}

.retrofit-loader__label[b-3rg7nbqblr] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.7));
    text-align: center;
}

@keyframes retrofit-loader-spin-b-3rg7nbqblr {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes retrofit-loader-spin-reverse-b-3rg7nbqblr {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* prefers-reduced-motion: alle Animationen aus, Spinner bleibt statisch. */
@media (prefers-reduced-motion: reduce) {
    .retrofit-loader--v-inner .retrofit-loader__inner[b-3rg7nbqblr],
    .retrofit-loader--v-outer .retrofit-loader__outer[b-3rg7nbqblr],
    .retrofit-loader--v-counter .retrofit-loader__outer[b-3rg7nbqblr],
    .retrofit-loader--v-counter .retrofit-loader__inner[b-3rg7nbqblr] {
        animation: none;
    }
}