/* ─────────────────────────────────────────────────────────────────────────────
 * MBIS Zebra – UI-Vokabular
 *
 * EINE Datei für die gemeinsame Design-Sprache der Zebra-Oberfläche: Tokens als
 * CSS-Variablen und ein paar generische Bausteine (`.z-card`, `.z-kpi`,
 * `.z-eyebrow`, `.z-badge`), damit neue Seiten nicht jedes Mal dieselben Farben
 * und Radien neu erfinden.
 *
 * Der `.z-*`-Teil ist additiv (eigene Klassen). Der Block „Bootstrap auf CI"
 * weiter unten hebt zusätzlich Bootstraps Semantik-Farben auf die Marketline-CI
 * — ausschließlich über Bootstraps eigene CSS-Variablen und Komponenten-Vars,
 * damit die 147 bestehenden Seiten ihre Struktur behalten und nur die Farbe
 * wechselt.
 *
 * ── Marketline-CI (Brand Design Guide) ──────────────────────────────────────
 *   Orange  #f9ae26 · #fdd06c · #fff1d9      (Akzent / Aktion)
 *   Cyan    #3ebbcf · #a1d8ef · #dff1fd      (Info)
 *   Grün    #91c01c · #accd6b · #d8e6b0      (Erfolg)
 *   Rot     #df0811 · #ef8061 · #f7b9a1      (Alarm)
 *   Grau    #1c1c1c · #3f3f3f · #7f7f7f · #bfbfbf · #e5e5e5 · #f4f4f4
 *
 * KONTRASTREGEL: Orange ist eine FLÄCHE, keine Schriftfarbe. Auf #f9ae26 steht
 * immer #1c1c1c (9,0:1) — weiß darauf wäre 1,9:1 und ist verboten. Als Text auf
 * Weiß wird die abgedunkelte Ableitung --z-accent-ink (#c87e06) benutzt, auf
 * hellorangem Grund --z-accent-ink-strong (#8a5c00).
 * ────────────────────────────────────────────────────────────────────────── */

:root {
    --z-border: #e5e5e5;
    --z-border-strong: #bfbfbf;
    --z-hairline: #ececec;          /* Trennlinie innerhalb einer Karte */
    --z-hairline-soft: #f0f0f0;     /* Trennlinie zwischen Listenzeilen */
    --z-surface: #fff;
    --z-surface-muted: #f4f4f4;
    --z-ink: #1c1c1c;
    --z-ink-soft: #3f3f3f;
    --z-muted: #7f7f7f;

    /* Seiten-Tokens: dieselben Werte wie oben, aber unter der Rolle benannt, die
       eine SEITE braucht. Seitenlokale <style>-Blöcke sollen diese benutzen
       statt Festfarben — dann folgt die Seite dem Scanner-Dunkelmodus, ohne
       dass zebra-scanner.css jede Seitenklasse einzeln kennen muss. */
    --z-card-bg: #fff;                /* Karten-/Panel-Fläche */
    --z-card-border: var(--z-border); /* Karten-/Panel-Rand */
    --z-page-text: var(--z-ink);      /* Fließtext auf Kartenfläche */
    --z-row-hover: #fafafa;           /* Zeilen-Hover / ruhige Zebrastreifen */
    --z-head-bg: #f4f4f4;             /* Kopfflächen, Chips, Fortschrittsspuren */
    --z-subtle-bg: #fbfbfc;           /* fast-weiße Kachel-/Statistikflächen */

    /* Orange-Familie – die Rolle steckt im Namen, nicht im Farbwert. */
    --z-accent: #f9ae26;              /* Fläche (Akzent/Aktion) */
    --z-accent-strong: #e8940f;       /* Fläche im Hover/Active */
    --z-accent-line: #fdd06c;         /* Rand auf hellem Grund */
    --z-accent-soft: #fff1d9;         /* helle Akzentfläche */
    --z-accent-ink: #c87e06;          /* Orange als TEXT auf Weiß */
    --z-accent-ink-strong: #8a5c00;   /* Text auf --z-accent-soft */
    --z-on-accent: #1c1c1c;           /* Schrift auf --z-accent */

    --z-radius: 16px;
    --z-radius-sm: 10px;
    --z-radius-lg: 18px;
    --z-shadow: 0 1px 2px rgba(28, 28, 28, .05);
    --z-shadow-hover: 0 10px 24px rgba(28, 28, 28, .12);
    --z-shadow-overlay: 0 24px 64px rgba(28, 28, 28, .38);
}

