/* ==========================================================================
   FriedaDesk — zentrales Theme (f24)
   ==========================================================================

   WARUM DIESE DATEI:
   Bis hierhin gab es kein Theme. Global geladen wurde /style.css — das ist im
   Kern das Stylesheet der LOGIN-Seite (body{background:#75A843; display:flex;
   align-items:center}, input,button{width:100%}). Es galt auf jeder Seite, und
   jedes Modul hat mit eigenen Inline-Styles dagegen angearbeitet: 122 Seiten mit
   <style>-Block, 3.395 style="…"-Attribute, keine einzige CSS-Variable.

   ANSATZ:
   Statt 41 Module einzeln umzubauen, kleidet dieses Theme die BEREITS
   VERWENDETE Markup-Sprache neu ein (Bootstrap-Klassen .btn/.table/.form-control,
   DataTables). Dadurch wirkt es sofort app-weit. Zusaetzlich stellt es
   f24-*-Komponenten fuer neue und migrierte Seiten bereit.

   SCOPING:
   Alles Korrigierende haengt an body.f24-app. Die Login-Seite bekommt diese
   Klasse nicht und bleibt exakt wie bisher.

   REIHENFOLGE:
   Wird in haed.php NACH style.css und mobile.css geladen, damit die
   Korrekturen greifen.

   Namensraum-Praefix: f24- (siehe CLAUDE.md, Abschnitt 3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Die Farbwerte sind bewusst NICHT frei erfunden: die Anwendung nutzt de facto
   bereits die Tailwind-Graustufen (#6b7280 520x, #e5e7eb 316x, #374151 192x …).
   Die Tokens uebernehmen genau diese Werte. Dadurch faellt der Umstieg optisch
   nicht auseinander, und ab jetzt laesst sich zentral nachsteuern.
   -------------------------------------------------------------------------- */
:root {
    /* Marke — aus dem bestehenden Header (#8B2E5D) und Logo-Gruen (#75A843) */
    --f24-brand:            #8B2E5D;
    --f24-brand-hover:      #732448;
    --f24-brand-contrast:   #ffffff;
    --f24-accent:           #75A843;

    /* Kopfleiste — dunkleres Lila (Wunsch 08.08.2026). Das alte #973663 kommt
       aus assets/easyui/themes/bootstrap.min.css (.bg-inverse) und wird in
       Abschnitt 25 hiermit ueberschrieben; Vendor-Datei bleibt unangetastet. */
    --f24-nav-bg:           #521B3F;
    --f24-nav-item:         rgba(255, 255, 255, .10);   /* Top-Level-Punkte */
    --f24-nav-item-hover:   rgba(255, 255, 255, .22);
    --f24-nav-border:       rgba(255, 255, 255, .16);

    /* Flaechen */
    --f24-bg:               #f6f7f9;   /* Seitenhintergrund */
    --f24-surface:          #ffffff;   /* Karten, Tabellen, Modals */
    --f24-surface-2:        #f9fafb;   /* Tabellenkopf, Toolbars */
    --f24-surface-3:        #f3f4f6;   /* Hover, gestreifte Zeilen */

    /* Linien */
    --f24-border:           #e5e7eb;
    --f24-border-strong:    #d1d5db;

    /* Text — Kontrast gegen --f24-surface geprueft:
       text 15.9:1, secondary 9.7:1, muted 4.6:1 (AA fuer Fliesstext) */
    --f24-text:             #111827;
    --f24-text-secondary:   #374151;
    --f24-text-muted:       #6b7280;
    --f24-text-inverse:     #ffffff;

    /* Status — jeweils Flaeche / Rand / Schrift, damit Badges lesbar bleiben */
    --f24-success:          #16a34a;
    --f24-success-bg:       #dcfce7;
    --f24-success-text:     #166534;
    --f24-warning:          #d97706;
    --f24-warning-bg:       #fef3c7;
    --f24-warning-text:     #92400e;
    --f24-danger:           #dc2626;
    --f24-danger-bg:        #fee2e2;
    --f24-danger-text:      #991b1b;
    --f24-info:             #2563eb;
    --f24-info-bg:          #dbeafe;
    --f24-info-text:        #1e40af;
    --f24-neutral-bg:       #f3f4f6;
    --f24-neutral-text:     #374151;

    /* Abstaende — 4px-Raster, bewusst knapp: Warenwirtschaft braucht Dichte */
    --f24-space-xs:  4px;
    --f24-space-sm:  8px;
    --f24-space-md:  12px;
    --f24-space-lg:  16px;
    --f24-space-xl:  24px;
    --f24-space-2xl: 32px;

    /* Radien — zurueckhaltend, keine durchgehend runden Flaechen */
    --f24-radius-sm: 4px;
    --f24-radius-md: 6px;
    --f24-radius-lg: 10px;

    /* Schatten — sparsam, nur zur Ebenentrennung */
    --f24-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --f24-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --f24-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);

    /* Typografie — Systemschriften: keine Fremdquelle, kein Ladeverzug.
       (Externe Bibliotheken werden hier grundsaetzlich selbst gehostet.) */
    --f24-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --f24-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                     "Liberation Mono", monospace;

    --f24-fs-xs:   11px;   /* Hilfstexte, Badges */
    --f24-fs-sm:   12px;   /* Tabellen, dichte Listen */
    --f24-fs-base: 13px;   /* Fliesstext der Anwendung */
    --f24-fs-md:   15px;
    --f24-fs-lg:   18px;   /* Seitentitel */
    --f24-fs-xl:   22px;

    --f24-fw-normal:   400;
    --f24-fw-medium:   500;
    --f24-fw-semibold: 600;
    --f24-fw-bold:     700;

    --f24-lh-tight: 1.25;
    --f24-lh-base:  1.5;

    /* Hoehen — einheitlich fuer Buttons und Eingabefelder in einer Zeile */
    --f24-control-h:    32px;
    --f24-control-h-sm: 26px;

    --f24-focus-ring: 0 0 0 3px rgba(139, 46, 93, .25);
}

/* --------------------------------------------------------------------------
   1b. DARKMODE — nur die Token-WERTE werden neu belegt, die ganze Anwendung
   folgt automatisch (alles Theme-basierte liest die --f24-*-Variablen).
   Aktiv ueber body.f24-app.f24-dark (Cookie f24dark, Toggle in f24-theme.js).
   Kontrast gegen --f24-surface geprueft: text 13,3:1, secondary 8,1:1,
   muted 4,8:1 (AA).  Der bestehende ?dark=1 (style_darkmode.css) bleibt
   unberuehrt — der betraf nur die Login-/Sonderseiten.
   -------------------------------------------------------------------------- */
body.f24-app.f24-dark {
    --f24-brand:            #b83d76;   /* etwas heller, damit es auf dunkel traegt */
    --f24-brand-hover:      #cf4d88;
    --f24-brand-contrast:   #ffffff;
    --f24-accent:           #86c34e;

    --f24-bg:               #0f1216;
    --f24-surface:          #1a1f26;
    --f24-surface-2:        #222831;
    --f24-surface-3:        #2b323d;

    --f24-border:           #2f3742;
    --f24-border-strong:    #3f4a58;

    --f24-text:             #e6e9ee;
    --f24-text-secondary:   #bcc4d0;
    --f24-text-muted:       #8b95a3;
    --f24-text-inverse:     #0f1216;

    --f24-success:          #22c55e;  --f24-success-bg: #123321;  --f24-success-text: #6ee7a8;
    --f24-warning:          #f59e0b;  --f24-warning-bg: #382a10;  --f24-warning-text: #fcd34d;
    --f24-danger:           #ef4444;  --f24-danger-bg:  #3a1719;  --f24-danger-text:  #fca5a5;
    --f24-info:             #3b82f6;  --f24-info-bg:    #14243d;  --f24-info-text:    #93c5fd;
    --f24-neutral-bg:       #2b323d;  --f24-neutral-text: #cbd5e1;

    --f24-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --f24-shadow-md: 0 4px 12px rgba(0, 0, 0, .55);
    --f24-shadow-lg: 0 12px 32px rgba(0, 0, 0, .65);

    --f24-focus-ring: 0 0 0 3px rgba(184, 61, 118, .35);

    /* Kopfleiste im Darkmode: noch tiefer, damit sie zur dunklen Flaeche passt */
    --f24-nav-bg:           #33112A;
    --f24-nav-item:         rgba(255, 255, 255, .08);
    --f24-nav-item-hover:   rgba(255, 255, 255, .18);
    --f24-nav-border:       rgba(255, 255, 255, .14);

    color-scheme: dark;   /* native Controls (Datepicker, Scrollbar) dunkel */
}

