/*
 * Modul Kundensteuerung – Kundenliste, Arbeitsplatzwahl, Empfang mit Bon (80 mm), Leitstand,
 * öffentlicher Wartestatus. Nur Anordnung und Tokens des Designsystems (keine eigenen Farben).
 */

/* ---- Kundenliste ---------------------------------------------------------------------------- */

.queue-board__place {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
}

/* Das Symbol bleibt neben dem Text, auch wenn dieser umbricht. */
.queue-board__place .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.2em;
    color: var(--c-blue);
}

.queue-number {
    font-size: calc(var(--fs-table) + 2px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.queue-block {
    display: block;
}

/* Mittig wie alle Tabellen: Status, Nummer (größer) und Taste „⋮“ stehen auf einer Linie. Etwas
   schmalere Zellen als üblich, damit alle Spalten der Maske ab 1280 px nebeneinander passen. */
.queue-table td {
    vertical-align: middle;
}

.queue-table th,
.queue-table td {
    padding: calc(var(--table-cell-y) - 2px) calc(var(--table-cell-x) - 4px);
}

.queue-table td.table__actions {
    min-width: calc(3 * 34px + 2 * 6px + 28px);
    padding-right: var(--space-3);
}

.queue-table .queue-col-handler {
    min-width: 9rem;
}

/* Platz des Bearbeiters klein darunter, damit die Zeile niedrig bleibt */
.queue-table .queue-col-handler .queue-block {
    font-size: var(--fs-small);
    line-height: 1.3;
}

/* Zeilenfarben und Aktionssymbole der Zustände: Baustein status.css (Statussystem 2.0). */

.icon-actions-wrap {
    max-width: calc(3 * 34px + 2 * 6px);
    justify-content: flex-end;
}

.queue-remarks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.queue-remarks__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.queue-remarks__note {
    flex-basis: 100%;
    margin: 0;
    white-space: pre-line;
    hyphens: auto;
}

/* Schmale Bildschirme: Kundenliste als Karten (Beschriftung aus data-label), Kennzahlen 2 × 2 */
@media (max-width: 640px) {
    .queue-board .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .queue-board .kpi {
        padding: var(--space-3);
    }

    .queue-board .kpi__value {
        font-size: 26px;
    }

    .queue-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .queue-table,
    .queue-table tbody,
    .queue-table tr,
    .queue-table td {
        display: block;
        width: 100%;
    }

    .queue-table tr {
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--c-border);
    }

    .queue-table td,
    .queue-table td.num,
    .queue-table td.table__actions {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: var(--space-2);
        min-width: 0;
        padding: 4px var(--space-3);
        border-bottom: 0;
        text-align: left;
        white-space: normal;
    }

    .queue-table td > * {
        grid-column: 2;
    }

    .queue-table td::before {
        content: attr(data-label);
        color: var(--c-text-strong);
        font-size: var(--fs-small);
        font-weight: 700;
    }

    .queue-table td.is-empty,
    .queue-table td.table-empty::before {
        display: none;
    }

    .queue-table td.table-empty {
        display: block;
    }

    .queue-table .icon-actions-wrap {
        max-width: none;
        justify-content: flex-start;
    }
}

/* ---- Kopf der Kundenliste: Platz, Ton, Kennzahlen kompakt ----------------------------------- */

.queue-board__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin: calc(-1 * var(--space-3)) 0 var(--space-3);
}

.queue-board__meta .queue-board__place {
    flex: 1 1 20rem;
    min-width: 0;
    margin: 0;
}

.queue-board__meta .queue-board__place > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-board__meta .queue-board__sound {
    margin: 0;
}

.queue-board .kpis--compact {
    margin-bottom: var(--space-3);
}

/* Zahl und Beschriftung nebeneinander; reicht der Platz nicht (schmal, Darstellung „Groß“), steht die Beschriftung
   darunter – nie über den Rand der Kachel. */
.queue-board .kpis--compact .kpi {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

.queue-board .kpis--compact .kpi__value {
    font-size: 26px;
}

.queue-board .kpis--compact .kpi__label {
    margin: 0;
}

.queue-board .kpis--compact .kpi__hint {
    flex-basis: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-board .kpis--compact .kpi__hint:empty {
    display: none;
}

/* Hinweis für die Teamleitung: lange Wartezeiten als schmaler Hinweis im Kopf der Liste (eine Zeile) */
.queue-list__alerts {
    flex: 1 1 14rem;
    min-width: 0;
}

.queue-list__alerts:empty {
    display: none;
}

.queue-board .queue-long-waits {
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 4px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
}

.queue-board .queue-long-waits > .icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.queue-board .queue-long-waits .alert__body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-board .queue-long-waits .alert__title {
    display: inline;
    margin-right: var(--space-2);
    font-size: inherit;
}

/* Status in der Liste als Zeichen wie in Oberhausen (Legende im Kopf erklärt sie; Text bleibt für
   Bildschirmleser erhalten) – spart Breite, die Tabelle passt auch bei 1280 px. */
.queue-table td[data-label="Status"] {
    width: 1%;
    padding-right: 0;
}

.queue-table td[data-label="Status"] .status {
    gap: 0;
    font-size: 0;
}

.queue-table td[data-label="Status"] .status::before {
    width: 14px;
    height: 14px;
}

.queue-table td[data-label="Status"] .status--called::before {
    width: 12px;
    height: 12px;
}

/* ---- Aktueller Kunde: schmale Leiste über der Liste ------------------------------------------ */
/* Links die Nummer, in der Mitte Zustand und Angaben, rechts die Haupttaste an fester Stelle, darunter
   die Nebenaktionen. Die Kundenliste bleibt ohne Blättern sichtbar (1280 × 800 und größer). */

.queue-current {
    margin-bottom: var(--space-3);
}

.queue-current__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 19rem);
    grid-template-areas:
        "ident summary primary"
        "ident secondary primary"
        "note note note";
    align-items: center;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-line);
    border-left: 5px solid var(--c-line-strong);
    border-radius: var(--radius-card);
    background: var(--c-surface);
    box-shadow: var(--shadow-card);
}

