/* ===========================================================================
   Verwalter-Menü des Standard-Grids ("…")

   JEDER Wert hier ist aus der abgenommenen Vorschau abgemessen:
   docs/concepts/VORSCHAU-Standard-Grid.html, Abschnitt 4 (.adm-split/.adm-nav/
   .adm-pane/.adm-sec/.adm-line/.adm-chips/.chip/.wpx/.adm-ico).

   Zwei Lehren stecken in dieser Datei:

   1. Die erste Fassung des Dialogs brachte vier Klassen mit und hatte fuer
      KEINE eine Regel — rohe Browser-Groessen in einer dunklen Anwendung, bei
      gruenem Build (Anleitung §11, Fehler 2).
   2. Die zweite Fassung hatte Regeln, aber MEINE Zahlen statt der abgenommenen:
      208 statt 186 px Navigation, 13 px normale Ueberschrift statt 11 px
      Versalien, eigene Umschalter statt der vorhandenen .wl-mode-Klassen.
      "Aehnlich" ist nicht 1:1 — gemessen wird gegen die Vorlage, nicht gegen
      die eigene Vorstellung.

   Ausschliesslich --fn-*-Tokens (Design-Vorgabe §1, §1f, §1g).
   ======================================================================== */

/* --- Kopfzeile: Titel ---------------------------------------------------- */
.fn-gridmgr-title {
    font-weight: var(--fn-font-weight-medium);
}


/* --- Huelle: oben der Split, unten die Fusszeile -------------------------
   Der Koerper des Fensters traegt bei FlushBody `overflow:hidden`. Nimmt der
   Split die volle Hoehe, liegt die Fusszeile mit "Speichern" darunter und ist
   unsichtbar - kein Fehler im Log, kein roter Test, nur ein Dialog, den man
   nicht speichern kann. Genau so stand es im Live-Bild vom 09.09.2026. */
.fn-gridmgr-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* --- Zwei Spalten: links die Bereiche, rechts der gewaehlte (.adm-split) - */
.fn-gridmgr {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* .adm-nav: 186px fest, Grund --fn-bg-muted */
.fn-gridmgr-nav {
    display: flex;
    flex: 0 0 186px;
    flex-direction: column;
    gap: 2px;
    width: 186px;
    padding: 12px 10px;
    border-right: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted);
    overflow-y: auto;
}

/* .adm-nav .cat — der Eintrag ist ein FnButton, seine Optik kommt von hier. */
.fn-gridmgr-cat {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--fn-radius-sm);
    background: none;
    color: var(--fn-text-secondary);
    font-size: 13px;
    font-weight: var(--fn-font-weight-regular);
    text-align: left;
    transition: background .16s ease, color .16s ease;
}

.fn-gridmgr-cat:hover {
    background: var(--fn-bg-alt);
    color: var(--fn-text);
}

/* Aktiv: heller Grund, NORMALE Textfarbe — nicht Primary, nicht fetter. */
.fn-gridmgr-cat.on {
    background: var(--fn-accent-soft);
    color: var(--fn-text);
}

/* .adm-pane: der Rand liegt in den Abschnitten, nicht in der Flaeche. */
.fn-gridmgr-pane {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 6px 0;
    overflow-y: auto;
}

