/* ============================================================================
   VERWALTUNGS- UND BETRIEBSSEITEN — Seitengerüst „Bon-Register"

   Gilt für alles, was im MainLayout unter `.sb-page` gerendert wird (Management,
   Lager, Kassenführung, Personal, Einstellungen, Terminals für Zeit/HACCP …).
   Die Kasse (.pos-shell) und die Wandbildschirme (StationLayout) haben eigene
   Regelwerke und sind von dieser Datei bewusst NICHT betroffen — jede Regel
   hier hängt an `.sb-page` oder an einer `sb-*`-Klasse. Tokens (--sb-*) kommen
   aus app.css; diese Datei ergänzt nur, sie benennt nichts um.

   Gestaltungsidee: Die Welt dieses Betriebs ist der Thermo-Bon. Betriebliche
   Zahlen (Bestellnummer, Betrag, Uhrzeit, Menge, Charge, Kennzahl) laufen in
   einer Monospace mit Tabellenziffern, damit sie spaltenbündig stehen und auf
   dem Bildschirm dieselbe Gestalt haben wie auf dem Bon. Die gestrichelte
   „Abrisskante" ist das einzige Gliederungsmotiv: unter dem Seitenkopf, unter
   dem Etikett einer Kennzahl und als Rahmen eines Leerzustands („leerer
   Zettel"). Innerhalb von Inhalten bleiben die Linien durchgezogen.

   Bausteine (Komponenten in Components/Shared):
     <PageHeader>  → .sb-page-head   Eyebrow · Titel · Lead · Meta · Aktionen
     <StatTile>    → .sb-stat        Kennzahl mit Etikett und Hinweis
     <EmptyState>  → .sb-empty       Leerzustand mit Handlungsaufforderung
     <LoadingState>→ .sb-loading     Ladehinweis mit Text
     <PageTabs>    → .sb-tabs        Register (Unterstrich-Reiter, eine Scrollachse)
     <PageSegments>→ .sb-segments    Bereichswahl INNERHALB eines Registers
   ========================================================================== */

:root {
    --sb-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
    /* Bootstraps .font-monospace-Utility wird damit dieselbe Schrift — die bestehenden
       Stellen (Chargencodes, Artikelcodes, Token) ziehen ohne Markup-Änderung mit. */
    --bs-font-monospace: var(--sb-font-mono);

    /* Typo-Skala, Verhältnis 1,2 auf 15 px Grundgröße. */
    --sb-fs-xs: 0.72rem;
    --sb-fs-sm: 0.8125rem;
    --sb-fs-md: 0.9375rem;
    --sb-fs-lg: 1.125rem;
    --sb-fs-xl: 1.375rem;
    --sb-fs-2xl: 1.75rem;
    --sb-fs-3xl: 2.25rem;

    --sb-rule-dashed: 1px dashed color-mix(in srgb, var(--sb-border-strong) 90%, transparent);
    --sb-rule-solid: 1px solid var(--sb-border);

    --sb-dur: 0.16s;
    --sb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -- Seite ----------------------------------------------------------------- */
.sb-page {
    font-size: var(--sb-fs-md);
    font-weight: 400;
    line-height: 1.5;
    padding: 0.5rem 0 3rem;
    animation: sb-page-in var(--sb-dur) var(--sb-ease);
}

@keyframes sb-page-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Betriebsdaten in Monospace mit Tabellenziffern. */
.sb-num,
.sb-page .font-monospace {
    font-family: var(--sb-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: 0;
}

.sb-page :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; letter-spacing: -0.015em; }
.sb-page h2 { font-size: var(--sb-fs-xl); }
.sb-page h3 { font-size: var(--sb-fs-lg); }
.sb-page :is(h4, h5, h6) { font-size: var(--sb-fs-md); }

/* -- Seitenkopf ------------------------------------------------------------ */
.sb-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: var(--sb-rule-dashed);
}

.sb-page-head__text { min-width: 0; flex: 1 1 20rem; }

.sb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.35rem;
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
}

.sb-eyebrow::before {
    content: "";
    width: 1.1rem;
    height: 2px;
    background: var(--sb-accent);
    border-radius: 1px;
    flex-shrink: 0;
}

.sb-page-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--sb-fs-3xl));
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--sb-text);
    text-wrap: balance;
}

.sb-page-title .bi { font-size: 0.85em; margin-right: 0.35rem; color: var(--sb-text-dim); vertical-align: -0.05em; }

.sb-lead {
    margin: 0.45rem 0 0;
    max-width: 64ch;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-md);
    line-height: 1.5;
    text-wrap: pretty;
}