.queue-current__grid.is-called {
    border-left-color: var(--status-called);
}

.queue-current__grid.is-in-service {
    border-left-color: var(--status-in-service);
}

.queue-current__grid.is-idle {
    border-left-color: var(--action-primary-bg);
}

.queue-current__grid.is-pause {
    border-left-color: var(--c-warning);
}

/* Aufruf aus der Liste ohne Kunden: nur eine ruhige Zeile */
.queue-current__grid.is-quiet {
    padding: var(--space-2) var(--space-4);
    border-left-color: var(--c-line);
    background: var(--c-panel);
    box-shadow: none;
}

.queue-current__ident {
    grid-area: ident;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
}

.queue-current__ident .plate--lg {
    min-width: 3.4ch;
    font-size: 40px;
}

.queue-current__ident--empty {
    color: var(--c-muted);
}

.queue-current__ident--empty > .icon {
    width: 36px;
    height: 36px;
}

.queue-current__grid.is-quiet .queue-current__ident {
    min-width: 0;
}

.queue-current__grid.is-quiet .queue-current__ident > .icon {
    width: 22px;
    height: 22px;
}

.queue-current__summary {
    grid-area: summary;
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.queue-current__grid.is-busy .queue-current__summary {
    align-self: start;
}

.queue-current__grid:not(.is-busy) {
    grid-template-areas: "ident summary primary";
}

.queue-current__grid.is-quiet {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ident summary";
}

.queue-current__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    color: var(--c-text-strong);
}

/* Zustand („in Bearbeitung seit 15:17 Uhr“) bricht in der schmalen Leiste um, statt über ihren Rand zu laufen */
.queue-current__state .status {
    white-space: normal;
}

.queue-current__since {
    color: var(--c-text);
    font-size: var(--fs-small);
}

.queue-current__since .icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.queue-current__hint {
    margin: 0;
    font-size: var(--fs-small);
}

.queue-current__hint .icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

/* Angaben in einer Zeile: „Anliegen … · Wartezeit … · Kunde …“ */
.queue-current__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-4);
    margin: 0;
}

.queue-current__facts > div {
    display: flex;
    gap: var(--space-1);
    min-width: 0;
}

.queue-current__facts dt {
    color: var(--c-muted);
    font-size: var(--fs-small);
    font-weight: 400;
}

.queue-current__facts dt::after {
    content: ":";
}

.queue-current__facts dd {
    min-width: 0;
    margin: 0;
    color: var(--c-heading);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.queue-current__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.queue-current__extra:empty,
.queue-current__extra .queue-remarks:empty {
    display: none;
}

.queue-current__primary {
    grid-area: primary;
    display: grid;
    gap: var(--space-2);
    align-self: center;
}

.queue-current__primary .inline-form,
.queue-current__secondary .inline-form {
    display: block;
}

.queue-current__secondary {
    grid-area: secondary;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.queue-current__secondary:empty {
    display: none;
}

.queue-current__secondary .btn {
    min-height: 34px;
    padding: 4px 10px;
    font-size: var(--fs-small);
}

.queue-current__secondary .btn .icon {
    width: 16px;
    height: 16px;
}

.queue-current__note {
    grid-area: note;
}

.queue-current__note .alert {
    margin: 0;
}

/* Hauptaktion: immer an derselben Stelle, Aktionsblau statt Hausfarbe (nie Rot), normale Schreibweise. */
.btn.queue-primary {
    width: 100%;
    min-height: 56px;
    padding: 10px 18px;
    border-color: transparent;
    background: var(--action-primary-bg);
    box-shadow: none;
    color: var(--action-primary-text);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
}

.btn.queue-primary:hover,
.btn.queue-primary:focus-visible {
    border-color: transparent;
    background: var(--action-primary-bg-hover);
    color: var(--action-primary-text);
}

.btn.queue-primary:disabled {
    background: var(--c-slate);
}

.queue-primary .icon {
    width: 22px;
    height: 22px;
}

.queue-primary--fill .icon {
    fill: currentColor;
}

.queue-primary__text {
    display: grid;
    justify-items: start;
    line-height: 1.2;
    text-align: left;
}

.queue-primary__text small {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.92;
}

.queue-current__primary > .inline-form + .inline-form .btn {
    width: 100%;
    min-height: 36px;
    justify-content: center;
}

.queue-returned {
    color: var(--c-text-strong);
}

/* ---- Kundenliste: Kopf mit Anzahl und Legende ------------------------------------------------ */

.queue-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--c-line);
}

