/*
 * Massenerfassungs-Maske — Design 1:1 nach
 * prototypes/werte-maske/01-sektionen-subnav.html
 * (Design-Vertrag: specs/002-effiziente-werteerfassung/contracts/design-abgleich.md).
 *
 * Diese Datei führt die gemeinsamen Token der Maske. Sie liegt bewusst global
 * und nicht als komponenten-eigene `.razor.css`: Die Token gelten auch für
 * FeldZeile, BandZeile, GruppenNavigation und den Dialog — mit gekapseltem CSS
 * wären sie dort nur über `::deep`-Umwege erreichbar. Das komponenteneigene
 * Layout der Seite kommt mit T022 hinzu.
 *
 * ---------------------------------------------------------------------------
 * T001 — Token-Abgleich Vorlage → Anwendung (Abweichung A2)
 * ---------------------------------------------------------------------------
 * Die Vorlage bringt eigene Hexwerte mit. Die Anwendung hat bereits ein
 * Farbsystem (MudBlazor-Theme); zwei Systeme nebeneinander wären eine Quelle
 * stiller Abweichungen. Deshalb gilt: Wo die Vorlage die Primärfarbe nutzt,
 * nutzt die Maske das Anwendungstoken — die Werte sind deckungsgleich, weil
 * die Vorlage ihrerseits die MudBlazor-Primärfarbe übernommen hat.
 * Zustands- und Flächenfarben der Vorlage haben in der Anwendung keine
 * Entsprechung und werden hier unverändert als lokale Token geführt.
 *
 *   Vorlage              Herkunft in der Anwendung            Wert
 *   --primaer            var(--mud-palette-primary)           #594ae2  (deckungsgleich)
 *   --primaer-dunkel     var(--mud-palette-primary-darken)    #4a3dc4
 *   --primaer-hell       var(--mud-palette-primary-hover)     #eeecfc
 *   --flaeche            var(--mud-palette-background-gray)   #f5f5f7
 *   --karte              var(--mud-palette-surface)           #ffffff
 *   --linie              var(--mud-palette-lines-default)     #e0e0e4
 *   --text               var(--mud-palette-text-primary)      #1e1e24
 *   --text-2             var(--mud-palette-text-secondary)    #5f6068
 *   --rot                var(--mud-palette-error)             #c62828
 *   --gruen              var(--mud-palette-success)           #1b8a4c
 *   --gelb               var(--mud-palette-warning)           #b26a00
 *   --linie-stark        (keine Entsprechung)                 #bdbdc4
 *   --text-3             (keine Entsprechung)                 #8b8c95
 *   --ebene-b            (keine Entsprechung)                 #f4f1ff
 *   --schatten/-2        (keine Entsprechung)                 wie Vorlage
 *
 * Schriftart: Abweichung A1 — es gilt die self-hostete Anwendungsschrift,
 * nicht der System-Font-Stack der Vorlage (Constitution V).
 * Kopfzeile: Abweichung A3 — der Zähler-Chip sitzt im Seitenkopf der
 * Anwendung, nicht in einer eigenen `.appbar`.
 */

