/* ============================================================================
   Tableflow – Oberflächenbausteine
   ----------------------------------------------------------------------------
   Projektweite Klassen. Sie verwenden ausschließlich Tokens aus tokens.css –
   kein fester Farbwert in dieser Datei. Wer das Aussehen ändern will, ändert
   hier (Form) oder in tokens.css (Farben), nicht in den Razor-Dateien.

   Bootstrap bleibt für Raster, Formulare und Modals zuständig.
   ========================================================================= */

body {
    font-family: var(--tf-font);
    font-size: var(--tf-text-base);
    color: var(--tf-text);
    background: var(--tf-bg);
}

/* ── Scrollleiste ───────────────────────────────────────────────────────
   Ersetzt die dicke Betriebssystem-Leiste durch eine schmale, token-basierte
   Variante – Firefox über scrollbar-color/-width, Chromium/Safari über die
   WebKit-Pseudoelemente. Gilt für Dokument und alle scrollbaren Bereiche
   (Sidebar, .tf-table-wrap, Modals). */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--tf-text-muted) transparent;
}
*{
    scrollbar-width: thin;
    scrollbar-color: var(--tf-text-muted) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--tf-border);
    border-radius: var(--tf-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--tf-text-muted); }

/* ── Buttons ────────────────────────────────────────────────────────────
   Die Variante setzt nur drei lokale Variablen, alles andere erbt sie.
   Neue Variante = eine Regel mit drei Zeilen.                              */

.tf-btn {
    --btn-bg: transparent;
    --btn-fg: var(--tf-text);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;

    min-height: var(--tf-control-height);
    padding: 0 .875rem;

    font-family: inherit;
    font-size: var(--tf-text-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--tf-radius);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Ohne color-mix bleibt die Fläche schlicht unverändert – kein Bruch. */
.tf-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--btn-bg) 88%, #000);
}

.tf-btn:focus-visible {
    outline: 2px solid var(--tf-brand);
    outline-offset: 2px;
}

.tf-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.tf-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tf-btn--primary {
    --btn-bg: var(--tf-brand);
    --btn-fg: var(--tf-brand-contrast);
    --btn-border: var(--tf-brand);
}

.tf-btn--success {
    --btn-bg: var(--tf-status-ready);
    --btn-fg: var(--tf-text-inverted);
    --btn-border: var(--tf-status-ready);
}

.tf-btn--warning {
    --btn-bg: var(--tf-status-preparing);
    --btn-fg: var(--tf-text-inverted);
    --btn-border: var(--tf-status-preparing);
}

.tf-btn--danger {
    --btn-bg: var(--tf-status-cancelled);
    --btn-fg: var(--tf-text-inverted);
    --btn-border: var(--tf-status-cancelled);
}

/* Umrandete und stille Varianten färben beim Überfahren die Fläche ein,
   statt sie abzudunkeln. */
.tf-btn--outline {
    --btn-bg: var(--tf-surface);
    --btn-fg: var(--tf-text);
    --btn-border: var(--tf-border);
}

.tf-btn--outline:hover:not(:disabled) {
    background-color: var(--tf-surface-sunken);
}

.tf-btn--outline-danger {
    --btn-bg: var(--tf-surface);
    --btn-fg: var(--tf-status-cancelled);
    --btn-border: color-mix(in srgb, var(--tf-status-cancelled) 35%, #fff);
}

.tf-btn--outline-danger:hover:not(:disabled) {
    background-color: var(--tf-status-cancelled-soft);
}

.tf-btn--ghost {
    --btn-fg: var(--tf-text-muted);
    font-weight: 500;
}

.tf-btn--ghost:hover:not(:disabled) {
    background-color: var(--tf-surface-sunken);
}

/* Größen */
.tf-btn--sm {
    min-height: var(--tf-control-height-sm);
    padding: 0 .625rem;
    font-size: var(--tf-text-sm);
}

/* Für Küche, Bar und Service: große Fläche, mit dem Daumen bedienbar */
.tf-btn--lg {
    min-height: var(--tf-control-height-lg);
    padding: 0 1.25rem;
    font-size: var(--tf-text-lg);
    border-radius: var(--tf-radius-lg);
}

.tf-btn--icon {
    padding: 0;
    width: var(--tf-control-height);
    flex: 0 0 auto;
}

.tf-btn--lg.tf-btn--icon { width: var(--tf-control-height-lg); }
.tf-btn--sm.tf-btn--icon { width: var(--tf-control-height-sm); }

.tf-btn--block {
    width: 100%;
}

/* ── Karten ─────────────────────────────────────────────────────────────── */

.tf-card {
    display: flex;
    flex-direction: column;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-sm);
    overflow: hidden;
}