/* Der Toggle-Knopf (von f24-theme.js erzeugt) — sitzt in der Kopfleiste links
   neben dem Benutzermenue, damit er nie ueber dem Inhalt liegt. */
body.f24-app #f24DarkToggle.f24-dark-innav,
body.f24-app #f24HelpBtn.f24-dark-innav {
    width: 34px; height: 34px; margin: 0 6px; padding: 0;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex: 0 0 auto; align-self: center;
}
body.f24-app #f24DarkToggle.f24-dark-innav:hover,
body.f24-app #f24HelpBtn.f24-dark-innav:hover { background: rgba(255,255,255,.25); }
body.f24-app #f24HelpBtn.f24-dark-innav { text-decoration: none; font-size: 15px; }
/* Rueckfall (keine Navbar gefunden): dezent unten rechts ueber dem FAB-Griff */
body.f24-app #f24DarkToggle:not(.f24-dark-innav) {
    position: fixed; right: 14px; bottom: 78px; z-index: 9600;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--f24-border-strong);
    background: var(--f24-surface); color: var(--f24-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--f24-shadow-sm); opacity: .8;
}
@media (pointer: coarse) { body.f24-app #f24DarkToggle.f24-dark-innav,
body.f24-app #f24HelpBtn.f24-dark-innav { width: 40px; height: 40px; } }

/* --------------------------------------------------------------------------
   2. BASIS — nur fuer Anwendungsseiten (body.f24-app)
   Hebt die Login-Regeln aus style.css auf, die dort global gelten.
   -------------------------------------------------------------------------- */
body.f24-app {
    background: var(--f24-bg);
    font-family: var(--f24-font);
    font-size: var(--f24-fs-base);
    line-height: var(--f24-lh-base);
    color: var(--f24-text);

    /* style.css setzt fuer die Login-Box display:flex + Zentrierung. Auf einer
       Datenseite zentriert das den gesamten Inhalt vertikal — hier zuruecknehmen. */
    display: block;
    justify-content: normal;
    align-items: normal;
}

/* style.css: input,button{width:100%} — auf Formularseiten unbrauchbar.
   Nur dort zuruecknehmen, wo es sich um echte Bedienelemente handelt. */
body.f24-app input:not([type="checkbox"]):not([type="radio"]),
body.f24-app button,
body.f24-app select,
body.f24-app textarea {
    width: auto;
    margin-top: 0;
    font-size: var(--f24-fs-base);
}
/* WICHTIG: gleiche/hoehere Spezifitaet wie der Reset darueber — dessen
   :not()-Attribute zaehlen mit ((0,3,2)); ohne die :not()-Anteile hier verlor
   diese Regel und .form-control-Felder kollabierten auf Minibreite
   (Foto des Nutzers: Lieferanten-Modal mit 200px-Inputs in duenner Spalte). */
body.f24-app input.form-control:not([type="checkbox"]):not([type="radio"]),
body.f24-app input.form-select:not([type="checkbox"]):not([type="radio"]),
body.f24-app select.form-select,
body.f24-app select.form-control,
body.f24-app textarea.form-control { width: 100%; }

/* Bootstrap-4-Formularraster (form-row/col-md-*): wird von vielen Modals
   verwendet (u.a. Lieferanten), die geladene MDB-Alpha-CSS kennt es aber
   nicht — die Felder stapelten sich einspaltig. Minimale Nachbildung. */
body.f24-app .form-row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
body.f24-app .form-row > .form-group,
body.f24-app .form-row > [class*="col-"] { padding: 0 6px; box-sizing: border-box; }
body.f24-app .form-group { margin-bottom: var(--f24-space-md); }
body.f24-app .form-group > label { display: block; font-size: var(--f24-fs-sm);
    font-weight: var(--f24-fw-semibold); color: var(--f24-text-secondary);
    margin-bottom: var(--f24-space-xs); }
body.f24-app .form-group > div > label { font-weight: var(--f24-fw-normal); }
@media (min-width: 768px) {
    body.f24-app .form-row > .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    body.f24-app .form-row > .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    body.f24-app .form-row > .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
    body.f24-app .form-row > .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    body.f24-app .form-row > .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    body.f24-app .form-row > .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
    body.f24-app .form-row > .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    body.f24-app .form-row > .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    body.f24-app .form-row > .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
    body.f24-app .form-row > .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    body.f24-app .form-row > .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    body.f24-app .form-row > .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}
@media (max-width: 767px) {
    body.f24-app .form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

body.f24-app h1 { font-size: var(--f24-fs-lg); font-weight: var(--f24-fw-bold);
                  line-height: var(--f24-lh-tight); margin: 0 0 var(--f24-space-md); }
body.f24-app h2 { font-size: var(--f24-fs-md); font-weight: var(--f24-fw-semibold);
                  line-height: var(--f24-lh-tight); margin: 0 0 var(--f24-space-sm); }
body.f24-app h3,
body.f24-app h4 { font-size: var(--f24-fs-base); font-weight: var(--f24-fw-semibold);
                  margin: 0 0 var(--f24-space-sm); }

body.f24-app a { color: var(--f24-info); text-decoration: none; }
body.f24-app a:hover { text-decoration: underline; }

body.f24-app code, body.f24-app pre { font-family: var(--f24-font-mono); font-size: var(--f24-fs-sm); }

/* --------------------------------------------------------------------------
   3. BUTTONS — kleidet die vorhandenen Bootstrap-Klassen neu ein
   Hierarchie: primary (eine je Seite) > secondary > tertiary/link > danger
   -------------------------------------------------------------------------- */
body.f24-app .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: var(--f24-control-h);
    padding: 0 var(--f24-space-md);
    font-size: var(--f24-fs-base);
    font-weight: var(--f24-fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--f24-radius-md);
    box-shadow: none;
    text-transform: none;      /* MDB setzt uppercase */
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
body.f24-app .btn:focus-visible { outline: none; box-shadow: var(--f24-focus-ring); }

body.f24-app .btn-primary {
    background: var(--f24-brand); border-color: var(--f24-brand);
    color: var(--f24-brand-contrast);
}
body.f24-app .btn-primary:hover { background: var(--f24-brand-hover); border-color: var(--f24-brand-hover); }

body.f24-app .btn-secondary,
body.f24-app .btn-light,
body.f24-app .btn-default {
    background: var(--f24-surface); border-color: var(--f24-border-strong);
    color: var(--f24-text-secondary);
}
body.f24-app .btn-secondary:hover,
body.f24-app .btn-light:hover { background: var(--f24-surface-3); }

body.f24-app .btn-danger { background: var(--f24-danger); border-color: var(--f24-danger); color: #fff; }
body.f24-app .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

body.f24-app .btn-success { background: var(--f24-success); border-color: var(--f24-success); color: #fff; }
body.f24-app .btn-warning { background: var(--f24-warning); border-color: var(--f24-warning); color: #fff; }
body.f24-app .btn-info    { background: var(--f24-info);    border-color: var(--f24-info);    color: #fff; }

body.f24-app .btn-link {
    background: none; border-color: transparent; color: var(--f24-info);
    padding: 0 var(--f24-space-xs);
}
body.f24-app .btn-sm { min-height: var(--f24-control-h-sm); padding: 0 var(--f24-space-sm);
                       font-size: var(--f24-fs-sm); }
body.f24-app .btn:disabled, body.f24-app .btn.disabled { opacity: .5; cursor: not-allowed; }

/* Reine Icon-Aktion — braucht IMMER ein title/aria-label, siehe f24-icon-btn */
body.f24-app .f24-icon-btn {
    width: var(--f24-control-h); padding: 0;
    background: transparent; border-color: transparent; color: var(--f24-text-muted);
}
body.f24-app .f24-icon-btn:hover { background: var(--f24-surface-3); color: var(--f24-text); }

/* --------------------------------------------------------------------------
   4. FORMULARE
   -------------------------------------------------------------------------- */
body.f24-app .form-control,
body.f24-app .form-select,
body.f24-app input[type="text"].f24-input,
body.f24-app select.f24-input {
    min-height: var(--f24-control-h);
    padding: 4px var(--f24-space-sm);
    font-size: var(--f24-fs-base);
    color: var(--f24-text);
    background: var(--f24-surface);
    border: 1px solid var(--f24-border-strong);
    border-radius: var(--f24-radius-md);
    box-shadow: none;
}
body.f24-app .form-control:focus,
body.f24-app .form-select:focus {
    border-color: var(--f24-brand);
    box-shadow: var(--f24-focus-ring);
    outline: none;
}
body.f24-app .form-control:disabled,
body.f24-app .form-select:disabled {
    background: var(--f24-surface-3); color: var(--f24-text-muted); cursor: not-allowed;
}
body.f24-app .form-control::placeholder { color: var(--f24-text-muted); }

/* Label immer sichtbar — Placeholder ersetzt kein Label */
body.f24-app .f24-field { display: flex; flex-direction: column; gap: var(--f24-space-xs);
                          margin-bottom: var(--f24-space-md); }
body.f24-app .f24-label { font-size: var(--f24-fs-sm); font-weight: var(--f24-fw-semibold);
                          color: var(--f24-text-secondary); }
body.f24-app .f24-label .f24-req { color: var(--f24-danger); margin-left: 2px; }
body.f24-app .f24-hint  { font-size: var(--f24-fs-xs); color: var(--f24-text-muted); }
body.f24-app .f24-error { font-size: var(--f24-fs-xs); color: var(--f24-danger-text);
                          font-weight: var(--f24-fw-medium); }
body.f24-app .f24-field.is-invalid .form-control { border-color: var(--f24-danger); }

/* --------------------------------------------------------------------------
   5. TABELLEN — das Kernstueck einer Warenwirtschaft
   -------------------------------------------------------------------------- */
body.f24-app table.table,
body.f24-app table.dataTable,
body.f24-app table.f24-table {
    width: 100%;
    background: var(--f24-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--f24-fs-sm);
    color: var(--f24-text);
}
body.f24-app table.table > thead th,
body.f24-app table.dataTable > thead th,
body.f24-app table.f24-table > thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--f24-surface-2);
    color: var(--f24-text-secondary);
    font-size: var(--f24-fs-xs);
    font-weight: var(--f24-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
    padding: var(--f24-space-sm) var(--f24-space-md);
    border-bottom: 1px solid var(--f24-border-strong);
}
body.f24-app table.table > tbody td,
body.f24-app table.dataTable > tbody td,
body.f24-app table.f24-table > tbody td {
    padding: var(--f24-space-sm) var(--f24-space-md);
    border-bottom: 1px solid var(--f24-border);
    vertical-align: middle;
}
body.f24-app table.table > tbody tr:hover,
body.f24-app table.dataTable > tbody tr:hover,
body.f24-app table.f24-table > tbody tr:hover { background: var(--f24-surface-3); }
body.f24-app table.f24-table > tbody tr.is-selected { background: var(--f24-info-bg); }

/* Zahlen rechtsbuendig und mit Tabellenziffern — Betraege werden vergleichbar */
body.f24-app .f24-num,
body.f24-app table td.f24-num,
body.f24-app table th.f24-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

/* Lange Texte: kuerzen, aber den vollen Inhalt per title zugaenglich halten */
body.f24-app .f24-truncate {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.f24-app .f24-table-wrap {
    background: var(--f24-surface);
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
    overflow: auto;            /* breite Tabellen scrollen IN ihrem Container */
    box-shadow: var(--f24-shadow-sm);
}

/* --------------------------------------------------------------------------
   6. STATUS — nie nur ueber Farbe. Immer Text, optional Icon.
   -------------------------------------------------------------------------- */
body.f24-app .f24-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px var(--f24-space-sm);
    font-size: var(--f24-fs-xs);
    font-weight: var(--f24-fw-semibold);
    line-height: 1.6;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
body.f24-app .f24-badge--success { background: var(--f24-success-bg); color: var(--f24-success-text); border-color: #bbf7d0; }
body.f24-app .f24-badge--warning { background: var(--f24-warning-bg); color: var(--f24-warning-text); border-color: #fde68a; }
body.f24-app .f24-badge--danger  { background: var(--f24-danger-bg);  color: var(--f24-danger-text);  border-color: #fecaca; }
body.f24-app .f24-badge--info    { background: var(--f24-info-bg);    color: var(--f24-info-text);    border-color: #bfdbfe; }
body.f24-app .f24-badge--neutral { background: var(--f24-neutral-bg); color: var(--f24-neutral-text); border-color: var(--f24-border-strong); }

/* Punkt als zusaetzlicher, farbunabhaengiger Traeger */
body.f24-app .f24-badge .f24-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   7. SEITENKOPF + TOOLBAR — einheitlich ueber alle Module
   -------------------------------------------------------------------------- */
body.f24-app .f24-page { padding: var(--f24-space-lg) var(--f24-space-xl) var(--f24-space-2xl); }

body.f24-app .f24-page-header {
    display: flex; align-items: flex-start; gap: var(--f24-space-md);
    flex-wrap: wrap;
    padding-bottom: var(--f24-space-md);
    margin-bottom: var(--f24-space-lg);
    border-bottom: 1px solid var(--f24-border);
}
body.f24-app .f24-page-header .f24-titles { flex: 1 1 320px; min-width: 0; }
body.f24-app .f24-page-title {
    display: flex; align-items: center; gap: var(--f24-space-sm);
    font-size: var(--f24-fs-lg); font-weight: var(--f24-fw-bold);
    line-height: var(--f24-lh-tight); margin: 0; color: var(--f24-text);
}
body.f24-app .f24-page-desc { margin: 4px 0 0; font-size: var(--f24-fs-sm); color: var(--f24-text-muted); }
body.f24-app .f24-page-actions { display: flex; align-items: center; gap: var(--f24-space-sm); flex-wrap: wrap; }

body.f24-app .f24-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0 0 var(--f24-space-xs);
    font-size: var(--f24-fs-xs); color: var(--f24-text-muted);
}
body.f24-app .f24-breadcrumb a { color: var(--f24-text-muted); }
body.f24-app .f24-breadcrumb a:hover { color: var(--f24-text); }

body.f24-app .f24-toolbar {
    display: flex; align-items: center; gap: var(--f24-space-sm); flex-wrap: wrap;
    padding: var(--f24-space-sm) var(--f24-space-md);
    margin-bottom: var(--f24-space-md);
    background: var(--f24-surface);
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
}
body.f24-app .f24-toolbar .f24-spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   8. KARTEN, HINWEISE, ZUSTAENDE
   -------------------------------------------------------------------------- */
body.f24-app .f24-card {
    background: var(--f24-surface);
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
    box-shadow: var(--f24-shadow-sm);
    padding: var(--f24-space-lg);
    margin-bottom: var(--f24-space-lg);
}
body.f24-app .f24-card-title {
    font-size: var(--f24-fs-base); font-weight: var(--f24-fw-semibold);
    margin: 0 0 var(--f24-space-md); color: var(--f24-text);
}

body.f24-app .f24-alert {
    display: flex; gap: var(--f24-space-sm); align-items: flex-start;
    padding: var(--f24-space-md);
    border: 1px solid transparent; border-left-width: 3px;
    border-radius: var(--f24-radius-md);
    font-size: var(--f24-fs-sm);
    margin-bottom: var(--f24-space-md);
}
body.f24-app .f24-alert--info    { background: var(--f24-info-bg);    border-color: var(--f24-info);    color: var(--f24-info-text); }
body.f24-app .f24-alert--success { background: var(--f24-success-bg); border-color: var(--f24-success); color: var(--f24-success-text); }
body.f24-app .f24-alert--warning { background: var(--f24-warning-bg); border-color: var(--f24-warning); color: var(--f24-warning-text); }
body.f24-app .f24-alert--danger  { background: var(--f24-danger-bg);  border-color: var(--f24-danger);  color: var(--f24-danger-text); }

/* Leerzustand — sagt WAS fehlt und WAS man tun kann */
body.f24-app .f24-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--f24-space-sm);
    padding: var(--f24-space-2xl) var(--f24-space-lg);
    text-align: center; color: var(--f24-text-muted);
}
body.f24-app .f24-empty .f24-empty-icon { font-size: 28px; opacity: .5; }
body.f24-app .f24-empty .f24-empty-title { font-size: var(--f24-fs-md);
                                           font-weight: var(--f24-fw-semibold); color: var(--f24-text-secondary); }

/* Ladezustand */
body.f24-app .f24-loading { display: flex; align-items: center; justify-content: center;
                            gap: var(--f24-space-sm); padding: var(--f24-space-xl);
                            color: var(--f24-text-muted); font-size: var(--f24-fs-sm); }
body.f24-app .f24-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--f24-border-strong); border-top-color: var(--f24-brand);
    animation: f24-spin .8s linear infinite;
}
@keyframes f24-spin { to { transform: rotate(360deg); } }

/* Skelett fuer Tabellenzeilen waehrend des Ladens */
body.f24-app .f24-skeleton {
    background: linear-gradient(90deg, var(--f24-surface-3) 25%, var(--f24-surface-2) 37%, var(--f24-surface-3) 63%);
    background-size: 400% 100%;
    animation: f24-shimmer 1.4s ease infinite;
    border-radius: var(--f24-radius-sm);
    height: 12px;
}
@keyframes f24-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   9. MODALS — einheitliche Breite, Kopf, Fuss
   -------------------------------------------------------------------------- */
body.f24-app .modal-content {
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
    box-shadow: var(--f24-shadow-lg);
}
body.f24-app .modal-header {
    padding: var(--f24-space-md) var(--f24-space-lg);
    border-bottom: 1px solid var(--f24-border);
    background: var(--f24-surface-2);
    border-radius: var(--f24-radius-lg) var(--f24-radius-lg) 0 0;
}
body.f24-app .modal-title { font-size: var(--f24-fs-md); font-weight: var(--f24-fw-semibold); margin: 0; }
body.f24-app .modal-body  { padding: var(--f24-space-lg); font-size: var(--f24-fs-base); }
body.f24-app .modal-footer {
    padding: var(--f24-space-md) var(--f24-space-lg);
    border-top: 1px solid var(--f24-border);
    gap: var(--f24-space-sm);
    background: var(--f24-surface-2);
    border-radius: 0 0 var(--f24-radius-lg) var(--f24-radius-lg);
}
/* Bestaetigung einer zerstoerenden Aktion deutlich kennzeichnen */
body.f24-app .modal-content.f24-modal--danger .modal-header {
    background: var(--f24-danger-bg); border-bottom-color: #fecaca;
}
body.f24-app .modal-content.f24-modal--danger .modal-title { color: var(--f24-danger-text); }

/* --------------------------------------------------------------------------
   10. TABS + PAGINATION
   -------------------------------------------------------------------------- */
body.f24-app .nav-tabs { border-bottom: 1px solid var(--f24-border); gap: var(--f24-space-xs); }
body.f24-app .nav-tabs .nav-link {
    padding: var(--f24-space-sm) var(--f24-space-md);
    font-size: var(--f24-fs-sm); font-weight: var(--f24-fw-medium);
    color: var(--f24-text-muted);
    border: none; border-bottom: 2px solid transparent;
    border-radius: 0; text-transform: none;
}
body.f24-app .nav-tabs .nav-link:hover { color: var(--f24-text); }
body.f24-app .nav-tabs .nav-link.active {
    color: var(--f24-brand); border-bottom-color: var(--f24-brand); background: transparent;
    font-weight: var(--f24-fw-semibold);
}

body.f24-app .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px var(--f24-space-sm); margin: 0 2px;
    font-size: var(--f24-fs-sm);
    border: 1px solid var(--f24-border); border-radius: var(--f24-radius-sm);
    background: var(--f24-surface); color: var(--f24-text-secondary) !important;
}
body.f24-app .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--f24-brand); border-color: var(--f24-brand); color: #fff !important;
}
body.f24-app .dataTables_wrapper .dataTables_filter input,
body.f24-app .dataTables_wrapper .dataTables_length select {
    min-height: var(--f24-control-h);
    border: 1px solid var(--f24-border-strong);
    border-radius: var(--f24-radius-md);
    padding: 2px var(--f24-space-sm);
}
body.f24-app .dataTables_wrapper .dataTables_info,
body.f24-app .dataTables_wrapper .dataTables_length,
body.f24-app .dataTables_wrapper .dataTables_filter { font-size: var(--f24-fs-sm); color: var(--f24-text-muted); }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   Desktop ist der Hauptarbeitsplatz. Kleinere Schirme reduzieren gezielt,
   statt alles gleichmaessig zu schrumpfen.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    body.f24-app .f24-page { padding: var(--f24-space-md); }
    body.f24-app .f24-page-header { flex-direction: column; align-items: stretch; }
    body.f24-app .f24-page-actions { justify-content: flex-start; }
    /* Sekundaeres in Tabellen ausblenden statt horizontal zu quetschen */
    body.f24-app table th.f24-col-secondary,
    body.f24-app table td.f24-col-secondary { display: none; }
}
@media (max-width: 640px) {
    body.f24-app .f24-toolbar { flex-direction: column; align-items: stretch; }
    body.f24-app .f24-toolbar .btn { width: 100%; }
    body.f24-app table th.f24-col-optional,
    body.f24-app table td.f24-col-optional { display: none; }
}

/* --------------------------------------------------------------------------
   12. BARRIEREFREIHEIT / EINGABEGERAETE
   -------------------------------------------------------------------------- */
body.f24-app *:focus-visible { outline: 2px solid var(--f24-brand); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    body.f24-app *, body.f24-app *::before, body.f24-app *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    body.f24-app .f24-toolbar, body.f24-app .f24-page-actions { display: none; }
    body.f24-app .f24-table-wrap { border: none; box-shadow: none; overflow: visible; }
}

/* --------------------------------------------------------------------------
   13. EASYUI — Dialoge, Fenster, Datagrids der Altseiten
   Bestand: 33x easyui-window, 17x easyui-datagrid, 15x easyui-panel und ueber
   400 $.messager-Aufrufe (progress/alert/confirm). Diese Popups SIND die
   Formulare vieler Altmodule — sie muessen dieselbe Sprache sprechen wie die
   Bootstrap-Modals aus Abschnitt 9.
   easyUI rendert zur Laufzeit .window/.panel/.datagrid/.messager-*; die Regeln
   greifen daher ohne Aenderung an den Seiten.
   -------------------------------------------------------------------------- */
body.f24-app .window,
body.f24-app .messager-window {
    border: 1px solid var(--f24-border) !important;
    border-radius: var(--f24-radius-lg) !important;
    box-shadow: var(--f24-shadow-lg) !important;
    overflow: hidden;
    background: var(--f24-surface) !important;
}
/* Kopfzeile kompakt halten: viele easyUI-Layouts haben FESTE Hoehen (z.B. die
   82px-Kennzahl-Kacheln auf dem Dashboard). Ein hoeherer Kopf frisst dort die
   Resthoehe des Inhalts — die grossen Zahlen wurden unten abgeschnitten
   (Screenshot des Nutzers, 08.08.2026). Fenster-Koepfe (Dialoge) duerfen
   grosszuegiger sein, Panel-Koepfe nicht. */
body.f24-app .window .window-header {
    background: var(--f24-surface-2) !important;
    border-bottom: 1px solid var(--f24-border) !important;
    padding: var(--f24-space-md) var(--f24-space-lg) !important;
}
body.f24-app .panel > .panel-header {
    background: var(--f24-surface-2) !important;
    border-bottom: 1px solid var(--f24-border) !important;
    padding: var(--f24-space-xs) var(--f24-space-md) !important;
}
body.f24-app .panel-title {
    font-size: var(--f24-fs-base) !important;
    font-weight: var(--f24-fw-semibold) !important;
    color: var(--f24-text) !important;
    height: auto !important;
    line-height: 1.4 !important;
}
body.f24-app .window .window-body,
body.f24-app .panel > .panel-body {
    border-color: var(--f24-border) !important;
    font-size: var(--f24-fs-base);
    color: var(--f24-text);
}
body.f24-app .dialog-button {
    background: var(--f24-surface-2) !important;
    border-top: 1px solid var(--f24-border) !important;
    padding: var(--f24-space-md) var(--f24-space-lg) !important;
}

/* easyUI-Buttons an die Button-Hierarchie aus Abschnitt 3 angleichen */
body.f24-app .l-btn {
    border-radius: var(--f24-radius-md) !important;
    border: 1px solid var(--f24-border-strong) !important;
    background: var(--f24-surface) !important;
    color: var(--f24-text-secondary) !important;
    min-height: var(--f24-control-h);
}
body.f24-app .l-btn:hover { background: var(--f24-surface-3) !important; }
body.f24-app .l-btn-text { font-size: var(--f24-fs-base) !important; color: inherit !important; }

/* Datagrid an das Tabellen-System aus Abschnitt 5 angleichen */
body.f24-app .datagrid-header {
    background: var(--f24-surface-2) !important;
    border-bottom: 1px solid var(--f24-border-strong) !important;
}
body.f24-app .datagrid-header td { border-color: var(--f24-border) !important; }
body.f24-app .datagrid-header .datagrid-cell {
    font-size: var(--f24-fs-xs);
    font-weight: var(--f24-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--f24-text-secondary);
}
body.f24-app .datagrid-body td {
    border-color: var(--f24-border) !important;
    font-size: var(--f24-fs-sm);
    padding: 2px 0;
}
body.f24-app .datagrid-row-over     { background: var(--f24-surface-3) !important; }
body.f24-app .datagrid-row-selected { background: var(--f24-info-bg) !important; color: var(--f24-text) !important; }

/* Messager (alert/confirm/progress) — wie ein kompaktes Modal behandeln */
body.f24-app .messager-body { font-size: var(--f24-fs-base); color: var(--f24-text); }
body.f24-app .messager-button { padding-bottom: var(--f24-space-md); }
body.f24-app .messager-progress { padding: var(--f24-space-lg); }

/* --------------------------------------------------------------------------
   14. SERVERLAST-ANZEIGE (sysadm) — vorher rohe Zahlen "2.91 4.24 4.55" in
   einem halbtransparenten Kasten oben links auf JEDER Seite. Bleibt als
   Funktion erhalten, sieht jetzt nach Absicht aus.
   -------------------------------------------------------------------------- */
body.f24-app #serverload {
    font-family: var(--f24-font-mono);
    font-size: var(--f24-fs-xs) !important;
    color: var(--f24-text-muted) !important;
    background: var(--f24-surface) !important;
    border: 1px solid var(--f24-border);
    border-top: none;
    border-radius: 0 0 var(--f24-radius-md) var(--f24-radius-md);
    opacity: 1 !important;
    padding: 1px 8px !important;
    width: auto !important;
    box-shadow: var(--f24-shadow-sm);
}