.we-wurzel {
    --primaer: var(--mud-palette-primary, #594ae2);
    --primaer-dunkel: var(--mud-palette-primary-darken, #4a3dc4);
    --primaer-hell: var(--mud-palette-primary-hover, #eeecfc);
    --flaeche: var(--mud-palette-background-gray, #f5f5f7);
    --karte: var(--mud-palette-surface, #fff);
    --linie: var(--mud-palette-lines-default, #e0e0e4);
    --linie-stark: #bdbdc4;
    --text: var(--mud-palette-text-primary, #1e1e24);
    --text-2: var(--mud-palette-text-secondary, #5f6068);
    --text-3: #8b8c95;
    --gruen: var(--mud-palette-success, #1b8a4c);
    --gruen-hell: #e6f4ec;
    --rot: var(--mud-palette-error, #c62828);
    --rot-hell: #fdecea;
    --gelb: var(--mud-palette-warning, #b26a00);
    --gelb-hell: #fff4e0;
    --blau: #1565c0;
    --ebene-b: #f4f1ff;
    --schatten: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06);
    --schatten-2: 0 4px 14px rgba(0, 0, 0, .14);

    /*
     * Maße des Anwendungsrahmens (N2/N3). Die Vorlage ist eine Einzelseite;
     * in der Anwendung liegen darüber eine feste Kopfleiste und links die
     * Navigation. Beide Maße kommen als Token aus MudBlazor — fest eingetragene
     * 64 und 240 Pixel würden beim ersten Theme-Wechsel falsch.
     */
    --kopfleisten-hoehe: var(--mud-appbar-height, 64px);
    --navigation-breite: var(--mud-drawer-width-left, 240px);

    /*
     * Gemeinsame linke Kante der Anwendung (Design-Entscheidung 14). Bisher
     * standen die 20 Pixel an jeder Stelle einzeln — Kontextleiste,
     * `.p1-rahmen`, Fußleisten-Inhalt. Als ein Token fluchten Quelle-Feld,
     * Subnav, Zähler-Chip, Werte-Ansicht und Marken-Kachelgrid zwangsläufig.
     * Angewandt wird das Token mit US6; hier steht zunächst nur die Definition.
     */
    --maske-rand: 20px;

    /*
     * Innenabstand des Anwendungsrahmens (MudContainer `pa-6`). Die
     * Fußleiste liegt als `position: fixed` außerhalb dieses Rahmens und
     * muss ihn nachbilden, um dieselbe linke Kante zu treffen. Als Token
     * steht die Kopplung an einer Stelle statt als 24 in einer calc-Formel.
     */
    --inhalt-rand: 24px;

    /*
     * Klebende Elemente der Maske bleiben unter der Kopfleiste
     * (--mud-zindex-appbar = 1300) und unter der Navigation (1100).
     */
    --ebene-klebend: 1000;
    --ebene-fussleiste: 1010;

    /*
     * Dialoge liegen über allem — auch über der Kopfleiste der Anwendung
     * (1300). Sie sind modal: Was darunter liegt, ist gerade nicht bedienbar
     * und darf es auch nicht scheinen. Der Wert entspricht dem Dialog-Niveau
     * von MudBlazor, damit beide Dialogarten dieselbe Ebene teilen.
     */
    --ebene-dialog: 1400;
}

/*
 * ---------------------------------------------------------------------------
 * Gemeinsame Bedienelemente der Maske (Vorlage-Abschnitte „Eingaben",
 * „Chips / Status", Knöpfe, Fehlerzeile)
 * ---------------------------------------------------------------------------
 * Diese Regeln beschreiben dieselben Elemente in mehreren Komponenten
 * (FeldZeile, BandZeile, Kontextleiste, Speicherleiste, Dialog). Als
 * komponenteneigenes CSS müssten sie fünfmal wortgleich stehen — jede Kopie
 * eine Stelle, an der das Design auseinanderlaufen kann. Das
 * komponentenspezifische Layout bleibt in der jeweiligen `.razor.css`.
 */

.we-in,
.we-sel,
.we-ta {
    width: 100%;
    border: 1px solid var(--linie-stark);
    border-radius: 4px;
    padding: 5px 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.we-in:focus,
.we-sel:focus,
.we-ta:focus {
    border-color: var(--primaer);
    box-shadow: 0 0 0 2px rgba(89, 74, 226, .18);
}

.we-in::placeholder,
.we-ta::placeholder {
    color: var(--text-3);
    font-style: italic;
}

.we-in:disabled,
.we-sel:disabled,
.we-ta:disabled {
    background: #f2f2f4;
    color: var(--text-3);
}

.we-ta {
    resize: vertical;
    min-height: 34px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mit-einheit {
    display: flex;
    align-items: center;
    gap: 0;
}

.mit-einheit .we-in {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.mit-einheit .suffix {
    border: 1px solid var(--linie-stark);
    border-left: 1px solid var(--linie);
    border-radius: 0 4px 4px 0;
    background: #fafafa;
    color: var(--text-2);
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
    line-height: 1.45;
}

/* Zahlenfelder ohne Pfeiltasten — die Vorlage erfasst Werte, nicht Schritte. */
.we-wurzel input[type=number] {
    -moz-appearance: textfield;
}

.we-wurzel input[type=number]::-webkit-outer-spin-button,
.we-wurzel input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*
 * Eine vorgemerkte Stilllegung streicht den Wert durch — auch in der Bandzeile,
 * die eine eigene Komponente ist; deshalb steht die Regel hier und nicht im
 * gekapselten CSS der Feldzeile.
 */
.feld.ist-still .we-in {
    text-decoration: line-through;
    color: var(--text-3);
}

.feld-fehler {
    color: var(--rot);
    font-size: 12px;
    margin-top: 3px;
}

/* Ein unvollständiges Band ist ein Hinweis, kein Fehler (P16). */
.feld-fehler.band-hinweis {
    color: var(--text-3);
}

.badge {
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 4px;
    line-height: 15px;
    display: inline-block;
    vertical-align: 1px;
}

.badge.r {
    background: #e3f2fd;
    color: var(--blau);
}

.badge.m {
    background: #eceff1;
    color: #546e7a;
}

/*
 * Vierter Feldzustand (Design-Entscheidung 15): Der Wert steht in der Entität.
 * Das Badge ist ruhiger als R und M — es benennt eine Herkunft, keine
 * Eigenschaft des Wertes.
 */
.badge.stammdaten {
    background: var(--primaer-hell);
    color: var(--primaer);
}

.chip {
    display: inline-block;
    border-radius: 12px;
    padding: 1px 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.chip.leer {
    background: #ececef;
    color: var(--text-3);
    font-weight: 400;
    font-style: italic;
}

.chip.ok {
    background: var(--gruen-hell);
    color: var(--gruen);
}

.chip.warn {
    background: var(--gelb-hell);
    color: var(--gelb);
}

.chip.fehler {
    background: var(--rot-hell);
    color: var(--rot);
}

.chip.info {
    background: var(--primaer-hell);
    color: var(--primaer);
}

.knopf {
    border: 0;
    border-radius: 4px;
    padding: 8px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .15s, box-shadow .15s;
}

.knopf.primaer {
    background: var(--primaer);
    color: #fff;
    box-shadow: var(--schatten);
}

.knopf.primaer:hover {
    background: var(--primaer-dunkel);
}

.knopf.primaer:disabled {
    background: #c9c6ee;
    cursor: default;
    box-shadow: none;
}

.knopf.leise {
    background: transparent;
    color: var(--primaer);
}

.knopf.leise:hover {
    background: var(--primaer-hell);
}

.ik {
    border: 0;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    font-size: 11px;
    flex: none;
    align-self: center;
}

.ik:hover {
    background: var(--primaer-hell);
    color: var(--primaer);
}

.ik.we-still.aktiv {
    color: var(--rot);
}

/*
 * Dialograhmen der Vorlage (`03-wizard.html`). Ihn nutzen zwei Stellen: die
 * Bisher→Neu-Bestätigung und der Verlassen-Schutz (T031). Als gekapseltes CSS
 * gälte er jeweils nur für die eigene Komponente — der zweite Dialog stünde
 * ungestylt hinter der Fußleiste.
 */
.schleier {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 40, .45);
    z-index: var(--ebene-dialog, 1400);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dialog {
    background: var(--karte);
    border-radius: 8px;
    box-shadow: var(--schatten-2);
    width: 620px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 20px 22px;
}

.dialog h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.dialog .dialog-hinweis {
    color: var(--text-2);
    font-size: 13px;
    margin: 0 0 14px;
}

.dialog .aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/*
 * ---------------------------------------------------------------------------
 * Trägerstruktur der Werte-Masken (T046)
 * ---------------------------------------------------------------------------
 * Erfassung und Ansicht teilen sich dieselbe Struktur (Design-Entscheidung 10:
 * „eine gemeinsame Trägerstruktur, zwei Modi"). Solange diese Regeln als
 * komponenteneigenes CSS in `WerteErfassung.razor.css` standen, galten sie nur
 * dort — die Ansicht trug zwar dieselben Klassen, bekam aber weder das Raster
 * noch die Sektionskarten. Hier stehen sie einmal und wirken in beiden Modi;
 * damit kann das Layout auch nicht mehr auseinanderlaufen.
 */

.p1-rahmen {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 18px;
    max-width: 1240px;

    /*
     * Design-Entscheidung 14 — der Inhalt steht links, nicht in der Mitte:
     * Bei breiten Fenstern wanderte er sonst von der Kontextleiste weg, und
     * das Auge musste bei jedem Blickwechsel neu ansetzen. Der Deckel von
     * 1240 px bleibt: Eine Zeile über die volle Breite wäre unlesbar.
     */
    margin: 0;
    padding: 16px 0 90px var(--maske-rand, 20px);
}

.p1-rahmen > * {
    min-width: 0;
}

.sektion {
    background: var(--karte);
    border-radius: 8px;
    box-shadow: var(--schatten);
    padding: 14px 18px 10px;
    margin-bottom: 16px;
    scroll-margin-top: 132px;
}

.gruppe-titel {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 6px;
}

.gruppe-titel h2 {
    font-size: 15px;
    margin: 0;
    font-weight: 600;
}

.gruppe-stat {
    font-size: 12px;
    color: var(--text-3);
}

.raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px 22px;
}

/* Bänder und Listen brauchen die volle Breite (Vorlage). */
.raster .feld:has(.band-zeile),
.raster .feld:has(.we-ta) {
    grid-column: 1 / -1;
}

.raster .feld {
    min-width: 0;
}

@media (max-width: 900px) {
    .p1-rahmen {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .raster {
        grid-template-columns: 1fr;
    }

    .p1-rahmen {
        padding: 10px 0 90px var(--maske-rand, 20px);
    }

    .sektion {
        padding: 10px 10px 8px;
    }
}

/* Ebene B ist getönt, Ebene C gedimmt (Vorlage). */
.sektion.ebene-b {
    background: var(--ebene-b);
}

.sektion.ebene-c {
    opacity: .82;
}

.ebene-marke {
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: 1px;
}

.ebene-marke.b {
    background: #ddd6ff;
    color: #4534b8;
}

.ebene-marke.c {
    background: #e0e0e4;
    color: var(--text-2);
}

/* Sektionshinweis: Korridor-Erklärung (B) und Pflegeort (C). */
.gruppe-hinweis {
    font-size: 12.5px;
    color: var(--text-2);
    background: var(--primaer-hell);
    border-left: 3px solid var(--primaer);
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    margin: 0 0 10px;
}

.gruppe-hinweis.neutral {
    background: #f0f0f2;
    border-left-color: var(--text-3);
}

.sektion {
    scroll-margin-top: calc(var(--kopfleisten-hoehe, 64px) + 78px);
}