/* --- Abschnitt (.adm-sec): Trennlinie UNTEN, nicht oben ------------------ */
.fn-gridmgr-sec {
    padding: 12px 16px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-gridmgr-sec:last-child {
    border-bottom: 0;
}

/* 11px Versalien in Tertiaerfarbe — die Ueberschrift ordnet, sie ruft nicht. */
.fn-gridmgr-sec h4 {
    margin: 0 0 3px;
    color: var(--fn-text-tertiary);
    font-size: 11px;
    font-weight: var(--fn-font-weight-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fn-gridmgr-lead {
    margin: 0 0 9px;
    color: var(--fn-text-tertiary);
    font-size: 11.5px;
    line-height: 1.5;
}

.fn-gridmgr-lead b {
    color: var(--fn-text-secondary);
    font-weight: var(--fn-font-weight-medium);
}

/* --- Zeile (.adm-line) --------------------------------------------------- */
/* Zwischen je zwei Eintraegen eine waagerechte Trennlinie - dieselbe wie im Spalten-Dialog
   (.fn-grid-cols-row), Niko 11.09.2026: "dann haette ich gerne zwischen jedem Element eine
   horizontale Trennlinie (wie bei den Spalten zum Ein-/Ausblenden)". Dieselbe Sache, dieselbe
   Gestalt - kein zweites Muster fuer dasselbe. Die letzte Zeile bekommt keine, sonst haengt eine
   Linie ohne Nachbarn unter dem Block. */
.fn-gridmgr-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-gridmgr-line:last-child {
    border-bottom: 0;
}

/* Eine Zeile mit Erlaeuterung ist zweizeilig. Zentriert man das Kaestchen gegen
   den GANZEN Block, sitzt es 5,5px unter der Beschriftung (UX-Messung
   09.09.2026). Es gehoert an die erste Textzeile. */
.fn-gridmgr-line:has(.fn-gridmgr-sub) {
    align-items: flex-start;
}

.fn-gridmgr-line:has(.fn-gridmgr-sub) input[type="checkbox"] {
    margin-top: 2px;
}

.fn-gridmgr-name {
    flex: 1;
    min-width: 0;
    color: var(--fn-text);
}

.fn-gridmgr-sub {
    display: block;
    margin-top: 1px;
    color: var(--fn-text-tertiary);
    font-size: 11px;
    line-height: 1.45;
}

/* --- Chips (.adm-chips/.chip) ------------------------------------------- */
.fn-gridmgr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.fn-gridmgr-chip {
    gap: 6px;
    padding: 4px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-pill);
    background: var(--fn-bg-alt);
    color: var(--fn-text-secondary);
    font-size: 11.5px;
    font-weight: var(--fn-font-weight-regular);
}

.fn-gridmgr-chip:hover {
    color: var(--fn-text);
}

.fn-gridmgr-chip.on {
    border-color: var(--fn-primary);
    background: var(--fn-surface-alt);
    color: var(--fn-primary);
}

.fn-gridmgr-chip .fn-icon {
    width: 12px;
    height: 12px;
}

/* --- Lange Liste rollt in sich, nie der ganze Dialog (.fn-rolle) --------- */
.fn-gridmgr-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* .wpx — 66x26, klein und rechtsbuendig; eine Breite ist eine Zahl, kein Feld
   in Eingabegroesse. */
.fn-gridmgr-width {
    width: 66px;
    height: 26px;
    padding: 0 7px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text);
    font-family: var(--fn-font-mono);
    font-size: 11.5px;
    text-align: right;
}

/* Freier Platz an Stelle der Zeichenangabe bei einem Zeitfeld im Reiter "Filter" - so breit wie
   .fn-gridmgr-width, damit die Stellung in einer Flucht bleibt. */
.fn-gridmgr-gap {
    flex: none;
    width: 66px;
}

.fn-gridmgr-width:focus {
    border-color: var(--fn-primary);
    box-shadow: var(--fn-focus-ring);
    outline: none;
}

/* --- Symbol der Kachel -------------------------------------------------
   Masse und Aufbau aus dem VORBILD Benutzerverwaltung uebernommen
   (Components/Settings/UserEditDialog.razor.css, .ue-avatar-*): ein klickbares
   Feld, Zeichen unten rechts, Loesch-Kreuz oben links, verstecktes InputFile
   ueber allem. Eckig statt rund - ein Kachelsymbol ist kein Portrait. */
.fn-gridmgr-pic {
    position: relative;
    width: 76px;
    height: 76px;
    flex: none;
    cursor: pointer;
}

/* Ohne Kachel gibt es keinen Ort fuer ein Symbol - das Feld ist dann sichtbar gesperrt, nicht
   versteckt. */
.fn-gridmgr-pic.aus {
    opacity: .45;
    cursor: not-allowed;
}

.fn-gridmgr-warn {
    color: var(--fn-warning);
}

/* RUND wie im Vorbild (.ue-avatar-img / .ue-avatar-initials, beide radius-round).
   Eine fruehere Fassung machte das Feld eckig mit der Begruendung, ein Kachelsymbol sei kein
   Portrait. Das war eine EIGENE Entscheidung, keine Vorgabe - und Niko hat sie am 10.09.2026
   zurueckgewiesen: "beim Symbol zur Kachel hast du aber nichts angepasst! Bitte das auch nach
   Vorgabe korrigieren!" Seine Vorgabe lautete "Nimm bitte diese aus Benutzerverwaltung", und
   1:1 heisst 1:1 - auch dort, wo einem selbst etwas anderes besser gefaellt. */
.fn-gridmgr-pic-img {
    width: 76px;
    height: 76px;
    border: 2px solid var(--fn-border-strong);
    border-radius: var(--fn-radius-round);
    object-fit: cover;
}

.fn-gridmgr-pic-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 2px solid var(--fn-border-strong);
    border-radius: var(--fn-radius-round);
    background: var(--fn-accent-soft);
    color: var(--fn-primary);
}

.fn-gridmgr-pic-empty svg {
    width: 28px;
    height: 28px;
}

/* Der Hinweis "hier klicken" - er faengt keine Klicks ab, sondern laesst sie
   zum InputFile durch (pointer-events:none, wie im Vorbild). */