.sb-page-head__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-sm);
    color: var(--sb-text-muted);
    font-variant-numeric: tabular-nums;
}

.sb-page-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Darf schrumpfen und umbrechen — vier Tasten im Kopf liefen auf einem
       Tablet sonst rechts aus der Seite heraus. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Das Gerüst selbst erzeugt nie eine horizontale Seiten-Scrollachse;
   breite Inhalte (Tabellen, Reiter) scrollen in ihrem eigenen Container. */
.sb-page { min-width: 0; overflow-x: clip; }

/* -- Abschnitt ------------------------------------------------------------- */
.sb-section { margin-bottom: 2rem; }
.sb-section:last-child { margin-bottom: 0; }

.sb-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--sb-rule-solid);
}

.sb-section__title {
    margin: 0;
    font-size: var(--sb-fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sb-section__title .bi { color: var(--sb-text-muted); font-size: 0.95em; }

.sb-section__lead {
    margin: 0.2rem 0 0;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
    max-width: 70ch;
}

.sb-section__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Werkzeugleiste über Listen/Tabellen: Filter, Schalter, Aktualisieren. */
.sb-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.9rem;
}

.sb-toolbar .form-control,
.sb-toolbar .form-select { max-width: 16rem; }

.sb-toolbar__spacer { flex: 1 1 auto; }

/* -- Kennzahlen ------------------------------------------------------------ */
.sb-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.sb-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.85rem 1rem 0.9rem;
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-soft);
}

.sb-stat__label {
    padding-bottom: 0.4rem;
    border-bottom: var(--sb-rule-dashed);
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-stat__value {
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-2xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-stat__value small,
.sb-stat__unit {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--sb-text-dim);
    margin-left: 0.2em;
    letter-spacing: 0;
}

.sb-stat__hint {
    font-size: var(--sb-fs-sm);
    color: var(--sb-text-dim);
    min-height: 1.2em;
}

.sb-stat--accent  .sb-stat__value { color: var(--sb-accent-2); }
.sb-stat--success .sb-stat__value { color: var(--sb-success); }
.sb-stat--warning .sb-stat__value { color: var(--sb-warning); }
.sb-stat--danger  .sb-stat__value { color: var(--sb-warn-text); }
.sb-stat--info    .sb-stat__value { color: var(--sb-info-text); }

/* -- Leerzustand („leerer Zettel") ----------------------------------------- */
.sb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1.25rem;
    border: var(--sb-rule-dashed);
    border-radius: var(--sb-radius);
    color: var(--sb-text-dim);
    background: color-mix(in srgb, var(--sb-bg-card) 55%, transparent);
}

.sb-empty--compact { padding: 1.1rem 1rem; }

.sb-empty__icon {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--sb-text-muted);
    margin-bottom: 0.35rem;
}

.sb-empty__title {
    margin: 0;
    font-size: var(--sb-fs-lg);
    font-weight: 600;
    color: var(--sb-text);
}

.sb-empty__text {
    margin: 0;
    max-width: 46ch;
    font-size: var(--sb-fs-sm);
    text-wrap: pretty;
}

.sb-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* -- Laden ----------------------------------------------------------------- */
.sb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
}

.sb-loading .spinner-border {
    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
    color: var(--sb-accent);
}

/* -- Reiter („Register") ---------------------------------------------------
   Unterstrichene Reiter statt Bootstrap-Kästen; auf schmalen Geräten eine
   einzige horizontale Scrollachse statt Umbruch in drei Zeilen. */
.sb-page .nav-tabs,
.sb-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: var(--sb-rule-solid);
    margin-bottom: 1.25rem;
}

.sb-page .nav-tabs::-webkit-scrollbar,
.sb-tabs::-webkit-scrollbar { display: none; }

.sb-page .nav-tabs .nav-item,
.sb-tabs .nav-item { flex: 0 0 auto; }

.sb-page .nav-tabs .nav-link,
.sb-tabs .nav-link {
    position: relative;
    margin-bottom: -1px;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--sb-dur) ease, border-color var(--sb-dur) ease;
}

.sb-page .nav-tabs .nav-link:hover,
.sb-page .nav-tabs .nav-link:focus-visible,
.sb-tabs .nav-link:hover,
.sb-tabs .nav-link:focus-visible {
    color: var(--sb-text);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--sb-border-strong);
}

.sb-page .nav-tabs .nav-link.active,
.sb-tabs .nav-link.active {
    color: var(--sb-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--sb-accent);
    font-weight: 600;
}

.sb-page .nav-tabs .nav-link .bi,
.sb-tabs .nav-link .bi { color: var(--sb-text-muted); }