/* --------------------------------------------------------------------------
   15. TOUCH-BEDIENUNG (Tesla, Tablets, Terminals)
   Anforderung: die Anwendung wird u.a. im Fahrzeug-Browser (Tesla-Mittel-
   konsole) bedient. Dort gibt es KEINEN Hover und keinen praezisen Zeiger.
   @media (pointer: coarse) trifft genau diese Geraete — Desktop mit Maus
   bleibt kompakt wie gehabt.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    body.f24-app {
        /* Alle Steuerelemente wachsen ueber die Tokens mit */
        --f24-control-h:    44px;   /* Apple/Android-Richtwert fuer Touchziele */
        --f24-control-h-sm: 38px;
        --f24-fs-base: 15px;
        --f24-fs-sm:   13px;
        --f24-fs-xs:   12px;
    }
    body.f24-app .btn { padding: 0 var(--f24-space-lg); }
    body.f24-app table.table > tbody td,
    body.f24-app table.dataTable > tbody td,
    body.f24-app table.f24-table > tbody td { padding: var(--f24-space-md); }
    body.f24-app .dropdown-item { padding: var(--f24-space-md) var(--f24-space-lg); }
    body.f24-app input[type="checkbox"], body.f24-app input[type="radio"] {
        width: 22px; height: 22px;
    }
    /* Icon-Aktionen: unsichtbare Trefferflaeche vergroessern, Optik unveraendert */
    body.f24-app .f24-icon-btn { width: 44px; min-height: 44px; }
}