.fn-gridmgr-pic-cam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-round);
    background: var(--fn-bg-muted);
    /* Das Vorbild (.ue-avatar-cam) traegt hier die VOLLE Textfarbe. Mit --fn-text-secondary
       wirkte das Zeichen abgeschaltet, obwohl es der Hinweis "hier klicken" ist; der Unterschied
       war am 10.09.2026 live messbar. Farbwerte stehen bewusst nicht als Zahl in diesem
       Kommentar - das Gate FINLIST003 laesst in dieser Datei keine rgb-Literale zu, auch nicht
       in einem Kommentar, und es hat recht: eine Zahl im Text wird irgendwann in eine Regel
       kopiert. */
    color: var(--fn-text);
    pointer-events: none;
}

.fn-gridmgr-pic-cam svg {
    width: 13px;
    height: 13px;
}

/* Das verstecke InputFile deckt das ganze Feld ab - ein Klick irgendwo darauf
   oeffnet die Dateiauswahl (Muster aus dem Vorbild). */
.fn-gridmgr-pic input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Das Kreuz liegt UEBER dem InputFile - deshalb trifft der Klick es und nicht
   den Dateidialog. */
.fn-gridmgr-pic-x {
    position: absolute;
    left: -6px;
    top: -6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--fn-radius-round);
    background: var(--fn-danger);
    color: var(--fn-on-primary);
}

.fn-gridmgr-pic-x svg {
    width: 11px;
    height: 11px;
}

/* --- Fusszeile ----------------------------------------------------------
   Der Koerper ist randlos (FlushBody), also traegt die Huelle den Innenabstand.
   Masse aus der GERENDERTEN Design-Vorgabe gemessen (09.09.2026, Wirt der
   Footer-Demo zu §2c): 16px oben/unten, 18px seitlich.

   Ohne diesen Abstand klebte "Gilt fuer alle Nutzer…" 2px am linken und der
   Speichern-Knopf 1px am rechten Rahmen, und beide Knoepfe sassen auf der
   unteren Kante — Nikos Befund vom 09.09.2026: "die beiden buttons unten
   muessen hoeher und weiter nach links ruecken, der Text unten links muss
   weiter nach innen". Die 11px/16px eines fruehen Versuchs stammten aus der
   Vorschau (.dlg-f) und waren zu knapp. */
.fn-gridmgr-shell > .fn-form-foot {
    margin-top: 0;
    padding: 16px 18px;
}

/* FnFormFooter bringt `padding-top:14px` mit, und sein Scoped-Bundle laedt NACH dieser Datei -
   die 16px oben kamen deshalb nie an (gemessen 10.09.2026: footerPadding.top = 14px, der
   Kommentar behauptete 16). Diese Regel ist spezifischer und gewinnt. */
.fn-gridmgr-shell > .fn-form-foot.fn-form-foot {
    padding-top: 16px;
}

/* --- Fusszeile: fuer wen der Rahmen gilt --------------------------------- */
.fn-gridmgr-scope {
    color: var(--fn-text-tertiary);
    font-size: 11.5px;
}

.fn-gridmgr-scope b {
    color: var(--fn-text-secondary);
    font-weight: var(--fn-font-weight-medium);
}

/* --- Reiter „Spalten" und „Aktionen" (Niko 11.09.2026) -------------------
   „Checkbox + Breitenangabe - bei Deaktivierung ist dann auch die Breitenangabe
   deaktiviert!" · „hier werden die Icons pro Zeile und im Kopf an-/abgeschaltet!"
   ---------------------------------------------------------------------- */

/* Eine entzogene Spalte: Name gedimmt, Feld gesperrt. Das Kaestchen bleibt in
   voller Deckkraft - es ist das Bedienelement, mit dem man sie zurueckholt. */
.fn-gridmgr-line.fn-gridmgr-aus .fn-gridmgr-name {
    color: var(--fn-text-tertiary);
}

.fn-gridmgr-width:disabled {
    opacity: .4;
    background: var(--fn-bg-muted);
    color: var(--fn-text-tertiary);
    cursor: not-allowed;
}

/* „immer" an der festen Kennungsspalte - dieselbe Beschriftung wie im
   Spalten-Dialog des Nutzers (.fn-grid-cols-pin), damit beide dasselbe sagen. */