.sb-page .nav-tabs .nav-link.active .bi,
.sb-tabs .nav-link.active .bi { color: var(--sb-accent-2); }

/* -- Bereichswahl innerhalb eines Registers --------------------------------
   Eine Ebene unter den Reitern. Bewusst eine andere Gestalt statt einer zweiten
   Unterstrich-Leiste: Zwei gleich aussehende Leisten übereinander verraten nicht,
   welche die übergeordnete ist. Die Segmentgruppe sitzt in einer eigenen Mulde,
   ist damit sichtbar ein Bedienelement im Inhalt und keine Seitennavigation —
   und sie ist schmaler als die Reiterleiste, weil sie nur so breit wird wie ihr
   Inhalt. Auch hier genau eine Scrollachse auf schmalen Geräten. */
.sb-segments {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    max-width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    border-radius: 999px;
}

.sb-segments::-webkit-scrollbar { display: none; }

.sb-segment {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--sb-dur) ease, color var(--sb-dur) ease;
}

.sb-segment:hover,
.sb-segment:focus-visible {
    color: var(--sb-text);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.sb-segment--active {
    background: var(--sb-bg-card);
    color: var(--sb-text);
    font-weight: 600;
    box-shadow: var(--sb-shadow-soft);
}

.sb-segment .bi { color: var(--sb-text-muted); font-size: 0.95em; }
.sb-segment--active .bi { color: var(--sb-accent-2); }

/* Touch-Terminals: dieselbe Trefferfläche wie die übrigen Bedienelemente dort. */
.sb-page--touch .sb-segment { padding: 0.6rem 1.1rem; font-size: var(--sb-fs-md); }

/* -- Tabellen -------------------------------------------------------------- */
.sb-page .table {
    --bs-table-border-color: var(--sb-border);
    margin-bottom: 0;
    font-size: var(--sb-fs-sm);
}

.sb-page .table > thead > tr > th {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--sb-border-strong);
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    white-space: nowrap;
    vertical-align: bottom;
}

.sb-page .table > tbody > tr > td {
    padding: 0.55rem 0.6rem;
    vertical-align: middle;
}

.sb-page .table > tbody > tr:last-child > td { border-bottom-color: transparent; }

/* Zahlenspalten: rechtsbündig, Tabellenziffern. */
.sb-page .table :is(td, th).sb-num,
.sb-page .table :is(td, th).text-end {
    font-family: var(--sb-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.sb-page .table > tbody > tr > td .btn-sm { font-size: var(--sb-fs-xs); }

/* Kontextzeilen von Bootstrap sind für helle Flächen gemischt — hier als Tönung. */
.sb-page .table-danger  { --bs-table-bg: transparent; background: color-mix(in srgb, var(--sb-danger) 12%, transparent); color: var(--sb-text); }
.sb-page .table-warning { --bs-table-bg: transparent; background: color-mix(in srgb, var(--sb-warning) 12%, transparent); color: var(--sb-text); }
.sb-page .table-success { --bs-table-bg: transparent; background: color-mix(in srgb, var(--sb-success) 12%, transparent); color: var(--sb-text); }
.sb-page .table-info    { --bs-table-bg: transparent; background: color-mix(in srgb, var(--sb-info) 12%, transparent); color: var(--sb-text); }
.sb-page .table-light,
.sb-page .table-secondary,
.sb-page .table-active  { --bs-table-bg: transparent; background: rgba(255, 255, 255, 0.03); color: var(--sb-text); }
.sb-page .table-primary { --bs-table-bg: transparent; background: color-mix(in srgb, var(--sb-accent) 12%, transparent); color: var(--sb-text); }

.sb-page .table-responsive { border-radius: var(--sb-radius-sm); }

/* Tabelle in einer Karte: ohne doppelten Rahmen. */
.sb-page .card > .table-responsive,
.sb-page .card > .table { margin: 0; }

/* Lange Listen: Kopfzeile bleibt beim Scrollen stehen. */
.sb-table--sticky thead th {
    position: sticky;
    top: var(--sb-topbar-h, 2.25rem);
    z-index: 2;
    background: var(--sb-bg);
}

/* -- Karten ---------------------------------------------------------------- */
/* Kein overflow:hidden auf Karten — Dropdowns und Tooltips würden sonst abgeschnitten. */
.sb-page .card-header { font-size: var(--sb-fs-md); padding: 0.7rem 1rem; }
.sb-page .card-title { font-size: var(--sb-fs-lg); font-weight: 600; margin-bottom: 0.5rem; }
.sb-page .card-subtitle { color: var(--sb-text-dim); font-size: var(--sb-fs-sm); }
.sb-page .card-text { color: var(--sb-text-dim); }

/* Karten-Kopf als Beschriftung im Eyebrow-Stil (Einstellungsgruppen). */
.sb-page .card-header.sb-card-label {
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    font-weight: 500;
}

/* Definitionsliste für Stammdaten: Schlüssel links, Wert rechts. */
.sb-kv {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: var(--sb-fs-sm);
}

.sb-kv dt { font-weight: 500; color: var(--sb-text-dim); margin: 0; }
.sb-kv dd { margin: 0; color: var(--sb-text); min-width: 0; overflow-wrap: anywhere; }
.sb-kv dd.sb-num { font-family: var(--sb-font-mono); }

/* -- Bootstrap-Bausteine, denen das Dark-Theme bisher fehlte --------------- */
/* Das Schließkreuz von Bootstrap ist ein schwarzes SVG — auf den dunklen
   Flächen war es an über hundert Stellen praktisch unsichtbar. */
.sb-page .btn-close,
.modal .btn-close,
.toast .btn-close,
.alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.6;
}

.sb-page .btn-close:hover,
.modal .btn-close:hover,
.alert .btn-close:hover { opacity: 1; }

/* Die Kasse ist eine helle Fläche; dort bleibt das Kreuz schwarz. */
.pos-screen .btn-close { filter: none; opacity: 0.5; }

.sb-page .alert { font-size: var(--sb-fs-sm); }
.alert-warning   { background: color-mix(in srgb, var(--sb-warning) 10%, transparent); color: var(--sb-text); border-color: color-mix(in srgb, var(--sb-warning) 35%, transparent); }
.alert-secondary,
.alert-light,
.alert-dark      { background: var(--sb-bg-elev); color: var(--sb-text-dim); border-color: var(--sb-border); }
.alert-primary   { background: color-mix(in srgb, var(--sb-accent) 10%, transparent); color: var(--sb-text); border-color: color-mix(in srgb, var(--sb-accent) 35%, transparent); }
.alert .alert-link { color: var(--sb-accent-2); }
.alert-heading { font-size: var(--sb-fs-md); font-weight: 600; }

.sb-page .input-group-text {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-border);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
}