/* Hover-abhaengige Information ist auf Touch-Geraeten unsichtbar — Titel-
   Attribute bleiben als Fallback, aber interaktive Elemente muessen ihre
   Bedeutung im Ruhezustand zeigen. Ergaenzend: Fokus ersetzt Hover. */
@media (hover: none) {
    body.f24-app [data-bs-toggle="tooltip"]::after { content: none; }
    body.f24-app .btn:active { filter: brightness(.92); }
    body.f24-app tr:active { background: var(--f24-surface-3); }
}

/* --------------------------------------------------------------------------
   16. LAYOUT-KORREKTUR .wawicontent
   Altbestand: haed.php gibt der Inhaltsflaeche padding-top:16rem inline mit,
   style.css zieht sie mit margin-top:-320px wieder hoch — netto beginnt der
   Inhalt UNTER dem fixierten Header (Seitentitel angeschnitten, Kacheln
   kleben an der Navbar; auf dem Dashboard nachgemessen). Sauberer Wert statt
   Hack-Gegenrechnung; !important noetig wegen des Inline-Attributs.
   -------------------------------------------------------------------------- */
body.f24-app .wawicontent {
    margin-top: 0 !important;
    padding-top: calc(65px + var(--f24-space-lg)) !important;  /* Header 65px + Luft */
}

