/* ==================================================================================================
   09_075 -- Die gemeinsame Dialog-Huelle: Tokens und Bausteine.

   Eine Quelle fuer Kopf, Reiter, Rumpf, Fuss, Knoepfe, Schalter, Editor-Leiste, Streifen,
   Leerzustand, Griff, Fensterleiste und den blockierenden Dialog (js/bi/dlg/dlg-block.js). Werte
   und Masse 1:1 aus dem Auftrag Documentation/prompts/09_075b_einheitliche_Masken.md (§2-§8, Token);
   dieselben Werte traegt Casebook F als `--cbf-*` (css/bi/casebook-f/casebook-f.css).

   Geladen laut Ladematrix (Plan §5.1): scripts/html_includes.inc.php (eCRF, Casebook-Traeger,
   Anmeldung), scripts/EditorNew/maineditor.php (Studien-Editor), scripts/html_look.inc.php (oul-
   Seiten: Passwort aendern, Systemzustand), scripts/datacorrection/
   dmg.php. Laeuft damit neben jQuery 1.4.2, 1.4.4 und 1.11.1 und neben Stylesheets, die NACKTE
   Elemente stylen (css/bi/field.css: `button`, `input`, `select`; `.bi button` in crf.css, 0,1,1).

   Regeln dieser Datei
   1. Klassen nur mit Praefix `dlg` (bzw. `wbar`/`wchip` fuer die Fensterleiste): `.btn`, `.seg`,
      `.hint`, `.empty`, `.note-bar` kollidieren mit dem Bestand.
   2. Bausteine auf Knoepfen und Eingaben stehen unter einer der drei Wurzeln `.dlg` (Fenster),
      `.dlg-block` (blockierender Dialog) oder `.dlg-scope` (neutraler Traeger, z. B. eine Seite
      des Studien-Editors) -- das ergibt mindestens 0,2,0 und schlaegt `.bi button` (0,1,1) und
      `input[type="text"]` (0,1,1) unabhaengig von der Ladereihenfolge.
   3. Die Tokens (`--dlg-*`) stehen an denselben Wurzeln und an `.wbar`, NICHT an `:root` -- die
      Datei laeuft auch auf Seiten, deren eigene Stile sie nicht beruehren soll.
   4. KEIN `transform` und KEIN `filter` an der Fensterwurzel `.dlg`: beides macht sie zum
      umgebenden Block fuer `position: fixed`-Kinder (Workflow-Unterdialoge liegen IM Fragment).
      Das Abdunkeln des Elternfensters traegt der Schleier `.dlg__veil`, nicht `opacity`.
   5. `gap` ist erlaubt (die IE-9-Regel ist mit 09_075 entfallen, E8).
   6. Nicht als Text- oder Rahmenfarbe: die vier zu hellen Grautoene des Auftrags und die vier
      Altwerte der Masken (DialogTokenTest prueft die Liste ausserhalb der Kommentare).
      Platzhalter `#5F6A76`, gesperrte Option `#7C8894` auf `#F7F9FA` (E10).

   z-Leiter (fest, Plan §5.1 [R2 m9])
     eCRF: .bottomlayer 99, Kopfleiste 999, Datepicker 1001 ......... unveraendert
     Fensterleiste .wbar ............................................ 8900
       (Datepicker bei body.has-wbar ................................. 8950, setzt die Huelle, P1;
        Select2 liegt mit eigenem 9999 ohnehin darueber, Review m17)
     Arbeitsfenster .dlg (Schleier .dlg__veil darin) ................ 9000
     CodeMirror-Hints ............................................... 9100 bzw. 10100 (unveraendert)
     jGrowl-Meldungen ............................................... 9999 (unveraendert)
     Unterdialoge (Workflow 10000, lste-/labe-modal 10001/10002) .... unveraendert
     Autoren-API-Dialog crfApiDialog ................................ 10500
     blockierender Dialog .dlg-block ................................ 11000 (+2 je Stapelebene)
     Rueckfall jquery.alerts #popup_container ....................... 99999 (unveraendert)
   ================================================================================================== */