.queue-list__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-md);
}

.queue-list__count {
    color: var(--c-muted);
    font-size: var(--fs-small);
    font-weight: 400;
}

.legend--inline {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-text);
}

.legend--inline .legend__title {
    color: var(--c-muted);
    font-weight: 400;
}

.queue-table td.table-empty {
    padding: var(--space-6) var(--space-4);
    color: var(--c-text);
    text-align: center;
}

.queue-table td.table-empty .icon {
    width: 20px;
    height: 20px;
    margin-right: var(--space-1);
    color: var(--c-muted);
    vertical-align: -4px;
}

@media (max-width: 1100px) {
    .queue-current__grid {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "ident summary"
            "primary primary"
            "secondary secondary"
            "note note";
    }

    .queue-current__grid:not(.is-busy) {
        grid-template-areas:
            "ident summary"
            "primary primary";
    }
}

@media (max-width: 640px) {
    .queue-current__ident {
        min-width: 0;
    }

    .queue-current__ident .plate--lg {
        font-size: 30px;
    }

    .queue-current__secondary .btn {
        flex: 1 1 45%;
    }

    .queue-list__head .legend--inline {
        display: none;
    }
}

/* ---- Zurückstellen: Gründe zur Auswahl ------------------------------------------------------ */

.queue-reasons {
    margin: 0;
    padding: 0;
    border: 0;
}

.queue-reasons__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.queue-reason {
    position: relative;
    display: inline-flex;
}

.queue-reason input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.queue-reason span {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    cursor: pointer;
}

.queue-reason input:checked + span {
    border-color: var(--status-returned);
    background: var(--status-returned-bg);
    color: var(--status-returned-text);
    font-weight: 700;
}

.queue-reason input:focus-visible + span {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

.queue-time-input {
    max-width: 10rem;
}

/* ---- Arbeitsplatz wählen: Assistent Standort → Team → Platz ------------------------------------ */
/* Oben „Weiter wie zuletzt“ als Hauptaktion, darunter der Fortschritt und je Schritt große, gut lesbare
   Auswahlkacheln. Lange Teamlisten mit Suche, Kürzel und Name. */

.queue-select {
    max-width: 760px;
    margin: var(--space-4) auto 0;
}

.queue-select__title {
    margin-bottom: var(--space-2);
    text-align: center;
}

.queue-select__lead {
    margin: 0 auto var(--space-5);
    color: var(--c-text);
    text-align: center;
}

/* Auswahl und „Weiter“ in einer Zeile (Empfang: Standort wählen); schmal untereinander mit Abstand */
.queue-select__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.queue-select__inline > select {
    flex: 1 1 16rem;
    width: auto;
    min-width: 0;
}

.queue-select__last {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--action-primary-bg);
    border-radius: var(--radius-card);
    background: var(--c-surface);
    box-shadow: var(--shadow-card);
}

.queue-select__last-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-blue-tint);
    color: var(--c-blue-dark);
}

.queue-select__last-icon .icon {
    width: 24px;
    height: 24px;
}

.queue-select__last-text h2 {
    margin: 0 0 2px;
    font-size: var(--fs-h3);
}

.queue-select__last-text p {
    margin: 0;
    color: var(--c-text-strong);
    font-size: var(--fs-md);
    overflow-wrap: anywhere;
}

.queue-select__last-form {
    margin: 0;
}

.queue-select__later {
    margin: 0 0 var(--space-3);
    text-align: center;
}

.queue-select__or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.queue-select__or::before,
.queue-select__or::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--c-line);
}

/* Fortschritt: drei Stationen in einer Zeile */
.queue-select__steps {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.queue-select__stepper {
    flex: 1 1 0;
    min-width: 0;
}

.queue-select__stepper > a,
.queue-select__stepper > span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-2) var(--space-3);
    border-bottom: 3px solid var(--c-line);
    color: var(--c-muted);
    text-decoration: none;
}

.queue-select .queue-select__steps .queue-select__stepper > a {
    text-decoration: none;
}

.queue-select__stepper.is-done > a {
    border-bottom-color: var(--c-success);
    color: var(--c-text-strong);
}

.queue-select__stepper.is-done > a:hover strong {
    text-decoration: underline;
}

.queue-select__stepper.is-current > span {
    border-bottom-color: var(--action-primary-bg);
    color: var(--c-heading);
}

.queue-select__stepper-nr {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: var(--fs-small);
    font-weight: 700;
}

.queue-select__stepper.is-current .queue-select__stepper-nr {
    border-color: var(--action-primary-bg);
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
}

.queue-select__stepper.is-done .queue-select__stepper-nr {
    border-color: var(--c-success);
    background: var(--c-success);
    color: #fff;
}

.queue-select__stepper-nr .icon {
    width: 16px;
    height: 16px;
}

