/* ══════════════════════════════════════════════════════════════════════════════════════════
   rwd-ui.css — globale Design-Tokens und Bewegungsschicht.

   WARUM GLOBAL UND NICHT SCOPED: Blazor setzt das Scope-Attribut nur auf Elemente, die direkt
   in einer .razor stehen — niemals auf die Interna von Kind-Komponenten. Regeln gegen
   MudBlazor-Klassen (.mud-*) funktionieren in einer .razor.css deshalb NICHT, auch nicht mit
   ::deep, wenn kein Vorfahre das Scope-Attribut trägt. (Genau daran sind die ::deep-Regeln in
   NavMenu.razor.css gescheitert: die einzigen ausgezeichneten Elemente dort sind die
   .nav-section-Geschwister, nicht ein Vorfahre der Links.) Alles, was Mud-Interna anfasst,
   gehört daher hierher.

   LADEREIHENFOLGE (App.razor): MudBlazor.min.css → Rwd.Web.Admin.styles.css → rwd-ui.css.
   Diese Datei kommt zuletzt und gewinnt damit bei gleicher Spezifität ohne !important.

   GRUNDREGEL: nur additive Eigenschaften (transition/transform/box-shadow/outline). MudBlazors
   eigenes Layout (display, position, Größen) wird NICHT angefasst.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marke. Quelle ist Application.Contracts/Common/BrandColors.cs. Die Werte hier sind
       eine Kopie (C# und CSS haben keine Brücke) — aber KEINE unbewachte: BrandColorsCssSyncTests
       vergleicht diesen Block bei jedem Testlauf mit BrandColors.CssColorTokens, für Admin UND
       Mobile. Eine Farbe ändern heißt: BrandColors.cs und beide rwd-ui.css. ── */
    --rwd-chrome: #24262B;
    --rwd-chrome-deep: #16181B;
    --rwd-chrome-soft: #2F3238; /* Hover/aktive Fläche INNERHALB des dunklen Chrome */
    --rwd-accent: #3B7780; /* Kanten/Fokusring auf HELLEM Grund (4,62:1 — Nicht-Text) */
    --rwd-accent-strong: #2F6169; /* texttauglich, 6,92:1 gegen Weiß */
    --rwd-accent-deep: #26525A; /* Hover auf gefüllten Primärflächen */
    --rwd-accent-on-dark: #7FB6BD; /* Akzent auf ANTHRAZIT (6,72:1) — Drawer, AppBar, Dunkelmodus */
    --rwd-on-accent-dark: #0F2427; /* dunkler Text auf --rwd-accent-on-dark */

    /* ── Status. Doppelt zu --mud-palette-*, aber notwendig: Login, Fehlerseite und die vier
       Vollbild-Monitore laufen unter EmptyLayout OHNE MudThemeProvider — dort existiert keine
       einzige --mud-palette-*-Variable. Innerhalb der App bitte trotzdem die Mud-Rollen
       benutzen, damit der Dunkelmodus mitzieht. ── */
    --rwd-success: #3F6B4A;
    --rwd-success-on-dark: #7FB08C;
    --rwd-warning: #8A6420;
    --rwd-warning-on-dark: #D9AC63;
    --rwd-error: #C0392E;
    --rwd-error-on-dark: #E8796C;

    /* ── Ränder. Seit die Flächen flach sind, tragen DIESE Linien die Struktur, nicht mehr
       der Schatten.

       KEINE eigenen Farbwerte, sondern Verweise auf MudBlazors Palette: der ThemeProvider
       schreibt --mud-palette-* zur Laufzeit neu, wenn der Dunkelmodus umgeschaltet wird, und
       damit kippen diese Ränder von „dunkel auf hell" nach „hell auf dunkel", ohne dass es
       hier einen zweiten Satz Werte braucht. Der erste Versuch war ein .mud-theme-dark-Block —
       das ist in MudBlazor 9 aber die Utility-Klasse für Color.Dark und NICHT der
       Dunkelmodus-Marker; die Regel hätte nie gegriffen.
       Quelle der Werte: PaletteLight/PaletteDark.LinesDefault in RwdTheme.cs. ── */
    --rwd-border: var(--mud-palette-lines-default);
    --rwd-border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);

    /* ── Bewegung. Eine Kurve, drei Dauern — mehr braucht es nicht, und es hält die
       Oberfläche kohärent, statt dass jede Seite ihr eigenes Timing erfindet. ── */
    --rwd-ease: cubic-bezier(.4, 0, .2, 1);
    --rwd-ease-out: cubic-bezier(.16, 1, .3, 1);
    --rwd-motion-fast: 120ms;
    --rwd-motion-base: 220ms;
    --rwd-motion-slow: 380ms;

    /* ── Form & Tiefe ──
       Tiefe ist jetzt SCHWEBEN, nicht Dekoration: Schatten trägt nur noch, was tatsächlich
       über der Seite liegt (Dialog, Popover, Palette, Snackbar). Inhaltsflächen sind flach
       und bekommen ihre Kontur aus --rwd-border. Auf datendichten Seiten mit 124 MudPaper
       war der Schatten das, was „unruhig" erzeugt hat. --rwd-shadow-1 gibt es weiterhin,
       aber nur noch für das Chrome selbst — nicht mehr für Karten. */
    --rwd-radius: 10px;
    --rwd-radius-lg: 16px;
    --rwd-shadow-1: 0 1px 2px rgba(16, 20, 28, .06), 0 1px 3px rgba(16, 20, 28, .08);
    --rwd-shadow-2: 0 4px 10px rgba(16, 20, 28, .07), 0 2px 4px rgba(16, 20, 28, .06);
    --rwd-shadow-3: 0 12px 28px rgba(16, 20, 28, .12), 0 4px 8px rgba(16, 20, 28, .06);
}

