/* Shared shell styles for the kitchen-station family of pages: the physical
   station dashboards (Kitchen/StationDashboard.razor) and the kitchen-facing
   orders overview (CashierDashboard.razor, "/orders"). Keeping this in one
   place means both surfaces share the exact same dark full-screen chrome and
   station switcher so operators get a consistent experience when jumping
   between them. */

.station-dashboard {
    height: 100vh;
    padding: .75rem 1rem;
    background: #0b0d10;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.station-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f4f5f7;
    background: #16191f;
    padding: .55rem 1.1rem;
    border-radius: 12px;
    border: 1px solid #262b34;
    border-left: 3px solid var(--station-color, #e63946);
    flex-shrink: 0;
    transition: padding .15s ease;
}

.station-header.collapsed {
    padding: .15rem .6rem;
    border-radius: 8px;
    border-left-width: 2px;
}

.station-header.collapsed .station-title {
    font-size: .6rem;
    letter-spacing: .04em;
}

.station-header.collapsed .header-collapse-btn {
    width: 20px;
    height: 20px;
}

.station-header.collapsed .header-collapse-btn i {
    font-size: .65rem;
}

.station-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #f4f5f7;
    padding-left: 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: font-size .15s ease;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.station-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.header-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #0f1216;
    border: 1px solid #262b34;
    border-radius: 8px;
    color: #8b93a1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease, width .15s ease, height .15s ease;
}

.header-collapse-btn:hover {
    background: #1b1f27;
    color: #d6dae2;
}

.bar-picker,
.station-picker-group {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: #0f1216;
    border: 1px solid #262b34;
    border-radius: 10px;
    padding: .2rem;
}

.bar-picker-btn,
.station-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    border: none;
    color: #8b93a1;
    padding: .35rem .6rem;
    border-radius: 7px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.bar-picker-label {
    white-space: nowrap;
}

.station-picker-btn {
    padding: .35rem .55rem;
    font-size: 1rem;
}

.bar-picker-btn:hover,
.station-picker-btn:hover {
    background: #1b1f27;
    color: #d6dae2;
}

.bar-picker-btn.active,
.station-picker-btn.active {
    background: var(--station-color, #e63946);
    color: #fff;
}

/* KI-Sortierung header toggle (CashierDashboard) */
.smart-sorting-toggle {
    position: relative;
}

.smart-sorting-btn.active {
    background: #3a86ff;
    color: #fff;
}

.smart-sorting-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 300px;
    background: #14171d;
    border: 1px solid #262b34;
    border-radius: 10px;
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    color: #d6dae2;
    font-size: 0.85rem;
}

.smart-sorting-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.smart-sorting-master {
    font-weight: 700;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed #262b34;
}

.smart-sorting-sub {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: opacity .15s ease;
}

.smart-sorting-sub.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.smart-sorting-numbers {
    display: flex;
    gap: 0.6rem;
}

.smart-sorting-numbers label {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #8b93a1;
}

.smart-sorting-numbers input {
    background: #0f1216;
    border: 1px solid #262b34;
    border-radius: 6px;
    color: #d6dae2;
    padding: 0.25rem 0.4rem;
    width: 100%;
}

.smart-sorting-close {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: #8b93a1;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
}

.smart-sorting-close:hover {
    color: #d6dae2;
}

/* -------------------------------------------------------------------------
   KDS design tokens + shared interaction states (additive).

   Defined here — on the shared shell used by both the orders overview and the
   physical station dashboards — so every kitchen surface and every extracted
   child component (OrderCard, OrdersBoardHeader, ServingTypeBadge) inherits the
   same spacing / radius / elevation / motion / focus scale through the DOM.
   Built on top of the existing palette; nothing above is renamed or removed.
   ------------------------------------------------------------------------- */
