/* Grundgeruest: helle Seitenleiste, schlanke Kopfzeile, Inhalt als abgerundete weisse Flaeche.
   Radzen wird ueber seine eigenen Variablen eingefaerbt, statt Regeln zu ueberschreiben — wo das
   nicht reicht (Panel-Menue), stehen gezielte Regeln darunter.
   Die Signalfarben stammen aus dem Kundenprototyp (docs/prototype/stern-center-presence-v7.html). */
:root {
    --ac-ink: #0f172a;
    --ac-nav: #101827;
    --ac-blue: #155eef;
    --ac-bg: #eef2f7;
    --ac-surface: #ffffff;
    --ac-line: #dfe6ef;
    --ac-muted: #64748b;
    --ac-green: #059669;
    --ac-amber: #d97706;
    --ac-red: #dc2626;

    --rz-primary: var(--ac-blue);
    --rz-success: var(--ac-green);
    --rz-warning: var(--ac-amber);
    --rz-danger: var(--ac-red);
    --rz-body-background-color: var(--ac-bg);
    --rz-header-background-color: var(--ac-bg);
    --rz-header-color: var(--ac-ink);
    --rz-sidebar-background-color: var(--ac-bg);
    --rz-panel-menu-item-color: var(--ac-ink);
    --rz-card-border-radius: 12px;

    /* FLACH: nichts hebt sich beim Ueberfahren, Fokussieren oder Druecken per Schatten ab. Radzens
       Material-Theme arbeitet ueberall mit "Erhebung" — abgestellt ueber seine eigenen Variablen.
       Bewusst NICHT angefasst: alles, was wirklich SCHWEBT (aufgeklappte Listen, Kalender, Tooltips,
       Radzens Dialoge) — dort trennt der Schatten die Ebene vom Inhalt darunter. Ebenso bleibt
       --rz-input-focus-shadow: das ist der Fokusrahmen der Eingabefelder, kein Effekt. */
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;
    --rz-card-shadow: none;
    --rz-panel-shadow: none;
    --rz-accordion-shadow: none;
    --rz-alert-box-shadow: none;
    --rz-datalist-shadow: none;
    --rz-header-shadow: none;
    --rz-switch-box-shadow: 0 1px 2px #0f172a40;
}

html, body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--ac-bg);
    color: var(--ac-ink);
}

/* ---- Kopfzeile: gehoert optisch zum Hintergrund, kein Balken, kein Schatten ---- */
.app-shell .rz-header {
    background: var(--ac-bg);
    color: var(--ac-ink);
    box-shadow: none;
    border: none;
    min-height: 4rem;
    display: flex;
    align-items: center;
}

/* min-width: 0 — sonst weitet eine zu volle Kopfzeile die Gitterspalte auf, und mit ihr ragt der
   GANZE Inhalt ueber den Bildschirmrand. */
.app-shell .rz-header,
.app-shell .rz-body {
    min-width: 0;
}

.app-header {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 1rem 0 0.25rem;
}

.app-toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ac-ink);
    cursor: pointer;
}

.app-toggle:hover {
    background: #e2e8f0;
}

/* Der Seitentitel steht in der Kopfzeile (PageHeading), nicht mehr als grosse Ueberschrift im Inhalt. */
.app-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blazor setzt nach jedem Seitenwechsel den Fokus auf die Ueberschrift (FocusOnNavigate) — gut fuer
   Screenreader, aber der Rahmen darum saehe aus wie ein Eingabefeld. */
.app-title:focus {
    outline: none;
}

.app-user {
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---- Seitenleiste: hell, ueber die volle Hoehe, App-Name oben ---- */
.app-shell .rz-sidebar,
.app-shell .rz-sidebar .rz-panel-menu,
.app-shell .rz-sidebar .rz-panel-menu ul {
    background: var(--ac-bg);
    border: none;
    box-shadow: none;
}

.app-shell .rz-sidebar {
    width: 272px;
    overflow: hidden;
}

/* Marke oben, Menue in der Mitte (scrollt bei Bedarf), Mandant unten. */
.app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-nav {
    flex: 1;
    overflow-y: auto;
}

.app-sidebar-footer {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--ac-line);
}

.tenant-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tenant-name {
    font-weight: 600;
}

/* Ein- und Ausblenden: js/shell.js setzt die Klassen am <html>-Element. */
html.app-sidebar-collapsed .app-shell .rz-sidebar {
    display: none;
}

html.app-sidebar-collapsed .app-sheet {
    margin-left: 1rem;
}