/* --------------------------------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------------------------------- */
.dlg,
.dlg-block,
.dlg-block__overlay,
.dlg-scope,
.wbar {
    /* Kontur */
    --dlg-line: #D6DEE5;
    --dlg-radius: 10px;
    --dlg-shadow: 0 18px 44px rgba(23, 43, 63, .24);
    --dlg-shadow-stack: 0 22px 54px rgba(23, 43, 63, .30);
    /* Schrift */
    --dlg-ink: #1F2933;            /* Titel, 14.76:1 */
    --dlg-ink-2: #2C3A47;          /* Fliesstext, 11.65:1 */
    --dlg-ink-3: #4A5966;          /* Hinweisstreifen, Editor-Symbole */
    --dlg-ink-4: #3B4956;          /* Plakette `--use` */
    --dlg-muted: #5F6A76;          /* Sekundaertext, 5.51:1 -- auch Platzhalter (E10) */
    /* Bedienelemente */
    --dlg-ctl: #7C8894;            /* Rahmen bedienbarer Elemente, 3.62:1 */
    --dlg-ctl-hover: #4C5A67;
    --dlg-ctl-soft: #B9C4CE;       /* Chip-Hover-Kontur */
    --dlg-hover: #EEF3F7;
    --dlg-hover-row: #F8FAFB;
    --dlg-on-bg: #DDECEE;          /* ausgewaehlt / aktiv */
    --dlg-on-fg: #0E5F6B;          /* 6.03:1 */
    --dlg-off-bg: #F7F9FA;         /* gesperrte Option */
    --dlg-off-fg: #7C8894;
    /* Primaer / destruktiv */
    --dlg-pri: #0E5F6B;            /* 7.32:1 mit Weiss */
    --dlg-pri-hover: #0B4F59;
    --dlg-pri-fg: #FFFFFF;
    --dlg-danger: #B03A2E;         /* 6.02:1 */
    --dlg-danger-bg: #FBE6E3;
    --dlg-danger-hover: #8E2C22;
    /* Fokus */
    --dlg-focus: #14707F;
    --dlg-focus-ring: 0 0 0 3px rgba(20, 112, 127, .18);
    /* Linien und Flaechen */
    --dlg-sep-foot: #E8EBEE;
    --dlg-sep-tabs: #DCE2E8;
    --dlg-sep-head: #C9D1D8;
    --dlg-foot-bg: #FBFCFD;
    --dlg-info-bg: #F1F4F7;
    --dlg-warn-bg: #FBEBCD;
    --dlg-warn-fg: #7A4A00;        /* 6.37:1 */
    /* Gattungen (Akzent) */
    --dlg-acc-q: #A96400;
    --dlg-acc-n: #2A6299;
    --dlg-acc-cfg: #0E5F6B;
    --dlg-acc-ro: #7C8894;
    /* Plaketten */
    --dlg-study-bg: #E3EDF9;       --dlg-study-fg: #1B4676;   /* 8.13:1 */
    --dlg-visit-bg: #DFEFE4;       --dlg-visit-fg: #17603A;   /* 6.35:1 */
    --dlg-use-bg: #EDF0F2;
    /* Abdunkeln */
    --dlg-overlay: rgba(23, 43, 63, .32);
    --dlg-veil: rgba(255, 255, 255, .55);
}