/* ── Bausteine ──────────────────────────────────────────────────────────── */

.z-card {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
    overflow: hidden;
}

.z-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 16px;
    font-weight: 700;
    color: var(--z-ink);
    border-bottom: 1px solid var(--z-hairline);
}

.z-card-body { padding: 16px; }

/* Kennzahl-Kachel: große Zahl, kleines Label. */
.z-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow);
}
.z-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--z-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.z-kpi-label {
    font-size: .82rem;
    color: var(--z-muted);
}

/* Überschrift über der Überschrift. */
.z-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--z-muted);
}
.z-eyebrow i { color: var(--z-accent-ink); }

.z-title {
    margin: 2px 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--z-ink);
}

/* Ruhiges Badge im Zebra-Ton (nicht Bootstraps `.badge`). */
.z-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--z-border);
    background: var(--z-surface-muted);
    color: var(--z-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}
.z-badge-accent {
    border-color: var(--z-accent-line);
    background: var(--z-accent-soft);
    color: var(--z-accent-ink-strong);
}

.z-muted { color: var(--z-muted); }

/* ── Kopfzeile: globales Suchfeld ───────────────────────────────────────── */

.z-searchbar {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Basis 0 statt 100 %: die Leiste füllt den freien Platz bis 560 px, bricht
       aber in einer umbrechenden Navbar nie auf eine eigene Zeile um. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
    padding: 7px 10px 7px 12px;
    background: var(--z-surface-muted);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-sm);
    color: var(--z-muted);
    text-align: left;
    cursor: text;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.z-searchbar:hover {
    background: var(--z-surface);
    border-color: var(--z-border-strong);
}
.z-searchbar:focus-visible {
    outline: none;
    background: var(--z-surface);
    border-color: var(--z-accent);
    box-shadow: 0 0 0 3px rgba(249, 174, 38, .30);
}
.z-searchbar > .bi { font-size: 1rem; color: var(--z-muted); flex: 0 0 auto; }
.z-searchbar-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
}

/* Tasten-Chip „Strg K" – auf schmalen Geräten (Handscanner) ausgeblendet. */
.z-kbd {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border: 1px solid var(--z-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--z-surface);
    color: var(--z-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .4px;
}
@media (min-width: 768px) { .z-kbd { display: inline-flex; } }

/* Nutzer-Chip rechts in der Kopfzeile. */
.z-userchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--z-border);
    border-radius: 999px;
    background: var(--z-surface);
    color: var(--z-ink-soft);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.z-userchip:hover { border-color: var(--z-border-strong); color: var(--z-ink); }
.z-userchip .bi-person-circle { color: var(--z-accent-ink); font-size: 1rem; }

/* ── Befehls-Palette (Strg+K) ───────────────────────────────────────────── */

.zgs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(28, 28, 28, .50);
}

.zgs-layer {
    position: fixed;
    inset: 0;
    z-index: 1081;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 8vh, 96px) 14px 14px;
    pointer-events: none;
}
.zgs-layer[hidden], .zgs-backdrop[hidden] { display: none; }

.zgs-card {
    pointer-events: auto;
    width: 100%;
    max-width: 640px;
    max-height: min(76vh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-lg);
    box-shadow: var(--z-shadow-overlay);
    overflow: hidden;
}

.zgs-inputrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--z-hairline);
}
.zgs-inputrow > .bi { font-size: 1.05rem; color: var(--z-muted); }
.zgs-inputrow input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--z-ink);
}
.zgs-inputrow input::placeholder { color: #a6a6a6; }

.zgs-close {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--z-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--z-surface-muted);
    color: var(--z-muted);
    font-size: .7rem;
    font-weight: 700;
}

.zgs-results { overflow-y: auto; flex: 1 1 auto; }

.zgs-group + .zgs-group { border-top: 1px solid var(--z-hairline-soft); }
.zgs-grouphead {
    padding: 10px 15px 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--z-muted);
}

.zgs-hit {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 15px;
    text-decoration: none;
    color: var(--z-ink-soft);
    cursor: pointer;
}
.zgs-hit:hover { background: var(--z-surface-muted); color: var(--z-ink); }
.zgs-hit.is-active { background: var(--z-accent-soft); color: var(--z-ink); }
.zgs-hit.is-active .zgs-hit-ic { border-color: var(--z-accent-line); color: var(--z-accent-ink-strong); }