.queue-select__stepper-text {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.queue-select__stepper-text small {
    overflow: hidden;
    color: var(--c-text);
    font-size: var(--fs-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-select__fixed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-small);
}

.queue-select__fixed .icon {
    width: 14px;
    height: 14px;
}

.queue-select__panel {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-surface);
    box-shadow: var(--shadow-card);
}

.queue-select__question {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h2);
}

.queue-select__hint {
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    color: var(--c-text);
}

.queue-select__group {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--c-muted);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.queue-select__search {
    position: relative;
    margin-bottom: var(--space-3);
}

.queue-select__search .icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--c-muted);
    transform: translateY(-50%);
}

.queue-select__search input {
    width: 100%;
    min-height: var(--control-h-lg);
    padding-left: 42px;
    font-size: var(--fs-md);
}

.queue-select__nomatch {
    margin: var(--space-3) 0 0;
}

.queue-select__points {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.queue-select__queues {
    margin-bottom: var(--space-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-panel);
}

.queue-select__queues > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target-min);
    padding: var(--space-2) var(--space-3);
    color: var(--c-text-strong);
    font-weight: 500;
    cursor: pointer;
}

.queue-select__change {
    margin-left: auto;
    color: var(--c-blue-dark);
    font-size: var(--fs-small);
    text-decoration: underline;
}

.queue-select__queues[open] .queue-select__change {
    display: none;
}

.queue-select__queues > .field {
    max-width: none;
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
}

.queue-select__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--c-line);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: var(--c-surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.queue-select__actions .btn--primary {
    margin-left: auto;
}

.queue-select__links {
    margin-top: var(--space-5);
    font-size: var(--fs-small);
    text-align: center;
}

.queue-select__links .icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

/* Auswahlkacheln: groß, ganze Fläche klickbar, gewählte Kachel blau umrandet */
.pick-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick-tiles--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.pick-tiles--grid .pick-tile {
    min-height: 52px;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
}

.pick-tiles--grid .pick-tile__text strong {
    font-size: var(--fs-base);
}

.pick-tiles--grid .pick-tile__icon {
    width: 28px;
    height: 28px;
}

.pick-tiles--grid .pick-tile__icon .icon {
    width: 16px;
    height: 16px;
}

.pick-tiles--compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.pick-tiles + .pick-tiles {
    margin-top: var(--space-2);
}

.pick-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-control-border);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-text-strong);
    text-decoration: none;
    cursor: pointer;
}

.pick-tiles--compact .pick-tile {
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
}

.pick-tile:hover {
    border-color: var(--action-primary-bg);
    background: var(--c-blue-tint);
    color: var(--c-heading);
}

.pick-tile.is-selected,
.pick-tile--radio:has(input:checked) {
    border-color: var(--action-primary-bg);
    background: var(--c-blue-tint);
    box-shadow: inset 0 0 0 1px var(--action-primary-bg);
}

.pick-tile--radio {
    grid-template-columns: auto minmax(0, 1fr);
}

.pick-tile--radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pick-tile--radio:has(input:focus-visible) {
    outline: var(--focus-width, 3px) solid var(--c-focus);
    outline-offset: 2px;
}

.pick-tile.is-disabled {
    border-style: dashed;
    background: var(--c-panel);
    color: var(--c-muted);
    cursor: not-allowed;
}

.pick-tile--quiet {
    background: var(--c-panel);
}

.pick-tile__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-blue-tint);
    color: var(--c-blue-dark);
}

.pick-tile__icon .icon {
    width: 20px;
    height: 20px;
}

.pick-tile.is-disabled .pick-tile__icon {
    background: transparent;
    color: var(--c-muted);
}

.pick-tile__code {
    display: grid;
    place-items: center;
    min-width: 52px;
    max-width: 9rem;
    min-height: 36px;
    padding: 0 var(--space-2);
    overflow-wrap: anywhere;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--c-heading);
    color: #fff;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pick-tile__text {
    display: grid;
    gap: 2px;
    min-width: 0;
    line-height: 1.25;
}

.pick-tile__text strong {
    font-size: var(--fs-md);
    overflow-wrap: anywhere;
}

.pick-tile__text small {
    color: var(--c-text);
    font-size: var(--fs-small);
}

.pick-tile__go .icon {
    width: 20px;
    height: 20px;
    color: var(--c-muted);
}

@media (max-width: 640px) {
    .queue-select__last {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .queue-select__last-form {
        grid-column: 1 / -1;
    }

    .queue-select__last-form .btn {
        width: 100%;
    }

    .queue-select__stepper-text small {
        display: none;
    }

    /* Schmal: enger, damit „1. Standort“ neben dem Kreis Platz hat (sonst lief „Standort“ über den Rand) */
    .queue-select__stepper > a,
    .queue-select__stepper > span {
        gap: 6px;
        padding-inline: var(--space-1);
    }
}

/* ---- Einrichtung: Vorschau der Wartenummer -------------------------------------------------- */

.queue-number-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---- Empfang und Bon ------------------------------------------------------------------------ */

.queue-required-note {
    margin-top: calc(-1 * var(--space-1));
    color: var(--c-blue);
}

.queue-receipt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--space-5);
    align-items: start;
}