/* --------------------------------------------------------------------------
   17. HAUPTNAVIGATION — Ueberlauf bei schmaleren Breiten (Tesla, Tablet)
   Die Navbar nutzt die alte Klasse navbar-toggleable-md und zeigt ab ~1200px
   die horizontale Leiste, ohne umzubrechen: der letzte Menuepunkt ("System")
   wird am rechten Rand abgeschnitten (im Tesla-Screenshot nachgewiesen).
   MENUESTRUKTUR BLEIBT UNVERAENDERT — gleiche Eintraege, gleiche Reihenfolge,
   gleiche Dropdowns. Nur das Umbruchverhalten wird korrigiert: unterhalb 1400px
   darf die Leiste in eine zweite Zeile umbrechen statt zu clippen.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1400px) {
    /* KERNPUNKT (auf der echten Tesla-Konsole nachgewiesen): unterhalb 1200px
       schaltet die alte navbar-toggleable-md in den Mobil-Modus — die li werden
       BLOCK-Elemente in VOLLER Containerbreite (gemessen: 1216px je Eintrag).
       Der fruehere Scroll-Fix schob diese Vollbreiten-Balken nur nebeneinander;
       im Fahrzeug sah man einen riesigen weissen Balken statt Menuepunkten.
       Deshalb hier explizit: ul als Flex-ZEILE, li auf natuerliche Breite. */
    /* Der Wrapper ist eine Flex-Zeile; NUR die Hauptliste scrollt bei Platznot.
       Das Benutzermenue (zweites ul, mit Logout) bleibt IMMER fest rechts
       sichtbar — vorher ragte es aus dem Bild (x=1138 bei 1160px Viewport). */
    body.f24-app .navbar .navbar-collapse {
        display: flex !important;
        align-items: center;
        overflow: hidden;
    }
    body.f24-app .navbar-nav.mr-auto {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    body.f24-app .navbar-collapse > ul.navbar-nav:not(.mr-auto) {
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: row !important;
    }
    body.f24-app .navbar-collapse > ul.navbar-nav:not(.mr-auto) > li { width: auto !important; }
    body.f24-app .navbar-nav.mr-auto > li {
        flex: 0 0 auto;
        width: auto !important;
        display: block;
    }
    body.f24-app .navbar-nav.mr-auto > li > a { width: auto !important; }
    body.f24-app .navbar-nav.mr-auto::-webkit-scrollbar { height: 0; }
    /* Kompakter, damit moeglichst ALLE Punkte ohne Wischen sichtbar sind */
    body.f24-app .navbar-nav .nav-link,
    body.f24-app .navbar-nav .dropdown-toggle { padding: 6px 10px !important; font-size: 12.5px !important; }
}

/* --------------------------------------------------------------------------
   18. SICHERHEITSNETZ GEGEN SEITEN-UEBERLAUF
   QA-Befund: mehrere breite Tabellen schoben die ganze Seite nach rechts —
   misc/terminal um 1242px (Tesla), kundenverwaltung/kassensync/stammdaten
   aehnlich. Ursache: breite (Data)Tables liegen NICHT in einem Scroll-
   Container, also waechst statt der Tabelle das Dokument.
   Regel: der DataTables-Wrapper scrollt horizontal in sich; die Seite selbst
   bekommt keinen Horizontalscroll mehr. Greift ohne Aenderung an den Seiten.
   -------------------------------------------------------------------------- */
body.f24-app .dataTables_wrapper { overflow-x: auto; max-width: 100%; }

