/* ==========================================================================
   Katalogverwaltung („Gerichte & Zutaten") und die Kennzeichnungsliste
   („Allergene & Zusatzstoffe") — Listen, Auswahl-Leiste, Dialoge.

   Ergänzt das Seitengerüst aus sb-page.css um zwei Bausteine, die es nur hier gibt:
   - Merkmal-Chips (.cat-trait): was ein Eintrag an Kasse, Bon, Küche und Kiosk tut,
     als kurze Reihe statt sieben Ja/Nein-Spalten.
   - Auswahl-Leiste (.cat-bulk): erscheint über der Liste, sobald etwas markiert ist,
     und bietet Verben statt eines Menüs.
   Die Dialog-Abschnitte und Schalter (sb-form*, sb-switch) liegen in sb-page.css,
   weil alle Einstellungsseiten sie nutzen.
   Alle Farben aus den --sb-*-Tokens; ein Akzent (--sb-accent), nie auf Tasten.
   ========================================================================== */

/* -- Werkzeugleiste ------------------------------------------------------- */
.cat-toolbar { margin-bottom: 0.75rem; }

.cat-toolbar__search {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.cat-toolbar__search .bi {
    position: absolute;
    left: 0.65rem;
    color: var(--sb-text-muted);
    pointer-events: none;
}

.cat-toolbar__search .form-control {
    padding-left: 2rem;
    width: 18rem;
    max-width: 100%;
}

.cat-toolbar__segments { margin-bottom: 0; }

.cat-toolbar__count {
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
}

/* -- Auswahl-Leiste ------------------------------------------------------- */
.cat-bulk {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--sb-accent) 50%, var(--sb-border));
    border-left: 4px solid var(--sb-accent);
    border-radius: var(--sb-radius-sm);
    background: color-mix(in srgb, var(--sb-accent) 9%, var(--sb-bg-card));
    box-shadow: var(--sb-shadow-soft);
}

/* Die Leiste schwebt beim Scrollen über der Liste: leicht durchscheinend, damit sie
   als Schicht darüber lesbar bleibt und nicht als abgeschnittener Kasten. */
@supports (backdrop-filter: blur(1px)) {
    .cat-bulk {
        background: color-mix(in srgb, var(--sb-accent) 9%, color-mix(in srgb, var(--sb-bg-card) 82%, transparent));
        backdrop-filter: blur(12px) saturate(140%);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .cat-bulk {
        background: color-mix(in srgb, var(--sb-accent) 9%, var(--sb-bg-card));
        backdrop-filter: none;
    }
}

.cat-bulk__count {
    font-weight: 600;
    white-space: nowrap;
}

.cat-bulk__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.cat-bulk__actions .btn { font-size: var(--sb-fs-sm); }

/* Ein/Aus-Paar für ein Merkmal: „Bon an · aus" als eine Gruppe mit Beschriftung. */
.cat-bulk__pair {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.15rem 0.15rem 0.55rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-elev);
}

.cat-bulk__pair-label {
    font-size: var(--sb-fs-xs);
    color: var(--sb-text-dim);
    margin-right: 0.3rem;
    white-space: nowrap;
}

.cat-bulk__pair .btn {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.5rem;
    border-color: transparent;
}

.cat-bulk__clear {
    margin-left: auto;
    padding: 0.25rem 0.45rem;
    border: 0;
    border-radius: var(--sb-radius-sm);
    background: none;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
}

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

/* -- Listen ---------------------------------------------------------------- */
.cat-check { width: 2.25rem; }
.cat-check .form-check-input { margin: 0; cursor: pointer; }

