/*
 * DIWA-Designsystem – Statussystem 2.0 der Wartevorgänge (Baustein .status, Nummernschild .plate,
 * Aktionssymbole .icon-button, Zeilen der Kundenliste). Wird nach components.css geladen und löst
 * die früheren Symbole ab (rotes Quadrat für „in Bearbeitung“, Dreieck für „abgeschlossen“).
 *
 * Überall gleich, immer Symbol + Text, Farben aus den --status-*-Tokens (tokens.css):
 *   wartet ● grün · zurückgestellt ↺ orange · aufgerufen ◆ blau · in Bearbeitung ▶ petrol ·
 *   abgeschlossen ✓ grau · nicht erschienen Person mit ✕ grau · storniert ✕ rot · geschlossen ◌ grau
 * Das Symbol einer Aktion ist das Symbol des Zustands, zu dem sie führt (◆ aufrufen, ▶ beginnen,
 * ✓ abschließen, ↺ zurückstellen, ✕ stornieren).
 */

/* ==== Status: Symbol + Text ===================================================== */

.status {
    --status-color: var(--status-waiting);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
}

.status::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 0;
    background: var(--status-color);
    transform: none;
}

/* Gefüllte Formen */
.status--waiting::before { border-radius: 50%; }

.status--called { --status-color: var(--status-called); }
.status--called::before { width: 10px; height: 10px; margin: 0 1px; transform: rotate(45deg); }

.status--in-service { --status-color: var(--status-in-service); }
.status--in-service::before { width: 11px; height: 12px; clip-path: polygon(8% 0, 100% 50%, 8% 100%); }

/* Linienzeichen als Maske (gleiche Form wie das Symbol der Aktion) */
.status--returned,
.status--parked { --status-color: var(--status-returned); }
.status--completed,
.status--no-show,
.status--closed { --status-color: var(--status-done); }
.status--cancelled { --status-color: var(--status-cancelled); }

.status--returned::before,
.status--parked::before,
.status--completed::before,
.status--no-show::before,
.status--cancelled::before {
    width: 14px;
    height: 14px;
    -webkit-mask: var(--status-mask) center / contain no-repeat;
    mask: var(--status-mask) center / contain no-repeat;
}

.status--returned::before,
.status--parked::before {
    --status-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

.status--completed::before {
    --status-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.status--no-show::before {
    width: 16px;
    --status-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m17 8 5 5M22 8l-5 5'/%3E%3C/svg%3E");
}

.status--cancelled::before {
    --status-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.status--closed::before {
    width: 11px;
    height: 11px;
    border: 2px dashed var(--status-done);
    border-radius: 50%;
    background: transparent;
}

/* Wenn Bildschirm oder Druck keine Hintergründe zeigt (Hochkontrast), bleibt das Symbol sichtbar. */
@media (forced-colors: active) {
    .status::before {
        background: CanvasText;
        forced-color-adjust: none;
    }

    .status--closed::before {
        border-color: CanvasText;
        background: transparent;
    }
}

/* Größere Darstellung, z. B. beim aktuellen Kunden */
.status--lg {
    gap: 9px;
    font-size: var(--fs-base);
}

.status--lg::before {
    width: 15px;
    height: 15px;
}

.status--lg.status--called::before { width: 12px; height: 12px; margin: 0 2px; }
.status--lg.status--in-service::before { width: 13px; height: 15px; }
.status--lg.status--no-show::before { width: 19px; height: 17px; }

/* ==== Nummernschild in der Farbe des Zustands =================================== */

.plate--waiting {
    border-color: var(--status-waiting);
    background: var(--status-waiting-bg);
    color: #10161f;
}

.plate--returned {
    border-color: var(--status-returned);
    background: var(--status-returned-bg);
    color: var(--status-returned-text);
}

.plate--called {
    border-color: transparent;
    background: var(--status-called);
    color: #fff;
}

.plate--in-service {
    border-color: transparent;
    background: var(--status-in-service);
    color: #fff;
}

.plate--completed,
.plate--no-show,
.plate--closed {
    border-color: var(--c-line);
    background: var(--status-done-bg);
    color: #3d4652;
}

.plate--cancelled {
    border-color: var(--status-cancelled);
    background: var(--status-cancelled-bg);
    color: #8e0f14;
}

/* Große Nummer beim aktuellen Kunden (wie Design 2.0) */
.plate--hero {
    font-size: 84px;
    padding: 0.06em 0.3em;
    border-radius: 14px;
}

/* Etikett für den Vorbehalt eines zurückgestellten Kunden („nur für …“, „ab …“) */
.badge--hold {
    background: var(--status-returned-bg);
    color: var(--status-returned-text);
    box-shadow: inset 0 0 0 1px #efc98a;
}

.badge .icon {
    width: 13px;
    height: 13px;
}

/* ==== Aktionssymbole: Farbe des Zustands, zu dem die Aktion führt ================ */

.icon-button--call .icon { color: var(--status-called); }
.icon-button--start .icon { color: var(--status-in-service); }
.icon-button--done .icon { color: var(--status-done); }
.icon-button--return .icon { color: var(--status-returned); }
.icon-button--no-show .icon { color: var(--status-done); }
.icon-button--cancel .icon { color: var(--status-cancelled); }

/* Gefüllte Formen wie die Statussymbole (◆ aufrufen, ▶ beginnen); Linienzeichen bleiben Linien. */
.icon-button--call .icon,
.icon-button--start .icon {
    fill: currentColor;
}

.icon-button--done .icon,
.icon-button--done .icon path {
    fill: none;
    stroke-width: 3;
}

/* ==== Zeilen der Kundenliste (Hintergrund ergänzt Symbol + Text) =================== */

.table tr.row--called td { background: #eef4fb; }
.table tr.row--in-service td { background: #eef6f6; }
.table tr.row--returned td { background: #fff8e8; }