.zgs-hit-ic {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-sm);
    background: var(--z-surface);
    color: var(--z-muted);
    font-size: .95rem;
}
.zgs-hit-body { flex: 1 1 auto; min-width: 0; }
.zgs-hit-title {
    display: block;
    font-weight: 600;
    font-size: .93rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zgs-hit-sub {
    display: block;
    font-size: .79rem;
    color: var(--z-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zgs-state {
    padding: 22px 16px;
    text-align: center;
    color: var(--z-muted);
    font-size: .88rem;
}

.zgs-foot {
    flex: 0 0 auto;
    padding: 9px 15px;
    border-top: 1px solid var(--z-hairline);
    background: var(--z-surface-muted);
    color: var(--z-muted);
    font-size: .76rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Bootstrap auf CI

   Ab hier wird Bootstrap umgefärbt — bewusst NUR über Bootstraps eigene
   CSS-Variablen (`--bs-*`) und Komponenten-Variablen (`--bs-btn-*`,
   `--bs-pagination-*`, …). Kein Nachbauen von Komponenten, keine geänderten
   Maße. `!important` steht ausschließlich dort, wo eine Bootstrap-Utility
   selbst mit `!important` deklariert ist und anders nicht erreichbar wäre.

   Textfarben je Fläche (WCAG-AA geprüft, Verhältnisse im Kommentar):
     #1c1c1c auf #f9ae26  9,0:1   · #fff auf #f9ae26  1,9:1  → verboten
     #1c1c1c auf #91c01c  7,9:1   · #1c1c1c auf #3ebbcf 7,6:1
     #fff    auf #df0811  5,0:1   · #1c1c1c auf #fdd06c 11,7:1
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    --bs-primary: #f9ae26;
    --bs-primary-rgb: 249, 174, 38;
    --bs-success: #91c01c;
    --bs-success-rgb: 145, 192, 28;
    --bs-info: #3ebbcf;
    --bs-info-rgb: 62, 187, 207;
    --bs-warning: #fdd06c;
    --bs-warning-rgb: 253, 208, 108;
    --bs-danger: #df0811;
    --bs-danger-rgb: 223, 8, 17;

    /* Flächen/Ränder/Texte der Alert-, Toast- und Callout-Familie. */
    --bs-primary-bg-subtle: #fff1d9;
    --bs-primary-border-subtle: #fdd06c;
    --bs-primary-text-emphasis: #8a5c00;    /* 5,2:1 auf #fff1d9 */
    --bs-success-bg-subtle: #e6efcc;
    --bs-success-border-subtle: #accd6b;
    --bs-success-text-emphasis: #4a630e;
    --bs-info-bg-subtle: #dff1fd;
    --bs-info-border-subtle: #a1d8ef;
    --bs-info-text-emphasis: #1d6f80;       /* 5,1:1 auf #dff1fd */
    --bs-warning-bg-subtle: #fff8e8;
    --bs-warning-border-subtle: #fdd06c;
    --bs-warning-text-emphasis: #8a5c00;
    --bs-danger-bg-subtle: #fbe0d6;
    --bs-danger-border-subtle: #f7b9a1;
    --bs-danger-text-emphasis: #8f0209;     /* 7,7:1 auf #fbe0d6 */

    /* Links: Orange ist als Schrift auf Weiß zu hell — abgedunkelte Ableitung. */
    --bs-link-color: #c87e06;
    --bs-link-color-rgb: 200, 126, 6;
    --bs-link-hover-color: #a86800;         /* 4,5:1 auf #fff */
    --bs-link-hover-color-rgb: 168, 104, 0;

    --bs-focus-ring-color: rgba(249, 174, 38, .35);
    --bs-border-color: #e5e5e5;
    --bs-border-color-translucent: rgba(28, 28, 28, .12);
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────────
   Schriftfarbe je Semantik: primary/success/info/warning tragen #1c1c1c,
   nur danger trägt #fff. Weiß auf Orange/Grün/Cyan bliebe unter 3:1. */
.btn-primary {
    --bs-btn-color: #1c1c1c;
    --bs-btn-bg: #f9ae26;
    --bs-btn-border-color: #f9ae26;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #e8940f;
    --bs-btn-hover-border-color: #e8940f;
    --bs-btn-focus-shadow-rgb: 249, 174, 38;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #d18109;
    --bs-btn-active-border-color: #d18109;
    --bs-btn-disabled-color: #1c1c1c;
    --bs-btn-disabled-bg: #fdd06c;
    --bs-btn-disabled-border-color: #fdd06c;
}
.btn-outline-primary {
    /* #a86800 statt #c87e06: Knopfbeschriftung ist Fließtextgröße → 4,5:1. */
    --bs-btn-color: #a86800;
    --bs-btn-border-color: #f9ae26;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #f9ae26;
    --bs-btn-hover-border-color: #f9ae26;
    --bs-btn-focus-shadow-rgb: 249, 174, 38;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #e8940f;
    --bs-btn-active-border-color: #e8940f;
    --bs-btn-disabled-color: #a86800;
    --bs-btn-disabled-border-color: #fdd06c;
}

.btn-success {
    --bs-btn-color: #1c1c1c;
    --bs-btn-bg: #91c01c;
    --bs-btn-border-color: #91c01c;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #7aa317;
    --bs-btn-hover-border-color: #7aa317;
    --bs-btn-focus-shadow-rgb: 145, 192, 28;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #6b8f14;
    --bs-btn-active-border-color: #6b8f14;
    --bs-btn-disabled-color: #1c1c1c;
    --bs-btn-disabled-bg: #accd6b;
    --bs-btn-disabled-border-color: #accd6b;
}
.btn-outline-success {
    --bs-btn-color: #4a630e;
    --bs-btn-border-color: #91c01c;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #91c01c;
    --bs-btn-hover-border-color: #91c01c;
    --bs-btn-focus-shadow-rgb: 145, 192, 28;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #7aa317;
    --bs-btn-active-border-color: #7aa317;
    --bs-btn-disabled-color: #4a630e;
    --bs-btn-disabled-border-color: #accd6b;
}

.btn-info {
    --bs-btn-color: #1c1c1c;
    --bs-btn-bg: #3ebbcf;
    --bs-btn-border-color: #3ebbcf;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #35a9bc;
    --bs-btn-hover-border-color: #35a9bc;
    --bs-btn-focus-shadow-rgb: 62, 187, 207;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #2a9fb2;
    --bs-btn-active-border-color: #2a9fb2;
    --bs-btn-disabled-color: #1c1c1c;
    --bs-btn-disabled-bg: #a1d8ef;
    --bs-btn-disabled-border-color: #a1d8ef;
}
.btn-outline-info {
    --bs-btn-color: #1d6f80;
    --bs-btn-border-color: #3ebbcf;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #3ebbcf;
    --bs-btn-hover-border-color: #3ebbcf;
    --bs-btn-focus-shadow-rgb: 62, 187, 207;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #2a9fb2;
    --bs-btn-active-border-color: #2a9fb2;
    --bs-btn-disabled-color: #1d6f80;
    --bs-btn-disabled-border-color: #a1d8ef;
}

/* Warnung bleibt in der Orange-Familie, aber eine Stufe heller als „primary" —
   sonst wären Aktion und Warnung nicht mehr auseinanderzuhalten. */
.btn-warning {
    --bs-btn-color: #1c1c1c;
    --bs-btn-bg: #fdd06c;
    --bs-btn-border-color: #fdd06c;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #f9ae26;
    --bs-btn-hover-border-color: #f9ae26;
    --bs-btn-focus-shadow-rgb: 249, 174, 38;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #e8940f;
    --bs-btn-active-border-color: #e8940f;
    --bs-btn-disabled-color: #1c1c1c;
    --bs-btn-disabled-bg: #fff1d9;
    --bs-btn-disabled-border-color: #fff1d9;
}
.btn-outline-warning {
    --bs-btn-color: #8a5c00;
    --bs-btn-border-color: #fdd06c;
    --bs-btn-hover-color: #1c1c1c;
    --bs-btn-hover-bg: #fdd06c;
    --bs-btn-hover-border-color: #fdd06c;
    --bs-btn-focus-shadow-rgb: 249, 174, 38;
    --bs-btn-active-color: #1c1c1c;
    --bs-btn-active-bg: #f9ae26;
    --bs-btn-active-border-color: #f9ae26;
    --bs-btn-disabled-color: #8a5c00;
    --bs-btn-disabled-border-color: #fff1d9;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #df0811;
    --bs-btn-border-color: #df0811;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c00610;
    --bs-btn-hover-border-color: #c00610;
    --bs-btn-focus-shadow-rgb: 223, 8, 17;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a5050d;
    --bs-btn-active-border-color: #a5050d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #df0811;
    --bs-btn-disabled-border-color: #df0811;
}
.btn-outline-danger {
    --bs-btn-color: #c00610;
    --bs-btn-border-color: #df0811;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #df0811;
    --bs-btn-hover-border-color: #df0811;
    --bs-btn-focus-shadow-rgb: 223, 8, 17;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c00610;
    --bs-btn-active-border-color: #c00610;
    --bs-btn-disabled-color: #c00610;
    --bs-btn-disabled-border-color: #f7b9a1;
}

.btn-link {
    --bs-btn-color: #c87e06;
    --bs-btn-hover-color: #a86800;
    --bs-btn-active-color: #a86800;
    --bs-btn-focus-shadow-rgb: 249, 174, 38;
}

/* ── Utilities ──────────────────────────────────────────────────────────────
   Bootstrap-Utilities deklarieren selbst `!important`; nur deshalb steht es
   hier. `.text-primary` bekommt die abgedunkelte Ableitung — reines #f9ae26
   auf Weiß wäre 1,9:1. */
.text-primary, .link-primary { color: #c87e06 !important; }
.link-primary:hover, .link-primary:focus { color: #a86800 !important; }
.text-success { color: #5c7a12 !important; }   /* 4,9:1 auf #fff */
.text-info    { color: #1d6f80 !important; }   /* 5,8:1 auf #fff */
.text-warning { color: #a16b00 !important; }   /* 4,6:1 auf #fff */
.text-danger  { color: #df0811 !important; }   /* 5,0:1 auf #fff */

/* Auf gefüllten Semantik-Flächen gilt die Kontrastregel — auch wenn das
   Template `text-white` mitgibt (Weiß auf Orange/Grün/Cyan ist unlesbar). */
.bg-primary, .bg-success, .bg-info, .bg-warning { color: #1c1c1c; }
.bg-danger { color: #fff; }
/* `.text-white` auf derselben Fläche wird korrigiert (nur dort — verschachtelte
   Farben bleiben unangetastet): Weiß auf Orange wäre 1,9:1. */
.bg-primary.text-white, .bg-success.text-white,
.bg-info.text-white, .bg-warning.text-white { color: #1c1c1c !important; }

.text-bg-primary { color: #1c1c1c !important; }
.text-bg-success { color: #1c1c1c !important; }
.text-bg-info    { color: #1c1c1c !important; }
.text-bg-warning { color: #1c1c1c !important; }
.text-bg-danger  { color: #fff !important; }

.badge.bg-primary, .badge.bg-success,
.badge.bg-info, .badge.bg-warning { color: #1c1c1c !important; }
.badge.bg-danger { color: #fff !important; }

/* ── Formulare ──────────────────────────────────────────────────────────────
   Bootstrap kompiliert Fokus-Rand und -Schatten fest ein; hier gezielt
   nachgezogen statt über eine Variable erreichbar. */
.form-control:focus,
.form-select:focus {
    border-color: #f9ae26;
    box-shadow: 0 0 0 .25rem rgba(249, 174, 38, .30);
}
.form-check-input:focus {
    border-color: #f9ae26;
    box-shadow: 0 0 0 .25rem rgba(249, 174, 38, .30);
}
.form-check-input:checked {
    background-color: #f9ae26;
    border-color: #f9ae26;
}
/* Haken/Punkt dunkel statt weiß — auf #f9ae26 wäre Weiß nicht zu sehen. */
.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231c1c1c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231c1c1c'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f9ae26'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c1c1c'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: #f9ae26; }
.form-range::-moz-range-thumb { background-color: #f9ae26; }

/* ── Navigation, Listen, Blättern ───────────────────────────────────────── */
.nav-pills {
    --bs-nav-pills-link-active-bg: #f9ae26;
    --bs-nav-pills-link-active-color: #1c1c1c;
}
.nav-tabs { --bs-nav-tabs-link-active-color: #1c1c1c; }
.nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 #f9ae26; }

.dropdown-menu {
    --bs-dropdown-link-active-bg: #f9ae26;
    --bs-dropdown-link-active-color: #1c1c1c;
}

.list-group {
    --bs-list-group-active-bg: #f9ae26;
    --bs-list-group-active-border-color: #f9ae26;
    --bs-list-group-active-color: #1c1c1c;
    --bs-list-group-action-active-bg: #f4f4f4;
}

.pagination {
    --bs-pagination-color: #c87e06;
    --bs-pagination-hover-color: #a86800;
    --bs-pagination-focus-color: #a86800;
    --bs-pagination-focus-bg: #fff1d9;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(249, 174, 38, .30);
    --bs-pagination-active-bg: #f9ae26;
    --bs-pagination-active-border-color: #f9ae26;
    --bs-pagination-active-color: #1c1c1c;
}

.progress { --bs-progress-bar-bg: #f9ae26; --bs-progress-bar-color: #1c1c1c; }

.accordion {
    --bs-accordion-active-bg: #fff1d9;
    --bs-accordion-active-color: #8a5c00;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(249, 174, 38, .30);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a5c00'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ═════════════════════════════════════════════════════════════════════════════
   AdminLTE-Seitenleiste auf die CI-Anthrazit-Welt

   Die Leiste läuft mit `data-bs-theme="dark"`; AdminLTE setzt ihre Farben über
   `--lte-sidebar-*`, die Fläche kommt aus der Utility `.bg-body-secondary`.
   Beides hier umdefiniert — die Selektoren tragen `[data-bs-theme=dark]` mit,
   damit sie AdminLTEs Dunkel-Block schlagen (gleiche Spezifität, spätere
   Quelle: zebra-ui.css wird nach adminlte.css geladen).
   ═════════════════════════════════════════════════════════════════════════ */
[data-bs-theme=dark].app-sidebar,
.app-sidebar {
    --bs-secondary-bg: #3f3f3f;
    --bs-secondary-bg-rgb: 63, 63, 63;
    --lte-sidebar-color: #e5e5e5;              /* 8,4:1 auf #3f3f3f */
    --lte-sidebar-hover-color: #ffffff;
    --lte-sidebar-hover-bg: rgba(249, 174, 38, .16);
    --lte-sidebar-active-color: #ffffff;
    --lte-sidebar-menu-active-bg: #f9ae26;
    --lte-sidebar-menu-active-color: #1c1c1c;
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: #bfbfbf;      /* 5,7:1 auf #3f3f3f */
    --lte-sidebar-submenu-hover-color: #ffffff;
    --lte-sidebar-submenu-hover-bg: rgba(249, 174, 38, .16);
    --lte-sidebar-submenu-active-color: #1c1c1c;
    --lte-sidebar-submenu-active-bg: #f9ae26;
    --lte-sidebar-header-color: #bfbfbf;
}

.app-sidebar .sidebar-brand {
    background-color: #1c1c1c;
    border-bottom: 1px solid #3f3f3f;
}
.app-sidebar .sidebar-brand .brand-text { color: #f4f4f4; }

/* Aktiver Punkt = gefülltes Orange mit dunkler Schrift. Die Spezifität muss
   AdminLTEs `.sidebar-wrapper .sidebar-menu > .nav-item … .active:not(:hover)`
   (7 Klassen) erreichen, sonst gewinnt dort weiter Weiß auf Transparent. */
[data-bs-theme=dark].app-sidebar .sidebar-wrapper .sidebar-menu .nav-item > .nav-link.active,
.app-sidebar .sidebar-wrapper .sidebar-menu .nav-item > .nav-link.active {
    background-color: #f9ae26;
    color: #1c1c1c;
}
[data-bs-theme=dark].app-sidebar .sidebar-wrapper .sidebar-menu .nav-item > .nav-link.active:hover,
.app-sidebar .sidebar-wrapper .sidebar-menu .nav-item > .nav-link.active:hover {
    background-color: #e8940f;
    color: #1c1c1c;
}
/* Ein aufgeklappter Gruppenkopf ist kein Ziel, sondern ein Zustand — er bleibt
   ruhig und trägt den Akzent nur in der Schrift (#fdd06c: 7,2:1 auf #3f3f3f). */
[data-bs-theme=dark].app-sidebar .sidebar-wrapper .sidebar-menu .nav-item.menu-open > .nav-link.active,
.app-sidebar .sidebar-wrapper .sidebar-menu .nav-item.menu-open > .nav-link.active {
    background-color: transparent;
    color: #fdd06c;
}