.sb-page .form-control,
.sb-page .form-select { font-size: var(--sb-fs-md); }

.sb-page .form-control:disabled,
.sb-page .form-select:disabled,
.sb-page .form-control[readonly] {
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
    opacity: 1;
}

/* app.css setzt auf .form-select die background-Kurzschrift und löscht damit
   Bootstraps Pfeil samt no-repeat/position/size — deshalb hier alle vier
   Eigenschaften einzeln, auch im Fokus (dort setzt app.css die Kurzschrift erneut). */
.sb-page .form-select,
.sb-page .form-select:focus {
    background-color: var(--sb-bg-elev);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a7b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.sb-page .form-select[multiple],
.sb-page .form-select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 0.75rem;
}

.sb-page .form-label { font-size: var(--sb-fs-sm); font-weight: 500; margin-bottom: 0.3rem; }
.sb-page .form-text { font-size: var(--sb-fs-xs); }

.sb-page .form-check-input {
    background-color: var(--sb-bg-elev);
    border-color: var(--sb-border-strong);
}

.sb-page .form-check-input:checked {
    background-color: var(--sb-accent);
    border-color: var(--sb-accent);
}

.sb-page .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a7b3'/%3e%3c/svg%3e");
}

.sb-page .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.sb-page .form-check-label { color: var(--sb-text); }
.sb-page .form-range::-webkit-slider-thumb { background: var(--sb-accent); }
.sb-page .form-range::-moz-range-thumb { background: var(--sb-accent); }

.sb-page .dropdown-menu {
    background: var(--sb-bg-elev-2);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    font-size: var(--sb-fs-sm);
}
.sb-page .dropdown-item { color: var(--sb-text); }
.sb-page .dropdown-item:hover, .sb-page .dropdown-item:focus { background: rgba(255, 255, 255, 0.06); color: var(--sb-text); }
.sb-page .dropdown-divider { border-color: var(--sb-border); }

.sb-page .pagination {
    --bs-pagination-bg: var(--sb-bg-card);
    --bs-pagination-color: var(--sb-text-dim);
    --bs-pagination-border-color: var(--sb-border);
    --bs-pagination-hover-bg: var(--sb-bg-elev-2);
    --bs-pagination-hover-color: var(--sb-text);
    --bs-pagination-hover-border-color: var(--sb-border-strong);
    --bs-pagination-active-bg: var(--sb-accent);
    --bs-pagination-active-border-color: var(--sb-accent);
    --bs-pagination-disabled-bg: var(--sb-bg-elev);
    --bs-pagination-disabled-color: var(--sb-text-muted);
    --bs-pagination-disabled-border-color: var(--sb-border);
    --bs-pagination-focus-box-shadow: none;
}