.app-backdrop {
    display: none;
}

.app-brand {
    padding: 1.35rem 1.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.app-shell .rz-sidebar .rz-panel-menu {
    padding: 0 0.75rem;
}

.app-shell .rz-sidebar .rz-navigation-item {
    border: none;
}

/* Hervorgehoben wird ausschliesslich der LINK, als Pille. Radzen hinterlegt zusaetzlich die
   umgebende Zeile (eckig, bei aktiv/Fokus/Hover) und zeichnet einen Markierungsstrich — beides
   wuerde hinter der Pille hervorschauen. */
.app-shell .rz-sidebar .rz-navigation-item,
.app-shell .rz-sidebar .rz-navigation-item-wrapper,
.app-shell .rz-sidebar .rz-navigation-item-wrapper:hover,
.app-shell .rz-sidebar .rz-navigation-item-wrapper-active,
.app-shell .rz-sidebar .rz-navigation-item-wrapper-active:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .rz-sidebar .rz-navigation-item-wrapper::before,
.app-shell .rz-sidebar .rz-navigation-item-wrapper::after {
    display: none !important;
}

.app-shell .rz-sidebar .rz-navigation-item-link {
    color: var(--ac-ink);
    border-radius: 999px;
    margin-bottom: 0.15rem;
    font-weight: 500;
    outline: none;
}

.app-shell .rz-sidebar .rz-navigation-item-link:hover {
    background: #e2e8f0;
    color: var(--ac-ink);
}

/* Tastaturfokus sichtbar, aber ohne Flaeche: sonst saehe der zuletzt angeklickte Eintrag aus wie
   ein zweiter aktiver. */
.app-shell .rz-sidebar .rz-navigation-item-link:focus-visible {
    box-shadow: 0 0 0 2px var(--ac-blue);
}

.app-shell .rz-sidebar .rz-navigation-item-link.active,
.app-shell .rz-sidebar .rz-navigation-item-link.active:hover {
    background: #dbe7ff;
    color: var(--ac-blue);
    font-weight: 700;
}

.app-shell .rz-sidebar .rz-navigation-item-icon {
    color: inherit;
}

/* Knoepfe in normaler Schreibweise statt in Versalien: ruhiger, und lange deutsche Woerter
   bleiben lesbar. Pillenform wie die uebrigen Bedienelemente. */
.app-shell .rz-button,
.account-card .rz-button,
.dialog-card .rz-button,
.rz-dialog .rz-button {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    box-shadow: none;
}

/* Umschalter (Liste / Raeume): EIN zusammenhaengendes Segment — nur die aeusseren Enden rund. */
.app-shell .rz-selectbar .rz-button {
    border-radius: 0;
    border: 1px solid #cbd5e1;
    margin-left: -1px;
}

.app-shell .rz-selectbar .rz-button:first-child {
    border-radius: 999px 0 0 999px;
    margin-left: 0;
}

.app-shell .rz-selectbar .rz-button:last-child {
    border-radius: 0 999px 999px 0;
}

/* Rueckmeldung OHNE Schatten: ein Knopf wird beim Ueberfahren etwas dunkler, beim Druecken noch
   etwas mehr. Tastaturfokus bekommt einen Rahmen — sichtbar bleiben muss er. */
.rz-button:not(.rz-state-disabled):hover {
    filter: brightness(0.95);
}

.rz-button:not(.rz-state-disabled):active {
    filter: brightness(0.9);
}

.rz-button:focus-visible {
    outline: 2px solid var(--ac-blue);
    outline-offset: 2px;
}

/* Schalter, Kontrollkaestchen, Auswahlpunkte: Radzen legt beim Ueberfahren einen 10 px breiten
   Schein um das Element. Weg damit. */
.rz-switch .rz-switch-circle:hover:not(.rz-disabled)::before,
.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled)::before {
    box-shadow: var(--rz-switch-box-shadow);
}

.rz-chkbox-box:hover,
.rz-radiobutton-box:hover,
.rz-radiobutton-box:active {
    box-shadow: none;
}

/* ---- Inhalt: eine abgerundete weisse Flaeche auf dem Hintergrund ---- */
.app-shell .rz-body {
    background: var(--ac-bg);
    /* Radzen setzt hier eine (wirkungslose) Transformation. Sie macht den Bereich aber zum Bezug fuer
       alles mit position: fixed — die Abdunklung der Dialoge deckte dann nur den Inhalt ab, nicht
       Seitenleiste und Kopfzeile. */
    transform: none;
}