.station-dashboard {
    /* Radius scale */
    --kds-radius-pill: 999px;
    --kds-radius-card: 0.5rem;
    --kds-radius-sm: 0.375rem;

    /* Elevation scale (paper tickets on a dark board) */
    --kds-elev-card: 0 1px 3px rgba(0, 0, 0, 0.18);
    --kds-elev-card-hover: 0 4px 10px rgba(0, 0, 0, 0.30);

    /* Motion scale */
    --kds-motion-fast: 120ms;
    --kds-motion-base: 200ms;
    --kds-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Focus ring — a single high-contrast style reused on every control */
    --kds-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.75);

    /* Serving-type badge palette (contrast-checked pair) */
    --kds-serving-here-bg: #fdecec;
    --kds-serving-here-fg: #b02020;
    --kds-serving-here-bd: #f3c2c2;
    --kds-serving-togo-bg: #eef1f6;
    --kds-serving-togo-fg: #33415c;
    --kds-serving-togo-bd: #d3dae6;
}

/* Pressed feedback for the header pickers/buttons — completes the
   rest/hover/active/focus/disabled set they previously only half-had. */
.bar-picker-btn:active,
.station-picker-btn:active,
.header-collapse-btn:active {
    transform: translateY(1px);
}

/* One consistent, always-visible keyboard focus ring across every header
   control (WCAG 2.2 AA "focus visible"). :focus-visible so a mouse click does
   not leave a lingering ring, only keyboard/AT navigation does. */
.bar-picker-btn:focus-visible,
.station-picker-btn:focus-visible,
.header-collapse-btn:focus-visible,
.smart-sorting-btn:focus-visible,
.smart-sorting-close:focus-visible {
    outline: none;
    box-shadow: var(--kds-focus-ring, 0 0 0 3px rgba(96, 165, 250, 0.75));
    color: #f4f5f7;
}