.queue-receipt {
    width: 72mm;
    max-width: 100%;
    justify-self: center;
    padding: var(--space-4) var(--space-3);
    border: 1px dashed var(--c-border);
    background: var(--c-white);
    color: var(--c-heading);
    font-size: 12pt;
    line-height: 1.3;
    text-align: center;
}

.queue-receipt p {
    margin: 0 0 var(--space-1);
}

.queue-receipt__brand {
    margin-bottom: var(--space-2);
}

.queue-receipt__brand img {
    max-width: 50mm;
    max-height: 18mm;
    filter: grayscale(1);
}

.queue-receipt__title {
    font-weight: 700;
}

.queue-receipt__number {
    font-size: 40pt;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.queue-receipt__arrival {
    font-weight: 700;
}

.queue-receipt__lines {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--c-heading);
    font-size: 10pt;
}

.queue-receipt__qr {
    display: block;
    width: 30mm;
    height: 30mm;
    margin: var(--space-2) auto var(--space-1);
}

.queue-receipt__hint,
.queue-receipt__footer {
    font-size: 9pt;
}

@media (max-width: 900px) {
    .queue-receipt-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@page queue-receipt {
    margin: 0;
}

@media print {
    body.queue-print-receipt * {
        visibility: hidden;
    }

    body.queue-print-receipt .queue-receipt,
    body.queue-print-receipt .queue-receipt * {
        visibility: visible;
    }

    body.queue-print-receipt .queue-receipt {
        page: queue-receipt;
        position: absolute;
        top: 0;
        left: 0;
        width: 72mm;
        margin: 0;
        padding: 2mm 4mm;
        border: 0;
    }
}

/* ---- Fachverfahren-Links und lange Wartezeiten (Kundenliste) -------------------------------- */

.queue-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}

.queue-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: max(28px, calc(var(--target-min) - 6px));
    padding: 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    text-decoration: none;
}

a.queue-link:hover,
a.queue-link:focus-visible {
    border-color: var(--c-blue);
    background: var(--c-panel);
    color: var(--c-blue);
    text-decoration: none;
}

.queue-links--compact .queue-link {
    justify-content: center;
    min-width: max(28px, calc(var(--target-min) - 6px));
    padding: 4px;
}

.queue-link__abbr {
    min-width: 1.25em;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

.queue-long-waits {
    margin-bottom: var(--space-4);
}

/* Aktionen der Teamleitung (übernehmen, freigeben): gestrichelter Rahmen als zusätzliches Merkmal */
.icon-button--lead {
    border-style: dashed;
    border-color: var(--c-blue);
}

.icon-button--lead .icon {
    color: var(--c-blue);
}

/* Über der Ziel-Wartezeit: Randmarkierung zusätzlich zum Hinweis „lange“ (nie nur Farbe) */
.queue-table tr.is-overdue td:first-child {
    box-shadow: inset 4px 0 0 var(--c-warning);
}

.queue-table td.is-overdue {
    color: var(--c-warning-text);
    font-weight: 700;
}

/* „lange“ unter die Wartezeit, damit die Spalte schmal bleibt */
.queue-table td.is-overdue .badge {
    display: block;
    width: fit-content;
    margin: 2px 0 0 auto;
}

/* ---- Abschluss mit Erledigungsgrund --------------------------------------------------------- */

.choice-list--columns {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 2px var(--space-4);
}

/* ---- Einrichtung: Arbeitsplatz-Maske je Team ------------------------------------------------ */

.mask-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-row-alt);
}

.mask-preview__col {
    padding: 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    font-weight: 700;
}

.mask-preview__col--actions {
    margin-left: auto;
    border-style: dashed;
    color: var(--c-muted);
    font-weight: 400;
}

.mask-columns {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mask-columns__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--c-line);
}

.mask-columns__item:first-child {
    border-top: 0;
}

.mask-columns__item.is-hidden .check__text strong {
    color: var(--c-muted);
}

.mask-columns__move {
    display: inline-flex;
    flex: none;
    gap: 6px;
}

.mask-columns__move .icon-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.mask-reasons {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--form-max);
}

.mask-reasons__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.mask-link-preview {
    overflow-wrap: anywhere;
}

/* Erklärung der Platzhalter im Formular „Fachverfahren-Link“ */
.link-placeholders {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-2) 0;
}

.link-placeholders dd {
    margin: 0;
}

/* Übersicht „Fachverfahren-Links“: Teams und Standorte, bei denen die Taste erscheint */
.link-scope span {
    display: block;
}

/* Maske eines Teams: geltende Fachverfahren-Links (nur Anzeige) */
.link-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.mask-reset {
    display: block;
    margin-top: var(--space-3);
}

/* ---- Einrichtung: Fachverfahren-Links (Bildauswahl) ----------------------------------------- */

.icon-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.icon-choice {
    position: relative;
}

.icon-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.icon-choice label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-text-strong);
    cursor: pointer;
}

.icon-choice label .icon {
    width: 20px;
    height: 20px;
}

.icon-choice input:checked + label {
    border-color: var(--c-blue);
    box-shadow: inset 0 0 0 2px var(--c-blue);
    color: var(--c-blue);
}