.app-sheet {
    background: var(--ac-surface);
    border-radius: 20px;
    margin: 0 1rem 1rem 0;
    padding: 1.75rem;
    min-height: calc(100vh - 5rem);
}

.app-sheet > :first-child {
    margin-top: 0 !important;
}

/* Knoepfe einer Seite (Neu …) rechts oben — die Ueberschrift dazu steht in der Kopfzeile. */
.page-actions {
    margin-bottom: 1rem;
}

/* Reiter wie die Knoepfe: normale Schreibweise statt Versalien. */
.app-sheet .rz-tabview-nav li a,
.app-sheet .rz-tabview-nav .rz-tabview-title {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Tabellen: keine Kaestchen, keine Zebrastreifen — nur Trennlinien und eine leise Kopfzeile. */
.app-sheet .rz-data-grid,
.app-sheet .rz-data-grid .rz-grid-table,
.app-sheet .rz-data-grid .rz-data-grid-data {
    border: none;
    box-shadow: none;
    background: transparent;
}

.app-sheet .rz-grid-table thead th {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ac-line);
}

.app-sheet .rz-grid-table thead th .rz-column-title-content,
.app-sheet .rz-grid-table thead th .rz-column-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ac-muted);
}

.app-sheet .rz-grid-table tbody td {
    border: none;
    border-bottom: 1px solid var(--ac-line);
    background: transparent;
}

.app-sheet .rz-grid-table tbody tr,
.app-sheet .rz-grid-table tbody tr:nth-child(even) > td,
.app-sheet .rz-grid-table.rz-grid-table-striped tbody tr:nth-child(even) > td {
    background: transparent;
}

.app-sheet .rz-grid-table tbody tr:hover > td {
    background: #f6f8fb;
}

.app-sheet .rz-grid-table tbody tr:last-child > td {
    border-bottom: none;
}

/* Karten IN der Flaeche: Umriss statt Schatten — sonst liegt Weiss auf Weiss ohne Halt. */
.app-sheet .rz-card {
    box-shadow: none;
    border: 1px solid var(--ac-line);
}

.kpi-card {
    border: 1px solid var(--ac-line);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    height: 100%;
}

.kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ac-muted);
}

.kpi-value {
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1.15;
}

.kpi-card-highlight .kpi-value {
    color: var(--ac-blue);
    font-weight: 500;
}
/* Abmelden: unauffaellig neben dem Benutzernamen, nicht in einer Signalfarbe. */
/* Mandantenwechsel im Header: ein schlichtes <select>, das sein Formular selbst abschickt. */
/* Mandant und Gebaeude stehen nebeneinander im Header — ohne Beschriftung werden sie verwechselt. */
.header-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ac-muted);
}

/* Gebaeude (Kopfzeile) und Mandant (Fuss der Seitenleiste): dasselbe Radzen-Auswahlfeld, gleich
   gestaltet. */
.app-shell .rz-header .rz-dropdown,
.app-sidebar-footer .rz-dropdown {
    height: 2.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background-color: var(--ac-surface);
    color: var(--ac-ink);
    font-size: 0.95rem;
    box-shadow: none;
}

.app-shell .rz-header .rz-dropdown.rz-state-focused,
.app-sidebar-footer .rz-dropdown.rz-state-focused {
    outline: none;
    border-color: var(--ac-blue);
}

/* Zwei Klassen, damit die Regel gegen Radzens .rzi (display: inline-block) gewinnt. */
.logout-button .logout-icon {
    display: none;
    font-size: 1.25rem;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--ac-ink);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.logout-button:hover {
    background: #e2e8f0;
}

/* Konto-Seiten: zentrierte Karte ohne Navigation. */
.account-shell {
    /* border-box, sonst addiert sich der Innenabstand auf die 100vh und erzeugt einen Scrollbalken. */
    box-sizing: border-box;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--ac-bg);
}

.account-card {
    width: min(420px, 100%);
    padding: 2rem;
    background: #ffffff;
    border-radius: 20px;
}

/* Die Konto-Seiten sind statisch gerendert und schreiben ihre Knoepfe als schlichtes <button>:
   ohne Radzens Komponente fehlt ihnen die Hoehe. */