@media (prefers-reduced-motion: reduce) {
    .bar-picker-btn:active,
    .station-picker-btn:active,
    .header-collapse-btn:active {
        transform: none;
    }

    .station-header,
    .station-title,
    .header-collapse-btn,
    .bar-picker-btn,
    .station-picker-btn,
    .smart-sorting-sub {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
   Betriebszahlen in der Datenschrift (additiv).

   Zähler und Sekunden in den Leisten laufen ständig weiter; in einer Monospace
   mit Tabellenziffern wechselt „9“ → „10“ ohne dass die Nachbarn rutschen.
   Die Komponenten tragen zusätzlich .sb-num, falls eine Leiste einmal ohne
   diese Datei gerendert wird.
   ------------------------------------------------------------------------- */
.station-dashboard .toast-slot-head,
.station-dashboard .toast-slot-seconds,
.station-dashboard .grill-heat-dial-value,
.station-dashboard .grill-heat-dial-caption,
.station-dashboard .pickup-number,
.station-dashboard .pickup-time {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   Küchen-Leisten (Kitchen/Stations: GrillLoadBar, BreadLoadBar,
   PickupReadyBar, SmartLoadBar) — gemeinsame Instrumenten-Grammatik.

   Vier Leisten, eine Sprache, damit der Koch nicht vier lernen muss:
     · links der Etikett-Block (Icon + Name in Mono-Kapitälchen) hinter dem
       farbigen Streifen der Leiste (Grill rot, Brot amber, Abholen grün,
       Kombi Mandanten-Akzent);
     · je Posten die Zahl groß in der Datenschrift (das Wichtigste), daneben
       der Name, darunter — wo es eine Auslastung gibt — Balken und
       Zustandswort in Mono-Kapitälchen.

   Zwei Farbvariablen: --kbar-color ist die Leistenfarbe (Streifen, Etikett,
   Hover), --kbar-item-color die Farbe eines einzelnen Postens — so nutzen
   Grill-Stufen (grün/amber/rot) und die Gruppen der Kombi-Leiste dieselben
   Regeln mit anderer Farbe. Farbwerte sind die bisherigen Leistenfarben; es
   kommt keiner hinzu.

   Schriftgrößen in der Leiste stehen in em, nicht rem: .kbar.fullscreen setzt
   font-size 1.35em, und nur em-Werte wachsen damit proportional mit. Deshalb
   tragen Container keine eigene font-size — em würde sich sonst
   aufmultiplizieren.

   Die leistenspezifischen Teile (Hitzeskala, Toaster-Slots, Abhol-Kacheln,
   Kombi-Gruppen) bleiben in den eingebetteten <style>-Blöcken der Komponenten.
   ------------------------------------------------------------------------- */
.kbar {
    --kbar-color: var(--station-color, #e63946);
    --kbar-item-color: var(--kbar-color);
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: .6rem 1rem;
    background: #16191f;
    border: 1px solid #262b34;
    border-left: 3px solid var(--kbar-color);
    border-radius: 12px;
    color: #f4f5f7;
    flex-shrink: 0;
    font-family: inherit;
}

.kbar--grill  { --kbar-color: #e2574c; }
.kbar--bread  { --kbar-color: #e0a73a; }
.kbar--pickup { --kbar-color: #4ca777; }
.kbar--smart  { --kbar-color: var(--sb-accent, #e63946); }

/* Leisten mit Werkzeugleiste (Vollbild, Einklappen) halten rechts Platz frei,
   damit die Tasten nie über dem letzten Posten liegen. */
.kbar--tools { padding-right: 3rem; }

.kbar.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    border-radius: 0;
    padding: 2rem 3.5rem 2rem 2.5rem;
    font-size: 1.35em;
    overflow: auto;
}

.kbar-toolbar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    gap: .4rem;
    z-index: 1;
}

.kbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #2f3540;
    background: #20242c;
    color: #9aa3b2;
    cursor: pointer;
    transition: color var(--kds-motion-fast, 120ms) var(--kds-ease, ease),
                border-color var(--kds-motion-fast, 120ms) var(--kds-ease, ease);
}

.kbar-icon-btn:hover { color: #f4f5f7; border-color: var(--kbar-color); }
.kbar-icon-btn:active { transform: translateY(1px); }

/* Etikett-Block: Icon in Leistenfarbe, Name in Mono-Kapitälchen, rechts die
   gestrichelte Abrisskante des Bon-Registers. */
.kbar-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
    padding-right: 1rem;
    border-right: 1px dashed #2f3540;
    white-space: nowrap;
    flex-shrink: 0;
}

.kbar-label i {
    color: var(--kbar-color);
    font-size: 1.15em;
    line-height: 1;
}

.kbar-label-text {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-size: .68em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9aa3b2;
    line-height: 1.2;
}

/* Posten: Zahl + Name in einer Zeile, darunter optional Balken + Zustandswort. */
.kbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 0;
    text-align: center;
}

.kbar-item-head {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    max-width: 100%;
    min-width: 0;
}

.kbar-num {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.7em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--kbar-item-color);
    white-space: nowrap;
}

.kbar-item-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .85em;
    font-weight: 600;
    color: #d6dae2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbar-item-name > i { color: #6b7280; font-size: .95em; flex-shrink: 0; }

.kbar-meter {
    width: 100%;
    height: 5px;
    background: #20242c;
    border-radius: 999px;
    overflow: hidden;
}

.kbar-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--kbar-item-color);
    transition: width .35s ease, background-color .35s ease;
}

.kbar-state {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-size: .62em;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kbar-item-color);
    white-space: nowrap;
    line-height: 1.2;
}

/* Ruhiger Leerzustand („Keine Bestellung abholbereit.“) in der Posten-Fläche. */
.kbar-empty {
    display: flex;
    align-items: center;
    color: #6b7280;
    font-size: .92em;
}

/* Neuer Wert: die Zahl tritt einmal kurz hervor. Die Komponenten erzeugen das
   Element über einen Bump-@key neu, so dass die Animation genau einmal läuft. */
@keyframes kbar-num-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.14); color: #f4f5f7; }
    100% { transform: scale(1); }
}

.kbar-num.bump { animation: kbar-num-bump .5s var(--kds-ease, ease); }

.kbar-icon-btn:focus-visible,
.kbar-item-btn:focus-visible {
    outline: none;
    box-shadow: var(--kds-focus-ring, 0 0 0 3px rgba(96, 165, 250, 0.75));
    color: #f4f5f7;
}

@media (prefers-reduced-motion: reduce) {
    .kbar-num.bump { animation: none; }
    .kbar-meter-fill,
    .kbar-icon-btn { transition: none; }
    .kbar-icon-btn:active { transform: none; }
}

/* Zahlenfelder im KI-Sortierung-Panel ebenfalls in der Datenschrift. */
.smart-sorting-numbers input {
    font-family: var(--sb-font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

.smart-sorting-numbers input:focus-visible,
.smart-sorting-row input:focus-visible {
    outline: 2px solid var(--sb-accent, #e63946);
    outline-offset: 2px;
}