/*
 * Zeile 2 des Anwendungskopfs -- die graue Navigationszeile im mainFrame (09_080a, Spezifikation 09_080b §2).
 *
 * Markup: App\View\Services\NavigationRow, Verhalten: js/bi/nav/app-nav.js. Geladen auf JEDER Seite mit
 * Zeile (Ladematrix Plan §4.3): scripts/html_includes.inc.php (Legacy + eCRF, ausserhalb von `ignoreOul`),
 * resources/views/layouts/default.blade.php (Blade), scripts/EditorNew/maineditor.php (Editor).
 *
 * Position: Legacy/eCRF `body > .app-nav` fix oben; Blade/Editor traegt `body > header` die Klebung
 * (`_app.scss` bzw. `EditorNew/css/editor.css`, eigener Stapelkontext). z-index-Leiter (Plan §2.2):
 * Zeile 999 · Filterleisten darunter 998 (css/bi/bar.css) · Busy/iframe-Kappe 1000/1001 · Dialoge 8900+.
 *
 * Kaskade: die Zeile lebt in fremden Dokumenten (Bootstrap-Reboot, `button {font:14px/32px}` aus
 * field.css, `.bi button` aus crf.css, Linkfarben der Altoberflaeche). Darum setzt jede Regel hier ihre
 * Eigenschaften selbst und steht mit mindestens 0,2,0 (`.app-nav .x`) ueber diesen Element-Regeln.
 * Markenblau (#0069b4, #1abbf0, #0f8fbd) kommt hier nie vor (G8).
 */

.app-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    padding: 0 16px 0 14px;
    /* 09_091 (Auftraggeber F6): Kopf der Designsystem-Seiten -- surface-raised, hairline unten, body-sm (12),
       letztes Glied 600/ink. Vorher #F1F4F7 und 12,5/700. Ohne Custom Properties: die Zeile laeuft auf allen
       Seiten, auch ohne css/bi/ds/tokens.css. */
    background: #FBFCFD;
    border-bottom: 1px solid #E8EBEE;
    color: #1F2933;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

/* Legacy und eCRF: fix oben, ueber den Filterleisten (998). Blade/Editor: siehe Dateikopf. Im eCRF steht
   die Zeile im Namensraum `div.bi` (scripts/index.php) -- die Design-Knoepfe im Slot brauchen dessen
   Knopfregeln (`.bi .btn`). */
body > .app-nav,
body > .bi > .app-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.app-nav *,
.app-nav *::before,
.app-nav *::after {
    box-sizing: border-box;
}

/* ------------ Hamburger ------------------------------------------------------------------------ */
.app-nav .app-nav__burger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 0;
    margin: 0 2px 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #5F6A76;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.app-nav .app-nav__burger[hidden] {
    display: none;
}

/* 09_083a: weiss mit Rahmen -- #EEF3F7 war auf der Flaeche #F1F4F7 kaum zu sehen. */
.app-nav .app-nav__burger:hover {
    background: #FFFFFF;
    border-color: #D6DEE5;
    color: #1F2933;
}

.app-nav .app-nav__burger svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* ------------ Text, Trenner -------------------------------------------------------------------- */
.app-nav .app-nav__txt {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5F6A76;
    font-size: 12px;
}

.app-nav .app-nav__sep {
    flex: 0 0 auto;
    color: #7C8894;
    font-size: 12px;
}

/* Bereich ohne Liste (ohne Anmeldung, Passwortzwang, Seite ohne Auswahl). */
.app-nav .app-nav__cur {
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1F2933;
    font-size: 12px;
    font-weight: 600;
}

/* Rechter Slot (Aktionen der Seite; im eCRF die Design-Knoepfe und der Speicherstand). */
.app-nav .app-nav__slot {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ------------ Glied: Text, der zur Liste wird (09_080b §2.1) ----------------------------------- */
.app-nav .crumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    /* gleicht das Polster des Knopfs aus: ohne Maus steht der Text, wo er ohne Rahmen stuende -- nichts
       springt. Der negative Rand sitzt HIER, nicht am Knopf: am Knopf zaehlt er in die Inhaltsbreite des
       inline-flex-Glieds, das Glied wird 12 px zu schmal und der Knopf kuerzt seinen Text („H…“). */
    margin: 0 -6px;
}

.app-nav .crumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    min-width: 0;
    max-width: 100%;
    padding: 0 6px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #1F2933;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-shadow: none;
    box-shadow: none;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}

.app-nav .crumb-btn__t {
    display: block;
    min-width: 0;
    /* `overflow: hidden` schneidet an der Zeilenbox: bei der `line-height: 1` des Knopfs fielen die
       Unterlaengen (g, p, y) weg. Gilt ebenso fuer jeden anderen gekuerzten Text dieser Datei. */
    line-height: 1.35;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav .crumb-btn svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #5F6A76;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .12s ease;
}