/* Die Inhaltsflaeche selbst scrollt horizontal, wenn ihr Inhalt zu breit ist —
   NICHT clip/hidden: eine breite Tabelle (z.B. misc/terminal mit TSE-Spalte
   ganz rechts) muss per Scroll ERREICHBAR bleiben, nicht abgeschnitten werden.
   So waechst nicht mehr das Dokument, aber es geht kein Inhalt verloren. */
body.f24-app .wawicontent { overflow-x: auto; max-width: 100%; }

/* Wo eine Tabelle bewusst breiter ist, kann die Seite sie zusaetzlich in
   .f24-table-wrap legen (Abschnitt 5) — dann scrollt sie in ihrem eigenen
   Rahmen statt die ganze Inhaltsflaeche zu verschieben. */

/* --------------------------------------------------------------------------
   19. AUTOMATISCHE TABELLEN-VERDICHTUNG (statt horizontalem Scrollen)
   Vorgabe: Scrollen vermeiden. f24-theme.js misst nach dem Laden und bei
   Resize jede Tabelle; passt sie nicht in die Breite, bekommt sie stufenweise
   .f24-compact (Stufe 1) bzw. .f24-compact-2 (Stufe 2). Der Scroll aus
   Abschnitt 18 bleibt nur als allerletzte Reserve bestehen.
   -------------------------------------------------------------------------- */
/* Stufe 1: Zellen duerfen umbrechen, Luft raus */
body.f24-app table.f24-compact > thead th,
body.f24-app table.f24-compact > tbody td {
    white-space: normal !important;
    word-break: break-word;
    padding: var(--f24-space-xs) var(--f24-space-sm) !important;
}
body.f24-app table.f24-compact > thead th { letter-spacing: 0; }
/* Filterzeilen-Eingaben: nicht breiter als ihre Spalte */
body.f24-app table.f24-compact input,
body.f24-app table.f24-compact select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    min-height: 24px !important;
    font-size: var(--f24-fs-xs) !important;
}

/* Stufe 2: zusaetzlich kleinere Schrift — Grenze der Lesbarkeit (11px),
   darunter gehen wir nicht; dann greift der Rest-Scroll. */
body.f24-app table.f24-compact-2 > thead th,
body.f24-app table.f24-compact-2 > tbody td {
    font-size: var(--f24-fs-xs) !important;
}

/* --------------------------------------------------------------------------
   20. SCHWEBENDE AKTIONSKNOEPFE — eingeklappt, verdecken nichts mehr
   Befund (Screenshot des Nutzers): fuenf fixe Knoepfe (#aiFab, #piiToggle,
   #msgBell, #msgChat, #bugReportBtn) verteilt auf zwei Spalten, ueberlagern
   sich gegenseitig und den Inhalt. Vorgabe: "duerfen nicht im Hintergrund
   verdecken".
   Loesung: standardmaessig sind alle fuenf aus dem Bild geschoben; sichtbar
   bleibt nur ein schmaler Griff. Ein Tipp auf den Griff faehrt sie als EINE
   ordentliche Spalte heraus (f24-theme.js schaltet body.f24-fabs-open).
   Alle Klick-Handler der Knoepfe bleiben unberuehrt — nur Position/Transform.
   -------------------------------------------------------------------------- */
body.f24-app #aiFab,
body.f24-app #piiToggle,
body.f24-app #msgBell,
body.f24-app #msgChat,
body.f24-app #bugReportBtn {
    transition: transform .18s ease, opacity .18s ease;
    transform: translateX(90px);      /* eingeklappt: aus dem Bild */
    opacity: 0;
    pointer-events: none;
}
body.f24-app.f24-fabs-open #aiFab,
body.f24-app.f24-fabs-open #piiToggle,
body.f24-app.f24-fabs-open #msgBell,
body.f24-app.f24-fabs-open #msgChat,
body.f24-app.f24-fabs-open #bugReportBtn {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}
/* Ausgeklappt: EINE Spalte am rechten Rand, feste Plaetze von unten nach oben */
body.f24-app.f24-fabs-open #msgBell      { right: 10px !important; bottom:  50px !important; }
body.f24-app.f24-fabs-open #msgChat      { right: 10px !important; bottom: 104px !important; }
body.f24-app.f24-fabs-open #bugReportBtn { right: 10px !important; bottom: 158px !important; }
body.f24-app.f24-fabs-open #piiToggle    { right: 10px !important; bottom: 212px !important; }
body.f24-app.f24-fabs-open #aiFab        { right: 10px !important; bottom: 266px !important; }

/* Der Griff: klein, halbtransparent, verdeckt praktisch nichts */
body.f24-app #f24FabHandle {
    position: fixed; right: 0; bottom: 60px; z-index: 9700;
    width: 28px; height: 56px;
    border: 1px solid var(--f24-border-strong); border-right: none;
    border-radius: var(--f24-radius-lg) 0 0 var(--f24-radius-lg);
    background: color-mix(in srgb, var(--f24-surface) 88%, transparent);
    color: var(--f24-text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--f24-shadow-sm);
}
body.f24-app #f24FabHandle:hover { color: var(--f24-text); background: var(--f24-surface); }
body.f24-app #f24FabHandle .f24-fab-dot {
    position: absolute; top: 4px; right: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--f24-danger); display: none;
}
/* Aufgeklappt wandert der Griff ueber die Buttonspalte (5 Buttons enden bei
   bottom 266+40=306). Vorher sass er fest bei bottom:60 und wurde von den zwei
   untersten Buttons ueberlappt — genau das Durcheinander auf der Tesla-Konsole
   (Foto des Nutzers). Als Schliessen-Chevron am oberen Ende kollidiert er nicht. */
body.f24-app.f24-fabs-open #f24FabHandle { color: var(--f24-brand); bottom: 320px; }
@media (pointer: coarse) {
    body.f24-app #f24FabHandle { width: 34px; height: 64px; }
}

/* --------------------------------------------------------------------------
   21. F24-UI DIALOGE (Ersatz fuer easyUI $.messager, siehe assets/theme/f24-ui.js)
   Gehoert zum easyUI-Abloese-Piloten (Inventur). Theme-konforme Popups fuer
   confirm/prompt/alert/progress + Toast — nur Tokens, kein Fremd-Plugin.
   -------------------------------------------------------------------------- */
body.f24-app .f24-dlg-overlay {
    position: fixed; inset: 0; z-index: 10500;
    display: flex; align-items: center; justify-content: center;
    padding: var(--f24-space-lg);
    background: rgba(16, 24, 40, .45);
    opacity: 0; transition: opacity .16s ease;
}
body.f24-app .f24-dlg-overlay.is-open { opacity: 1; }
body.f24-app .f24-dlg {
    width: 100%; max-width: 440px;
    background: var(--f24-surface);
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
    box-shadow: var(--f24-shadow-lg);
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
    overflow: hidden;
}
body.f24-app .f24-dlg-overlay.is-open .f24-dlg { transform: none; }
body.f24-app .f24-dlg-head {
    padding: var(--f24-space-md) var(--f24-space-lg);
    font-size: var(--f24-fs-md); font-weight: var(--f24-fw-semibold);
    color: var(--f24-text);
    background: var(--f24-surface-2);
    border-bottom: 1px solid var(--f24-border);
}
body.f24-app .f24-dlg--danger .f24-dlg-head {
    background: var(--f24-danger-bg); color: var(--f24-danger-text);
    border-bottom-color: #fecaca;
}
body.f24-app .f24-dlg-body { padding: var(--f24-space-lg); font-size: var(--f24-fs-base); color: var(--f24-text-secondary); }
body.f24-app .f24-dlg-msg  { margin-bottom: var(--f24-space-sm); }
body.f24-app .f24-dlg-input { width: 100%; }
body.f24-app .f24-dlg-foot {
    display: flex; justify-content: flex-end; gap: var(--f24-space-sm);
    padding: var(--f24-space-md) var(--f24-space-lg);
    background: var(--f24-surface-2);
    border-top: 1px solid var(--f24-border);
}
body.f24-app .f24-dlg-progress { display: flex; align-items: center; gap: var(--f24-space-md); }
body.f24-app .f24-dlg-progress .f24-spinner { width: 20px; height: 20px; }
body.f24-app .f24-dlg--progress { max-width: 320px; }