.cat-name {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.cat-name__swatch {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.cat-name__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cat-name__title { font-weight: 600; }
.cat-name__icon { margin-right: 0.35rem; color: var(--sb-text-dim); }

.cat-name__code {
    font-size: var(--sb-fs-xs);
    color: var(--sb-text-muted);
}

.cat-name--muted .cat-name__title {
    color: var(--sb-text-dim);
    font-weight: 500;
}

.cat-row--inactive .cat-name,
.cat-row--inactive .cat-traits,
.cat-row--inactive .catalog-image-drop { opacity: 0.55; }

.cat-traits {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cat-trait {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem 0.12rem 0.45rem;
    border: 1px solid var(--sb-border);
    border-radius: 999px;
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-xs);
    white-space: nowrap;
}

.cat-trait .bi { font-size: 0.9em; color: var(--sb-accent-2); }

.cat-trait--warn {
    color: #ffc89a;
    border-color: color-mix(in srgb, var(--sb-warning) 45%, var(--sb-border));
}

.cat-trait--warn .bi { color: var(--sb-warning); }
.cat-traits__none { color: var(--sb-text-muted); }

/* Gruppenzeile einer Liste („Haupt-Zutaten", „Zutaten"). Sie ersetzt die frühere Spalte
   „Kategorie", die in jeder Zeile dasselbe Wort wiederholt hat. Gedämpft und schmal: sie
   ordnet, sie konkurriert nicht mit den Einträgen darunter. */
.sb-page .table > tbody > tr.cat-group > th {
    padding: 0.9rem 0.5rem 0.35rem;
    border-bottom: 1px solid var(--sb-border);
    background: none;
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sb-page .table > tbody > tr.cat-group:first-child > th { padding-top: 0.2rem; }

/* -- Kennzeichnung (Allergene, Zusatzstoffe) ------------------------------- */
.cat-labels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cat-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-xs);
    line-height: 1.4;
}

/* Zusatzstoffe sind Ziffern, Allergene Buchstaben — sie stehen nebeneinander und müssen
   auseinanderzuhalten sein, ohne dass die Zelle bunt wird. Deshalb nur eine gestrichelte
   Kante statt einer zweiten Farbe. */
.cat-label--additive { border-style: dashed; }

.cat-labelpick + .cat-labelpick { margin-top: 0.85rem; }

.cat-labelpick__title {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cat-labelpick__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Ein Umschalter, kein Kontrollkästchen: der Betreiber denkt in den Kürzeln seiner Karte.
   Rahmen und Innenabstand bleiben in beiden Zuständen gleich — ein Chip, der beim Antippen
   die Breite ändert, verschiebt die ganze Reihe unter dem Finger. */
.cat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--sb-border);
    border-radius: 999px;
    background: var(--sb-bg-elev);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-sm);
    text-align: start;
}

.cat-chip__code { font-weight: 700; }
.cat-chip__name { color: var(--sb-text-muted); }

.cat-chip.is-on {
    border-color: color-mix(in srgb, var(--sb-accent) 60%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-accent) 14%, var(--sb-bg-elev));
    color: var(--sb-text);
}

.cat-chip.is-on .cat-chip__name { color: var(--sb-text-dim); }

.cat-chip--additive { border-style: dashed; }

.cat-chip:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

/* Rückmeldung beim Drücken, nicht erst beim Loslassen. */
@media (prefers-reduced-motion: no-preference) {
    .cat-chip { transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 100ms ease-out; }
}

.cat-chip:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
    .cat-chip:hover { border-color: color-mix(in srgb, var(--sb-accent) 40%, var(--sb-border)); }
}

.cat-actions {
    white-space: nowrap;
    text-align: end;
}

.cat-actions .btn { --bs-btn-padding-y: 0.2rem; }
.cat-order .btn { --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0.45rem; }

.sb-page .table > tbody > tr.cat-row--selected > td {
    background: color-mix(in srgb, var(--sb-accent) 8%, transparent);
}


/* -- Landesvorlage der Kennzeichnungsliste --------------------------------- */
/* Drei Karten zur Wahl statt drei Optionsfelder: der Unterschied zwischen den Ländern
   steckt im Erklärsatz, nicht im Namen — als Radiozeile wäre er nicht lesbar. */
.lab-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.lab-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-elev);
    color: var(--sb-text);
    text-align: start;
}

.lab-preset__name { font-weight: 600; }

.lab-preset__hint {
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-xs);
    line-height: 1.4;
}

.lab-preset__badge {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--sb-bg-elev-2);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-xs);
}

/* „In Verwendung" ist ein Befund, „ausgewählt" eine Absicht — zwei Zustände, die
   gleichzeitig gelten können und deshalb verschieden aussehen müssen. */
.lab-preset.is-on { border-color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-border)); }

.lab-preset.is-picked {
    border-color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 10%, var(--sb-bg-elev));
}

.lab-preset:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .lab-preset { transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 100ms ease-out; }
}

.lab-preset:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
    .lab-preset:hover { border-color: color-mix(in srgb, var(--sb-accent) 35%, var(--sb-border)); }
}