.app-nav .crumb-btn:hover,
.app-nav .crumb-btn:focus-visible,
.app-nav .crumb-btn[aria-expanded="true"] {
    background: #fff;
    border-color: #7C8894;
    cursor: pointer;
}

.app-nav .crumb-btn:hover svg,
.app-nav .crumb-btn:focus-visible svg,
.app-nav .crumb-btn[aria-expanded="true"] svg {
    opacity: 1;
}

.app-nav .crumb-btn[aria-expanded="true"] {
    background: #DDECEE;
    color: #0E5F6B;
}

/* Zustandsfarbe am Knopf, nicht am SVG (Hausregel: keine Zustandsklassen am SVG). */
.app-nav .crumb-btn[aria-expanded="true"] svg {
    stroke: #0E5F6B;
}

.app-nav .crumb-btn .mono {
    font-family: Consolas, monospace;
    font-size: 12px;
}

/* ------------ Fokus (einheitlich) -------------------------------------------------------------- */
.app-nav .app-nav__burger:focus,
.app-nav .crumb-btn:focus,
.app-nav .crumb-menu__i:focus {
    outline: none;
}

.app-nav .app-nav__burger:focus-visible,
.app-nav .crumb-btn:focus-visible {
    outline: 2px solid #14707F;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

/* ------------ Liste ---------------------------------------------------------------------------- */
.app-nav .crumb-menu {
    position: absolute;
    left: 0;
    top: 33px;
    z-index: 30;
    display: block;
    min-width: 220px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #D6DEE5;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(23, 43, 63, .18);
    font-weight: 400;
    white-space: nowrap;
}

.app-nav .crumb-menu[hidden] {
    display: none;
}

.app-nav .crumb-menu__g {
    display: block;
    padding: 6px 10px 3px;
    color: #5F6A76;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.app-nav .crumb-menu__i,
.app-nav a.crumb-menu__i,
.app-nav a.crumb-menu__i:link,
.app-nav a.crumb-menu__i:visited {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #2C3A47;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.app-nav a.crumb-menu__i:hover,
.app-nav a.crumb-menu__i:focus,
.app-nav .crumb-menu__i:hover,
.app-nav .crumb-menu__i:focus {
    background: #EEF3F7;
    color: #1F2933;
    text-decoration: none;
}

.app-nav .crumb-menu__i:focus-visible {
    box-shadow: inset 0 0 0 2px #14707F;
}

.app-nav .crumb-menu__i[aria-current="true"],
.app-nav a.crumb-menu__i[aria-current="true"] {
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.app-nav .crumb-menu__l {
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zusatz rechts: Status, Anzahl -- der Grund, warum man nicht blind springt. */
.app-nav .crumb-menu__i .st {
    margin-left: auto;
    padding-left: 12px;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 400;
}

/* Suche ueber den eCRF-Listen (app-nav.js addSearch): klebt oben, die Liste rollt darunter. */
.app-nav .crumb-menu__search {
    position: sticky;
    top: -6px;
    z-index: 1;
    display: block;
    margin: -6px -6px 4px;
    padding: 6px 6px 6px;
    background: #fff;
    border-bottom: 1px solid #E8ECEF;
}

.app-nav input.crumb-menu__q {
    display: block;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #fff;
    color: #1F2933;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.app-nav input.crumb-menu__q::placeholder {
    color: #5F6A76;
    opacity: 1;
}

.app-nav input.crumb-menu__q:focus {
    border-color: #14707F;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

/* Gefilterte Eintraege, Koepfe, Trenner: `display` der Regeln oben schlaegt sonst das `hidden`-Attribut. */
.app-nav .crumb-menu [hidden] {
    /* !important: `.app-nav a.crumb-menu__i:link` (0,3,1) setzt `display: flex` */
    display: none !important;
}

/* Offene Queries (> 0): rotes Badge wie im linken Menue (`.menu-badge`), damit die Zahl auffaellt. Rot
   ist das Fehlerrot der Felder (09_063, #C0392B), weisse Schrift 5,4:1. Null offen bleibt grau. */
.app-nav .crumb-menu__i .st--alert {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 10px;
    background: #C0392B;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
}

.app-nav .crumb-menu__div {
    display: block;
    height: 1px;
    margin: 5px 8px;
    background: #E8ECEF;
}

/* ------------ eCRF-Variante (Schritt 3, 09_080b §3) -------------------------------------------- */
.app-nav .app-nav__inst .crumb-btn__t,
.app-nav .app-nav__cur.app-nav__inst {
    max-width: 220px;
}

.app-nav .app-nav__visit {
    max-width: 200px;
    white-space: nowrap;
}

.app-nav .app-nav__cyc {
    flex: 0 0 auto;
    color: #5F6A76;
    font-size: 12px;
}

/* Pfeile: ohne Maus nur das Symbol, unter der Maus mit Rahmen; am Rand deaktiviert (kein Umlauf). */
.app-nav .app-nav__arr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 28px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #5F6A76;
    font: inherit;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.app-nav .app-nav__arr:hover,
.app-nav .app-nav__arr:focus-visible {
    background: #fff;
    border-color: #7C8894;
    color: #1F2933;
}

.app-nav .app-nav__arr:focus {
    outline: none;
}

.app-nav .app-nav__arr:focus-visible {
    outline: 2px solid #14707F;
    outline-offset: 0;
}

.app-nav .app-nav__arr[disabled],
.app-nav .app-nav__arr[disabled]:hover {
    color: #B9C4CE;
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.app-nav .app-nav__arr svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav .app-nav__sex {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5F6A76;
    font-size: 12px;
}

/* Design-Modus-Schalter (rechts im Slot; Casebook E/F und eCRF). Aus: ruhig wie ein Glied, an: Teal wie
   ein geoeffnetes Glied. Zustand am Knopf (`aria-pressed`), nie am SVG. `.app-nav button.…` (0,2,1) gegen
   `.bi button` aus crf.css und `button {font: …}` aus field.css. */
.app-nav button.app-nav__dm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    margin: 0;
    border: 1px solid #C9D1D9;
    border-radius: 6px;
    background: #fff;
    color: #3E4C59;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.app-nav button.app-nav__dm:hover {
    border-color: #7C8894;
}

.app-nav button.app-nav__dm[aria-pressed="true"] {
    background: #DDECEE;
    border-color: #0E5F6B;
    color: #0E5F6B;
}

.app-nav button.app-nav__dm[disabled] {
    cursor: progress;
    opacity: .6;
}

.app-nav button.app-nav__dm:focus {
    outline: none;
}

.app-nav button.app-nav__dm:focus-visible {
    outline: 2px solid #14707F;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

.app-nav .app-nav__dm svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Meldung neben dem Schalter (Umschalten oder Cache-Neubau gescheitert), ggf. mit Knopf „Neu laden“. */
.app-nav .app-nav__dm-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #C0392B;
    font-size: 12px;
    font-weight: 600;
}

.app-nav button.app-nav__dm-reload {
    height: 24px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid #C0392B;
    border-radius: 6px;
    background: #fff;
    color: #C0392B;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Speicherstand-Pille (rechts im Slot). */
.app-nav .app-nav__save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: #E3EDF9;
    color: #1B4676;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.app-nav .app-nav__save[hidden] {
    display: none;
}

.app-nav .app-nav__save--dirty {
    background: #FBEBCD;
    color: #7A4A00;
}

.app-nav .app-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Liste: Meldung (laedt, Fehler), deaktivierte Eintraege, zyklische eCRFs (F10). */
.app-nav .crumb-menu__msg {
    display: block;
    padding: 8px 10px;
    color: #5F6A76;
    font-size: 12px;
}

.app-nav .crumb-menu__i[aria-disabled="true"],
.app-nav .crumb-menu__i[aria-disabled="true"]:hover {
    background: transparent;
    color: #7C8894;
    cursor: default;
}

.app-nav .crumb-menu__i--head {
    font-weight: 700;
}

.app-nav .crumb-menu__i--cyc,
.app-nav a.crumb-menu__i--cyc,
.app-nav a.crumb-menu__i--cyc:link,
.app-nav a.crumb-menu__i--cyc:visited {
    padding-left: 24px;
}

.app-nav .crumb-menu .mono {
    font-family: Consolas, monospace;
    font-size: 12px;
}

/* ------------ Schmal (09_080b §4): kuerzen statt umbrechen ------------------------------------- */
@media (max-width: 1099px) {
    .app-nav .crumb-btn__t,
    .app-nav .app-nav__inst .crumb-btn__t,
    .app-nav .app-nav__cur.app-nav__inst,
    .app-nav .app-nav__visit {
        max-width: 160px;
    }

    /* `eCRF ›` entfaellt. */
    .app-nav .app-nav__ecrf,
    .app-nav .app-nav__ecrf + .app-nav__sep {
        display: none;
    }

    /* Die Pille wird zum Punkt, der Text steht im `title`; der Design-Modus-Schalter nur noch Icon. */
    .app-nav .app-nav__dm-t,
    .app-nav .app-nav__save-t {
        display: none;
    }

    .app-nav .app-nav__save {
        padding: 0 7px;
    }
}

/* Druck: die Zeile ist Bedienung, kein Inhalt. */
@media print {
    .app-nav {
        display: none;
    }
}