/* Basis-Schriftstapel. Ersetzt den Helvetica-Zwang des Blazor-Templates; Roboto kommt aus
   App.razor, die system-ui-Rückfälle greifen, bis die Webfont da ist. */
html, body {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══ 1. Seiteneintritt ═════════════════════════════════════════════════════════════════════
   Der Inhalt steigt beim Navigieren einmal kurz auf. Wirkt auf jeder Seite mit MudMainContent
   (also allen außer Login/Fehler, die EmptyLayout nutzen) — der billigste „flüssig"-Gewinn.
   Bewusst auf dem inneren Container, nicht auf .mud-main-content selbst: sonst würde die
   Animation bei jedem StateHasChanged-Repaint des Layouts neu starten. */
.mud-main-content > .mud-container {
    animation: rwd-fade-up var(--rwd-motion-slow) var(--rwd-ease-out) both;
}

@keyframes rwd-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Gestaffelte Einblendung — für Kachelreihen und Listen. Die Komponente vergibt
   --rwd-i (Index), die Verzögerung ergibt sich daraus. Kein JS nötig. */
.rwd-stagger > * {
    animation: rwd-fade-up var(--rwd-motion-base) var(--rwd-ease-out) both;
    animation-delay: calc(var(--rwd-i, 0) * 45ms);
}

/* Häkchen-Pop — von ProgressChecklist/CompletionMeter genutzt, wenn ein Punkt erledigt wird.
   Kein Konfetti, kein Abzeichen: ein 220-ms-Impuls auf dem Icon selbst. */
@keyframes rwd-pop {
    0%   { transform: scale(.6); opacity: .4; }
    55%  { transform: scale(1.14); opacity: 1; }
    100% { transform: scale(1); }
}

.rwd-pop {
    animation: rwd-pop var(--rwd-motion-base) var(--rwd-ease-out) both;
}

/* ══ 2. Flächen ════════════════════════════════════════════════════════════════════════════
   Karten bekommen eine weiche Schatten-Transition. Global bewusst NUR der Schatten und KEIN
   transform: viele .mud-card in dieser App sind reine Inhaltsbehälter, die nicht wackeln
   sollen. Das Anheben ist opt-in über .rwd-lift (siehe unten). */
.mud-card, .mud-paper {
    transition: box-shadow var(--rwd-motion-base) var(--rwd-ease),
                border-color var(--rwd-motion-base) var(--rwd-ease);
}

/* Opt-in: alles, was wirklich klickbar ist, hebt sich beim Zeigen an. */
.rwd-lift {
    transition: box-shadow var(--rwd-motion-base) var(--rwd-ease),
                transform var(--rwd-motion-fast) var(--rwd-ease) !important;
    will-change: transform;
}

.rwd-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--rwd-shadow-3) !important;
}

.rwd-lift:active {
    transform: translateY(0);
    transition-duration: 60ms;
}

/* ══ 3. Bedienelemente ═════════════════════════════════════════════════════════════════════
   Druckpunkt: der Knopf gibt kurz nach. Das ist der Unterschied zwischen „Software" und
   „reagiert auf mich". */
.mud-button-root {
    transition: background-color var(--rwd-motion-fast) var(--rwd-ease),
                box-shadow var(--rwd-motion-fast) var(--rwd-ease),
                transform 60ms var(--rwd-ease),
                filter var(--rwd-motion-fast) var(--rwd-ease);
}

.mud-button-root:active:not(:disabled) {
    transform: translateY(1px) scale(.985);
}

.mud-button-filled:hover:not(:disabled) {
    filter: brightness(1.06);
}

/* Icon-Knöpfe drehen sich nicht, sie sinken nur — sonst wirkt eine Werkzeugleiste unruhig. */
.mud-icon-button:active:not(:disabled) {
    transform: scale(.92);
}

/* Fokusring in Koralle statt Browser-Default. :focus-visible → nur bei Tastaturnutzung,
   Mausklicks bekommen keinen Ring. Reine Barrierefreiheits-Verbesserung. */
.mud-button-root:focus-visible,
.mud-input-slot:focus-visible,
.mud-nav-link:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rwd-accent);
    outline-offset: 2px;
    border-radius: var(--rwd-radius);
}