/* Toast unten mittig */
body.f24-app .f24-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
    z-index: 10600;
    padding: var(--f24-space-sm) var(--f24-space-lg);
    border-radius: var(--f24-radius-md);
    font-size: var(--f24-fs-sm); font-weight: var(--f24-fw-medium);
    color: #fff; background: var(--f24-text);
    box-shadow: var(--f24-shadow-md);
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
body.f24-app .f24-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
body.f24-app .f24-toast--success { background: var(--f24-success); }
body.f24-app .f24-toast--danger  { background: var(--f24-danger); }
body.f24-app .f24-toast--warning { background: var(--f24-warning); }

/* Aktions-Buttons in Tabellenzeilen (Inventur-Pilot u.a.): kompakte Reihe */
body.f24-app .f24-rowactions { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
body.f24-app .f24-rowactions .btn { min-height: 26px; padding: 0 8px; }
body.f24-app .f24-rowactions .f24-icon-btn { width: 26px; padding: 0; }

/* Tesla-Feinschliff: bei <=1200px fehlten noch ~60px, bis alle sieben
   Menuepunkte ohne Wischen sichtbar sind — eine Stufe kompakter. */
@media (min-width: 768px) and (max-width: 1200px) {
    body.f24-app .navbar-nav .nav-link,
    body.f24-app .navbar-nav .dropdown-toggle { padding: 6px 4px !important; font-size: 11.5px !important; }
    /* Brand kompakt: Der Marktname wird im Markup mit position:relative/left:-139px
       UEBER das Logobild geschoben — beim Verkleinern des Bilds zerbricht das
       (Foto von der Tesla-Konsole: gestauchtes Logo, Text quer drueber).
       Bei schmalen Breiten deshalb: Wortmarke aus, Marktname als klarer Text.
       Desktop (>1200px) bleibt unveraendert Logo + Overlay. */
    body.f24-app .navbar-brand { width: auto !important; margin-right: 6px !important;
        display: inline-flex; align-items: center; }
    body.f24-app .navbar-brand img { display: none; }
    body.f24-app .navbar-brand > span {
        position: static !important; left: 0 !important; top: 0 !important;
        font-size: 14px !important; font-weight: 700; white-space: nowrap;
    }
    /* absolut positionierte Wasgau-Nummer haengt am Logo — ohne Logo ausblenden */
    body.f24-app .navbar-brand > span[style*="absolute"] { display: none !important; }
}

/* --------------------------------------------------------------------------
   22. GEO-ADRESSSUCHE (assets/theme/f24-geo.js)
   Vorschlagsliste des wiederverwendbaren Adress-Widgets — haengt direkt unter
   dem Suchfeld, gleiche Optik wie die Dropdowns.
   -------------------------------------------------------------------------- */
body.f24-app .f24-geovor {
    display: none;
    position: absolute; left: 0; right: 0; z-index: 10400;
    margin-top: 2px;
    background: var(--f24-surface);
    border: 1px solid var(--f24-border-strong);
    border-radius: var(--f24-radius-md);
    box-shadow: var(--f24-shadow-md);
    overflow: hidden;
}
body.f24-app .f24-geovor.is-open { display: block; }
body.f24-app .f24-geovor button {
    display: block; width: 100%; text-align: left;
    padding: var(--f24-space-sm) var(--f24-space-md);
    background: var(--f24-surface); border: 0;
    border-bottom: 1px solid var(--f24-border);
    font-size: var(--f24-fs-base); color: var(--f24-text);
    cursor: pointer;
}
body.f24-app .f24-geovor button:hover { background: var(--f24-surface-3); }
body.f24-app .f24-geovor .f24-geovor-q {
    padding: 4px var(--f24-space-md);
    font-size: var(--f24-fs-xs); color: var(--f24-text-muted);
    background: var(--f24-surface-2);
}

/* --------------------------------------------------------------------------
   23. F24-WIN — Fenster-Ersatz fuer easyui-window (assets/theme/f24-ui.js)
   Die bestehenden Dialog-DIVs der Altseiten werden unveraendert wiederverwendet;
   nur Klasse + open/close-Aufrufe wechseln.
   -------------------------------------------------------------------------- */
body.f24-app .f24-win-backdrop {
    display: none; position: fixed; inset: 0; z-index: 10300;
    background: rgba(16, 24, 40, .45);
}
body.f24-app .f24-win-backdrop.is-open { display: block; }
body.f24-app .f24-win {
    display: none;
    position: fixed; left: 50%; top: 48px; transform: translateX(-50%);
    z-index: 10350;
    width: calc(100% - 32px);
    max-height: calc(100vh - 96px);
    overflow: auto;
    background: var(--f24-surface);
    border: 1px solid var(--f24-border);
    border-radius: var(--f24-radius-lg);
    box-shadow: var(--f24-shadow-lg);
}
body.f24-app .f24-win.is-open { display: block; }
body.f24-app .f24-win-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--f24-space-md);
    padding: var(--f24-space-md) var(--f24-space-lg);
    margin: -14px -14px var(--f24-space-md);   /* Dialog-DIVs bringen eigenes padding mit */
    background: var(--f24-surface-2);
    border-bottom: 1px solid var(--f24-border);
    position: sticky; top: 0; z-index: 1;
}
body.f24-app .f24-win-title { font-size: var(--f24-fs-md); font-weight: var(--f24-fw-semibold); color: var(--f24-text); }
body.f24-app .f24-win-title span { font-size: inherit !important; }  /* Alt-Markup bringt font-size:18px mit */
body.f24-app .f24-win-x {
    border: 0; background: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--f24-text-muted);
    padding: 0 4px;
}
body.f24-app .f24-win-x:hover { color: var(--f24-text); }

/* --------------------------------------------------------------------------
   1c. DARKMODE — Rest-Flaechen aus easyUI/Bootstrap-CSS abfangen
   Nicht-migrierte Seiten bringen weisse Flaechen ueber ihr Framework-CSS mit
   (easyUI .panel/.layout/.datagrid, Bootstrap .card). Die haben KEIN inline-
   background, lassen sich also mit normaler Spezifitaet auf die Dark-Tokens
   ziehen. So werden Dashboard-KPI-Kacheln & Co. im Dark dunkel, ohne jede
   Seite einzeln anzufassen. (Inline-background:#fff im Markup bleibt Sache der
   jeweiligen Seite — dort auf var(--f24-surface) umstellen.)
   -------------------------------------------------------------------------- */
body.f24-app.f24-dark .panel,
body.f24-app.f24-dark .panel-body,
body.f24-app.f24-dark .layout-panel,
body.f24-app.f24-dark .layout-split-proxy,
body.f24-app.f24-dark .datagrid,
body.f24-app.f24-dark .datagrid-view,
body.f24-app.f24-dark .datagrid-body,
body.f24-app.f24-dark .datagrid-row,
body.f24-app.f24-dark .card,
body.f24-app.f24-dark .modal-content,
body.f24-app.f24-dark .dropdown-menu {
    background: var(--f24-surface) !important;
    color: var(--f24-text);
    border-color: var(--f24-border) !important;
}
body.f24-app.f24-dark .datagrid-header,
body.f24-app.f24-dark .datagrid-header td,
body.f24-app.f24-dark .panel-header,
body.f24-app.f24-dark .dropdown-item {
    background: var(--f24-surface-2) !important;
    color: var(--f24-text-secondary) !important;
    border-color: var(--f24-border) !important;
}
body.f24-app.f24-dark .dropdown-item:hover { background: var(--f24-surface-3) !important; color: var(--f24-text) !important; }
body.f24-app.f24-dark .datagrid-td-rownumber { background: var(--f24-surface-2) !important; }
/* Bootstrap-Textutilities, die im Dark sonst dunkel auf dunkel stehen */
body.f24-app.f24-dark .text-dark,
body.f24-app.f24-dark .text-muted { color: var(--f24-text-muted) !important; }

/* --------------------------------------------------------------------------
   1d. DARKMODE — DataTables + Bootstrap-Alerts zentral abfangen
   Mobile-Dark-QA (94 Seiten) zeigte drei wiederkehrende Ursachen auf ~69
   Seiten: DataTables-Zeilen weiss, .alert hell, DataTables-Steuertexte dunkel
   auf dunkel. Alles Framework-CSS ohne inline-background -> zentral loesbar.
   -------------------------------------------------------------------------- */