.tf-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .875rem;
    background: var(--tf-surface);
    border-bottom: 1px solid var(--tf-border);
    font-weight: 600;
}

.tf-card__body { padding: .875rem; }
.tf-card__body--flush { padding: 0; }

.tf-card__footer {
    padding: .625rem .875rem;
    background: var(--tf-surface-sunken);
    border-top: 1px solid var(--tf-border);
}

/* ── Bestellkarte in den Stationen ──────────────────────────────────────
   Die Akzentfarbe kommt vom Stationswrapper, nicht aus der Karte.        */

.tf-station { --tf-station-accent: var(--tf-station-kitchen); }
.tf-station--kitchen { --tf-station-accent: var(--tf-station-kitchen); }
.tf-station--bar { --tf-station-accent: var(--tf-station-bar); }
.tf-station--service { --tf-station-accent: var(--tf-station-service); }

.tf-order-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .875rem;
    background: var(--tf-station-accent);
    color: var(--tf-text-inverted);
}

.tf-order-card__table {
    font-size: var(--tf-text-lg);
    font-weight: 700;
}

.tf-order-card__meta {
    font-size: var(--tf-text-sm);
    opacity: .8;
}

/* Artikelzeile: Text oben, Aktionen darunter. Die Bedienknöpfe sind in den
   Stationen bewusst groß – nebeneinander würden sie den Artikelnamen auf
   mehrere Zeilen quetschen, und genau den muss man im Betrieb zuerst lesen. */
.tf-order-card__item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--tf-border);
}

.tf-order-card__item:last-child { border-bottom: 0; }

.tf-order-card__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.tf-order-card__name {
    font-weight: 600;
    font-size: var(--tf-text-lg);
}

.tf-order-card__note {
    margin-top: .125rem;
    font-size: var(--tf-text-sm);
    font-style: italic;
    color: var(--tf-text-muted);
}

.tf-order-card__allergen {
    margin-top: .25rem;
    padding: .3rem .45rem;
    border-left: 4px solid #dc3545;
    border-radius: .25rem;
    background: color-mix(in srgb, #dc3545 12%, transparent);
    color: #8b1e2b;
    font-size: var(--tf-text-sm);
    font-weight: 700;
}

.tf-order-card__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Hauptaktion nimmt den Platz, das Storno-Kreuz bleibt schmal */
.tf-order-card__actions > .tf-btn { flex: 1 1 auto; }
.tf-order-card__actions > .tf-btn--icon { flex: 0 0 auto; }

/* ── Stationsraster ─────────────────────────────────────────────────────────
   Auf Menge ausgelegt: 30+ offene Bestellungen im Abendgeschäft. Full HD: sechs
   Karten nebeneinander, 10"-Tablet quer (Leiste eingeklappt): vier. Die Karten sind
   nur so hoch wie ihr Inhalt. */

.tf-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .75rem;
    align-items: start;
}

.tf-order-card__title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.tf-order-card__title .tf-order-card__table { line-height: 1.2; }
.tf-order-card__title .tf-order-card__meta { margin-right: 0; font-size: .75rem; }

.tf-board .tf-order-card__name { font-size: 1rem; line-height: 1.3; }
.tf-workspace .tf-board .tf-order-card__line { flex-wrap: nowrap; align-items: center; }
.tf-board .tf-order-card__line > div:first-child { flex: 1 1 auto; min-width: 0; }
.tf-workspace .tf-board .tf-order-card__actions { flex-wrap: nowrap; }
.tf-board .tf-btn--lg { font-size: 1rem; padding: 0 .75rem; }
.tf-order-card__status { margin-top: .25rem; }

/* Fertig: eine Zeile, gedämpft – die Aufmerksamkeit gehört dem, was noch zu tun ist */
.tf-order-card__item--done { background: var(--tf-status-ready-soft); }
.tf-order-card__item--done .tf-order-card__name { font-weight: 500; color: var(--tf-text-muted); }

.tf-board-card__receipt {
    display: block;
    padding: .375rem .75rem;
    border-bottom: 1px solid var(--tf-border);
    font-size: var(--tf-text-sm);
}

.tf-board-card__progress {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    background: var(--tf-surface-sunken);
    border-top: 1px solid var(--tf-border);
    font-size: .75rem;
    color: var(--tf-text-muted);
    white-space: nowrap;
}
.tf-board-card__progress .tf-progress { flex: 1 1 auto; }

/* ── Wartezeit ──────────────────────────────────────────────────────────────
   Farben aus den festen Statusfarben, nicht aus dem Skin: Gelb/Rot müssen in
   jeder Küche dasselbe bedeuten. Nie nur Farbe – die Minuten stehen immer da,
   überfällig bekommt zusätzlich ein Ausrufezeichen.                        */

.tf-order-card__meta { margin-right: auto; }

