* { box-sizing: border-box; }

/* Kopfzeile, Störungsbanner und Inhalt stapeln sich über die volle Fensterhöhe. Gescrollt
   wird der Inhaltsbereich, nicht die Seite — so kann eine Seite ihre Liste bis zum unteren
   Fensterrand ziehen, ohne den verbleibenden Platz zu raten. */
html { height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: #1a1913;
    background: #eceef1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Kopf und Banner behalten ihre Höhe — als Flex-Elemente würden sie sonst mitschrumpfen,
   und die Kopfzeile sähe bei 33 statt 60 Pixeln gequetscht aus. */
body > * { flex: none; }

/* Kopfzeile */
.app-header {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 60px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #e6e8eb;
}

.app-title { font-size: 17px; font-weight: 600; }
.app-brand { display: flex; align-items: center; flex: none; }
.app-logo { height: 32px; width: auto; display: block; flex: none; }
.app-subtitle { font-size: 13px; color: #48463f; }
.app-divider { width: 1px; background: #e6e8eb; margin: 14px 20px; flex: none; }
.app-status { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.app-header .spacer { flex: 1; }

.app-user-sep { width: 1px; height: 24px; background: #e6e8eb; margin: 0 6px; flex: none; }

.app-user { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #48463f; }
.app-user-icon { width: 18px; height: 18px; flex: none; color: #2563eb; }

.app-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #48463f;
    cursor: pointer;
}
.app-logout-icon { width: 16px; height: 16px; flex: none; }
.app-logout:hover { border-color: #9c2424; color: #9c2424; background: #fdf5f5; }

.app-laden { padding: 40px; text-align: center; color: #48463f; }

/* Klebt am unteren Rand, solange die Seite scrollt — sonst wäre die Versionsnummer
   erst nach der 500. Ereigniszeile zu sehen. Bei kurzem Inhalt sitzt sie ganz normal
   unter der Liste. Eigener Hintergrund, weil sie sonst über der weißen Tabelle
   durchsichtig wäre. */

.app-nav { display: inline-flex; gap: 26px; align-items: stretch; }

.app-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6b6960;
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
}

.nav-icon { width: 17px; height: 17px; flex: none; }

.app-nav a:hover { color: #1a1913; }
.app-nav a.active { color: #1a1913; border-bottom-color: #E4032E; }

/* Verbindungsstatus in der Kopfzeile */
.hw-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
}

.hw-ok { background: #cceedb; color: #146639; }
.hw-fehler { background: #f6d2d2; color: #9c2424; }
.hw-neutral { background: #e9eaed; color: #48463f; }

.app-main {
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Der Inhalt einer Seite behält seine Höhe; nur wer sich ausdrücklich dehnen soll
   (die Verlaufsliste), sagt das selbst. */
.app-main > * { flex: none; }

/* Störungs-Banner (GATE-Fehlercodes) */
.stoerung-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #f6d2d2;
    border-bottom: 1px solid #eec7c7;
    color: #9c2424;
    font-size: 13px;
}

.stoerung-banner .spacer { flex: 1; }

.stoerung-code {
    font-weight: 700;
    white-space: nowrap;
}

.stoerung-hilfe {
    color: #9c2424;
    font-weight: 600;
    white-space: nowrap;
}

/* Panel "Zugangspunkte" (manuelles Öffnen) */
.oeffnen-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 8px;
}

.oeffnen-titel { font-weight: 600; }

/* Zugangspunkte als direkt anklickbare Button-Leiste (kein Dropdown) */
.oeffnen-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.oeffnen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #d6d9dd;
    border-radius: 8px;
    background: #f5f7fa;
    font: inherit;
    font-weight: 500;
    color: #1a1913;
    cursor: pointer;
}

.oeffnen-btn:hover:not(:disabled) { border-color: #E4032E; color: #9c2424; background: #fdf5f5; }
.oeffnen-btn:disabled { opacity: 0.6; cursor: default; }
.oeffnen-btn .ic { width: 16px; height: 16px; flex: none; color: #E4032E; }

/* Login */
.login-wrap {
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.login-logo { margin-bottom: 20px; }
.login-logo svg { height: 34px; width: auto; display: block; }
.login-card h2 { margin: 0 0 4px; }
.login-hint { margin: 0 0 18px; font-size: 13px; color: #48463f; }

.login-feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-feld label { font-size: 12px; color: #48463f; }
.login-feld select,
.login-feld input {
    padding: 9px 10px;
    border: 1px solid #d6d9dd;
    border-radius: 7px;
    font: inherit;
    background: #fff;
    color: #1a1913;
}

.login-fehler { margin-bottom: 12px; color: #9c2424; font-size: 13px; }
.login-card .btn-primaer { width: 100%; padding: 10px; margin-top: 4px; }

.oeffnen-panel select,
.oeffnen-panel input.benutzer {
    padding: 7px 8px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

.oeffnen-panel input.benutzer { width: 220px; }

.btn {
    padding: 7px 14px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    cursor: pointer;
}

.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primaer { background: #1d5397; border-color: #1d5397; color: #fff; }
.btn-warnung { background: #9c2424; border-color: #9c2424; color: #fff; }

.oeffnen-meldung { font-size: 13px; }
.oeffnen-meldung.ok { color: #146639; }
.oeffnen-meldung.fehler { color: #9c2424; }

/* Filterleiste */
.filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filterbar input.suche {
    width: 300px;
    padding: 7px 10px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
}

.filterbar select,
.filterbar input.datum {
    padding: 7px 8px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

.filterbar .spacer { flex: 1; }
.filterbar .anzahl { font-size: 12px; color: #48463f; }

.filterbar .live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #48463f;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d9e75;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Ereignistabelle */
table.ereignisse {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 8px;
    overflow: hidden;
}

table.ereignisse th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #48463f;
    padding: 9px 12px;
    border-bottom: 1px solid #dcdee2;
    background: #f7f8fa;
}

table.ereignisse td {
    padding: 8px 12px;
    border-bottom: 1px solid #e6e8eb;
}

table.ereignisse tbody tr:hover { background: #f7f8fa; }
table.ereignisse tbody tr.abgewiesen { background: #fdf0f0; }
table.ereignisse tbody tr.abgewiesen:hover { background: #fae7e7; }
table.ereignisse tbody tr.klickbar { cursor: pointer; }

/* Ereignis-Detail (aufklappbare Zeile) */
table.ereignisse tbody tr.detail,
table.ereignisse tbody tr.detail:hover { background: #f7f8fa; cursor: default; }

.detail-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 4px 16px;
    padding: 6px 4px;
    font-size: 13px;
}

.detail-grid .feld { color: #48463f; }

.col-zeit { width: 80px; color: #48463f; }
.col-datum { width: 130px; color: #48463f; }
.col-status { width: 120px; }
.col-schranke { width: 100px; }
.col-objekt { width: 80px; }
.col-ident { width: 130px; color: #48463f; }
td.grund { color: #48463f; }

/* Status-Badges (gleiche Sprache wie das c1:Gate-Grid) */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-gruen { background: #cceedb; color: #146639; }
.badge-blau { background: #cfe3f6; color: #1d5397; }
.badge-rot { background: #f6d2d2; color: #9c2424; }
.badge-grau { background: #e4e7eb; color: #4b5563; }
.badge .pfeil { font-weight: 700; font-size: 13px; }

/* Zustände */
.laden, .leer {
    padding: 32px;
    text-align: center;
    color: #48463f;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 8px;
}

.fehler {
    padding: 12px 16px;
    background: #f6d2d2;
    color: #9c2424;
    border-radius: 8px;
}

/* Einstellungen */
.admin-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    cursor: pointer;
    color: #48463f;
}

.admin-tab:hover { border-color: #c3c7cd; }
.admin-tab.aktiv { background: #e9eaed; color: #1a1913; font-weight: 600; }

.tab-icon { width: 15px; height: 15px; flex: none; }

.admin-block {
    padding: 16px;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 8px;
}

.admin-block h3 { margin-top: 0; }
.admin-block .hinweis { font-size: 12px; color: #48463f; }
.admin-block .fehler { margin-bottom: 10px; }

.schalter-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.schalter-liste label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.schalter-liste label.gefahr { color: #9c2424; }

.admin-aktionen { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.admin-form {
    margin-top: 14px;
    padding: 14px;
    background: #f7f8fa;
    border: 1px solid #dcdee2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

.admin-form h4 { margin: 0; }

/* Kompakte Zutrittssystem-Liste: inaktive Systeme als schmale Zeile, aktives klappt auf. */
.system-liste { padding: 0; gap: 0; }
.system-zeile { padding: 11px 14px; border-bottom: 1px solid #e6e8eb; }
.system-zeile:last-child { border-bottom: none; }
.system-zeile.ein { background: #fff; }
.system-detail { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 2px 26px; }
.system-detail > a { font-size: 12px; }

.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #48463f; }
.admin-form label.inline { flex-direction: row; align-items: center; gap: 8px; color: #1a1913; }

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="time"],
.admin-form select {
    padding: 7px 8px;
    border: 1px solid #d6d9dd;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    color: #1a1913;
}

.tage-liste { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-klein { padding: 3px 10px; font-size: 12px; }
.col-aktion { width: 230px; text-align: right; white-space: nowrap; }

/* Blazor-Fehlerbalken */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: #fff3cd;
    border-top: 1px solid #e2d9a0;
    z-index: 1000;
}

#blazor-error-ui .reload { margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; text-decoration: none; }

/* Geräte-Status-Kachel (Monitoring): einzelne Kartenleser/Kameras grün/rot/grau.
   Anforderung 06.07.2026: Hardware-Ausfall einzelner Geräte sofort sichtbar. */
.geraete-kachel {
    background: #fff;
    border: 1px solid #d6d9dd;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.geraete-kachel.geraete-alarm {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px #d9534f;
}

.geraete-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.geraete-titel {
    font-weight: 600;
    font-size: 13px;
    color: #48463f;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.geraete-fazit { font-size: 13px; font-weight: 600; }
.geraete-fazit-ok { color: #146639; }
.geraete-fazit-fehler { color: #9c2424; }
.geraete-fazit-neutral { color: #6c6a63; font-weight: 400; }

.geraete-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.geraete-gruppe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.geraete-gruppe-name {
    font-size: 12px;
    color: #6c6a63;
    margin-right: 2px;
}

.geraet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    cursor: default;
}

.geraet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.geraet-online { background: #cceedb; color: #146639; }
.geraet-online .geraet-dot { background: #1d9d57; }

.geraet-gestoert { background: #f6d2d2; color: #9c2424; font-weight: 600; }
.geraet-gestoert .geraet-dot {
    background: #d9534f;
    animation: geraet-blink 1.2s ease-in-out infinite;
}

.geraet-unbekannt { background: #e9eaed; color: #6c6a63; }
.geraet-unbekannt .geraet-dot { background: #9b9890; }

@keyframes geraet-blink {
    50% { opacity: 0.25; }
}

/* Gruppen-Überschrift in den Einstellungen (leichte Struktur, nicht erschlagend) */
.admin-gruppe {
    margin: 22px 0 8px;
    color: #6c6a63;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Durchfahrtsverlauf (WUS-557) */
.filterbar .datum-bis { font-size: 13px; color: #6b6960; }

.app-main > .verlauf-scroll {
    /* Füllt den Rest des Inhaltsbereichs bis zur Fußzeile — eine feste Rechnung wie
       calc(100vh - 250px) träfe daneben, sobald ein Störungsbanner darüber steht. */
    flex: 1 1 auto;
    min-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dcdee2;
    border-radius: 8px;
}

/* Rahmen und Radius sitzen am Scroll-Bereich, nicht an der Tabelle darin. */
.verlauf-scroll table.ereignisse {
    border: none;
    border-radius: 0;
    table-layout: fixed;
    /* Der geerbte overflow:hidden (er beschneidet die abgerundeten Ecken) hängt den
       klebenden Tabellenkopf an die Tabelle statt an den Scroll-Bereich — er scrollte
       damit einfach mit weg. */
    overflow: visible;
}

.verlauf-scroll table.ereignisse thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f8fa;
}

/* <Virtualize> rechnet mit fester Zeilenhöhe. Die 37 muss zu ItemSize in History.razor
   passen. Bricht eine Zelle um, springt die Bildlaufleiste — deshalb abschneiden statt
   umbrechen, der volle Text steht im title. */
.verlauf-scroll table.ereignisse td {
    height: 37px;
    /* Kein senkrechtes Polster: Bei Tabellenzellen ist height nur ein Mindestwert, das
       geerbte padding schob die Zeilen auf 38–40 px. Virtualize rechnet aber mit genau 37 —
       jede Abweichung summiert sich über tausende Zeilen und lässt die Bildlaufleiste
       daneben liegen. Der Text steht durch vertical-align trotzdem mittig. */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verlauf-scroll table.ereignisse tbody tr.platzhalter td { color: #9b9890; }

/* Hinweis auf die gekappte Liste (WUS-557) */
.kappung {
    margin-bottom: 12px;
    padding: 9px 14px;
    background: #fdf6e3;
    border: 1px solid #eadfc0;
    border-radius: 8px;
    font-size: 13px;
    color: #6b5a2a;
}

.kappung a {
    margin-left: 6px;
    color: #9a6a12;
    font-weight: 600;
}

/* Auskunftsliste im Einstellungs-Reiter "System": Bezeichnung links, Wert rechts.
   Bewusst NICHT .system-liste: unter dem Namen steht weiter oben schon die
   Zutrittssystem-Liste des Hardware-Reiters. Beide Regeln sind gleich spezifisch, die
   spätere gewinnt — dieses Raster hat dort das Flex-Layout überschrieben und die drei
   Systemzeilen nebeneinander gelegt. */
.system-info {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 6px 20px;
    margin: 0 0 4px;
    font-size: 13px;
    /* Die Textfarbe steht bewusst hier und nicht auf ".system-info dd": Von dort aus
       waere sie spezifischer als jede Klasse, die eine einzelne Zeile faerbt, und
       .system-warnung kaeme nie zum Zug. Geerbt verliert sie dagegen gegen jede
       direkte Regel -- genau das ist gewollt. */
    color: #1a1913;
}

.system-info dt { color: #6b6960; }

.system-info dd { margin: 0; }

.system-neben { color: #6b6960; }
.system-warnung { color: #b3261e; font-weight: 600; }

/* Reihenfolge der Zugangspunkte (WUS-580) — ziehbare Zeilen */
.order-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #dcdee2;
    border-radius: 8px;
    overflow: hidden;
    max-width: 560px;
}

.order-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #e6e8eb;
    cursor: grab;
    user-select: none;
}

.order-row:last-child { border-bottom: none; }
.order-row:hover { background: #f7f8fa; }
.order-row.is-dragging { opacity: 0.45; cursor: grabbing; }

.order-handle { width: 16px; height: 16px; flex: none; color: #9a9890; }
.order-name { flex: 1; }
.order-direction { font-size: 12px; color: #48463f; }
.order-system { font-size: 12px; color: #6c6a63; min-width: 150px; text-align: right; }