/* DataTables 2.x: Tabelle, Zeilen, Steuerleiste */
body.f24-app.f24-dark table.dataTable,
body.f24-app.f24-dark table.dataTable > tbody > tr,
body.f24-app.f24-dark table.dataTable > tbody > tr > td,
body.f24-app.f24-dark .dt-container,
body.f24-app.f24-dark .dataTables_wrapper {
    background-color: var(--f24-surface) !important;
    color: var(--f24-text);
}
body.f24-app.f24-dark table.dataTable > tbody > tr.odd > td,
body.f24-app.f24-dark table.dataTable > tbody > tr:nth-child(odd) > td {
    background-color: var(--f24-surface-2) !important;
}
body.f24-app.f24-dark table.dataTable > tbody > tr:hover > td { background-color: var(--f24-surface-3) !important; }
/* Alle Steuertexte/Labels des Wrappers (Seite X von Y, "No data", pro Seite, Suche) */
body.f24-app.f24-dark .dataTables_wrapper,
body.f24-app.f24-dark .dt-container,
body.f24-app.f24-dark .dt-info, body.f24-app.f24-dark .dataTables_info,
body.f24-app.f24-dark .dt-length, body.f24-app.f24-dark .dataTables_length,
body.f24-app.f24-dark .dt-search, body.f24-app.f24-dark .dataTables_filter,
body.f24-app.f24-dark .dt-paging, body.f24-app.f24-dark .dataTables_paginate,
body.f24-app.f24-dark .dt-empty, body.f24-app.f24-dark td.dataTables_empty {
    color: var(--f24-text-secondary) !important;
}
body.f24-app.f24-dark .dataTables_wrapper input,
body.f24-app.f24-dark .dataTables_wrapper select,
body.f24-app.f24-dark .dt-container input,
body.f24-app.f24-dark .dt-container select {
    background: var(--f24-surface) !important; color: var(--f24-text) !important;
    border-color: var(--f24-border-strong) !important;
}
body.f24-app.f24-dark .dt-paging .dt-paging-button,
body.f24-app.f24-dark .paginate_button {
    color: var(--f24-text-secondary) !important;
    background: var(--f24-surface) !important; border-color: var(--f24-border) !important;
}
body.f24-app.f24-dark .dt-paging .dt-paging-button.current,
body.f24-app.f24-dark .paginate_button.current {
    background: var(--f24-brand) !important; color: #fff !important; border-color: var(--f24-brand) !important;
}

/* Bootstrap-Alerts: helle Framework-Hintergruende auf Status-Tokens */
body.f24-app.f24-dark .alert { border-color: var(--f24-border); }
body.f24-app.f24-dark .alert-info    { background: var(--f24-info-bg) !important;    color: var(--f24-info-text) !important;    border-color: var(--f24-info) !important; }
body.f24-app.f24-dark .alert-success { background: var(--f24-success-bg) !important; color: var(--f24-success-text) !important; border-color: var(--f24-success) !important; }
body.f24-app.f24-dark .alert-warning { background: var(--f24-warning-bg) !important; color: var(--f24-warning-text) !important; border-color: var(--f24-warning) !important; }
body.f24-app.f24-dark .alert-danger  { background: var(--f24-danger-bg) !important;  color: var(--f24-danger-text) !important;  border-color: var(--f24-danger) !important; }
body.f24-app.f24-dark .alert-secondary,
body.f24-app.f24-dark .alert-light   { background: var(--f24-surface-2) !important;  color: var(--f24-text) !important; }

/* Bootstrap-Textutilities, die im Dark dunkel auf dunkel stuenden */
body.f24-app.f24-dark .text-dark,
body.f24-app.f24-dark .text-black,
body.f24-app.f24-dark .text-body { color: var(--f24-text) !important; }

/* --------------------------------------------------------------------------
   24. SPRACHUMSCHALTER (i18n, von f24-theme.js in die Navbar gehaengt)
   -------------------------------------------------------------------------- */
body.f24-app #f24LangSwitch { position: relative; display: inline-flex; align-items: center; margin: 0 4px; }
body.f24-app #f24LangSwitch .f24-lang-cur {
    height: 34px; padding: 0 10px; border-radius: 17px;
    border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
body.f24-app #f24LangSwitch .f24-lang-cur:hover { background: rgba(255,255,255,.25); }
body.f24-app #f24LangSwitch .f24-lang-menu {
    display: none; position: absolute; right: 0; top: 40px; z-index: 10000;
    background: var(--f24-surface); border: 1px solid var(--f24-border); border-radius: var(--f24-radius-md);
    box-shadow: var(--f24-shadow-md); min-width: 96px; overflow: hidden;
}
body.f24-app #f24LangSwitch.open .f24-lang-menu { display: block; }
body.f24-app #f24LangSwitch .f24-lang-menu a {
    display: block; padding: 8px 14px; font-size: 13px; color: var(--f24-text); text-decoration: none;
}
body.f24-app #f24LangSwitch .f24-lang-menu a:hover { background: var(--f24-surface-3); }
/* Flaggen-Emoji: leicht groesser und sauber zur Schrift ausgerichtet */
body.f24-app #f24LangSwitch .f24-lang-flag { font-size: 15px; line-height: 1; vertical-align: -1px; }
body.f24-app #f24LangSwitch .f24-lang-menu a.is-active { color: var(--f24-brand); font-weight: 700; }
@media (pointer: coarse) { body.f24-app #f24LangSwitch .f24-lang-cur { height: 40px; } }

/* --------------------------------------------------------------------------
   25. KOPFLEISTE — dunkleres Lila, lesbare Top-Ebene, aufgeraeumte Statuszeile
   Wunsch 08.08.2026: (a) Navbar dunkler ("dunkleres Lila"), (b) der erste
   Menuepunkt (DashBoard, ein .nav-link) war dunkel-auf-dunkel kaum erkennbar
   — menu.php erzwingt dort color:black !important, waehrend die Dropdown-
   Toggles weiss beschriftet sind, (c) die Zeile unter der Navbar (Serverload
   links, Uhr rechts) wirkte zusammengewuerfelt: weisse Box neben schwarzer
   Box, beides halbtransparent ueber dem Inhalt.
   Die Farbe kommt als Token (--f24-nav-bg, Abschnitt 1/1b), der Vendor-Wert
   .bg-inverse{#973663} aus assets/easyui/themes/bootstrap.min.css bleibt
   unangetastet und wird hier nur ueberschrieben.
   -------------------------------------------------------------------------- */
body.f24-app nav.navbar.bg-inverse,
body.f24-app nav.navbar.navbar-inverse {
    background-color: var(--f24-nav-bg) !important;
}

/* Top-Ebene einheitlich: ALLE Punkte (Direktlinks wie DashBoard UND Dropdown-
   Toggles) als dezente helle Pillen mit weisser Schrift. Schlaegt das
   .nav-link{color:black!important} aus menu.php ueber die hoehere Spezifitaet. */
body.f24-app .navbar .navbar-nav > li > a.nav-link.btn,
body.f24-app .navbar .navbar-nav > li.dropdown > a.btn.dropdown-toggle {
    background: var(--f24-nav-item) !important;
    border: 1px solid var(--f24-nav-border) !important;
    color: #fff !important;
    border-radius: var(--f24-radius-md);
}
body.f24-app .navbar .navbar-nav > li > a.nav-link.btn:hover,
body.f24-app .navbar .navbar-nav > li.dropdown > a.btn.dropdown-toggle:hover,
body.f24-app .navbar .navbar-nav > li.dropdown.show > a.btn.dropdown-toggle {
    background: var(--f24-nav-item-hover) !important;
    color: #fff !important;
}

/* Statuszeile unter der Navbar: Serverload (links) und Uhr (rechts) als
   EINHEITLICHE dunkle Pillen — volle Deckkraft (statt opacity .7 ueber dem
   Inhalt), Tabellenziffern, dezente Rundung nur unten. Inline-Styles der
   Elemente werden bewusst per !important uebersteuert. */
body.f24-app #serverload,
body.f24-app #uhr,
body.f24-app #uhrLocal {
    background: rgba(17, 24, 39, .82) !important;
    color: #e5e7eb !important;
    opacity: 1 !important;
    font-size: 11px !important;
    font-family: var(--f24-font-mono);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: var(--f24-shadow-sm);
    width: auto !important;
}
body.f24-app #uhrLocal { border-radius: 6px !important; }
/* Versionsnummer oben links: auf dem dunkleren Lila etwas zuruecknehmen */
body.f24-app #versionmenu { opacity: .65; font-size: 10px !important; }