.account-card .rz-button {
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.account-card .rz-textbox {
    height: 2.75rem;
    border-radius: 10px;
}

/* Auswahl statt Hauptaktion (Mandant waehlen, Abmelden): Umriss statt Flaeche. */
.account-card .choice-button {
    background: var(--ac-surface);
    color: var(--ac-ink);
    border: 1px solid #cbd5e1;
}

.account-card .choice-button:hover {
    background: #e2e8f0;
}

/* Blazor setzt nach dem Seitenwechsel den Fokus auf die Ueberschrift — ohne Rahmen. */
.account-card h1:focus {
    outline: none;
}

.account-card label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* Formularraster der Detailseiten: zwei Spalten, auf schmalen Geraeten eine. */
/* Das Raster der Detailseiten (Person, Gebaeude, Benutzer): gleich breite Karten nebeneinander,
   jede nur so hoch wie ihr Inhalt. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

/* Zurueck-Pfeil neben dem Namen auf den Detailseiten. */
.back-button.rz-button {
    color: var(--ac-ink);
    min-width: 2.5rem;
    padding: 0;
}

.form-wide {
    grid-column: 1 / -1;
}

/* Schlichter Dialog ohne JS-Abhaengigkeit. */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: #0f172aab;
    display: grid;
    place-items: center;
    padding: 1rem;
    z-index: 1200;
}

.dialog-card {
    width: min(480px, 100%);
    border-radius: 20px;
    padding: 1.5rem;
    border: none;
    /* Ein Dialog SCHWEBT ueber der Seite — der einzige Ort, an dem eine Karte einen Schatten hat. */
    box-shadow: 0 24px 60px #0f172a40;
}

/* Radzens eigene Dialoge (Rueckfragen): dieselbe Rundung wie die uebrigen. */
.rz-dialog {
    border-radius: 20px;
}

/* Besucher in der Raumansicht: kompakte Karten statt einer zweiten Tabelle. */
.visitor-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.visitor-chip {
    border: 1px solid var(--rz-base-300);
    border-left: 4px solid var(--rz-info);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    background: #ffffff;
}

.visitor-chip-name {
    font-weight: 600;
}

.visitor-chip-meta {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Raumübersicht: Kacheln je Stockwerk. Belegt = grün, frei = grau (wie im Kundenprototyp). */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
}

.room-tile {
    border: 1px solid var(--rz-base-300);
    border-left: 4px solid var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    padding: 0.75rem;
    min-height: 84px;
}

.room-tile-occupied {
    border-left-color: var(--rz-success);
    background: var(--rz-success-lighter);
}

.room-tile-number {
    font-weight: 600;
}

.room-tile-name,
.room-tile-people {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.room-tile-people {
    margin-top: 0.35rem;
    color: var(--rz-text-color);
}

/* Einmalig angezeigtes Geheimnis (Agent-Token, Browser-Code): umbruchfähig und gut markierbar. */
.secret-box {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-200);
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
}

/* ---------------------------------------------------------------- Kiosk
   Ein Bildschirm am Eingang ohne Eingaben: Chip vorhalten, Rueckmeldung lesen — aus zwei Metern.
   Im Normalfall ohne Scrollbalken. */
.kiosk-shell {
    min-height: 100vh;
    background: var(--ac-bg);
    color: var(--ac-nav);
}

.kiosk-page {
    /* border-box, sonst addiert sich der Innenabstand auf die 100vh und erzeugt genau den
       Scrollbalken, den es am Kiosk nicht geben soll. */
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem 2rem;
}

.kiosk-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--ac-line);
    padding-bottom: 1rem;
}

.kiosk-building {
    font-size: 2rem;
    font-weight: 700;
}

.kiosk-hint {
    color: var(--ac-muted);
}

.kiosk-clock {
    font-size: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kiosk-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
}

/* clamp(): auf dem Touchscreen des Pi die volle Groesse, auf einem kleineren Bildschirm (Vorschau am
   Telefon) passt die Schrift trotzdem in die Breite. */
.kiosk-prompt {
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
}

.kiosk-button {
    min-height: 4rem;
    min-width: 12rem;
    padding: 0 1.5rem;
    border: 1px solid var(--ac-line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--ac-nav);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}

/* Auswahl des Geraets in der Vorschau — ein Link, der wie die Schaltflaechen aussieht. */
.kiosk-device-link {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.kiosk-button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---- Overlay nach einem Scan ---- */
.kiosk-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #ffffff;
    text-align: center;
}

.kiosk-overlay-title {
    font-size: clamp(2.25rem, 8vw, 4rem);
    font-weight: 700;
}

.kiosk-overlay-subtitle {
    font-size: clamp(1.25rem, 4vw, 2rem);
    padding: 0 1rem;
}