.sb-page .progress { background: var(--sb-bg-elev-2); border-radius: 999px; overflow: hidden; }
.sb-page .progress-bar { font-family: var(--sb-font-mono); font-size: var(--sb-fs-xs); font-weight: 600; }
.sb-page .progress-bar.bg-success { background: var(--sb-success) !important; color: #0b0c0f; }
.sb-page .progress-bar.bg-warning { background: var(--sb-warning) !important; color: #0b0c0f; }
.sb-page .progress-bar.bg-danger  { background: var(--sb-danger) !important; color: #fff; }

.sb-page .list-group-item-action:hover, .sb-page .list-group-item-action:focus { background: var(--sb-bg-elev-2); color: var(--sb-text); }
.sb-page .list-group-item.active { background: color-mix(in srgb, var(--sb-accent) 18%, var(--sb-bg-card)); border-color: var(--sb-accent); color: var(--sb-text); }

.sb-page .accordion {
    --bs-accordion-bg: var(--sb-bg-card);
    --bs-accordion-color: var(--sb-text);
    --bs-accordion-border-color: var(--sb-border);
    --bs-accordion-btn-color: var(--sb-text);
    --bs-accordion-btn-bg: var(--sb-bg-elev-2);
    --bs-accordion-active-bg: var(--sb-bg-elev-2);
    --bs-accordion-active-color: var(--sb-text);
    --bs-accordion-btn-focus-box-shadow: none;
}

.sb-page .text-bg-secondary { background: var(--sb-bg-elev-2) !important; color: var(--sb-text-dim) !important; border: 1px solid var(--sb-border); }
.sb-page .text-bg-dark      { background: var(--sb-bg-elev-2) !important; color: var(--sb-text) !important; }
.sb-page .text-bg-light     { background: var(--sb-bg-elev-2) !important; color: var(--sb-text) !important; }
.sb-page .text-bg-danger    { background: color-mix(in srgb, var(--sb-danger) 22%, transparent) !important; color: var(--sb-warn-text) !important; }
.sb-page .text-bg-warning   { background: color-mix(in srgb, var(--sb-warning) 22%, transparent) !important; color: #ffc89a !important; }
.sb-page .text-bg-success   { background: color-mix(in srgb, var(--sb-success) 22%, transparent) !important; color: #7be0a9 !important; }
.sb-page .text-bg-info      { background: color-mix(in srgb, var(--sb-info) 22%, transparent) !important; color: #9bdbf2 !important; }
.sb-page .text-bg-primary   { background: color-mix(in srgb, var(--sb-accent) 22%, transparent) !important; color: var(--sb-warn-text) !important; }

.sb-page .badge.bg-dark  { background: var(--sb-bg-elev-2) !important; color: var(--sb-text) !important; border: 1px solid var(--sb-border-strong); }
.sb-page .badge.bg-light { background: var(--sb-bg-elev-2) !important; color: var(--sb-text) !important; border: 1px solid var(--sb-border); }
.sb-page .badge.bg-warning.text-dark,
.sb-page .badge.bg-info.text-dark { color: inherit !important; }
.sb-page .badge { font-size: var(--sb-fs-xs); padding: 0.3em 0.55em; border-radius: 999px; }
.sb-page .badge .bi { font-size: 0.9em; }

/* Kennzeichnungs-Pille mit Zustandspunkt (Status in Listen). */
.sb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--sb-border);
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-xs);
    font-weight: 500;
    white-space: nowrap;
}
.sb-pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sb-text-muted); flex-shrink: 0; }
.sb-pill--success { color: #7be0a9; }
.sb-pill--success::before { background: var(--sb-success); }
.sb-pill--warning { color: #ffc89a; }
.sb-pill--warning::before { background: var(--sb-warning); }
.sb-pill--danger  { color: var(--sb-warn-text); }
.sb-pill--danger::before { background: var(--sb-danger); }
.sb-pill--info    { color: #9bdbf2; }
.sb-pill--info::before { background: var(--sb-info); }

.sb-page .bg-dark  { background: var(--sb-bg-elev-2) !important; color: var(--sb-text) !important; }
.sb-page .border-start { border-color: var(--sb-border) !important; }
.sb-page .text-secondary { color: var(--sb-text-dim) !important; }
.sb-page .text-body-secondary { color: var(--sb-text-dim) !important; }
.sb-page code { color: var(--sb-accent-2); font-family: var(--sb-font-mono); font-size: 0.9em; }
.sb-page pre { background: var(--sb-bg-elev); border: var(--sb-rule-solid); border-radius: var(--sb-radius-sm); color: var(--sb-text); padding: 0.75rem 0.9rem; font-family: var(--sb-font-mono); font-size: var(--sb-fs-sm); }
.sb-page kbd { background: var(--sb-bg-elev-2); color: var(--sb-text); border: 1px solid var(--sb-border-strong); border-bottom-width: 2px; border-radius: 4px; font-family: var(--sb-font-mono); font-size: 0.85em; padding: 0.1em 0.4em; }

.sb-page .modal-header { padding: 0.9rem 1.1rem; }
.sb-page .modal-title { font-size: var(--sb-fs-lg); font-weight: 600; }
.sb-page .modal-footer { gap: 0.5rem; }
.sb-page .modal-content { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* -- Tasten ---------------------------------------------------------------- */
.sb-page .btn { font-size: var(--sb-fs-sm); padding: 0.45rem 0.9rem; min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.sb-page .btn-sm { font-size: var(--sb-fs-xs); padding: 0.3rem 0.6rem; min-height: 1.9rem; }
.sb-page .btn-lg { font-size: var(--sb-fs-md); padding: 0.6rem 1.2rem; min-height: 2.9rem; }
.sb-page .btn .bi { font-size: 1.05em; line-height: 1; }
.sb-page .btn-link { color: var(--sb-accent-2); text-decoration: none; min-height: 0; }
.sb-page .btn-link:hover { color: var(--sb-accent-hover); text-decoration: underline; }
.sb-page .btn:disabled, .sb-page .btn.disabled { opacity: 0.45; cursor: not-allowed; }

/* Bootstraps .btn:disabled ist spezifischer als app.css' .btn-primary und fiel auf
   das Standard-Blau zurück — eine deaktivierte Primärtaste sah aus wie ein Fremdkörper.
   Die Bootstrap-Variablen tragen die Farbe auch in den deaktivierten Zustand. */
.sb-page .btn-primary {
    --bs-btn-disabled-bg: var(--sb-accent);
    --bs-btn-disabled-border-color: var(--sb-accent);
    --bs-btn-disabled-color: #fff;
}
.sb-page .btn-success {
    --bs-btn-disabled-bg: var(--sb-success);
    --bs-btn-disabled-border-color: var(--sb-success);
    --bs-btn-disabled-color: #0b0c0f;
}
.sb-page .btn-danger {
    --bs-btn-disabled-bg: var(--sb-danger);
    --bs-btn-disabled-border-color: var(--sb-danger);
    --bs-btn-disabled-color: #fff;
}
.sb-page .btn-secondary {
    --bs-btn-disabled-bg: var(--sb-bg-elev-2);
    --bs-btn-disabled-border-color: var(--sb-border-strong);
    --bs-btn-disabled-color: var(--sb-text);
}
.sb-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info) {
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--sb-border-strong);
    --bs-btn-disabled-color: var(--sb-text);
}

/* Touch-Terminals (Zeiterfassung, HACCP, Mitarbeiter-Status): große Trefferflächen. */
.sb-page--touch .btn { min-height: 3rem; font-size: var(--sb-fs-md); }
.sb-page--touch .btn-lg { min-height: 3.6rem; font-size: var(--sb-fs-lg); }
.sb-page--touch .form-control, .sb-page--touch .form-select { min-height: 3rem; font-size: var(--sb-fs-lg); }

/* -- Tastaturfokus + Bewegung ---------------------------------------------- */
.sb-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.sb-page :is(.btn, .form-control, .form-select, .form-check-input):focus:not(:focus-visible) { box-shadow: none; }

/* Blazors FocusOnNavigate setzt nach jedem Seitenwechsel den Fokus auf das h1
   (tabindex=-1) — ein Ring um die Überschrift wäre kein Tastaturfokus, sondern Rauschen. */
.sb-page h1:focus,
.sb-page h1[tabindex]:focus-visible { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .sb-page { animation: none; }
    .sb-page *, .sb-page *::before, .sb-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* -- Schmale Geräte -------------------------------------------------------- */
@media (max-width: 640px) {
    .sb-page { padding-bottom: 2rem; }
    .sb-page-head { align-items: stretch; }
    .sb-page-head__actions { width: 100%; }
    .sb-page-head__actions .btn { flex: 1 1 auto; }
    .sb-toolbar .form-control, .sb-toolbar .form-select { max-width: none; flex: 1 1 12rem; }
    .sb-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Startseite („Schichtbeginn") ------------------------------------------ */
.sb-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--sb-topbar-h, 2.25rem) - 2rem);
    padding: 2rem 0 3rem;
    animation: sb-page-in 0.28s var(--sb-ease);
}

.sb-home__brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.sb-home__brand img { flex-shrink: 0; }

.sb-home__name {
    margin: 0;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.sb-home__name span { color: var(--sb-accent); }

.sb-home__day {
    margin: 0.55rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
}

.sb-home__day::before { content: ""; width: 1.1rem; height: 2px; background: var(--sb-accent); border-radius: 1px; }

.sb-launch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    max-width: 64rem;
}

.sb-launch__tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 8.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text);
    text-decoration: none;
    box-shadow: var(--sb-shadow-soft);
    transition: border-color var(--sb-dur) ease, transform var(--sb-dur) var(--sb-ease), background-color var(--sb-dur) ease;
}

.sb-launch__tile:hover,
.sb-launch__tile:focus-visible { border-color: var(--sb-border-strong); color: var(--sb-text); transform: translateY(-2px); }
.sb-launch__tile:active { transform: translateY(0); }

.sb-launch__tile .bi { font-size: 1.6rem; color: var(--sb-text-dim); line-height: 1; }

.sb-launch__label { display: block; font-size: var(--sb-fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.sb-launch__hint  { display: block; margin-top: 0.15rem; font-size: var(--sb-fs-sm); color: var(--sb-text-dim); }

.sb-launch__tile--primary {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 70%, #000));
    border-color: transparent;
    color: #fff;
}
.sb-launch__tile--primary .bi, .sb-launch__tile--primary .sb-launch__hint { color: rgba(255, 255, 255, 0.85); }
.sb-launch__tile--primary:hover, .sb-launch__tile--primary:focus-visible { color: #fff; border-color: transparent; filter: brightness(1.06); }

@media (max-width: 640px) {
    .sb-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-launch__tile { min-height: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-home { animation: none; }
    .sb-launch__tile, .sb-launch__tile:hover { transition: none; transform: none; }
}

/* -- Formulare und Dialoge (Einstellungen-Durchgang 28.08.2026) ------------
   Fachlich gruppierte Abschnitte (SbFormSection), Schalter mit Erklärung (SbSwitch),
   12er-Raster mit festen Feldbreiten. Entstanden in der Katalogverwaltung, gilt für
   alle Einstellungsseiten: gleiche Form für jedes Merkmal, Erklärung unter dem
   Schalter statt im Tooltip. */
.sb-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Diese Zeile ist keine Feinheit, sondern Pflicht. `.sb-form` sitzt auf dem
   `.modal-body` eines `.modal-dialog-scrollable` — einem Flex-Container mit
   begrenzter Höhe. Ein Flex-Kind darf normalerweise nicht unter seine
   Inhaltshöhe schrumpfen, ausser es hat selbst ein `overflow` ungleich
   `visible`; dann gilt `min-height: 0`. Genau das trifft auf **jede**
   `.table-responsive` zu (`overflow-x: auto`). Im Gericht-Dialog sind das die
   Tabellen für Zutaten, Soßen, Brote, Fleischsorten und Fleischportionen: Sie
   standen im DOM, waren aber auf Höhe 0 zusammengedrückt, während Überschriften
   und Hinweistexte (overflow sichtbar, also nicht schrumpfbar) stehen blieben.
   Es sah aus, als wäre nichts angelegt worden. Dieselbe Ursache liess im
   Fleisch-Dialog eine gerade gespeicherte Portion verschwinden — Meldung
   „Fleischportion gespeichert“, Liste leer. */
.sb-form > * { flex-shrink: 0; }

.sb-form__section {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sb-form__section + .sb-form__section {
    padding-top: 1rem;
    border-top: 1px dashed var(--sb-border);
}

.sb-form__legend {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: var(--sb-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-text-dim);
}

.sb-form__legend .bi { color: var(--sb-accent-2); }

.sb-form__hint {
    margin: -0.3rem 0 0.6rem;
    font-size: var(--sb-fs-sm);
    color: var(--sb-text-dim);
}

.sb-form__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem 0.9rem;
}

.sb-form__field { grid-column: span 6; min-width: 0; }
.sb-form__field--full { grid-column: span 12; }
.sb-form__field--third { grid-column: span 4; }
.sb-form__field--wide { grid-column: span 8; }
.sb-form__field--quarter { grid-column: span 3; }
.sb-form__field .form-label { margin-bottom: 0.25rem; }
.sb-form__field .form-text { margin-top: 0.25rem; }

@media (max-width: 575.98px) {
    .sb-form__field,
    .sb-form__field--third,
    .sb-form__field--quarter,
    .sb-form__field--wide { grid-column: span 12; }
}

.sb-form__switches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem 0.9rem;
}

.sb-switch {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-elev);
}

.sb-switch .form-check { margin: 0; min-height: 0; }
.sb-switch .form-check-label { font-weight: 500; cursor: pointer; }
.sb-switch .form-check-input { cursor: pointer; }

.sb-switch__hint {
    margin-top: 0.15rem;
    padding-left: 2.5em;
    font-size: var(--sb-fs-xs);
    color: var(--sb-text-dim);
}

.sb-switch--disabled { opacity: 0.55; }

.sb-lang {
    display: inline-block;
    min-width: 2.2rem;
    margin-right: 0.3rem;
    padding: 0 0.3rem;
    border: 1px solid var(--sb-border);
    border-radius: 4px;
    background: var(--sb-bg-elev-2);
    font-size: var(--sb-fs-xs);
    text-align: center;
}

.sb-form .input-group-text {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-border);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
}

.sb-form .form-control-color {
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Bild-Vorschau im Dialog neben dem Datei-Feld. */
.sb-form__image {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sb-form__image-preview {
    width: 56px;
    height: 56px;
    border-radius: var(--sb-radius-sm);
    object-fit: cover;
    background: var(--sb-bg-elev-2);
    border: 1px solid var(--sb-border);
}

/* -- Rückmeldung beim Antippen (Einstellungen-Durchgang 28.08.2026) ----------
   Eine Taste antwortet im Moment des Drucks, nicht erst beim Loslassen: kurzer
   Rücksprung um 2 %, 100 ms, nur transform. Auf einem Tablet ist das der
   Unterschied zwischen „hat es reagiert?" und „es hat reagiert". Bei
   reduzierter Bewegung bleibt die Farbe als Rückmeldung, der Rücksprung entfällt. */
.sb-page .btn,
.sb-page .sb-segment,
.sb-page .nav-tabs .nav-link {
    transition: transform 100ms ease-out, background-color var(--sb-dur) ease, border-color var(--sb-dur) ease, color var(--sb-dur) ease;
}

.sb-page .btn:active:not(:disabled),
.sb-page .sb-segment:active,
.sb-page .nav-tabs .nav-link:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .sb-page .btn,
    .sb-page .sb-segment,
    .sb-page .nav-tabs .nav-link { transition: none; }

    .sb-page .btn:active:not(:disabled),
    .sb-page .sb-segment:active,
    .sb-page .nav-tabs .nav-link:active { transform: none; }
}

/* -- Datei-Auswahl (SbFileDrop) --------------------------------------------- */
.sb-filedrop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--sb-border-strong);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-elev);
    cursor: pointer;
    transition: border-color var(--sb-dur) ease, background-color var(--sb-dur) ease;
}

.sb-filedrop:hover,
.sb-filedrop:focus-within {
    border-color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 6%, var(--sb-bg-elev));
}