/* Eingabefelder: weicher Übergang beim Fokussieren. */
.mud-input > .mud-input-slot,
.mud-input-control .mud-input {
    transition: box-shadow var(--rwd-motion-fast) var(--rwd-ease),
                border-color var(--rwd-motion-fast) var(--rwd-ease);
}

/* ══ 4. Tabellen ═══════════════════════════════════════════════════════════════════════════
   Diese App ist voll dichter MudTables. Ein ruhiger Zeilen-Hover macht sie erheblich besser
   lesbar — man verliert die Zeile nicht mehr beim Wandern nach rechts. */
.mud-table-row {
    transition: background-color var(--rwd-motion-fast) var(--rwd-ease);
}

.mud-table-hover .mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Klickbare Zeilen zeigen das auch. */
.mud-table-row.mud-table-row-clickable {
    cursor: pointer;
}

/* Kopfzeile: die Spaltennamen sind Beschriftung, kein Inhalt — kleiner, kräftiger, ruhiger
   Grundton. Damit trennt sich der Kopf ohne zusätzliche Linie vom Datenkörper. */
.mud-table-head .mud-table-cell {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    white-space: nowrap;
}

/* Zebra-Streifen ZURÜCKNEHMEN statt verstärken: bei dichten Tabellen mit Chips und farbigen
   Statuszellen konkurriert der Streifen mit dem Inhalt. Der Hover trägt die Zeilenführung
   besser. Wirkt auf die 66 Seiten mit Striped="true", ohne sie einzeln anzufassen. */
.mud-table-striped tbody .mud-table-row:nth-of-type(odd) > td {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent);
}

/* Zahlen rechtsbündig lesen sich als Spalte — opt-in per Klasse auf MudTh/MudTd. */
.rwd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Leerzustand innerhalb einer Tabelle bekommt keine Trennlinie — er IST der Inhalt. */
.mud-table-row .rwd-empty {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* ══ 5. Navigation ═════════════════════════════════════════════════════════════════════════
   Hierher verschoben aus NavMenu.razor.css, wo die ::deep-Regeln nie greifen konnten (s. Kopf).
   Der Drawer ist jetzt anthrazit — alles darin MUSS die drawer-Rollen benutzen, sonst wäre
   dunkelgraue Schrift auf dunklem Grund unsichtbar. */
.mud-drawer .nav-section {
    padding: 18px 16px 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    user-select: none;
    pointer-events: none;
}

.mud-drawer .nav-section:first-of-type {
    padding-top: 10px;
}

.mud-drawer .mud-nav-link {
    min-height: 40px;
    border-radius: 0 var(--rwd-radius) var(--rwd-radius) 0;
    margin-right: 8px;
    transition: background-color var(--rwd-motion-fast) var(--rwd-ease),
                color var(--rwd-motion-fast) var(--rwd-ease),
                padding-left var(--rwd-motion-fast) var(--rwd-ease);
}

.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .07);
}

/* Aktiver Eintrag: Korallen-Kante links + getönte Fläche. inset box-shadow statt border-left,
   damit die Zeile nicht um 3px verrutscht. */
.mud-drawer .mud-nav-link.active {
    background-color: rgba(255, 90, 82, .16);
    box-shadow: inset 3px 0 0 0 var(--rwd-accent);
    color: #fff;
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--rwd-accent);
}

/* Gruppenköpfe etwas ruhiger als echte Ziele. */
.mud-drawer .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .05);
}

/* ══ 6. Ladezustände ═══════════════════════════════════════════════════════════════════════
   Ein Schimmer über dem Skeleton statt eines leeren Kastens — die Seite fühlt sich an, als
   arbeite sie, nicht als hänge sie. */
.mud-skeleton {
    border-radius: var(--rwd-radius) !important;
}

.rwd-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--mud-palette-action-disabled-background);
    border-radius: var(--rwd-radius);
}

.rwd-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    animation: rwd-shimmer 1.4s infinite;
}

@keyframes rwd-shimmer {
    100% { transform: translateX(100%); }
}

/* ══ 7. AppBar-Feinschliff ═════════════════════════════════════════════════════════════════ */
.mud-appbar {
    /* Feine Lichtkante unten — trennt Chrome von Inhalt ohne harte Linie. */
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(16, 20, 28, .18);
}

/* Der Marken-Divider aus der Login-Seite, hier als wiederverwendbares Element. */
.rwd-accent-rule {
    height: 3px;
    width: 52px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--rwd-accent), var(--rwd-accent-strong));
}

/* ══ 8. Bewegung abschaltbar ═══════════════════════════════════════════════════════════════
   PFLICHT, nicht Kür: wer im Betriebssystem „Bewegung reduzieren" gewählt hat, bekommt hier
   eine statische Oberfläche. Auch Nutzer mit vestibulären Beschwerden sollen das System
   benutzen können — und in einer Leitstelle will man kein zappelndes UI. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .rwd-lift:hover,
    .mud-button-root:active:not(:disabled),
    .mud-icon-button:active:not(:disabled) {
        transform: none !important;
    }
}