/* Rueckfrage an den Gastgeber: die einzige Eingabe am Kiosk — zwei grosse Flaechen fuer den Finger. */
.kiosk-overlay-question {
    margin-top: 1.5rem;
    padding: 0 1rem;
    font-size: clamp(1.4rem, 4.5vw, 2.25rem);
    font-weight: 700;
}

.kiosk-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    padding: 0 1rem;
}

.kiosk-button-large {
    min-width: 12rem;
    min-height: 6rem;
    font-size: 2.5rem;
}

.kiosk-overlay-green { background: var(--ac-green); }
.kiosk-overlay-blue { background: var(--ac-blue); }
.kiosk-overlay-red { background: var(--ac-red); }
.kiosk-overlay-amber { background: var(--ac-amber); }

.kiosk-simulator {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px dashed var(--ac-line);
}

.kiosk-simulator-input {
    padding: 0 1rem;
    font-size: 1.1rem;
    border: 1px solid var(--ac-line);
    border-radius: 10px;
}

/* Der Zusatzhinweis im Verbindungsdialog gilt nur am Kiosk. Im Web-UI wuerde er nur verwirren —
   dort sitzt jemand am Schreibtisch und es geht um gar keine Scans. */
.kiosk-reconnect-note {
    display: none;
}

body:has([data-kiosk]) .kiosk-reconnect-note {
    display: block;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Evakuierung
   Wird im Ernstfall am Telefon bedient, im Stehen, oft in Eile. Grosse Flaechen, eine Spalte,
   Zustand auf einen Blick. */
.evac-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evac-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    /* Mindesthoehe fuer den Daumen, nicht fuer die Maus. */
    min-height: 4rem;
    padding: 0.85rem 1rem;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--ac-line);
    border-left: 4px solid var(--ac-amber);
    border-radius: var(--rz-card-border-radius);
    cursor: pointer;
}

/* Im gesperrten Protokoll: lesbar bleiben, nur nicht mehr antippbar aussehen. */
.evac-row:disabled {
    cursor: default;
    opacity: 1;
}

.evac-row-done {
    background: #ecfdf5;
    border-color: #34d399;
    border-left-color: var(--ac-green);
    color: #065f46;
}

/* Gaestegruppen im Ton des Prototyps: sie haben keinen Namen und brauchen einen Hinweis darauf. */
.evac-row-guests {
    background: #fff7ed;
}

.evac-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 2px solid currentColor;
    border-radius: 8px;
    font-weight: 700;
}

.evac-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.evac-label {
    font-size: 1.1rem;
    font-weight: 700;
}

.evac-heads {
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--ac-amber);
    color: #ffffff;
    font-size: 0.8rem;
}

.evac-meta {
    color: var(--ac-muted);
    font-size: 0.9rem;
}

.evac-badge {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.evac-badge-kiosk {
    background: var(--ac-blue);
    color: #ffffff;
}

.evac-wide {
    width: 100%;
    min-height: 3.5rem;
    font-size: 1.1rem;
}

/* Am Telefon hat die Seitenleiste nichts verloren — der Inhalt bekommt die volle Breite. */
@media (max-width: 640px) {
    .evac-row {
        padding: 1rem;
    }

    .evac-label {
        font-size: 1.15rem;
    }
}

/* ---- Kompakte Liste (Telefon): eine Zeile je Eintrag statt gestapelter Karten ---- */
.only-phone {
    display: none;
}

.compact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--ac-line);
}

.compact-row:last-of-type {
    border-bottom: none;
}

.compact-main {
    flex: 1;
    min-width: 0;
}