.icon-choice input:focus-visible + label {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

/* ---- Einrichtung: Eingangszonen ------------------------------------------------------------- */

.intake-targets {
    display: grid;
    gap: 2px;
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.intake-targets__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--c-line);
}

.intake-targets__position input {
    width: 5rem;
}

.check__text .intake-targets__warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-warning-text);
}

.intake-targets__warn .icon {
    width: 14px;
    height: 14px;
}

/* ---- Empfang einer Eingangszone ------------------------------------------------------------- */

.reception-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    gap: var(--space-5);
    align-items: start;
}

.reception-zone > .panel {
    margin-bottom: 0;
}

.reception-number {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.reception-number input {
    flex: 1 1 auto;
    min-width: 0;
}

.reception-check {
    margin: 0;
    font-size: var(--fs-small);
}

.reception-check:empty {
    display: none;
}

.reception-check[data-state="known"] {
    color: var(--c-success-text);
    font-weight: 700;
}

.reception-check[data-state="unknown"],
.reception-check[data-state="invalid"] {
    color: var(--c-danger-text);
    font-weight: 700;
}

.reception-check[data-state="unavailable"],
.reception-check[data-state="throttled"],
.reception-check[data-state="checking"] {
    color: var(--c-muted);
}

.reception-check[data-state="known"]::before {
    content: "✓ ";
}

.reception-check[data-state="unknown"]::before,
.reception-check[data-state="invalid"]::before {
    content: "! ";
}

.reception-waitmark h2 {
    font-size: var(--fs-h3);
}

[data-queue-intake-target][hidden] {
    display: none;
}

@media (max-width: 900px) {
    .reception-zone {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Auswahl als Segmente (Kundenstatus): echte Radioknöpfe, als Schaltflächen dargestellt */
.segmented,
fieldset.field--group > .segmented {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.segmented__item {
    position: relative;
}

.segmented__item input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.segmented__item label {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min, 44px);
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    cursor: pointer;
}

.segmented__item label:hover {
    border-color: var(--c-blue);
}

.segmented__item input:checked + label {
    border-color: var(--c-blue);
    background: var(--c-blue);
    color: var(--c-white);
    font-weight: 700;
}

.segmented__item input:focus-visible + label {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

/* ---- Kundenkarten --------------------------------------------------------------------------- */

.card-block {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Grund der Sperre: Auswahlfeld des Designsystems, kompakt in der Tabelle */
.card-block__reason {
    margin: 0;
}

.card-block__reason select {
    width: auto;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Felder nebeneinander: Eingabefelder nicht auf die Höhe des Nachbarfelds (mit Hilfetext) strecken */
.fields-top > .field {
    align-content: start;
}

.card-print-layout {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

/* Kundenkarte im Scheckkartenformat (ISO/IEC 7810 ID-1, 85,6 × 54 mm), Vorder- und Rückseite.
   Alle Maße in Karten-Millimetern (--mm): am Bildschirm vergrößert, im Druck genau 1 mm. */
.customer-card-sides {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    width: 100%;
}

.customer-card-side {
    flex: 0 1 112mm;
    min-width: 0;
    margin: 0;
}

.customer-card-side figcaption {
    margin-top: var(--space-2);
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.customer-card-stage {
    container-type: inline-size;
    width: 100%;
}

.customer-card {
    --mm: calc(100cqw / 85.6);
    --pt: calc(var(--mm) * 0.3528);
    position: relative;
    overflow: hidden;
    width: 100cqw;
    height: calc(var(--mm) * 54);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--mm) * 3.18);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 10%);
    color: var(--c-heading);
    font-size: calc(var(--pt) * 7.5);
    line-height: 1.3;
    /* Farben genau so drucken – sonst färbt der Browser die weiße Schrift im Band grau */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.customer-card p {
    margin: 0;
}

.customer-card__wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.customer-card__wave-band {
    fill: var(--brand-primary);
}

.customer-card__wave-accent {
    fill: var(--brand-accent);
}

/* Vorderseite: Logo oben links, QR-Code rechts, Name und Code links unten, „Kundenkarte“ im Band */
.customer-card__brand {
    position: absolute;
    top: calc(var(--mm) * 4.5);
    left: calc(var(--mm) * 4.5);
    display: flex;
    align-items: center;
    width: calc(var(--mm) * 48);
    height: calc(var(--mm) * 10);
}

.customer-card__brand img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

.customer-card__brand strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--brand-primary-dark);
    font-size: calc(var(--pt) * 10.5);
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.customer-card__qr {
    position: absolute;
    top: calc(var(--mm) * 4.5);
    right: calc(var(--mm) * 4.5);
    width: calc(var(--mm) * 25);
    height: calc(var(--mm) * 25);
}

/* Vorschau einer schon gedruckten Karte: Der Code ist nicht gespeichert, statt des QR-Codes ein Platzhalter */
.customer-card__noqr {
    position: absolute;
    top: calc(var(--mm) * 4.5);
    right: calc(var(--mm) * 4.5);
    display: grid;
    place-items: center;
    width: calc(var(--mm) * 25);
    height: calc(var(--mm) * 25);
    margin: 0;
    padding: calc(var(--mm) * 2);
    border: 1px dashed var(--c-border-strong);
    border-radius: calc(var(--mm) * 1.5);
    color: var(--c-muted);
    font-size: calc(var(--pt) * 7);
    text-align: center;
}

.customer-card__person {
    position: absolute;
    bottom: calc(var(--mm) * 17);
    left: calc(var(--mm) * 4.5);
    display: grid;
    gap: calc(var(--mm) * 1.2);
    width: calc(var(--mm) * 49);
}

.customer-card__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: calc(var(--pt) * 9.5);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.customer-card__code {
    font-size: calc(var(--pt) * 12.5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.customer-card__title {
    position: absolute;
    bottom: calc(var(--mm) * 3.4);
    left: calc(var(--mm) * 4.5);
    color: var(--brand-on-primary);
    font-size: calc(var(--pt) * 13);
    font-weight: 700;
    line-height: 1;
}

/* Rückseite: Name des Jobcenters im Band, darunter der Hinweis für die Kundin oder den Kunden */
.customer-card__issuer {
    position: absolute;
    top: calc(var(--mm) * 3.6);
    left: calc(var(--mm) * 4.5);
    overflow: hidden;
    width: calc(var(--mm) * 62);
    color: var(--brand-on-primary);
    font-size: calc(var(--pt) * 8.5);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-card__back-body {
    position: absolute;
    top: calc(var(--mm) * 19.5);
    right: calc(var(--mm) * 6);
    bottom: calc(var(--mm) * 3.5);
    left: calc(var(--mm) * 4.5);
    display: flex;
    flex-direction: column;
    gap: calc(var(--mm) * 1.4);
    color: var(--c-text);
}

.customer-card__lead {
    color: var(--c-heading);
    font-size: calc(var(--pt) * 10);
    font-weight: 700;
    line-height: 1.15;
}

.customer-card__web {
    margin-top: auto !important;
    color: var(--brand-primary-dark);
    font-weight: 700;
}

@page queue-card {
    size: 85.6mm 54mm;
    margin: 0;
}

/* Druck: nur die beiden Kartenseiten, jede auf einer eigenen Seite im Kartenformat (Kartendrucker
   beidseitig: Seite 1 vorn, Seite 2 hinten). Alles andere fällt weg, damit keine leeren Karten durchlaufen. */
@media print {
    body.queue-print-card {
        page: queue-card;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    body.queue-print-card *:not(:has(.customer-card), .customer-card, .customer-card *) {
        display: none !important;
    }

    body.queue-print-card :has(.customer-card) {
        display: block !important;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        background: none;
        box-shadow: none;
    }

    body.queue-print-card .customer-card-stage {
        width: 85.6mm;
    }

    body.queue-print-card .customer-card-side:not(:last-child) {
        break-after: page;
    }

    body.queue-print-card .customer-card {
        height: 53.9mm;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ---- Kundenkarte: Formulare (Verwaltung) --------------------------------------------------- */

.card-form-fields {
    display: grid;
    gap: var(--space-3);
}

.card-form-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
}

.card-form-field.is-invalid {
    border-color: var(--c-danger);
}

.card-form-field__main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: end;
}

.card-form-field__required {
    padding-bottom: 10px;
}

.card-form-field__actions {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .card-form-field__main {
        grid-template-columns: minmax(0, 1fr);
    }

    .card-form-field__actions {
        justify-content: flex-start;
    }
}

/* Vorschau: so ungefähr sieht das Formular am Terminal aus */
.card-form-preview {
    display: grid;
    gap: var(--space-3);
    max-width: 36rem;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-panel);
}

.card-form-preview__title {
    margin: 0;
    color: var(--c-heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}

.card-form-preview__intro {
    margin: 0;
}

.card-form-preview__field {
    display: grid;
    gap: 4px;
}

.card-form-preview__label {
    font-weight: var(--fw-medium);
}

.card-form-preview__input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.card-form-preview__input--long {
    min-height: 88px;
}

.card-form-preview__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.card-form-preview__choice {
    padding: 8px 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-white);
}

.card-form-preview .btn {
    justify-self: start;
    pointer-events: none;
}

/* ---- Kundenkarte: Beim Scannen (Verwaltung) ------------------------------------------------- */

.card-tile-row__main {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1fr);
}

.card-tile-row__choices {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.card-tile-row__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0 var(--space-4);
    max-height: 18rem;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .card-tile-row__main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Vorschau: der Bildschirm des Terminals nach dem Scannen */
.card-terminal-preview {
    display: grid;
    gap: var(--space-2);
    max-width: 40rem;
    padding: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-panel);
}

.card-terminal-preview__title {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
    color: var(--c-heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}

.card-terminal-preview__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.card-terminal-preview__tile {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    color: var(--c-heading);
    font-weight: var(--fw-medium);
}

/* ---- Leitstand ------------------------------------------------------------------------------ */

.queue-control-grid {
    margin-bottom: var(--space-6);
}

.queue-control-grid .panel {
    margin-bottom: 0;
}

.queue-metrics th {
    white-space: normal;
    vertical-align: bottom;
}

.queue-metrics th,
.queue-metrics td {
    padding-right: 10px;
    padding-left: 10px;
}

.queue-session-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.queue-interventions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.queue-intervention {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
}

.queue-intervention__select {
    width: auto;
    min-width: 9rem;
    min-height: 34px;
    padding: 4px 28px 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    color: var(--c-text-strong);
    font: inherit;
    font-size: var(--fs-small);
}

.queue-intervention__select--short {
    min-width: 6rem;
}

/* ---- Öffentlicher Wartestatus --------------------------------------------------------------- */

.public-status {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.public-status__location {
    margin: calc(-1 * var(--space-2)) 0 var(--space-5);
    color: var(--c-muted);
}

.public-status__card .panel__body {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
}

.public-status__label {
    margin: 0;
    color: var(--c-text-strong);
    font-weight: 500;
}

.public-status__number {
    margin: 0;
}

.public-status__call {
    width: 100%;
    padding: var(--space-4);
    border: 2px solid var(--c-info);
    border-radius: var(--radius-lg);
    background: var(--c-info-bg);
}

.public-status__call[hidden] {
    display: none;
}

.public-status__call-text {
    margin: 0;
    color: var(--c-text-strong);
    font-size: var(--fs-lead);
}

.public-status__call-target {
    margin: var(--space-1) 0 0;
    color: var(--c-heading);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
}

.public-status__state {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    margin: 0;
}

.public-status__text {
    color: var(--c-text-strong);
}

.public-status__facts {
    width: 100%;
    margin: 0;
    text-align: left;
}

.public-status__guidance {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.public-status__guidance .icon {
    width: 18px;
    height: 18px;
    color: var(--c-blue);
}

.public-status__hint {
    margin-top: var(--space-3);
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.public-status .refresh-note {
    justify-content: center;
    margin-top: var(--space-4);
}

/* „Mehr“ in der Zeile eines Wartenden: „Aus der Warteliste nehmen“ mit Grund – unauffällig, keine rote Taste. */
.row-menu {
    position: relative;
    display: inline-block;
}

.row-menu__toggle {
    list-style: none;
}

.row-menu__toggle::-webkit-details-marker {
    display: none;
}

.row-menu[open] > .row-menu__toggle {
    border-color: var(--c-text-strong);
}

.row-menu__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-1));
    right: 0;
    display: grid;
    gap: var(--space-2);
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: var(--space-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-pop);
    color: var(--c-text);
    text-align: left;
}

.row-menu__reasons {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    border: 0;
}

.row-menu__title {
    margin-bottom: var(--space-1);
    padding: 0;
    color: var(--c-text-strong);
    font-weight: 600;
}

.row-menu__reason {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

/* Leitstand: Eingriffe als kleine Dialoge im Menü „Mehr“ (umsetzen, Vorrang, aus der Liste nehmen) */
.row-menu__panel--wide {
    width: min(22rem, calc(100vw - 2 * var(--space-4)));
    max-width: none;
}

/* Handy: Menü als Blatt am unteren Rand – nie links oder rechts abgeschnitten */
@media (max-width: 640px) {
    .row-menu__panel,
    .row-menu__panel--wide {
        position: fixed;
        z-index: 60;
        top: auto;
        right: var(--space-4);
        bottom: var(--space-4);
        left: var(--space-4);
        width: auto;
        max-width: none;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

.row-menu__group {
    border-top: 1px solid var(--c-line);
}

.row-menu__group > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    color: var(--c-text-strong);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.row-menu__group > summary::-webkit-details-marker {
    display: none;
}

.row-menu__group > summary:hover,
.row-menu__group[open] > summary {
    text-decoration: underline;
}

.row-menu__form {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
}

.row-menu__form select {
    width: 100%;
}

.row-menu__form .btn {
    justify-self: start;
}

.row-menu__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.row-menu__choice input {
    margin-top: 3px;
}

.row-menu__choice span {
    display: grid;
    gap: 2px;
}

.row-menu__choice small {
    color: var(--c-muted);
    font-size: var(--fs-small);
}

/* Kundenliste: Zeilenmenü „⋮“ mit allen weiteren Aktionen (die erste steht als Taste daneben) */
.row-menu__panel--actions {
    gap: 0;
    min-width: 15rem;
    padding: var(--space-1);
}

.row-menu__panel--actions > .inline-form,
.row-menu__panel--actions > .inline-form > .menu__item {
    display: block;
    width: 100%;
}

.row-menu__panel--actions .menu__item {
    text-align: left;
}

/* „Aus der Warteliste nehmen“ mit Grund als letzter Teil des Menüs */
.row-menu__section {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-top: 1px solid var(--c-line);
}

/* Taste und Menü stehen nebeneinander, nie untereinander */
.queue-table td.table__actions {
    min-width: 0;
    white-space: nowrap;
}

.queue-table .icon-actions {
    flex-wrap: nowrap;
}

/* Ton bei neuen Kunden: Schalter in der Platzzeile der Kundenliste */
.queue-board__sound {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-small);
}

.queue-select__back {
    margin-top: var(--space-3);
}

@media (max-width: 640px) {
    .queue-table td[data-label="Status"] {
        width: 100%;
        padding-right: var(--space-3);
    }

    .queue-table td[data-label="Status"] .status {
        gap: 7px;
        font-size: var(--fs-small);
    }
}