.fn-gridmgr-pin {
    flex: none;
    color: var(--fn-text-tertiary);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Gruppenueberschrift im Reiter „Aktionen" („Im Kopf" / „Je Zeile"). Sie ordnet
   zwei Bloecke, ohne einen zweiten Abschnitt mit eigener Trennlinie zu oeffnen. */
.fn-gridmgr-group {
    margin: 0 0 2px;
    padding-top: 12px;
    color: var(--fn-text-tertiary);
    font-size: 10.5px;
    font-weight: var(--fn-font-weight-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fn-gridmgr-group:first-of-type {
    padding-top: 4px;
}

/* Das Zeichen NEBEN dem Namen: Der Verwalter erkennt die Aktion am Bild, nicht
   erst am Wort - dieselbe Groesse wie in der Werkzeugleiste der Liste. */
.fn-gridmgr-line .fn-icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--fn-text-secondary);
}

/* =========================================================================
   Reiter "Filter" — die Pfeile fuer die Reihenfolge (Niko 11.09.2026:
   "die Reihenfolge bestimmt der Verwalter").

   Sie stehen rechts in derselben Zeile wie Kaestchen und Stellung - dieselbe
   Anordnung wie die Breitenangabe im Reiter "Spalten" (.fn-gridmgr-width).
   Die Knoepfe selbst sind FnButton; hier steht nur ihre Groesse am Platz.
   ========================================================================= */

.fn-gridmgr-ord {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: 84px;
}

/* Reiter "Filter": Stellung, Zeichen und Pfeile stehen in festen Spalten - "Spalte" steht unter "Filter n"
   (Vorschau Abschnitt E: .role 70 px, .ord in jeder Zeile), und jede Zeile ist so hoch wie die mit Pfeilen
   (UX-Designer 13.09.2026, M1). */
/* Schrift wie Vorschau E (.role: 11,5 px, normal geschrieben, tertiaer; .role.on: --fn-primary) - UX-Designer
   13.09.2026, M2. Die Versalien von .fn-gridmgr-pin gelten fuer "immer" im Reiter "Spalten", nicht hier. */
.fn-gridmgr-role {
    width: 70px;
    font-size: 11.5px;
    letter-spacing: normal;
    text-transform: none;
}

.fn-gridmgr-role.on {
    color: var(--fn-primary);
}

/* border-box: die Hoehe schliesst Innenabstand (7 px oben und unten) und Trennlinie ein - live gemessen ist die
   Zeile mit Zeichenfeld und Pfeilen 46 px hoch (13.09.2026, v0.91.0.27); 27 px wirkten deshalb nicht. */
.fn-gridmgr-fline {
    min-height: 46px;
}

/* =========================================================================
   Reiter "Spalten" — Vorhanden · Name · Gruppierung erlaubt · Breite (Niko 14.09.2026: "Spalten muessen hier
   umbenannt werden koennen" · "Gruppierung erlaubt Ja/Nein"). Feste Spaltenbreiten, damit Kopfzeile und Zeilen
   in einer Flucht stehen; der Name nimmt den Rest.
   ========================================================================= */

.fn-gridmgr-colhead {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 0 0 6px;
    /* Sekundaerton statt Tertiaerton: Die Koepfe tragen Pflichtwissen, tertiaer erreichte nur 3,3:1
       (UX-Designer 14.09.2026, Befund 4). */
    color: var(--fn-text-secondary);
    font-size: 10.5px;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-gridmgr-c-show {
    display: flex;
    flex: none;
    justify-content: center;
    width: 70px;
}

.fn-gridmgr-c-state {
    flex: none;
    width: 44px;
}

.fn-gridmgr-c-name {
    display: flex;
    flex: 1;
    min-width: 0;
}

.fn-gridmgr-colhead .fn-gridmgr-c-name {
    padding-left: 9px;
}

.fn-gridmgr-c-grp {
    display: flex;
    flex: none;
    justify-content: center;
    width: 90px;
    text-align: center;
}

.fn-gridmgr-c-wid {
    flex: none;
    width: 66px;
    text-align: right;
}

/* Das Namensfeld hat die Hoehe des Breitenfeldes in derselben Zeile (26 px) - dieselbe Zeile, dasselbe Mass. */
.fn-gridmgr-label {
    flex: 1;
    min-width: 0;
    height: 26px;
    padding: 0 8px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text);
    font-family: var(--fn-font);
    font-size: 12.5px;
}

.fn-gridmgr-label:focus {
    border-color: var(--fn-primary);
    outline: none;
}

.fn-gridmgr-label:disabled {
    opacity: .4;
    background: var(--fn-bg-muted);
    color: var(--fn-text-tertiary);
    cursor: not-allowed;
}

/* Reiter "Gruppierung": ein gesperrtes Feld nennt seinen Grund ("nicht gruppierbar") - er braucht mehr Platz als
   "Ebene 1" und bricht sonst um; der freie Platz daneben entfaellt, der Text beginnt in derselben Flucht. */
.fn-gridmgr-lockrow .fn-gridmgr-role {
    width: 145px;
    white-space: nowrap;
}

.fn-gridmgr-lockrow .fn-gridmgr-gap {
    display: none;
}