.compact-title {
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-extra {
    font-weight: 400;
    color: var(--ac-muted);
}

.compact-sub {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--ac-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-meta {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ac-muted);
}

.compact-action.rz-button {
    /* Tippflaeche so hoch wie die Zeile erlaubt — der Knopf ist am Telefon das einzige Ziel. */
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
}

.compact-empty {
    padding: 0.75rem 0;
    color: var(--ac-muted);
}

/* ---------------------------------------------------------------- Responsive
   Drei Stufen — die Grenzen stehen auch in js/shell.js (Leiste) und muessen dazu passen:
     bis 1023 px  Tablet/Telefon: die Seitenleiste ist zu und legt sich beim Oeffnen UEBER den Inhalt.
                  Neben 272 px Leiste bliebe fuer Tabellen sonst zu wenig Platz.
     bis  767 px  Telefon: die weisse Flaeche randlos, Kopfzeile auf das Noetige gekuerzt, Tabellen
                  als gestapelte Karten (RadzenDataGrid Responsive="true"). Ausnahme: die
                  Anwesenheitsliste — bei 50 bis 60 Personen sind Karten zu lang, dort steht am
                  Telefon eine kompakte Liste (.compact-*, eine Zeile je Person).
   Die Evakuierungsliste wird im Ernstfall am Telefon bedient — das ist der Massstab.

   Steht bewusst GANZ AM ENDE der Datei: bei gleichem Gewicht gewinnt die spaetere Regel, und diese
   hier sollen die Grundregeln darueber ueberstimmen. */
@media (max-width: 1023px) {
    .app-shell .rz-sidebar,
    html.app-sidebar-collapsed .app-shell .rz-sidebar {
        display: none;
    }

    html.app-sidebar-open .app-shell .rz-sidebar {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 85vw);
        z-index: 1001;
        box-shadow: 0 0 40px #0f172a40;
    }

    html.app-sidebar-open .app-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: #0f172a66;
    }

    .app-sheet,
    html.app-sidebar-collapsed .app-sheet {
        margin-left: 1rem;
    }
}

@media (max-width: 767px) {
    .app-sheet,
    html.app-sidebar-collapsed .app-sheet {
        margin: 0;
        border-radius: 0;
        padding: 1rem;
        min-height: calc(100vh - 4rem);
    }

    .app-shell .rz-body {
        padding: 0;
    }

    /* Die Kopfzeile bleibt EINE Zeile: wer angemeldet ist, weiss das selbst. */
    .app-user,
    .app-header .header-label {
        display: none;
    }

    .app-header {
        gap: 0.5rem;
        padding-right: 0.5rem;
    }

    .app-title {
        font-size: 1.05rem;
    }

    .app-header .rz-dropdown {
        width: 9.5rem !important;
    }

    .logout-text {
        display: none;
    }

    .logout-button .logout-icon {
        display: inline-block;
    }

    .logout-button {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        justify-content: center;
    }

    /* Suchfelder und Auswahlfelder in den Werkzeugzeilen: volle Breite statt fester Pixel. */
    .app-sheet .rz-stack > .rz-textbox,
    .app-sheet .rz-stack > .rz-dropdown {
        width: 100% !important;
    }

    .kpi-card {
        padding: 0.75rem 0.85rem;
    }

    /* Knoepfe einer Seite: untereinander statt abgeschnitten, jeweils ueber die volle Breite. */
    .page-actions,
    .page-actions > .rz-stack {
        flex-wrap: wrap;
        width: 100%;
    }

    .page-actions .rz-button {
        flex: 1 1 auto;
    }

    .kpi-value {
        font-size: 2rem;
    }

    .kpi-label {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .only-phone {
        display: block;
    }

    .hide-phone {
        display: none;
    }

    /* Tabellen im Karten-Modus: Beschriftung LINKS, Wert rechts — eine Zeile je Feld statt zwei. */
    .app-sheet .rz-datatable-reflow .rz-grid-table tbody td {
        display: flex !important;
        align-items: baseline;
        gap: 0.75rem;
    }

    .app-sheet .rz-datatable-reflow .rz-grid-table tbody td > .rz-column-title {
        flex: 0 0 38%;
        max-width: 9rem;
    }

    /* Tabellen im Karten-Modus (Radzen stapelt die Zellen): eine Trennlinie je DATENSATZ, nicht je
       Zelle; die Spaltenueberschrift steht klein ueber dem Wert. */
    .app-sheet .rz-datatable-reflow .rz-grid-table tbody td {
        border-bottom: none;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .app-sheet .rz-datatable-reflow .rz-grid-table tbody tr {
        display: block;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--ac-line);
    }

    .app-sheet .rz-datatable-reflow .rz-grid-table tbody tr:last-child {
        border-bottom: none;
    }

    .app-sheet .rz-datatable-reflow .rz-column-title {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ac-muted);
    }

    /* Dialoge: fast volle Breite, nie hoeher als der Bildschirm. */
    .dialog-backdrop {
        padding: 0.75rem;
        align-items: end;
    }

    .dialog-card {
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
    }

    /* Kiosk-Vorschau am Telefon: die Geraeteauswahl passt in die Breite. */
    .kiosk-center {
        padding: 0 1rem;
    }

    .kiosk-device-link {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.05rem;
    }
}