.sb-filedrop:focus-within { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

.sb-filedrop__icon { font-size: 1.35rem; color: var(--sb-accent-2); flex-shrink: 0; }

.sb-filedrop__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sb-filedrop__label { font-weight: 500; }
.sb-filedrop__hint { font-size: var(--sb-fs-xs); color: var(--sb-text-dim); }

.sb-filedrop__cta {
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-fs-sm);
    color: var(--sb-text);
    white-space: nowrap;
}

/* Das echte Feld bleibt bedienbar (Tastatur, Vorleser), ist aber unsichtbar. */
.sb-filedrop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sb-filedrop--compact { padding: 0.45rem 0.7rem; gap: 0.6rem; }
.sb-filedrop--compact .sb-filedrop__icon { font-size: 1.05rem; }

/* Aktionsleiste am Ende eines Formulars: rechtsbündig, eine Primärtaste. */
.sb-form__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* -- Karten-Raster (Einstellungen) -------------------------------------------
   Mehrere gleichrangige Einstellungs-Karten nebeneinander statt als lange Säule.
   Eine Karte, die die ganze Breite braucht (Logo mit Vorschau), trägt
   sb-card-grid__full. Auf schmalen Fenstern fällt alles in eine Spalte. */
.sb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.sb-card-grid > .card { margin: 0; }
.sb-card-grid__full { grid-column: 1 / -1; }