.tf-wait {
    flex: 0 0 auto;
    padding: .125rem .625rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tf-text-inverted) 20%, transparent);
    font-size: var(--tf-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tf-wait--ok   { background: var(--tf-status-ready); color: #fff; }
.tf-wait--warn { background: var(--tf-status-preparing); color: #fff; }
.tf-wait--late { background: var(--tf-status-cancelled); color: #fff; }

/* Einheitlich Grün → Gelb → Rot; der Rahmen wird mit der Dringlichkeit breiter */
.tf-order-card--ok   { box-shadow: 0 0 0 2px var(--tf-status-ready); }
.tf-order-card--warn { box-shadow: 0 0 0 3px var(--tf-status-preparing); }
.tf-order-card--late { box-shadow: 0 0 0 4px var(--tf-status-cancelled); }

.tf-wait-settings { display: flex; flex-direction: column; gap: .75rem; }
.tf-wait-settings label { display: flex; align-items: center; gap: .5rem; }
.tf-wait-settings input { width: 5.5rem; }
.tf-wait-settings__text { min-width: 7rem; }

.tf-wait-dot { width: .75rem; height: .75rem; border-radius: 50%; }
.tf-wait-dot--warn { background: var(--tf-status-preparing); }
.tf-wait-dot--late { background: var(--tf-status-cancelled); }

/* ── Statusplakette ─────────────────────────────────────────────────────── */

.tf-status {
    --status-fg: var(--tf-status-open);
    --status-bg: var(--tf-status-open-soft);

    display: inline-flex;
    align-items: center;
    padding: .1875rem .5rem;
    font-size: var(--tf-text-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--status-fg);
    background: var(--status-bg);
    border-radius: var(--tf-radius-pill);
    white-space: nowrap;
}

.tf-status--sm { font-size: .6875rem; padding: .125rem .4375rem; }

.tf-status--open { --status-fg: var(--tf-status-open); --status-bg: var(--tf-status-open-soft); }
.tf-status--preparing { --status-fg: var(--tf-status-preparing); --status-bg: var(--tf-status-preparing-soft); }
.tf-status--ready { --status-fg: var(--tf-status-ready); --status-bg: var(--tf-status-ready-soft); }
.tf-status--served { --status-fg: var(--tf-status-served); --status-bg: var(--tf-status-served-soft); }
.tf-status--cancelled { --status-fg: var(--tf-status-cancelled); --status-bg: var(--tf-status-cancelled-soft); }

/* Zähler in der Seitenüberschrift */
.tf-count {
    display: inline-flex;
    align-items: center;
    padding: .375rem .75rem;
    font-weight: 700;
    border-radius: var(--tf-radius-pill);
    color: var(--status-fg, var(--tf-text));
    background: var(--status-bg, var(--tf-surface-sunken));
}

.tf-count--busy { --status-fg: var(--tf-status-cancelled); --status-bg: var(--tf-status-cancelled-soft); }
.tf-count--calm { --status-fg: var(--tf-status-ready); --status-bg: var(--tf-status-ready-soft); }

/* ── Fortschritt ────────────────────────────────────────────────────────── */

.tf-progress {
    height: .375rem;
    background: var(--tf-border);
    border-radius: var(--tf-radius-pill);
    overflow: hidden;
}

.tf-progress__bar {
    height: 100%;
    background: var(--tf-status-ready);
    border-radius: inherit;
    transition: width .2s ease;
}

.tf-progress__label {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-muted);
}

/* ── Seitenkopf ─────────────────────────────────────────────────────────── */

.tf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.tf-page-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: var(--tf-text-xl);
    font-weight: 700;
}

/* ── Leerer Zustand ─────────────────────────────────────────────────────── */

.tf-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--tf-text-muted);
}

.tf-empty__icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.tf-empty__title {
    font-weight: 600;
    color: var(--tf-text);
}

/* ── Kurzmeldung oben rechts ────────────────────────────────────────────── */

.tf-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;

    padding: .625rem .875rem;
    font-weight: 600;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--status-fg, var(--tf-brand));
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-lg);
}

.tf-toast--alert { --status-fg: var(--tf-status-cancelled); }
.tf-toast--info { --status-fg: var(--tf-status-preparing); }
.tf-toast--success { --status-fg: var(--tf-status-ready); }

/* ── Lizenzseite (öffentlich, ohne Arbeitsbereich-Layout) ─────────────── */
.tf-licenses { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; color: var(--tf-text); }
.tf-licenses h1 { font-size: 1.9rem; margin: .25rem 0 .75rem; }
.tf-licenses h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.tf-licenses-lead { color: var(--tf-text-muted); }
.tf-licenses a { color: var(--tf-brand); }
.tf-licenses-back { margin-top: 2.5rem; }