/* Die Gattungsfarbe setzt die Huelle am Fenster (Plan §5.2 „Akzent“); Standard = Konfiguration. */
.dlg {
    --dlg-accent: #0E5F6B;
}
.dlg--q   { --dlg-accent: #A96400; }
.dlg--n   { --dlg-accent: #2A6299; }
.dlg--cfg { --dlg-accent: #0E5F6B; }
.dlg--ro  { --dlg-accent: #7C8894; }


/* --------------------------------------------------------------------------------------------------
   Arbeitsfenster (die Huelle baut es ab P1; ohne Overlay, role="dialog", kein aria-modal)
   -------------------------------------------------------------------------------------------------- */
.dlg {
    position: fixed;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 720px;
    max-width: calc(100vw - 32px);
    max-height: min(86vh, 820px);
    border: 1px solid var(--dlg-line);
    border-radius: var(--dlg-radius);
    background: #FFFFFF;
    box-shadow: var(--dlg-shadow);
    color: var(--dlg-ink-2);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    overflow: hidden;
}

/* Breiten (§6): 480 blockierend, 640-760 ein Formular, 1000-1010 zwei Spalten oder Tabelle. */
.dlg--s { width: 480px; }
.dlg--m { width: 720px; }
.dlg--w { width: 1000px; }

/* Gestapelter Unterdialog: dieselbe Kontur, staerkerer Schatten. */
.dlg--stacked { box-shadow: var(--dlg-shadow-stack); }

/* Zustaende der Huelle */
.dlg.is-min { display: none; }
.dlg.is-max {
    max-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
}
.dlg.is-dragging,
.dlg.is-dragging * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hoehenmodus `fill` (Plan §5.2): das Fenster nimmt die volle Hoehe, der innere Bereich scrollt. */
.dlg.is-fill { height: min(86vh, 820px); }
.dlg.is-fill .dlg__bd { overflow: hidden; display: flex; flex-direction: column; }

/* Schleier ueber dem Elternfenster eines gestapelten Unterdialogs -- NICHT opacity/filter am
   Fenster (Regel 4). Liegt im Fenster, faengt Klicks ab; die Unterdialoge liegen darueber. */
.dlg__veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: none;
    border-radius: inherit;
    background: var(--dlg-veil, rgba(255, 255, 255, .55));
}
.dlg-stack-parent > .dlg__veil { display: block; }
/* 09_075 (P7): Schleier ausserhalb der Huelle -- im Studien-Editor legt der Unterdialog (Auswahl-
   liste, Laborparameter) ihn selbst ueber `#fancybox-wrap` bzw. `#loadcontainer`. Ein statisches
   Elternelement bekommt dafuer `position: relative`; der Schleier liegt ueber dem Schliessen-Kreuz
   von Fancybox (z 1103), sonst schloesse es das Elternfenster am Unterdialog vorbei. */
.dlg-veil-host { position: relative; }
.dlg__veil--host { z-index: 1200; }


/* --------------------------------------------------------------------------------------------------
   Kopf (§2)
   -------------------------------------------------------------------------------------------------- */
.dlg__hd {
    position: relative;
    flex-shrink: 0;
    padding: 14px 18px 12px;
    cursor: move;
    background: #FFFFFF;
}
.dlg__hd--q   { border-bottom: 2px solid #A96400; }
.dlg__hd--n   { border-bottom: 2px solid #2A6299; }
.dlg__hd--cfg { border-bottom: 2px solid #0E5F6B; }
.dlg__hd--ro  { border-bottom: 2px solid #7C8894; }
/* Mit Reitern wandert die Farbe auf den aktiven Reiter -- nie zwei Linien uebereinander. */
.dlg__hd--tabbed {
    border-bottom: 1px solid var(--dlg-sep-tabs);
    padding-bottom: 0;
}

.dlg__kick {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--dlg-muted);
}
.dlg__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dlg-ink);
}
/* Technische Kennung klein und neutral neben dem Titel, nicht im Titel. */
.dlg__id {
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--dlg-muted);
}
.dlg__crumb {
    margin-top: 4px;
    font-size: 12px;
    color: var(--dlg-muted);
}
.dlg__crumb b {
    font-weight: 600;
    color: var(--dlg-ink-2);
}
.dlg__tr {
    position: absolute;
    top: 13px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

/* Punkt fuer ungespeicherte Aenderungen (§2.1) */
.dlg__dot {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #A96400;
}

/* Minimieren / Schliessen (§2.2) -- kein rotes Kaestchen. SVG ohne width-Attribut (crf.js). */
.dlg .dlg__ib,
.dlg-block .dlg__ib,
.dlg-scope .dlg__ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--dlg-muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg__ib:hover,
.dlg-block .dlg__ib:hover,
.dlg-scope .dlg__ib:hover {
    background: var(--dlg-hover);
    color: var(--dlg-ink);
}
.dlg__ib svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Geltungsbereich als Plakette (§2.4) */
.dlg__badge {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.dlg__badge--study { background: #E3EDF9; color: #1B4676; }
.dlg__badge--visit { background: #DFEFE4; color: #17603A; }
.dlg__badge--use   { background: #EDF0F2; color: #3B4956; font-weight: 400; }


/* --------------------------------------------------------------------------------------------------
   Reiter (§3) -- role="tablist", aria-selected, Pfeiltasten
   -------------------------------------------------------------------------------------------------- */
.dlg__tabs {
    display: flex;
    gap: 20px;
    margin-top: 11px;
}
.dlg .dlg__tab,
.dlg-scope .dlg__tab {
    position: relative;
    margin: 0;
    padding: 0 0 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dlg-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg__tab:hover,
.dlg-scope .dlg__tab:hover { color: var(--dlg-ink); }
.dlg .dlg__tab.is-on,
.dlg .dlg__tab[aria-selected="true"],
.dlg-scope .dlg__tab.is-on,
.dlg-scope .dlg__tab[aria-selected="true"] {
    color: var(--dlg-ink);
    font-weight: 700;
}
.dlg .dlg__tab.is-on::after,
.dlg .dlg__tab[aria-selected="true"]::after,
.dlg-scope .dlg__tab.is-on::after,
.dlg-scope .dlg__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--dlg-accent, #0E5F6B);
}


/* --------------------------------------------------------------------------------------------------
   Rumpf (§4) -- genau ein Scrollbereich je Fenster
   -------------------------------------------------------------------------------------------------- */
.dlg__bd {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px;
    overflow: auto;
}
/* Fragmente mit Reitern (`data-dlg-flush`): Rumpf ohne Polster, Reiter und Fuss kleben. */
.dlg__bd--flush { padding: 0; }
.dlg__bd--flush .dlg__tabs--sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
    border-bottom: 1px solid var(--dlg-sep-tabs);
}
.dlg__bd--flush .dlg__ft--sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
}


/* --------------------------------------------------------------------------------------------------
   Fussleiste und Knoepfe (§5) -- genau ein Primaerknopf rechts, Zerstoerendes links
   -------------------------------------------------------------------------------------------------- */
.dlg__ft,
.dlg-block__ft {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-top: 1px solid var(--dlg-sep-foot);
    background: var(--dlg-foot-bg);
}
.dlg__ft .spacer,
.dlg__spacer { margin-left: auto; }
.dlg__status {
    min-width: 0;
    font-size: 12px;
    color: var(--dlg-muted);
}

.dlg .dlg-btn,
.dlg-block .dlg-btn,
.dlg-scope .dlg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--dlg-ctl);
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--dlg-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg-btn:hover,
.dlg-block .dlg-btn:hover,
.dlg-scope .dlg-btn:hover {
    background: var(--dlg-hover);
    border-color: var(--dlg-ctl-hover);
}
.dlg .dlg-btn--pri,
.dlg-block .dlg-btn--pri,
.dlg-scope .dlg-btn--pri {
    background: var(--dlg-pri);
    border-color: var(--dlg-pri);
    color: var(--dlg-pri-fg);
}
.dlg .dlg-btn--pri:hover,
.dlg-block .dlg-btn--pri:hover,
.dlg-scope .dlg-btn--pri:hover {
    background: var(--dlg-pri-hover);
    border-color: var(--dlg-pri-hover);
}
.dlg .dlg-btn--danger,
.dlg-block .dlg-btn--danger,
.dlg-scope .dlg-btn--danger {
    background: #FFFFFF;
    border-color: var(--dlg-danger);
    color: var(--dlg-danger);
}
.dlg .dlg-btn--danger:hover,
.dlg-block .dlg-btn--danger:hover,
.dlg-scope .dlg-btn--danger:hover {
    background: var(--dlg-danger-bg);
    border-color: var(--dlg-danger-hover);
    color: var(--dlg-danger-hover);
}
/* Destruktiv gefuellt: der Primaerknopf eines blockierenden Dialogs, der etwas zerstoert (§5). */
.dlg .dlg-btn--pri.dlg-btn--danger,
.dlg-block .dlg-btn--pri.dlg-btn--danger,
.dlg-scope .dlg-btn--pri.dlg-btn--danger {
    background: var(--dlg-danger);
    border-color: var(--dlg-danger);
    color: #FFFFFF;
}
.dlg .dlg-btn--pri.dlg-btn--danger:hover,
.dlg-block .dlg-btn--pri.dlg-btn--danger:hover,
.dlg-scope .dlg-btn--pri.dlg-btn--danger:hover {
    background: var(--dlg-danger-hover);
    border-color: var(--dlg-danger-hover);
    color: #FFFFFF;
}
.dlg .dlg-btn[disabled],
.dlg-block .dlg-btn[disabled],
.dlg-scope .dlg-btn[disabled],
.dlg .dlg-btn[aria-disabled="true"],
.dlg-block .dlg-btn[aria-disabled="true"],
.dlg-scope .dlg-btn[aria-disabled="true"] {
    background: var(--dlg-off-bg);
    border-color: var(--dlg-ctl);
    color: var(--dlg-off-fg);
    cursor: not-allowed;
}


/* --------------------------------------------------------------------------------------------------
   Zwei-/Dreiwege-Schalter (§7.1) -- <button type="button" aria-pressed>, nie gedehnt
   -------------------------------------------------------------------------------------------------- */
.dlg-seg {
    display: inline-flex;
    flex: 0 0 auto;
    justify-self: start;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    border: 1px solid var(--dlg-ctl, #7C8894);
    border-radius: 6px;
    overflow: hidden;
    vertical-align: middle;
}
.dlg .dlg-seg button,
.dlg-block .dlg-seg button,
.dlg-scope .dlg-seg button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--dlg-ctl);
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--dlg-ink-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg-seg button:last-child,
.dlg-block .dlg-seg button:last-child,
.dlg-scope .dlg-seg button:last-child { border-right: 0; }
.dlg .dlg-seg button:hover,
.dlg-block .dlg-seg button:hover,
.dlg-scope .dlg-seg button:hover { background: var(--dlg-hover); }
.dlg .dlg-seg button[aria-pressed="true"],
.dlg-block .dlg-seg button[aria-pressed="true"],
.dlg-scope .dlg-seg button[aria-pressed="true"] {
    background: var(--dlg-on-bg);
    color: var(--dlg-on-fg);
    font-weight: 700;
}
/* Gesperrte Option (E10): #7C8894 auf #F7F9FA -- den Grund traegt die Option als `title`. */
.dlg .dlg-seg button[disabled],
.dlg .dlg-seg button[aria-disabled="true"],
.dlg-block .dlg-seg button[disabled],
.dlg-block .dlg-seg button[aria-disabled="true"],
.dlg-scope .dlg-seg button[disabled],
.dlg-scope .dlg-seg button[aria-disabled="true"] {
    background: var(--dlg-off-bg);
    color: var(--dlg-off-fg);
    font-weight: 400;
    cursor: not-allowed;
}
/* zweiwertig, enger */
.dlg .dlg-seg--bi button,
.dlg-block .dlg-seg--bi button,
.dlg-scope .dlg-seg--bi button {
    justify-content: center;
    padding: 0 9px;
}


/* --------------------------------------------------------------------------------------------------
   Typ-Chips der Notiz (09_075b §9.2, P4) -- einfarbig, `role="radiogroup"` am Behaelter. Der
   Radioknopf bleibt echt (Pfeiltasten nativ), er ist nur unsichtbar, NICHT display:none (sonst nimmt
   er keinen Fokus). Die Typfarben aus Note::getNoteTypeIcons() bleiben der Notizverwaltung (G2).
   -------------------------------------------------------------------------------------------------- */
.dlg .dlg-ntype,
.dlg-scope .dlg-ntype {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    height: 30px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--dlg-ctl);
    border-radius: 15px;
    background: #FFFFFF;
    color: var(--dlg-ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.dlg .dlg-ntype:hover,
.dlg-scope .dlg-ntype:hover {
    border-color: var(--dlg-ctl-hover);
    background: var(--dlg-hover);
}
.dlg .dlg-ntype input,
.dlg-scope .dlg-ntype input {
    position: absolute;
    left: 8px;
    top: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}
.dlg .dlg-ntype i,
.dlg .dlg-ntype svg,
.dlg-scope .dlg-ntype i,
.dlg-scope .dlg-ntype svg {
    color: var(--dlg-muted);
    font-size: 12px;
}
.dlg .dlg-ntype.is-on,
.dlg .dlg-ntype.note-chip-active,
.dlg-scope .dlg-ntype.is-on,
.dlg-scope .dlg-ntype.note-chip-active {
    border-color: #2A6299;
    background: #E3EDF9;
    color: #1B4676;
    font-weight: 700;
}
.dlg .dlg-ntype.is-on i,
.dlg .dlg-ntype.note-chip-active i,
.dlg-scope .dlg-ntype.is-on i,
.dlg-scope .dlg-ntype.note-chip-active i { color: #1B4676; }
.dlg .dlg-ntype:focus-within,
.dlg .dlg-ntype.note-chip-focus,
.dlg-scope .dlg-ntype:focus-within {
    outline: 2px solid #14707F;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}


/* --------------------------------------------------------------------------------------------------
   Editor-Werkzeugleiste (§7.2) -- eigener Satz und Quill (`.ql-toolbar.ql-snow` unter `.dlg-ed`)
   -------------------------------------------------------------------------------------------------- */
.dlg-ed {
    border: 1px solid var(--dlg-ctl, #7C8894);
    border-radius: 6px;
    background: #FFFFFF;
    /* 09_075 (P4): NICHT overflow:hidden -- die Absatz-Auswahl und das Link-Fenster von Quill-Snow
       stehen absolut und ragen ueber den Rand; abgeschnitten waeren sie am unteren Rand nicht
       bedienbar. Die Rundung tragen darum Leiste und Flaeche selbst. */
    overflow: visible;
}
.dlg-ed > :first-child { border-radius: 5px 5px 0 0; }
.dlg-ed > :last-child { border-radius: 0 0 5px 5px; }
.dlg-ed__bar,
.dlg-ed__tbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--dlg-sep-tabs, #DCE2E8);
    background: var(--dlg-foot-bg, #FBFCFD);
}
/* Tabellenwerkzeuge nur, wenn der Cursor in einer Tabelle steht (dlg-richtext.js setzt hidden). */
.dlg-ed__tbar[hidden] { display: none; }
.dlg .dlg-ed__b,
.dlg-block .dlg-ed__b,
.dlg-scope .dlg-ed__b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dlg-ink-3);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg-ed__b:hover,
.dlg-block .dlg-ed__b:hover,
.dlg-scope .dlg-ed__b:hover {
    background: var(--dlg-hover);
    color: var(--dlg-ink);
}
.dlg .dlg-ed__b[aria-pressed="true"],
.dlg-scope .dlg-ed__b[aria-pressed="true"] {
    background: var(--dlg-on-bg);
    color: var(--dlg-on-fg);
}
.dlg-ed__b svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dlg-ed__div {
    width: 1px;
    height: 16px;
    margin: 0 5px;
    background: var(--dlg-sep-tabs, #DCE2E8);
}

/* Quill 2.0.3 unter .dlg-ed: Leiste wie oben, Flaeche waechst mit dem Inhalt (min. 104 px). */
.dlg-ed .ql-toolbar.ql-snow {
    padding: 4px 6px;
    border: 0;
    border-bottom: 1px solid var(--dlg-sep-tabs, #DCE2E8);
    background: var(--dlg-foot-bg, #FBFCFD);
    font-family: inherit;
}
.dlg-ed .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.dlg-ed .ql-toolbar.ql-snow button {
    width: 26px;
    height: 24px;
    padding: 3px 5px;
    border-radius: 4px;
}
.dlg-ed .ql-toolbar.ql-snow button:hover { background: var(--dlg-hover, #EEF3F7); }
.dlg-ed .ql-snow .ql-stroke { stroke: var(--dlg-ink-3, #4A5966); }
.dlg-ed .ql-snow .ql-fill { fill: var(--dlg-ink-3, #4A5966); }
.dlg-ed .ql-snow .ql-picker { color: var(--dlg-ink-3, #4A5966); }
.dlg-ed .ql-container.ql-snow {
    height: auto;
    border: 0;
    font-family: inherit;
    font-size: 13px;
}
.dlg-ed .ql-editor {
    min-height: 104px;
    padding: 10px 12px;
    color: var(--dlg-ink-2, #2C3A47);
}
.dlg-ed .ql-editor.ql-blank::before {
    left: 12px;
    right: 12px;
    color: var(--dlg-muted, #5F6A76);
    font-style: normal;
}
/* Frage im Link-Fenster in der Sprache der Anwendung (dlg-richtext.js setzt `data-dlg-link`). */
.dlg-ed .ql-snow .ql-tooltip[data-mode="link"][data-dlg-link]::before {
    content: attr(data-dlg-link);
}
.dlg-ed .ql-snow .ql-tooltip { z-index: 5; }
.dlg-ed .ql-snow .ql-tooltip input[type="text"] {
    border-color: var(--dlg-ctl, #7C8894);
    color: var(--dlg-ink-2, #2C3A47);
}


/* --------------------------------------------------------------------------------------------------
   Hinweis- und Warnstreifen, Feldhinweis, Leerzustand (§7.3, §7.4)
   -------------------------------------------------------------------------------------------------- */
.dlg-info,
.dlg-warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.45;
}
.dlg-info { background: #F1F4F7; color: #4A5966; }
.dlg-warn { background: #FBEBCD; color: #7A4A00; }
.dlg-info > svg,
.dlg-warn > svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dlg-hint {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #5F6A76;
}

.dlg-empty {
    padding: 30px;
    border: 1px dashed #C9D1D8;
    border-radius: 8px;
    background: #FBFCFD;
    color: #5F6A76;
    font-size: 13px;
    text-align: center;
}


/* --------------------------------------------------------------------------------------------------
   Sortierbare Zeilen (§7.5) -- Griff als 2x3-Punktraster, Loeschen je Zeile
   -------------------------------------------------------------------------------------------------- */
.dlg .dlg-grab,
.dlg-block .dlg-grab,
.dlg-scope .dlg-grab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dlg-ctl);
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg-grab:hover,
.dlg-block .dlg-grab:hover,
.dlg-scope .dlg-grab:hover { color: var(--dlg-ink); }
.dlg-grab svg {
    width: 8px;
    height: 14px;
    fill: currentColor;
}

.dlg .dlg-row-x,
.dlg-block .dlg-row-x,
.dlg-scope .dlg-row-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dlg-line);
    border-radius: 5px;
    background: #FFFFFF;
    color: var(--dlg-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dlg .dlg-row-x:hover,
.dlg-block .dlg-row-x:hover,
.dlg-scope .dlg-row-x:hover {
    background: var(--dlg-danger-bg);
    border-color: var(--dlg-danger);
    color: var(--dlg-danger);
}
.dlg-row-x svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Tastenkuerzel im Hinweistext: <kbd>Strg</kbd> + <kbd>Leer</kbd> */
.dlg-kbd,
.dlg-info kbd {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #C9D1D8;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #FFFFFF;
    color: #2C3A47;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    line-height: 16px;
}


/* --------------------------------------------------------------------------------------------------
   Fokus (§10) -- 2px #14707F + Ring; Hover-Aktionen werden bei Tastaturfokus sichtbar
   -------------------------------------------------------------------------------------------------- */
/* Knoepfe und Links nur bei TASTATURfokus (`:focus-visible`): nach einem Mausklick stand der Rahmen
   sonst als Kasten um den gerade angeklickten Reiter bzw. Knopf (Browser-Abnahme 2026-09-25; §3
   „kein Kasten um den aktiven Reiter“). Eingabefelder zeigen ihn bei jedem Fokus. */
.dlg button:focus-visible,
.dlg input:focus,
.dlg select:focus,
.dlg textarea:focus,
.dlg a:focus-visible,
.dlg-block button:focus-visible,
.dlg-block input:focus,
.dlg-block textarea:focus,
.dlg-scope .dlg-btn:focus-visible,
.dlg-scope .dlg-seg button:focus-visible,
.wbar button:focus-visible {
    outline: 2px solid #14707F;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

/* Reiter: nach einem Mausklick kein Rahmen, auch wenn der Browser selbst einen zeichnen wuerde. */
.dlg .dlg__tab:focus:not(:focus-visible),
.dlg-scope .dlg__tab:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}


/* --------------------------------------------------------------------------------------------------
   Fensterleiste (§8) -- nur sichtbar, wenn ein Fenster minimiert ist (G6: hoechstens ein Chip)
   -------------------------------------------------------------------------------------------------- */
.wbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8900;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 11px 20px;
    border-top: 1px solid var(--dlg-sep-tabs);
    background: #FFFFFF;
    font-family: inherit;
}
.wbar[hidden] { display: none; }
.wbar .wchip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    height: 32px;
    margin: 0;
    padding: 0 5px 0 0;
    border: 1px solid var(--dlg-line);
    border-radius: 6px;
    background: #FFFFFF;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
}
.wbar .wchip:hover {
    background: var(--dlg-hover);
    border-color: var(--dlg-ctl-soft);
}
.wchip__bar {
    align-self: stretch;
    flex-shrink: 0;
    width: 3px;
    background: var(--dlg-accent, #0E5F6B);
}
.wchip--q .wchip__bar   { background: #A96400; }
.wchip--n .wchip__bar   { background: #2A6299; }
.wchip--cfg .wchip__bar { background: #0E5F6B; }
.wchip--ro .wchip__bar  { background: #7C8894; }
.wchip__kick {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--dlg-muted);
}
.wchip__t {
    max-width: 280px;
    overflow: hidden;
    color: var(--dlg-ink-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wbar .wchip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dlg-muted);
    cursor: pointer;
}
.wbar .wchip__x:hover {
    background: var(--dlg-hover);
    color: var(--dlg-ink);
}
.wchip__x svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}


/* --------------------------------------------------------------------------------------------------
   Blockierender Dialog (§1.2) -- js/bi/dlg/dlg-block.js
   480 px, Abdunkelung rgba(23,43,63,.32), role="alertdialog" aria-modal="true", kein Minimieren,
   hoechstens zwei Knoepfe plus Abbrechen (E9). Haengt am <body>, z-index 11000 (+2 je Ebene).
   -------------------------------------------------------------------------------------------------- */
.dlg-block__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    background: rgba(23, 43, 63, .32);
    -webkit-animation: dlg-fade .12s ease-out;
    animation: dlg-fade .12s ease-out;
}
.dlg-block {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 480px;
    max-width: 100%;
    max-height: min(86vh, 820px);
    border: 1px solid var(--dlg-line);
    border-radius: var(--dlg-radius);
    background: #FFFFFF;
    box-shadow: var(--dlg-shadow);
    color: var(--dlg-ink-2);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    overflow: hidden;
}
.dlg-block:focus { outline: none; }
.dlg-block__hd {
    flex-shrink: 0;
    padding: 16px 18px 0;
}
.dlg-block .dlg-block__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dlg-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.dlg-block__bd {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 18px 16px;
    overflow: auto;
}
.dlg-block__msg {
    color: var(--dlg-ink-2);
    word-wrap: break-word;
}
.dlg-block__msg:empty { display: none; }
.dlg-block__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.dlg-block__fields:empty { display: none; }
.dlg-block__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dlg-block .dlg-block__label {
    display: block;
    margin: 0;
    color: var(--dlg-ink-2);
    font-size: 12px;
    font-weight: 600;
}
.dlg-block .dlg-block__in {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--dlg-ctl);
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--dlg-ink-2);
    font-family: inherit;
    font-size: 13px;
    line-height: 30px;
    vertical-align: baseline;
    -webkit-transition: none;
    transition: none;
}
.dlg-block textarea.dlg-block__in {
    height: auto;
    min-height: 96px;
    padding: 7px 9px;
    line-height: 1.45;
    resize: vertical;
}
.dlg-block .dlg-block__in:hover { border-color: var(--dlg-ctl-hover); }
.dlg-block .dlg-block__in:focus {
    border-color: var(--dlg-focus);
    outline: 2px solid #14707F;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}
.dlg-block .dlg-block__in[aria-invalid="true"] { border-color: var(--dlg-danger); }
.dlg-block .dlg-block__in::placeholder { color: var(--dlg-muted); opacity: 1; }
.dlg-block__status {
    margin-top: 10px;
    font-size: 12px;
    color: var(--dlg-muted);
}
.dlg-block__status:empty { display: none; }
.dlg-block__status--error { color: var(--dlg-danger); font-weight: 600; }
.dlg-block__status--ok { color: var(--dlg-on-fg); }
.dlg-block__ft { justify-content: flex-end; }

@-webkit-keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }


/* --------------------------------------------------------------------------------------------------
   prefers-reduced-motion (§10): keine Ein-/Ausblendung, keine Bewegung beim Minimieren
   -------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dlg,
    .dlg *,
    .dlg-block__overlay,
    .dlg-block,
    .wbar,
    .wbar * {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}