/* Lab Management Web Frontend */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f4f6f8; color: #333; }

/* Header */
header { background: #1e3a5f; color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
header h1 { font-size: 18px; font-weight: 600; }
.auth-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Global search bar in header ─────────────────────────────── */
.search-wrap {
    position: relative;
    flex: 1; max-width: 460px;
    margin-left: 24px;
}
.search-wrap input[type="search"] {
    width: 100%; padding: 7px 12px;
    border: 1px solid #4a7ab5; border-radius: 4px;
    background: #2d5a8e; color: #fff;
    font-size: 13px;
}
.search-wrap input::placeholder { color: #aac4e0; }
.search-wrap input:focus { outline: 2px solid rgba(255,255,255,.25); outline-offset: -1px; }

.search-overlay {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; color: #1e3a5f;
    border: 1px solid #e3e8ef; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    max-height: 480px; overflow-y: auto; z-index: 200;
}
.search-bucket { padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.search-bucket:last-child { border-bottom: none; }
.search-bucket-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #5a6a80;
    padding: 6px 12px 4px; background: #f8fafc;
}
.search-bucket-count { color: #8a96a8; font-weight: 500; }
.search-item {
    display: block; padding: 8px 12px; text-decoration: none;
    color: #1e3a5f; cursor: pointer; transition: background .12s;
    border-bottom: 1px solid #f4f6f8;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item:focus {
    background: #f0f6ff; outline: none;
}
.search-item-title { font-weight: 600; font-size: 13px; }
.search-item-sub { font-size: 12px; color: #5a6a80; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item-extra { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.search-item-tag {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    background: #eef2f7; color: #5a6a80; font-weight: 600;
}
.search-empty {
    padding: 18px 14px; color: #5a6a80; font-size: 13px;
    text-align: center;
}
.search-empty-err { color: #c0392b; }

@media (max-width: 720px) {
    .search-wrap { max-width: none; margin-left: 12px; }
    .search-overlay { max-height: 60vh; }
}

/* ── Per-entity Aenderungsverlauf ─────────────────────────────── */
.audit-history {
    list-style: none; margin: 0; padding: 0;
}
.audit-history-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 4px 12px; align-items: baseline;
    padding: 6px 4px; border-bottom: 1px solid #f0f2f5;
    font-size: 13px;
}
.audit-history-row:last-child { border-bottom: none; }
.audit-history-ts {
    font-family: "Courier New", monospace; color: #5a6a80; font-size: 12px;
    white-space: nowrap;
}
.audit-history-label { color: #1e3a5f; font-weight: 500; }
.audit-history-hint {
    grid-column: 2 / 3; color: #5a6a80; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-history-user {
    font-size: 12px; color: #5a6a80;
    background: #eef2f7; padding: 1px 8px; border-radius: 3px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .audit-history-row {
        grid-template-columns: 1fr;
    }
    .audit-history-ts, .audit-history-user { font-size: 11px; }
}

/* ── Maintenance summary in device detail ─────────────────────── */
.dev-maint-summary {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin: 6px 0 10px;
}
.dev-maint-stat {
    font-size: 12px; color: #5a6a80;
    padding: 4px 10px; background: #f4f6f8;
    border: 1px solid #e3e8ef; border-radius: 4px;
}
.dev-maint-stat-warn {
    background: #fde2e2; color: #a02020; border-color: #f5b6b6;
}

/* ── Dashboard-Modal (Datenqualitaet-Details) ─────────────────── */
.dash-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 30, 50, .55); z-index: 500;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px;
}
.dash-modal-card {
    background: #fff; border-radius: 8px;
    width: min(640px, 100%);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    display: flex; flex-direction: column; max-height: 85vh;
}
.dash-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid #eef1f4;
}
.dash-modal-title {
    flex: 1; font-size: 16px; font-weight: 600; color: #1e3a5f;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-modal-body { padding: 8px 12px; overflow-y: auto; }

.dash-quality-mod-row {
    padding: 8px 8px;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer; transition: background .12s;
    border-radius: 4px;
}
.dash-quality-mod-row:hover { background: #f6faff; }
.dash-quality-mod-row:last-child { border-bottom: none; }
.dash-quality-mod-name { font-weight: 600; color: #1e3a5f; }
.dash-quality-mod-sub { font-size: 12px; color: #5a6a80; margin-top: 2px; }

@media (max-width: 600px) {
    .dash-modal-backdrop { padding: 0; }
    .dash-modal-card { max-height: 100vh; border-radius: 0; }
}
.auth-bar input { padding: 6px 10px; border: 1px solid #4a7ab5; border-radius: 4px; background: #2d5a8e; color: #fff; width: 220px; font-size: 13px; }
.auth-bar input::placeholder { color: #aac4e0; }

/* Tabs */
/* Gruppierte Navigation. Die Top-Leiste enthaelt nur noch
   Einzeltabs (z. B. Übersicht) und Gruppen-Toggles; Module-Links
   sitzen in absoluten Dropdowns darunter. ``overflow`` bewusst
   ``visible``, sonst werden die Dropdowns geclippt; auf schmalen
   Schirmen wickelt ``flex-wrap`` die Top-Leiste statt einer
   horizontalen Scroll-Geste. */
.tab-bar {
    background: #16304d; padding: 0 24px; display: none;
    align-items: stretch; gap: 4px; flex-wrap: wrap; overflow: visible;
}
.tab-bar > .tab-entry,
.tab-bar .nav-group-toggle {
    background: none; border: none; color: #8ab;
    padding: 10px 18px; font-size: 14px; cursor: pointer;
    border-bottom: 3px solid transparent; transition: color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.tab-bar > .tab-entry:hover,
.tab-bar .nav-group-toggle:hover { color: #fff; }
.tab-bar > .tab-entry.active,
.tab-bar .nav-group-toggle.active {
    color: #fff; border-bottom-color: #4a9eff; font-weight: 600;
}
.tab-bar .nav-caret { font-size: 11px; line-height: 1; color: inherit; }

.tab-bar .nav-group { position: relative; display: inline-flex; }
.tab-bar .nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0; z-index: 30;
    background: #16304d; min-width: 200px; padding: 4px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    border: 1px solid #1f4068; border-top: 0;
    border-radius: 0 0 4px 4px;
}
.tab-bar .nav-dropdown.open { display: block; }
.tab-bar .nav-dropdown button {
    display: block; width: 100%; background: none; border: none;
    color: #cbe0f4; padding: 8px 14px; text-align: left;
    font-size: 13px; cursor: pointer;
    transition: background .12s, color .12s;
}
.tab-bar .nav-dropdown button:hover {
    background: #1f4068; color: #fff;
}
.tab-bar .nav-dropdown button.active {
    background: #1e3a5f; color: #fff; font-weight: 600;
}

/* Buttons */
.btn { padding: 6px 14px; border: none; border-radius: 4px; background: #4a9eff; color: #fff; cursor: pointer; font-size: 13px; transition: background .15s, opacity .2s; }
.btn:hover { background: #3a8eef; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-green { background: #27ae60; }
.btn-green:hover:not(:disabled) { background: #219a52; }
.btn-red { background: #c0392b; }
.btn-red:hover:not(:disabled) { background: #a93226; }
.btn-outline { background: #fff; color: #333; border: 1px solid #ccc; }
.btn-outline:hover:not(:disabled) { background: #f0f0f0; }
.auth-status { font-size: 12px; padding: 2px 8px; border-radius: 3px; }
.auth-ok { background: #27ae60; }
.auth-err { background: #c0392b; }

/* Layout */
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.toolbar input, .toolbar select { flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }

/* ── Suchbare Combobox ─────────────────────────────────────────
   Schmale Vanilla-Komponente: ein ``<input>`` als Trigger und
   Sucheingabe, eine darunter eingeblendete Trefferliste, Reset-X.
   Wir verwenden ``position: relative``+``absolute`` auf der Liste
   damit sie im Toolbar-Flow bleibt aber visuell ueber den
   nachfolgenden Inhalt schwebt. ``z-index: 5`` reicht — die App
   hat keine Modal-Ebene oberhalb der Toolbar. */
.combo {
    position: relative; flex: 1; min-width: 200px;
    display: flex; align-items: center;
}
.combo input[type="text"] {
    flex: 1; padding: 8px 28px 8px 12px;  /* rechts Platz fuer das ``×`` */
    border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
    background: #fff;
}
.combo input[type="text"]:focus {
    outline: 2px solid #4a9eff; outline-offset: -1px;
    border-color: #4a9eff;
}
.combo-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; cursor: pointer;
    color: #6a7a90; font-size: 18px; line-height: 1; padding: 2px 6px;
    border-radius: 3px;
}
.combo-clear:hover { background: #eef2f8; color: #1e3a5f; }
.combo-list {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 2px; max-height: 50vh; overflow-y: auto;
    background: #fff; border: 1px solid #cfd8e3; border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 5;
}
.combo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid #eef1f4;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item-active { background: #f4faff; }
.combo-item-name { flex: 1; color: #1e3a5f; font-weight: 500; }
.combo-item-type {
    font-size: 11px; color: #5a6a80;
    background: #eef2f8; padding: 1px 8px; border-radius: 10px;
}
.combo-empty { padding: 10px 12px; color: #6a7a90; font-style: italic; }

/* ── Aktive Filter als Chips ───────────────────────────────────
   Erscheint zwischen Toolbar und Listenkarte. Jeder Chip kann
   einzeln zurueckgesetzt werden; ``Filter zurücksetzen`` raeumt
   alles auf einen Schlag. Chip-Layout-Block ist nur sichtbar wenn
   Inhalte da sind — deshalb leerer ``innerHTML`` als Default. */
.filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 12px 0;
}
.filter-chips:empty { display: none; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef2f8; color: #1e3a5f;
    padding: 4px 4px 4px 10px; border-radius: 14px;
    font-size: 12px;
}
.filter-chip-label { font-weight: 600; }
.filter-chip-x {
    background: transparent; border: 0; cursor: pointer;
    color: #5a6a80; font-size: 16px; line-height: 1;
    padding: 0 6px; border-radius: 50%;
}
.filter-chip-x:hover { background: #d6e0ee; color: #1e3a5f; }
.filter-chip-reset {
    background: transparent; border: 1px solid #cfd8e3;
    color: #1e3a5f; cursor: pointer;
    padding: 4px 10px; border-radius: 14px; font-size: 12px;
}
.filter-chip-reset:hover { background: #f4faff; }

@media (max-width: 600px) {
    .combo { flex: 1 1 100%; min-width: 0; }
    .combo-list { max-height: 60vh; }
    .filter-chip { font-size: 11px; }
}

.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 20px; margin-bottom: 16px; }

/* Generic horizontal-scroll wrapper for wide tables on small
   viewports. Apply by wrapping a table host in a div with this
   class; the wrapper isolates the overflow so the rest of the
   page layout doesn't gain a scrollbar. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Toast */
.toast { position: fixed; top: 16px; right: 16px; z-index: 999; padding: 10px 20px; border-radius: 6px; color: #fff; font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.toast.visible { opacity: 1; }
.toast-ok { background: #27ae60; }
.toast-err { background: #c0392b; }

/* Section title */
.section-title { font-size: 15px; font-weight: 600; color: #1e3a5f; margin-bottom: 10px; }

/* List items */
.item-row { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background .15s; gap: 6px; }
.item-row:hover { background: #f0f4f8; }
.item-row:last-child { border-bottom: none; }
.item-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.item-code { font-family: "Courier New", monospace; color: #1e3a5f; font-size: 13px; white-space: nowrap; }
.item-badge { font-size: 12px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.status-active { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }
.status-maintenance { background: #fff3cd; color: #856404; }
.status-decommissioned { background: #e2e3e5; color: #383d41; }
.badge-hazard { background: #ffeeba; color: #856404; }
.badge-storage { background: #e8f0fe; color: #1e3a5f; }
.mt-overdue { background: #f8d7da; color: #721c24; }
.mt-soon { background: #fff3cd; color: #856404; }
.mt-ok { background: #d4edda; color: #155724; }
.mt-inactive { background: #e2e3e5; color: #383d41; }
.list-count { font-size: 12px; color: #888; margin-bottom: 8px; padding-left: 2px; }

/* ── Geräte — Schnellfilter-Kacheln + Listenlayout ──────────── */
/* Tiles sit between the toolbar (search + dropdown filters) and
   the list, in the same horizontal flow as the rest of the page.
   Layout uses the established kpi-card baseline so the visual
   language stays consistent with the dashboard. */
.dev-tiles {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 12px;
}
.dev-tiles:empty { display: none; }
.dev-tile {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 6px;
    padding: 10px 12px; cursor: pointer; text-align: left;
    transition: box-shadow .15s, border-color .15s, background .15s, transform .12s;
    user-select: none;
}
.dev-tile:hover {
    border-color: #b6c4d6;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.dev-tile.active {
    border-color: #1e3a5f; background: #eaf2fb;
    box-shadow: inset 0 0 0 1px #1e3a5f;
}
.dev-tile-count {
    font-size: 20px; font-weight: 700; color: #1e3a5f; line-height: 1.1;
}
.dev-tile-label {
    font-size: 12px; color: #5a6a80; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev-tile-all { background: #1e3a5f; }
.dev-tile-all .dev-tile-count, .dev-tile-all .dev-tile-label { color: #fff; }
.dev-tile-all:hover { border-color: #1e3a5f; }
.dev-tile-all.active { background: #142948; box-shadow: inset 0 0 0 1px #fff; }

/* Geräte-Listenzeile: Inventar-Code, Name, Meta-Zeile mit
   Kategorie/Vorlage/Standort, plus Status-Badge — visuell getrennt
   und nicht mehr in eine Zeile gequetscht. */
.dev-list-item { align-items: flex-start; padding: 12px; gap: 10px; }
.dev-list-item .dev-row-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.dev-list-item .dev-row-head {
    display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.dev-list-item .dev-row-code {
    font-family: "Courier New", monospace; color: #1e3a5f;
    font-size: 13px; white-space: nowrap; flex: 0 0 auto;
}
.dev-list-item .dev-row-code-empty { color: #b5bdc8; }
.dev-list-item .dev-row-name {
    font-weight: 600; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #1e3a5f;
}
.dev-list-item .dev-row-meta {
    font-size: 12px; color: #6a7a90;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev-list-item .dev-row-status { align-self: center; }

@media (max-width: 600px) {
    .dev-tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .dev-tile-count { font-size: 18px; }
    .dev-list-item { flex-wrap: wrap; }
    .dev-list-item .dev-row-status { align-self: flex-start; }
}

/* ── Studentische Arbeiten — Listendarstellung ──────────────── */
/* Each row is a two-column flex: main text on the left, badges
   right.  The existing `.item-row` baseline gives us the hover +
   border behaviour; we only override the alignment so a multi-line
   main column flows downwards. */
.swk-list-item { align-items: flex-start; }
.swk-list-item .swk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swk-list-item .swk-title { font-weight: 600; font-size: 15px; color: #1e3a5f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swk-list-item .swk-student { font-size: 13px; color: #333; }
.swk-list-item .swk-student-label { color: #888; font-weight: 600; margin-right: 4px; }
.swk-list-item .swk-meta-line { font-size: 12px; color: #888; }
.swk-list-item .swk-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }

.swk-badge { font-size: 13px; padding: 3px 10px; border-radius: 4px; white-space: nowrap; font-weight: 600; }
.swk-type-badge { background: #e8f0fe; color: #1e3a5f; }
.swk-status-planned   { background: #e0e7ef; color: #36506f; }
.swk-status-active    { background: #d4edda; color: #155724; }
.swk-status-submitted { background: #e0d9f3; color: #4a3a8a; }
.swk-status-completed { background: #e2e3e5; color: #383d41; }
.swk-status-cancelled { background: #f4d6d8; color: #6b3a3f; }
.swk-overdue { background: #f8d7da; color: #721c24; border: 1px solid #e8b4ba; }
.swk-archived-badge { background: #fff3cd; color: #856404; }

@media (max-width: 600px) {
    .swk-list-item .swk-badges { justify-content: flex-start; }
}

/* swk: kompakter Filter-Block (status, type, supervisor x3, sort,
   date-range) — die Toolbar wrappt bereits, hier nur die Date-Filter
   schmaler halten, damit sie nicht jeweils eine eigene Zeile fressen. */
.swk-toolbar .swk-date-filter {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto; min-width: 0;
    font-size: 13px; color: #444;
}
.swk-toolbar .swk-date-filter input[type="date"] {
    flex: 0 0 auto; width: 145px; min-width: 0;
}
.swk-toolbar .swk-date-label { white-space: nowrap; }

/* swk-tiles: kompakte Status-Quickfilter-Reihe, gleichformat wie
   die Geraete-Tiles, mit denen sie visuell konsistent bleibt. */
.swk-tiles {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 12px;
}
.swk-tiles:empty { display: none; }
.swk-tile {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 6px;
    padding: 10px 12px; cursor: pointer; text-align: left;
    transition: box-shadow .15s, border-color .15s, background .15s, transform .12s;
    user-select: none;
    display: flex; flex-direction: column-reverse;
}
.swk-tile:hover {
    border-color: #b6c4d6;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.swk-tile-active {
    border-color: #1e3a5f; background: #eaf2fb;
    box-shadow: inset 0 0 0 1px #1e3a5f;
}
.swk-tile-count {
    font-size: 20px; font-weight: 700; color: #1e3a5f; line-height: 1.1;
}
.swk-tile-label {
    font-size: 12px; color: #5a6a80; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.swk-tile[data-tile="all"] { background: #1e3a5f; }
.swk-tile[data-tile="all"] .swk-tile-count,
.swk-tile[data-tile="all"] .swk-tile-label { color: #fff; }
.swk-tile[data-tile="all"]:hover { border-color: #1e3a5f; }
.swk-tile[data-tile="all"].swk-tile-active {
    background: #142948; box-shadow: inset 0 0 0 1px #fff;
}

/* swk: Sperrvermerk + PDF section */
.swk-checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.swk-checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
.swk-pdf-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e0e0e0; }
.swk-pdf-section h3 { margin: 0 0 12px 0; font-size: 16px; color: #1e3a5f; }
.swk-pdf-blocked {
    padding: 12px 14px; border-radius: 6px;
    background: #fff3cd; color: #856404;
    border: 1px solid #ffeeba; font-weight: 600;
    margin-bottom: 12px;
}
.swk-pdf-dropzone {
    padding: 18px; border: 2px dashed #c4c8d1; border-radius: 6px;
    background: #fafbfc; text-align: center; transition: background 0.15s, border-color 0.15s;
}
.swk-pdf-dropzone.swk-pdf-dragover { background: #e8f0fe; border-color: #1e3a5f; }
.swk-pdf-hint { margin: 0 0 4px 0; color: #555; font-size: 14px; }
.swk-pdf-status { font-size: 13px; color: #555; margin-top: 6px; min-height: 16px; }
.swk-pdf-list { list-style: none; padding: 0; margin: 12px 0 0 0; }
.swk-pdf-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 4px;
    margin-bottom: 6px; background: #fff;
}
.swk-pdf-link { color: #1e3a5f; font-weight: 600; text-decoration: none; }
.swk-pdf-link:hover { text-decoration: underline; }
.swk-pdf-meta { color: #888; font-size: 12px; }
.swk-pdf-empty { color: #888; font-size: 13px; font-style: italic; padding: 6px 0; }
.swk-pdf-remove { margin-left: auto; }

/* Detail views */
.detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.detail-title { font-size: 20px; font-weight: 600; flex: 1; min-width: 0; }
.detail-grid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 14px; }
.detail-label { font-weight: 600; color: #666; }
.detail-hint { font-size: 13px; color: #888; margin-top: 12px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 140px 1fr; gap: 10px 12px; font-size: 14px; align-items: center; }
.form-grid label { font-weight: 600; color: #555; }
.form-grid input, .form-grid select, .form-grid textarea { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-family: inherit; transition: border-color .2s; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: #4a9eff; box-shadow: 0 0 0 2px rgba(74,158,255,.15); }
.form-grid input.field-error, .form-grid select.field-error { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.1); }
.form-grid textarea { resize: vertical; min-height: 50px; }
.form-grid .required::after { content: " *"; color: #c0392b; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 12px; }
.form-error { grid-column: 1 / -1; color: #c0392b; font-size: 13px; padding: 6px 0; display: none; }
.form-row-inline { display: flex; gap: 8px; }
.form-row-inline input { flex: 1; }
.form-row-inline select { width: 80px; }

/* Delete confirm */
.delete-confirm { display: none; padding: 14px; background: #fdf0ef; border: 1px solid #e8c4c0; border-radius: 6px; margin-top: 14px; }
.delete-confirm p { margin-bottom: 10px; color: #721c24; font-size: 14px; }

/* Messages */
.msg { text-align: center; padding: 32px 16px; color: #999; font-size: 14px; }
.msg-icon { font-size: 28px; margin-bottom: 6px; display: block; }
.err { color: #c0392b; }

/* Dashboard */
.dash-page-title {
    font-size: 20px; font-weight: 600; color: #1e3a5f;
    margin: 0 0 16px 2px;
}
.dash-kpi-strip {
    display: grid; gap: 12px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kpi-card {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 8px;
    padding: 16px 14px; text-align: center; cursor: pointer;
    transition: box-shadow .2s, transform .15s, border-color .2s;
}
.kpi-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    border-color: #c8d3e1; transform: translateY(-1px);
}
.kpi-value { font-size: 26px; font-weight: 700; color: #1e3a5f; line-height: 1.1; }
.kpi-label {
    font-size: 12px; color: #5a6a80; margin-top: 6px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.kpi-suffix-alert {
    color: #c0392b; font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
}

.dash-cards {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dash-card {
    margin: 0;          /* override default .card { margin-bottom: 16px } */
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.dash-card-wide { grid-column: 1 / -1; }
.dash-card-alert {
    border-left: 4px solid #c0392b;
}
.dash-card-title {
    font-size: 14px; font-weight: 600; color: #1e3a5f;
    margin: 0 0 4px 0; padding-bottom: 6px;
    border-bottom: 1px solid #eef1f4;
}
.dash-card-title-alert { color: #c0392b; }
.dash-card-body { font-size: 14px; }
.dash-empty { color: #6a7a90; font-size: 13px; padding: 6px 0; }

.dash-quickactions {
    display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px;
}
.dash-quickaction {
    font-size: 13px; padding: 8px 14px; border-radius: 6px;
    flex: 0 0 auto;
}

.dash-quality-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px 4px; border-bottom: 1px solid #f0f2f5;
    cursor: pointer; transition: background .12s;
    font-size: 13px;
}
.dash-quality-row:last-child { border-bottom: none; }
.dash-quality-row:hover { background: #f6faff; }
.dash-quality-row-head {
    display: flex; align-items: center; gap: 10px;
}
.dash-quality-count {
    font-weight: 700; color: #1e3a5f; min-width: 28px;
    text-align: right;
    background: #e8f0fe; border-radius: 3px; padding: 2px 8px;
}
.dash-quality-row-alert .dash-quality-count {
    background: #fde2e2; color: #a02020;
}
.dash-quality-label { flex: 1; min-width: 0; color: #1e3a5f; }
.dash-quality-samples {
    font-size: 12px; color: #5a6a80; padding-left: 44px;
    line-height: 1.4;
}
.dash-quality-more { color: #8a96a8; font-style: italic; }
.dash-quality-link {
    color: #4a9eff; text-decoration: none; font-weight: 500;
    margin-left: 6px;
}
.dash-quality-link:hover { text-decoration: underline; }

/* ── Warnhinweise ─────────────────────────────────────────────── */
.dash-warning-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 6px; border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f2f5; font-size: 13px;
    transition: background .12s;
}
.dash-warning-row:last-child { border-bottom: none; }
.dash-warning-clickable { cursor: pointer; }
.dash-warning-clickable:hover { background: #f6faff; }
.dash-warning-kritisch { border-left-color: #c0392b; }
.dash-warning-hoch { border-left-color: #e67e22; }
.dash-warning-normal { border-left-color: #4a9eff; }
.dash-warning-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 3px; text-transform: uppercase;
    letter-spacing: .04em; min-width: 70px; text-align: center;
    flex-shrink: 0;
}
.dash-warning-badge-kritisch { background: #fde2e2; color: #a02020; }
.dash-warning-badge-hoch { background: #fde9d2; color: #8b4a07; }
.dash-warning-badge-normal { background: #e8f0fe; color: #1e3a5f; }
.dash-warning-message { flex: 1; min-width: 0; color: #1e3a5f; }

.dash-bk-section-title {
    font-size: 12px; font-weight: 600; color: #5a6a80;
    text-transform: uppercase; letter-spacing: .03em;
    margin: 8px 0 4px; padding-bottom: 2px;
    border-bottom: 1px solid #eef1f4;
}
.dash-bk-section-title:first-child { margin-top: 0; }
.dash-bk-section-title-alert { color: #c0392b; }
.dash-bk-section-count { color: #8a96a8; font-weight: 500; }
.dash-prio-critical {
    box-shadow: 0 0 0 2px rgba(192,57,43,.18);
}

.dash-activity-row {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 4px; border-bottom: 1px solid #f0f2f5;
    font-size: 13px;
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-ts {
    font-family: "Courier New", monospace; color: #5a6a80;
    font-size: 12px; min-width: 140px; white-space: nowrap;
}
.dash-activity-action { flex: 1; min-width: 0; color: #1e3a5f; }
.dash-activity-user {
    color: #5a6a80; font-size: 12px;
    background: #eef2f7; padding: 2px 8px; border-radius: 3px;
    white-space: nowrap;
}

/* ── Systemstatus / Nutzung ───────────────────────────────────── */
.dash-status-grid {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 6px 12px; font-size: 13px;
}
.dash-status-key { color: #5a6a80; font-weight: 600; }
.dash-status-val { color: #1e3a5f; min-width: 0; word-break: break-word; }
.dash-status-tag {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    background: #e8f0fe; color: #1e3a5f; font-size: 12px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.dash-status-tag-prod { background: #d4edda; color: #155724; }
.dash-status-ok { color: #155724; font-weight: 600; }
.dash-status-warn { color: #c0392b; font-weight: 600; }
.dash-status-actions {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #eef1f4;
    display: flex; flex-direction: column; gap: 6px;
}
.dash-status-hint { font-size: 12px; color: #5a6a80; }

.dash-usage-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.dash-usage-tile {
    background: #f8fafc; border: 1px solid #e3e8ef;
    border-radius: 6px; padding: 10px 12px;
}
.dash-usage-value { font-size: 22px; font-weight: 700; color: #1e3a5f; line-height: 1.1; }
.dash-usage-label {
    font-size: 12px; color: #5a6a80; margin-top: 4px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.dash-usage-hint { font-size: 11px; color: #8a96a8; margin-top: 2px; }

.dist-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 13px;
    border-bottom: 1px solid #f0f2f5;
}
.dist-row:last-child { border-bottom: none; }
.dist-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-count { font-weight: 600; color: #1e3a5f; min-width: 40px; text-align: right; }
.dist-bar {
    height: 6px; border-radius: 3px; background: #4a9eff;
    margin-left: 4px; transition: width .3s;
}

.dash-bk-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; border-bottom: 1px solid #f0f2f5;
    cursor: pointer; transition: background .12s;
}
.dash-bk-row:last-child { border-bottom: none; }
.dash-bk-row:hover { background: #f6faff; }
.dash-bk-range {
    font-family: "Courier New", monospace; color: #1e3a5f;
    font-size: 13px; min-width: 130px; white-space: nowrap;
}
.dash-bk-facility { font-weight: 600; min-width: 100px; }
.dash-bk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bk-meta { display: flex; gap: 4px; flex-shrink: 0; }

/* Responsive */
@media (max-width: 768px) {
    .tab-bar { padding: 0 12px; }
    .tab-bar > .tab-entry,
    .tab-bar .nav-group-toggle { padding: 10px 12px; font-size: 13px; }
    .tab-bar .nav-dropdown { min-width: 180px; }
}
@media (max-width: 600px) {
    header { padding: 10px 12px; gap: 10px; }
    header h1 { font-size: 16px; }
    .auth-bar input { width: 150px; }
    main { padding: 0 10px; margin-top: 16px; }
    .card { padding: 14px; }
    .form-grid, .detail-grid { grid-template-columns: 1fr; }
    .form-grid label { margin-top: 4px; }
    .dash-cards { grid-template-columns: 1fr; }
    .dash-card-wide { grid-column: auto; }
    .detail-header { gap: 6px; }
    .detail-title { font-size: 17px; }
    .kpi-card { padding: 14px 10px; }
    .kpi-value { font-size: 22px; }
    .dash-bk-range { min-width: 110px; font-size: 12px; }
    .dash-bk-facility { min-width: 80px; }

    /* Tighter touch targets — buttons easier to hit on phones. */
    .btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
    /* Toolbar: each control gets full width so users don't have to
       fight a row of half-cropped inputs. */
    .toolbar input, .toolbar select { min-width: 0; flex: 1 1 100%; }
    /* Booking calendar cells get a sane min-height even when the
       day has multiple bars. */
    .bk-cal-cell { min-height: 64px; }
    .bk-cal-bar { font-size: 10px; }
    /* Booking calendar week-view stays scrollable without breaking
       the page layout. */
    .bk-cal-body-week { overflow-x: auto; }
    /* Dashboard hero & detail hero actions wrap clean. */
    .dd-hero-actions { width: 100%; }
    .dd-hero-actions .btn { flex: 1 1 0; }
    /* Search overlay snaps to the viewport instead of overflowing. */
    .search-overlay { left: -8px; right: -8px; max-height: 70vh; }
}

/* User table */
.usr-table-header { display: grid; grid-template-columns: 1fr 120px 100px 130px; gap: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid #e0e0e0; }
.usr-table-row { display: grid; grid-template-columns: 1fr 120px 100px 130px; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background .15s; align-items: center; font-size: 14px; }
.usr-table-row:hover { background: #f0f4f8; }
.usr-table-row:last-child { border-bottom: none; }
.usr-col-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-col-login { font-family: "Courier New", monospace; color: #1e3a5f; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.usr-col-role { font-size: 13px; color: #555; }
.usr-col-status { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 600px) {
    .usr-table-header { display: none; }
    .usr-table-row { grid-template-columns: 1fr auto; gap: 4px; }
    .usr-col-login, .usr-col-role { display: none; }
}

/* Audit table */
.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th { text-align: left; padding: 8px 10px; font-weight: 600; color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid #e0e0e0; }
.audit-table td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
.audit-table tr:last-child td { border-bottom: none; }
@media (max-width: 600px) { .audit-table th:nth-child(4), .audit-table td:nth-child(4), .audit-table th:nth-child(5), .audit-table td:nth-child(5) { display: none; } }

/* Login screen */
.login-screen { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 24px; }
.login-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.12); padding: 32px 28px; width: 100%; max-width: 380px; }

/* Template field editor */
.field-edit-row { border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; background: #fafafa; }
.field-edit-grid { display: grid; grid-template-columns: 90px 1fr 90px 120px 110px 1fr; gap: 6px 10px; align-items: center; }
.field-edit-grid label { font-size: 12px; color: #555; }
.field-edit-grid input[type="text"], .field-edit-grid select { padding: 5px 7px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.field-edit-grid input[disabled] { background: #eee; color: #777; }
.field-edit-options { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.field-edit-options label { font-size: 12px; color: #555; }
.field-edit-options input { padding: 5px 7px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.field-warning { color: #a04a00; font-size: 12px; }
.field-edit-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.item-row.selected { background: #e0eaf5; }
.item-meta { font-size: 12px; color: #777; margin-left: auto; }

.required-mark { color: #c0392b; margin-left: 2px; }


/* Header logout button — high contrast on the dark header */
.btn-logout {
    background: #fff;
    color: #1e3a5f;
    border: 1px solid #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}
.btn-logout:hover:not(:disabled) {
    background: #e8eef5;
    color: #1e3a5f;
    border-color: #e8eef5;
}

/* Per-row action buttons (templates / categories list) */
.item-row .item-actions {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}
.item-row .item-actions .btn {
    padding: 3px 10px;
    font-size: 12px;
}

/* Editor footer: split primary actions on the left, destructive on the right */
.form-actions-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.form-actions-split > div { display: flex; gap: 8px; }

/* Category list — two-row card so the title never gets truncated
   in the narrow left column ("IT / Computer" used to render as
   "IT / C…"). */
.category-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background .15s;
}
.category-card:hover { background: #f0f4f8; }
.category-card:last-child { border-bottom: none; }
.category-card.selected { background: #e0eaf5; }

.category-card-title {
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.category-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.category-card-meta {
    font-size: 12px;
    color: #777;
}

.category-card-actions { display: flex; gap: 6px; }
.category-card-actions .btn {
    padding: 3px 10px;
    font-size: 12px;
}

/* Attachments — list and upload form inside device/chemical detail */
.att-section h3 { margin-bottom: 8px; }
.att-list { border: 1px solid #eee; border-radius: 6px; overflow: hidden; margin-bottom: 12px; background: #fff; }
.att-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; gap: 10px; }
.att-row:last-child { border-bottom: none; }
.att-row-main { flex: 1; min-width: 0; }
.att-name { display: block; font-weight: 500; color: #1e3a5f; word-break: break-word; }
.att-name:hover { text-decoration: underline; }
.att-meta { font-size: 12px; color: #777; }
.att-desc { font-size: 12px; color: #555; margin-top: 2px; word-break: break-word; }
.att-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.att-row-actions .btn { padding: 3px 10px; font-size: 12px; }
.att-upload { background: #f8f9fb; border: 1px dashed #cfd8e3; border-radius: 6px; padding: 10px 12px; }
.att-upload-title { margin: 0 0 8px; font-size: 14px; color: #1e3a5f; }
.att-upload-grid { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; align-items: center; }
.att-upload-grid label { font-size: 13px; color: #555; }
.att-upload-grid input[type="file"], .att-upload-grid input[type="text"], .att-upload-grid select, .att-upload-grid textarea {
    padding: 5px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;
}
.att-upload-grid textarea { min-height: 50px; }

/* Document-type badge — small coloured pill that surfaces the
   attachment's document_type at a glance. SDB gets a louder colour
   so the safety document is the most visible row in the list. */
.badge-doctype {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #1e3a5f;
    background: #e8f0fe;
    border: 1px solid #c7d6ec;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 6px;
    white-space: nowrap;
}
.badge-doctype-sds {
    background: #fff1c4;
    color: #6c4a00;
    border-color: #e6c674;
}

/* Sicherheitsdatenblatt-Karte: kompakte Zeile mit groesserem Badge,
   direkt unter den Stammdaten der Chemikalie. */
.sds-card {
    border: 1px solid #e6c674;
    background: #fffbef;
    border-radius: 8px;
    padding: 12px 16px;
}
.sds-card .section-title { margin: 0 0 8px; }
.sds-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sds-name {
    font-weight: 600; color: #1e3a5f; word-break: break-word;
    flex: 1; min-width: 0;
}
.sds-name:hover { text-decoration: underline; }
.sds-meta { font-size: 12px; color: #6a7a90; }
.sds-empty { color: #6a7a90; font-style: italic; }
.sds-empty a { color: #1e3a5f; text-decoration: underline; }
.sds-older { font-size: 12px; color: #8a96a8; margin-top: 6px; }

/* Empty states + inline help text — used in admin sub-forms like
   the chemical extra-fields editor. */
.empty-state {
    padding: 14px 16px;
    border: 1px dashed #cfd8e3;
    border-radius: 6px;
    background: #fafbfd;
    color: #444;
    line-height: 1.4;
}
.empty-state p { margin: 0 0 6px; }
.empty-state p:last-child { margin-bottom: 0; }

.info-box {
    padding: 10px 14px;
    border-left: 4px solid #4a9eff;
    background: #eef5ff;
    color: #1e3a5f;
    border-radius: 4px;
    line-height: 1.4;
    font-size: 14px;
}

.field-hint {
    font-size: 12px;
    color: #666;
    margin-top: 3px;
    line-height: 1.3;
}

/* ── Bookings (Testanlagen) ───────────────────────────────────── */

.bk-filter-row {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
    margin: -8px 0 12px; padding: 8px 12px;
    background: #f8fafc; border: 1px solid #e3e8ef; border-radius: 6px;
    font-size: 13px; color: #333;
}
.bk-filter-row label { display: inline-flex; align-items: center; gap: 4px; }
.bk-filter-row-label { font-weight: 600; color: #1e3a5f; }

.bk-table {
    width: 100%; border-collapse: collapse; font-size: 13px; background: #fff;
}
.bk-table th, .bk-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}
.bk-table th {
    background: #f4f6f8; color: #1e3a5f; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}
.bk-table tr:last-child td { border-bottom: none; }
.bk-table tr:hover td { background: #fafcff; }

.bk-status, .bk-prio {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.bk-status-angefragt    { background: #fff3cd; color: #856404; }
.bk-status-bestaetigt   { background: #d4edda; color: #155724; }
.bk-status-storniert    { background: #f8d7da; color: #721c24; }
.bk-status-abgeschlossen{ background: #e2e3e5; color: #383d41; }

.bk-prio-normal   { background: #e8f0fe; color: #1e3a5f; }
.bk-prio-hoch     { background: #ffeeba; color: #856404; }
.bk-prio-kritisch { background: #f8d7da; color: #721c24; }

.bk-conflict-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px; border-radius: 3px;
    background: #fde2e2; color: #a02020; font-size: 11px;
    border: 1px solid #f5b6b6;
}

.bk-conflict-warn {
    padding: 10px 14px; border-left: 4px solid #c0392b;
    background: #fdecec; color: #721c24; border-radius: 4px;
    font-size: 13px; line-height: 1.4;
}
.bk-conflict-warn ul { margin: 6px 0 0 18px; }
.bk-conflict-warn li { margin-bottom: 2px; }

.bk-conflict-ok {
    padding: 8px 12px; border-left: 4px solid #27ae60;
    background: #ecf8f1; color: #155724; border-radius: 4px;
    font-size: 13px;
}

/* ── Bookings calendar (Monatsansicht) ────────────────────────── */

.bk-cal-grid { padding: 0; overflow: hidden; }
.bk-cal-head {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: #f4f6f8; border-bottom: 1px solid #e3e8ef;
    font-size: 12px; color: #1e3a5f; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.bk-cal-head-cell { padding: 8px 10px; text-align: left; }
.bk-cal-body { display: flex; flex-direction: column; }
.bk-cal-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #eef1f4;
}
.bk-cal-row:last-child { border-bottom: none; }
.bk-cal-cell {
    min-height: 96px; padding: 4px 6px; cursor: pointer;
    border-right: 1px solid #eef1f4; background: #fff;
    transition: background .12s;
}
.bk-cal-cell:last-child { border-right: none; }
.bk-cal-cell:hover { background: #f6faff; }
.bk-cal-cell-other { background: #fafbfc; color: #aab; }
.bk-cal-cell-other:hover { background: #f4f6fa; }
.bk-cal-cell-today { background: #fffaea; }
.bk-cal-cell-today:hover { background: #fff3d0; }
.bk-cal-day {
    font-size: 12px; color: #1e3a5f; font-weight: 600;
    margin-bottom: 4px;
}
.bk-cal-cell-other .bk-cal-day { color: #aab; font-weight: 500; }
.bk-cal-cell-bars { display: flex; flex-direction: column; gap: 2px; }
.bk-cal-bar {
    font-size: 11px; padding: 2px 6px; border-radius: 3px;
    color: #1e3a5f; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid transparent;
}
.bk-cal-bar:hover { filter: brightness(.96); border-color: rgba(0,0,0,.15); }
.bk-cal-bar-angefragt    { background: #fff3cd; color: #856404; }
.bk-cal-bar-bestaetigt   { background: #d4edda; color: #155724; }
.bk-cal-bar-abgeschlossen{ background: #e2e3e5; color: #383d41; }
/* "continued left/right" cues — clip the rounded corners on
   continuation cells so multi-day bars read as one strip. */
.bk-cal-bar-cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bk-cal-bar-cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Week view: a single tall row so multi-day strips stay readable. */
.bk-cal-body-week .bk-cal-cell { min-height: 320px; }

/* ── Booking favourites panel ─────────────────────────────── */
.bk-fav-panel { padding: 14px 18px; background: #fafbfd; border: 1px solid #e3e8ef; }
.bk-fav-panel-head { margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.bk-fav-panel-head .field-hint { font-size: 12px; }
.bk-fav-list { display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-bottom: 12px; }
.bk-fav-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: #fff; border: 1px solid #e3e8ef;
    border-radius: 4px; font-size: 13px; cursor: pointer;
}
.bk-fav-row:hover { border-color: #4a9eff; }
.bk-fav-row-name { flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-fav-panel-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    border-top: 1px solid #eef1f4; padding-top: 8px;
}

/* ── Booking PDF export dialog ────────────────────────────── */
.bk-pdf-dialog {
    padding: 14px 18px; background: #fafbfd;
    border: 1px solid #e3e8ef; margin-top: 8px;
}
.bk-pdf-grid {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 10px 14px; align-items: start; margin-bottom: 10px;
}
.bk-pdf-grid > label { font-weight: 600; color: #1e3a5f;
    font-size: 13px; padding-top: 6px; }
.bk-pdf-range { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bk-pdf-range select, .bk-pdf-range input { font-size: 13px; }
.bk-pdf-allrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 0; font-size: 13px; font-weight: 600; color: #1e3a5f;
}
.bk-pdf-facilities {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-top: 6px; max-height: 240px; overflow-y: auto;
    padding: 6px; background: #fff; border: 1px solid #e3e8ef;
    border-radius: 4px;
}
.bk-pdf-facilities label {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; font-size: 13px; cursor: pointer;
    border-radius: 4px;
}
.bk-pdf-facilities label:hover { background: #f4f6fb; }
.bk-pdf-facilities label.disabled { color: #999; cursor: not-allowed; }

/* ── Events calendar (Monats- + Wochenansicht) ─────────────────
   Eigene Klassenkette ``evt-cal-*`` parallel zu ``bk-cal-*``. Wir
   teilen die visuelle Sprache, halten die DOM-Knoten aber sauber
   getrennt, sodass Termin-Balken nie mit Buchungs-Balken stylen
   kollidieren. */
.evt-cal-host { padding: 0; overflow: hidden; }
.evt-cal-head {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: #f4f6f8; border-bottom: 1px solid #e3e8ef;
    font-size: 12px; color: #1e3a5f; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.evt-cal-head-cell { padding: 8px 10px; text-align: left; }
.evt-cal-body { display: flex; flex-direction: column; }
.evt-cal-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #eef1f4;
}
.evt-cal-row:last-child { border-bottom: none; }
.evt-cal-cell {
    min-height: 96px; padding: 4px 6px; cursor: pointer;
    border-right: 1px solid #eef1f4; background: #fff;
    transition: background .12s;
    display: flex; flex-direction: column; gap: 2px;
}
.evt-cal-cell:last-child { border-right: none; }
.evt-cal-cell:hover { background: #f6faff; }
.evt-cal-cell-other { background: #fafbfc; color: #aab; }
.evt-cal-cell-other:hover { background: #f4f6fa; }
.evt-cal-cell-today { background: #fffaea; }
.evt-cal-cell-today:hover { background: #fff3d0; }
.evt-cal-day {
    font-size: 12px; color: #1e3a5f; font-weight: 600;
}
.evt-cal-cell-other .evt-cal-day { color: #aab; font-weight: 500; }
.evt-cal-bar {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    background: #e8f0fe; color: #1e3a5f; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid transparent;
}
.evt-cal-bar:hover { filter: brightness(.96); border-color: rgba(0,0,0,.15); }
.evt-cal-bar-time { font-weight: 600; color: #335; }
.evt-cal-bar-rec { background: #f0e3fb; color: #4b2570; }
.evt-cal-more { font-size: 11px; color: #6a7a90; padding: 0 6px; }
.evt-cal-body-week .evt-cal-cell { min-height: 320px; }
.evt-cal-title { font-weight: 600; color: #1e3a5f; }
.evt-cal-view-switch { display: inline-flex; gap: 0; }
.evt-cal-view-switch .btn {
    border-radius: 0;
}
.evt-cal-view-switch .btn:first-child {
    border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.evt-cal-view-switch .btn:last-child {
    border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}

.bk-cal-view-switch { display: inline-flex; gap: 0; }
.bk-cal-view-switch .btn {
    border-radius: 0;
    padding: 6px 14px;
}
.bk-cal-view-switch .btn:first-child {
    border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.bk-cal-view-switch .btn:last-child {
    border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}

/* ── Device Groups (Geraetegruppen) ───────────────────────────── */

.dg-table {
    width: 100%; border-collapse: collapse; font-size: 13px; background: #fff;
}
.dg-table th, .dg-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}
.dg-table th {
    background: #f4f6f8; color: #1e3a5f; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}
.dg-table tr:last-child td { border-bottom: none; }
.dg-table-row { cursor: pointer; transition: background .12s; }
.dg-table-row:hover td { background: #f6faff; }

.dg-type, .dg-status {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.dg-type-grossanlage    { background: #e8f0fe; color: #1e3a5f; }
.dg-type-subsystem      { background: #d6e9f5; color: #155274; }
.dg-type-messsystem     { background: #d4edda; color: #155724; }
.dg-type-geraetesatz    { background: #f5e3d6; color: #8a4515; }
.dg-type-versuchsaufbau { background: #fff3cd; color: #856404; }
.dg-type-projektgruppe  { background: #efe1f5; color: #5a2885; }
.dg-type-sonstiges      { background: #e2e3e5; color: #383d41; }

.dg-status-aktiv          { background: #d4edda; color: #155724; }
.dg-status-inaktiv        { background: #e2e3e5; color: #383d41; }
.dg-status-ausser_betrieb { background: #f8d7da; color: #721c24; }

.dg-mem-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: #fff; margin-top: 6px;
}
.dg-mem-table th, .dg-mem-table td {
    padding: 6px 8px; text-align: left; border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}
.dg-mem-table th {
    background: #f4f6f8; color: #1e3a5f; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}
.dg-mem-flag {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 11px; font-weight: 600; margin-right: 3px;
}
.dg-mem-flag-del  { background: #f8d7da; color: #721c24; }
.dg-mem-flag-warn { background: #fff3cd; color: #856404; }
.dg-mem-flag-info { background: #e8f0fe; color: #1e3a5f; }

.dev-groups-list {
    display: flex; flex-direction: column; gap: 6px;
}
.dev-groups-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; background: #fafbfd;
    border: 1px solid #e3e8ef; border-radius: 6px;
    font-size: 13px; cursor: pointer; transition: background .12s;
}
.dev-groups-row:hover { background: #f6faff; border-color: #4a9eff; }
.dev-groups-name { flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #1e3a5f; font-weight: 600; }
.dev-groups-arrow { color: #4a9eff; font-weight: 700; }

/* ── Dual-List Komponente ─────────────────────────────────────── */
.dl-host {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}
.dl-col { display: flex; flex-direction: column; min-width: 0; }
.dl-col-head {
    font-size: 12px; font-weight: 600; color: #1e3a5f;
    text-transform: uppercase; letter-spacing: .03em;
    padding: 4px 6px;
}
.dl-search {
    width: 100%; padding: 6px 10px; font-size: 13px;
    border: 1px solid #ccc; border-radius: 4px; margin-bottom: 6px;
}
.dl-list {
    list-style: none; margin: 0; padding: 4px;
    border: 1px solid #e3e8ef; border-radius: 6px;
    background: #fff; min-height: 240px; max-height: 360px;
    overflow-y: auto; flex: 1;
}
.dl-list:focus { outline: 2px solid rgba(74,158,255,.3); outline-offset: -2px; }
.dl-item {
    padding: 6px 10px; border-radius: 4px;
    cursor: pointer; user-select: none;
    border: 1px solid transparent;
}
.dl-item:hover { background: #f6faff; }
.dl-item-active {
    background: #e8f0fe; border-color: #4a9eff;
}
.dl-item-main { font-size: 13px; color: #1e3a5f; font-weight: 500; }
.dl-item-sub { font-size: 12px; color: #5a6a80; margin-top: 2px; }

.dl-controls {
    display: flex; flex-direction: column; gap: 6px;
    justify-content: center; align-items: stretch;
    padding: 0 4px;
}
.dl-controls .btn {
    padding: 4px 10px; font-size: 16px; line-height: 1; min-width: 36px;
}

@media (max-width: 720px) {
    .dl-host {
        grid-template-columns: 1fr;
    }
    .dl-controls { flex-direction: row; justify-content: center; }
    .dl-list { min-height: 180px; }
}

/* ── Device detail (modernised hero + cards) ──────────────────── */

.dd-host { display: flex; flex-direction: column; gap: 16px; }

.dd-hero {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 8px;
    padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
    display: flex; flex-direction: column; gap: 10px;
}
.dd-hero-top {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.dd-hero-title-block { flex: 1; min-width: 0; }
.dd-hero-title {
    font-size: 22px; font-weight: 700; color: #1e3a5f;
    line-height: 1.15; margin: 0; word-break: break-word;
}
.dd-hero-sub {
    color: #5a6a80; font-size: 13px; margin-top: 4px;
    word-break: break-word;
}
.dd-hero-sub-sep { color: #c0cad7; margin: 0 6px; }
.dd-hero-actions {
    display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
}
.dd-hero-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.dd-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px;
    background: #eef2f7; color: #1e3a5f; font-weight: 600;
    white-space: nowrap;
}
.dd-chip-active   { background: #d4edda; color: #155724; }
.dd-chip-inactive { background: #e2e3e5; color: #383d41; }
.dd-chip-maintenance { background: #fff3cd; color: #856404; }
.dd-chip-decommissioned { background: #f8d7da; color: #721c24; }
.dd-chip-warn { background: #fff3cd; color: #856404; }
.dd-chip-soft { background: #f4f6f8; color: #5a6a80; font-weight: 500; }

.dd-cards {
    display: grid; gap: 16px;
    grid-template-columns: 2fr 1fr;
}
.dd-card {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 8px;
    padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0;  /* allow inside content to shrink */
}
.dd-card-wide { grid-column: 1 / -1; }
.dd-card-alert { border-left: 4px solid #c0392b; }
.dd-card-warn  { border-left: 4px solid #e67e22; }

.dd-card-title {
    font-size: 14px; font-weight: 700; color: #1e3a5f;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #eef1f4; padding-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.dd-card-title-alert { color: #c0392b; }
.dd-card-title-warn  { color: #b35a00; }

.dd-grid {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 6px 14px; font-size: 13px;
}
.dd-grid-key { color: #5a6a80; font-weight: 600; }
.dd-grid-val { color: #1e3a5f; min-width: 0; word-break: break-word; }

/* Two-column card grid for technical fields, collapses on mobile. */
.dd-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
}
.dd-fields-row {
    display: grid; grid-template-columns: minmax(120px, 35%) 1fr;
    gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid #f4f6f8;
    font-size: 13px;
}
.dd-fields-row:last-child { border-bottom: none; }
.dd-fields-key { color: #5a6a80; font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-fields-val { color: #1e3a5f; min-width: 0; word-break: break-word; }

.dd-group-title {
    font-size: 12px; font-weight: 700; color: #5a6a80;
    text-transform: uppercase; letter-spacing: .04em;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid #eef1f4;
    grid-column: 1 / -1;
}
.dd-group-title:first-child {
    margin-top: 0; padding-top: 0; border-top: none;
}

.dd-bool-yes {
    display: inline-block; padding: 1px 8px; border-radius: 3px;
    background: #d4edda; color: #155724;
    font-size: 12px; font-weight: 600;
}
.dd-bool-no {
    display: inline-block; padding: 1px 8px; border-radius: 3px;
    background: #f4f6f8; color: #5a6a80;
    font-size: 12px; font-weight: 600;
}
.dd-bool-no-warn {
    display: inline-block; padding: 1px 8px; border-radius: 3px;
    background: #fff3cd; color: #856404;
    font-size: 12px; font-weight: 600;
}

.dd-empty {
    color: #8a96a8; font-size: 13px; font-style: italic;
}
.dd-show-empty-toggle {
    margin-top: 6px; font-size: 12px; color: #4a9eff;
    cursor: pointer; display: inline-block;
}
.dd-show-empty-toggle:hover { text-decoration: underline; }

.dd-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-group-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 6px;
    background: #f4f6f8; border: 1px solid #e3e8ef;
    color: #1e3a5f; font-size: 13px; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.dd-group-chip:hover { background: #eef5ff; border-color: #4a9eff; }
.dd-group-chip-type {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    background: #fff; color: #5a6a80; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
    border: 1px solid #e3e8ef;
}

.dd-qr-block {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
}
.dd-qr-block img {
    max-width: 220px; height: auto; border-radius: 4px;
}
.dd-qr-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    justify-content: center; margin-top: 8px;
}
.dd-qr-actions .btn { font-size: 12px; padding: 4px 10px; }

/* Responsive: collapse to one column at narrower widths. */
@media (max-width: 900px) {
    .dd-cards { grid-template-columns: 1fr; }
    .dd-fields-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .dd-hero { padding: 14px 16px; }
    .dd-hero-title { font-size: 19px; }
    .dd-grid { grid-template-columns: 1fr; }
    .dd-grid-key { color: #5a6a80; font-size: 12px; }
}

/* ── Wiki ───────────────────────────────────────────────────────
   Liste, Detail, Editor, Revisionen. Markdown-rendered HTML
   bekommt Basis-Styling, damit der Text auch ohne Theme angenehm
   lesbar ist. */

/* Wiki-Listenansicht als Dokument-Karten — Titel oben, Kurzfassung
   ueber die volle Breite (2-3 Zeilen begrenzt via line-clamp),
   Meta-Zeile am Ende als Sammelpunkt fuer Status/Tags/Datum.
   Eine zusammenhaengende Karte pro Seite ist visuell ruhiger als
   eine Tabelle mit verstreuten Spalten. */
.wiki-cards {
    display: flex; flex-direction: column; gap: 8px;
    padding: 4px 0;
}
.wiki-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; cursor: pointer;
    border: 1px solid #e3e8ef; border-radius: 6px;
    background: #fff; transition: border-color .12s, box-shadow .12s;
    outline: none;
}
.wiki-card:hover, .wiki-card:focus-visible {
    border-color: #4a9eff;
    box-shadow: 0 1px 3px rgba(74, 158, 255, .14);
}
.wiki-card-title {
    margin: 0; font-size: 16px; font-weight: 600; color: #1e3a5f;
    line-height: 1.3; word-break: break-word;
}
.wiki-card-summary {
    margin: 0; color: #5a6a80; font-size: 13px; line-height: 1.4;
    /* 2-3 Zeilen-Begrenzung; lange Zusammenfassungen werden in der
       Liste sauber abgeschnitten und sind in der Detailansicht
       voll lesbar. */
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.wiki-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 2px;
}
.wiki-card-tags {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
}
.wiki-card-ts {
    color: #8a96a8; font-size: 12px; margin-left: auto;
}
@media (max-width: 600px) {
    .wiki-card { padding: 10px 12px; }
    .wiki-card-title { font-size: 15px; }
    /* Datum ruckt unter die Status/Tag-Chips, statt sich an den
       rechten Rand zu druecken — auf Mobile sonst optisch losgeloest. */
    .wiki-card-ts { margin-left: 0; flex-basis: 100%; }
    .wiki-card-summary { -webkit-line-clamp: 2; line-clamp: 2; }
}
.wiki-tag, .wiki-tags .wiki-tag {
    display: inline-block; font-size: 11px;
    background: #eef2f8; color: #1e3a5f;
    border-radius: 10px; padding: 1px 8px; margin-right: 4px;
}
.wiki-status {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; margin-right: 6px;
}
.wiki-status-published { background: #d4edda; color: #155724; }
.wiki-status-draft     { background: #fff3cd; color: #856404; }
.wiki-status-archived  { background: #e2e3e5; color: #383d41; }
.wiki-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 8px 0 16px; padding: 8px 12px;
    background: #f4f6f8; border-radius: 4px;
}
.wiki-summary { color: #1e3a5f; font-style: italic; }
.wiki-ts { color: #8a96a8; font-size: 12px; margin-left: auto; }
.wiki-content {
    line-height: 1.55; color: #1e3a5f;
}
/* Erstes Element der Wiki-Seite — kein extra Margin-Top, sonst
   "Ueberschrift faellt nach unten" beim ersten H1/H2. */
.wiki-content > *:first-child { margin-top: 0; }
.wiki-content h1, .wiki-content h2, .wiki-content h3 {
    color: #1e3a5f; margin-bottom: .45em;
}
.wiki-content h1 {
    font-size: 22px; margin-top: 1.4em;
    border-bottom: 1px solid #e3e8ef; padding-bottom: 4px;
}
.wiki-content h2 { font-size: 18px; margin-top: 1.7em; }
.wiki-content h3 { font-size: 15px; margin-top: 1.4em; }
.wiki-content p {
    margin: 0 0 .85em 0;
}
/* Listen-Typografie nur innerhalb des gerenderten Wiki-Inhalts —
   kein globales ``ul``/``ol``-Override, das wuerde Toolbars,
   Detail-Karten und Filterleisten anderer Module aendern.
   ``padding-left: 1.75rem`` haelt die Bullets klar im Inhaltsbereich,
   ohne sie ans Glied der Karte zu druecken. */
.wiki-content ul, .wiki-content ol {
    margin: .85em 0;
    padding-left: 1.75rem;
}
.wiki-content li {
    margin-bottom: .35em;
    line-height: 1.6;
}
.wiki-content li:last-child { margin-bottom: 0; }
.wiki-content li > ul, .wiki-content li > ol {
    margin: .3em 0;
    padding-left: 1.4rem;
}
.wiki-content code { background: #f4f6f8; padding: 1px 5px; border-radius: 3px; font-size: 90%; }
.wiki-content pre {
    background: #1e2a3a; color: #f4f6f8;
    padding: 10px 14px; border-radius: 4px;
    overflow-x: auto;
    margin: .9em 0;
}
.wiki-content pre code { background: transparent; color: inherit; padding: 0; }
.wiki-content table { border-collapse: collapse; margin: .9em 0; }
.wiki-content th, .wiki-content td {
    border: 1px solid #e3e8ef; padding: 6px 10px; text-align: left;
}
.wiki-content blockquote {
    border-left: 3px solid #c7d6ec; padding-left: 12px; color: #5a6a80;
    margin: .85em 0; margin-left: 0;
}
/* Wiki-Inline-Bilder. ``max-width: 100%`` haelt Bilder im
   Inhaltsbereich — auch wenn das Original riesig ist. ``height:
   auto`` bewahrt das Seitenverhaeltnis. ``display: block`` mit
   moderatem ``margin`` setzt Bilder als eigenstaendigen Absatz. */
.wiki-content .wiki-img {
    display: block; max-width: 100%; height: auto;
    margin: .9em 0; border: 1px solid #e3e8ef;
    border-radius: 4px; background: #f4f6f8;
}
@media (max-width: 600px) {
    /* Auf schmalen Displays etwas weniger Einzug, damit verschachtelte
       Listen den Textrand nicht zu weit nach rechts schieben — der
       Inhaltsbereich bleibt aber klar (1.4rem ≈ 22px). */
    .wiki-content ul, .wiki-content ol { padding-left: 1.4rem; }
    .wiki-content li > ul, .wiki-content li > ol { padding-left: 1.1rem; }
}
.wiki-md-area { min-height: 240px; font-family: ui-monospace, monospace; }
/* Drag-Highlight wird per JS gesetzt, wenn eine Datei ueber die
   Textarea gezogen wird. Dezent — nur farbiger Rahmen, kein
   Layout-Shift. */
.wiki-md-area.wiki-md-drop {
    border-color: #4a9eff; box-shadow: 0 0 0 2px rgba(74, 158, 255, .2);
    background: #f4faff;
}
.wiki-preview {
    min-height: 100px; border: 1px solid #e3e8ef;
    border-radius: 4px; padding: 12px;
    background: #fafbfd;
}

/* Editor: Wiki-Anhaenge-Block — schmale Toolbar, kompakte Liste mit
   Thumbnails, Insert-Buttons. Drag-Highlight liegt direkt auf der
   Textarea (siehe ``.wiki-md-drop`` weiter unten). */
.wiki-att-block {
    border: 1px solid #e3e8ef; border-radius: 4px;
    padding: 10px 12px; background: #fafbfd;
}
.wiki-att-hint { color: #6a7a90; font-size: 13px; }
.wiki-att-toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 8px;
}
.wiki-att-status { color: #1e3a5f; font-size: 12px; }
.wiki-att-status-error { color: #b00020; }
.wiki-att-list {
    display: flex; flex-direction: column; gap: 6px;
}
.wiki-att-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; background: #fff;
    border: 1px solid #e3e8ef; border-radius: 4px;
}
.wiki-att-thumb {
    width: 56px; height: 56px; object-fit: cover;
    border: 1px solid #e3e8ef; border-radius: 3px;
    background: #f4f6f8;
}
.wiki-att-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    background: #1e3a5f; color: #fff; border-radius: 3px;
    font-weight: 600; font-size: 12px; letter-spacing: .04em;
}
.wiki-att-meta { flex: 1; min-width: 0; }
.wiki-att-name {
    font-weight: 600; color: #1e3a5f;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiki-att-sub { color: #8a96a8; font-size: 12px; }
.wiki-att-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wiki-att-actions .btn { padding: 3px 10px; font-size: 12px; }
/* Detail-Ansicht: Anhangsblock unter dem Artikel — schmal, ohne
   Border-Top doppelt mit dem Artikel zusammenzuruecken. */
.wiki-detail-attach {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid #e3e8ef;
}
.wiki-detail-attach .section-title { margin-bottom: 8px; }
.wiki-detail-attach .wiki-att-row { background: #fafbfd; }
@media (max-width: 600px) {
    .wiki-att-row { flex-wrap: wrap; }
    .wiki-att-actions { width: 100%; justify-content: flex-end; }
}
.wiki-rev-row {
    display: flex; gap: 12px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #eef1f4;
    cursor: pointer;
}
.wiki-rev-row:hover { background: #f6faff; }
.wiki-rev-num { font-weight: 600; color: #1e3a5f; min-width: 50px; }
.wiki-rev-ts { color: #8a96a8; font-size: 12px; }
.wiki-rev-note { color: #1e3a5f; flex: 1; }
.wiki-rev-detail { margin-top: 16px; border-top: 2px solid #e3e8ef; padding-top: 12px; }
.wiki-rev-head { color: #5a6a80; font-size: 13px; margin-bottom: 8px; }

/* ── Sicherheitsunterweisung ────────────────────────────────────
   Status-Karte, Folien-Viewer, Test-Layout, Ergebnis. */

/* Header-Tab-Badge: kleiner gelber Punkt am Menuepunkt
   "Unterweisung", wenn der Status ``due`` ist. */
.tab-badge {
    display: inline-block;
    margin-left: 6px;
    background: #c83a3a; color: #fff;
    width: 18px; height: 18px; line-height: 18px;
    border-radius: 50%;
    font-size: 11px; font-weight: 700; text-align: center;
    vertical-align: middle;
}

.training-state {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 6px;
    margin-bottom: 14px;
}
.training-state-badge {
    font-weight: 700; padding: 4px 10px; border-radius: 12px;
    font-size: 13px;
}
.training-state-course { color: #5a6a80; font-size: 13px; }
.training-state-valid {
    background: #e6f4ea;
}
.training-state-valid .training-state-badge {
    background: #1e7e34; color: #fff;
}
.training-state-overdue {
    background: #fff3cd;
}
.training-state-overdue .training-state-badge {
    background: #c08400; color: #fff;
}
.training-state-never {
    background: #f8d7da;
}
.training-state-never .training-state-badge {
    background: #c83a3a; color: #fff;
}

.training-status-grid {
    display: grid; grid-template-columns: max-content 1fr;
    gap: 4px 14px; margin: 0 0 12px 0;
    color: #1e3a5f;
}
.training-status-grid dt { color: #5a6a80; }

.training-hint { color: #5a6a80; font-size: 13px; margin-bottom: 12px; }

/* Folien-Viewer */
.training-slides-card { padding: 18px 20px; }
.training-slides-head, .training-slides-foot {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px;
}
.training-slides-foot { margin-top: 12px; }
.training-slides-progress { font-weight: 600; color: #1e3a5f; }
.training-slides-spacer { flex: 1; }
.training-timer {
    flex: 1; text-align: center; color: #5a6a80; font-size: 14px;
}
.training-slide-frame {
    background: #1e2a3a; border-radius: 4px;
    padding: 8px; text-align: center;
    min-height: 300px;
    display: flex; align-items: center; justify-content: center;
}
.training-slide-img {
    max-width: 100%; max-height: 70vh;
    height: auto; display: block;
}

/* Test */
.training-question {
    border: 1px solid #e3e8ef; border-radius: 6px;
    padding: 12px 16px; margin-bottom: 10px;
    background: #fff;
}
.training-question-num {
    font-size: 12px; color: #8a96a8; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.training-question-text {
    font-size: 15px; color: #1e3a5f; margin: 4px 0 10px;
}
.training-question-options {
    display: flex; flex-direction: column; gap: 6px;
}
.training-option {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 8px; border-radius: 4px;
    cursor: pointer;
}
.training-option:hover { background: #f4faff; }
.training-option input { margin-top: 3px; flex-shrink: 0; }

/* Ergebnis */
.training-result-summary {
    padding: 12px 16px; border-radius: 6px;
    margin-bottom: 14px;
}
.training-result-pass { background: #e6f4ea; color: #155724; }
.training-result-fail { background: #f8d7da; color: #721c24; }
.training-result-score { font-size: 18px; }

.training-result-answers .training-answer {
    border-left: 4px solid #cfd8e3; padding: 8px 12px;
    margin-bottom: 8px; background: #fafbfd;
    border-radius: 0 4px 4px 0;
}
.training-result-answers .training-answer-ok {
    border-left-color: #1e7e34;
}
.training-result-answers .training-answer-bad {
    border-left-color: #c83a3a;
}
.training-answer-q { font-weight: 600; color: #1e3a5f; margin-bottom: 4px; }
.training-answer-given, .training-answer-correct, .training-answer-expl {
    font-size: 13px; color: #5a6a80; margin-top: 2px;
}
.training-answer-expl { font-style: italic; }

.training-admin-link { margin-top: 12px; }

/* Admin-Tabelle */
.training-admin-table {
    width: 100%; border-collapse: collapse; background: #fff;
}
.training-admin-table th, .training-admin-table td {
    border: 1px solid #e3e8ef; padding: 6px 10px; text-align: left;
    font-size: 13px;
}
.training-admin-table th { background: #f4f6f8; }
.training-admin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.training-admin-badge-valid { background: #d4edda; color: #155724; }
.training-admin-badge-due { background: #fff3cd; color: #856404; }
.training-admin-badge-overdue { background: #f8d7da; color: #721c24; }
.training-admin-badge-never { background: #e2e3e5; color: #383d41; }
.training-admin-badge-exempt { background: #eef2f8; color: #1e3a5f; }

@media (max-width: 600px) {
    .training-slide-img { max-height: 50vh; }
    .training-status-grid { grid-template-columns: 1fr; }
    .training-status-grid dt { font-weight: 600; margin-top: 4px; }
}

/* ── Formularcenter ─────────────────────────────────────────────
   Kachel-Startansicht, Karten-Liste, Edit-Form. */

.form-center-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.form-center-header .dash-page-title { margin: 0; }
.form-center-intro { color: #5a6a80; margin: 0 0 14px 0; }

/* Admin-Dropzone — gestrichelter Rahmen, hellgrauer Hintergrund.
   Klick oeffnet den File-Picker, Drop oeffnet den Create-Editor
   mit vorausgefuellten Metadaten. */
.fc-dropzone {
    border: 2px dashed #cfd8e3; border-radius: 6px;
    padding: 18px 20px; margin-bottom: 16px;
    background: #fafbfd;
    text-align: center; color: #5a6a80; font-size: 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.fc-dropzone:hover, .fc-dropzone:focus-visible {
    border-color: #4a9eff; background: #f4faff;
    color: #1e3a5f; outline: none;
}
.fc-dropzone-active {
    border-color: #4a9eff; background: #e8f4ff;
    color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(74, 158, 255, .25);
}
.fc-dropzone-icon { font-size: 22px; margin-right: 8px; }
.fc-dropzone-hint {
    display: block; font-size: 12px; color: #8a96a8; margin-top: 6px;
}

/* Editor-File-Row akzeptiert ebenfalls Drop. Highlight identisch
   zur Hauptdropzone. */
.fce-file-row.fce-file-row-drop {
    background: #e8f4ff; outline: 2px dashed #4a9eff;
    outline-offset: 2px; border-radius: 4px;
}

.form-center-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.fc-tile {
    text-align: left; cursor: pointer;
    padding: 12px 14px; border: 1px solid #e3e8ef;
    border-radius: 6px; background: #fff;
    display: flex; flex-direction: column; gap: 4px;
}
.fc-tile:hover, .fc-tile-active {
    border-color: #4a9eff;
    box-shadow: 0 1px 3px rgba(74, 158, 255, .15);
    background: #f4faff;
}
.fc-tile-name { font-weight: 600; color: #1e3a5f; font-size: 15px; }
.fc-tile-count { color: #1e3a5f; font-size: 13px; font-weight: 500; }
.fc-tile-blurb { color: #5a6a80; font-size: 12px; line-height: 1.35; }

.fc-cards { display: flex; flex-direction: column; gap: 10px; }
.fc-card {
    border: 1px solid #e3e8ef; border-radius: 6px;
    background: #fff; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.fc-card-fc-status-archived { opacity: .6; }
.fc-card-fc-status-outdated { border-left: 4px solid #c08400; }

/* Wichtig: ``<header>`` triggert die globale App-Header-Regel
   (dunkelblauer Hintergrund + weisse Schrift, gemeint fuer den
   Top-Bar). Im Karten-Kontext muessen wir Hintergrund und Padding
   neutralisieren — sonst kollidiert die Card-Schrift (dunkelblau)
   mit dem dunkelblauen Header-Hintergrund und der Titel ist nicht
   mehr lesbar. ``color: inherit`` zieht die Card-Default-Farbe
   herein; einzelne Elemente (Titel, Badges) bringen ihre eigenen
   Farben mit. */
.fc-card .fc-card-head {
    background: transparent;
    color: inherit;
    padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.fc-card-title {
    margin: 0; flex: 1; min-width: 220px;
    font-size: 16px; color: #1e3a5f; font-weight: 600;
}
.fc-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.fc-badge-form { background: #d4edda; color: #155724; }
.fc-badge-info { background: #e8f0fe; color: #1e3a5f; }
.fc-badge-template { background: #fff3cd; color: #856404; }
.fc-badge-link { background: #f0e3fb; color: #4b2570; }
.fc-cat-badge { background: #eef2f8; color: #1e3a5f; }
.fc-status-badge { background: #eef2f8; color: #1e3a5f; }
.fc-status-badge-active { background: #d4edda; color: #155724; }
.fc-status-badge-outdated { background: #fff3cd; color: #856404; }
.fc-status-badge-archived { background: #e2e3e5; color: #383d41; }
.fc-card-desc { margin: 0; color: #5a6a80; font-size: 13px; line-height: 1.45; }
.fc-card-meta { color: #5a6a80; font-size: 12px; }
.fc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-tag {
    background: #eef2f8; color: #1e3a5f;
    border-radius: 10px; padding: 1px 8px; font-size: 11px;
}
.fc-card-actions {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.fc-card-actions .btn { padding: 4px 12px; font-size: 13px; }
/* Action-Anchors sind als ``<a class="btn btn-outline">`` gerendert
   und bekommen damit die Btn-Farbe ``#333``. Defensive Sicherung
   fuer den Fall, dass jemand spaeter einen nackten ``<a>`` einbaut
   — sonst faellt er auf den Browser-Default (kraeftiges Blau)
   zurueck und steht ohne Kontrast neben den Buttons. */
.fc-card-actions a { color: #1e3a5f; text-decoration: none; }
.fc-card-actions a.btn { color: #333; }
.fc-warn {
    color: #856404; background: #fff3cd; padding: 4px 8px;
    border-radius: 4px; font-size: 12px;
}
.fc-source-hint { color: #6a7a90; font-size: 12px; font-style: italic; }
.fc-valid { color: #5a6a80; font-size: 12px; }
.fc-valid-expired { color: #b00020; font-weight: 600; }

.fce-file-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fce-file-current { flex: 1; min-width: 200px; color: #5a6a80; font-size: 13px; }
.fce-file-pending { color: #1e3a5f; font-style: italic; }

@media (max-width: 600px) {
    .form-center-tiles { grid-template-columns: 1fr; }
    .fc-card-actions .btn { flex: 1 1 auto; }
}

/* ── Notfall ───────────────────────────────────────────────────
   Alle Notfall-Selektoren sind auf .emergency-* gescopt — keine
   globalen header/a/button-Regeln, damit der Rest der App
   unangetastet bleibt. */
.emergency-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}
.emergency-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 4px;
}
.emergency-title {
    color: #1e3a5f; font-size: 28px; font-weight: 700; margin: 0;
}
.emergency-lead {
    color: #1e3a5f; font-size: 18px; font-weight: 500;
    margin: 4px 0 24px;
}
.emergency-print-btn { white-space: nowrap; }

.emergency-card {
    background: #fff; border-radius: 8px;
    padding: 20px 24px; margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.emergency-card-title {
    margin: 0 0 12px; font-size: 22px; color: #1e3a5f;
}
.emergency-section-title {
    color: #1e3a5f; font-size: 18px; margin: 24px 0 12px;
    border-bottom: 1px solid #d6dee9; padding-bottom: 4px;
}

/* Akut-Karte: hochkontrastig rot, damit sie im Stress sofort
   erkannt wird. Kontrast ratio ~7:1 (Weiss auf #b71c1c). */
.emergency-acute {
    background: #b71c1c; color: #fff; border: 2px solid #b71c1c;
}
.emergency-acute .emergency-card-title { color: #fff; font-size: 26px; }
.emergency-acute-steps {
    margin: 0; padding-left: 24px;
    font-size: 18px; line-height: 1.7;
}
.emergency-acute-steps li { margin-bottom: 4px; }

.emergency-numbers {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.emergency-number-card {
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 2px solid #d6dee9; border-radius: 8px;
    padding: 18px 16px; text-decoration: none; color: #1e3a5f;
    transition: border-color .12s, box-shadow .12s;
}
.emergency-number-card:hover, .emergency-number-card:focus-visible {
    border-color: #4a9eff; outline: none;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.2);
}
.emergency-number-label {
    font-size: 14px; color: #5a6a80; text-align: center;
    margin-bottom: 6px;
}
.emergency-number-value {
    font-size: 36px; font-weight: 700; color: #1e3a5f;
    letter-spacing: 1px;
}
.emergency-number-card.emergency-priority {
    background: #fff5f5; border-color: #b71c1c;
}
.emergency-number-card.emergency-priority .emergency-number-value {
    color: #b71c1c; font-size: 42px;
}

.emergency-helpers {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.emergency-helper-card {
    background: #fff; border: 1px solid #d6dee9; border-radius: 8px;
    padding: 14px 18px; display: flex; flex-direction: column; gap: 6px;
}
.emergency-helper-name {
    color: #1e3a5f; font-size: 16px; font-weight: 600;
}
.emergency-helper-phone {
    color: #1e3a5f; font-size: 26px; font-weight: 700;
    text-decoration: none; letter-spacing: 1px;
}
.emergency-helper-phone:hover, .emergency-helper-phone:focus-visible {
    text-decoration: underline; outline: none;
}

.emergency-defi {
    background: #fffbe6; border: 2px solid #f0c000;
}
.emergency-defi-icon { font-size: 26px; margin-right: 8px; }
.emergency-defi-text {
    margin: 0; font-size: 16px; line-height: 1.5; color: #4a3a00;
}

.emergency-info p { margin: 0 0 12px; line-height: 1.6; color: #1e3a5f; }
.emergency-info-list {
    margin: 0; padding-left: 20px; line-height: 1.7; color: #1e3a5f;
}

/* Notfall ist ein Top-Level-Single-Tab direkt nach Übersicht —
   die rote Schrift haelt ihn auch ohne Hover ueberall sichtbar. */
.tab-bar > button.tab-emergency,
.tab-bar > .tab-entry.tab-emergency {
    color: #b71c1c; font-weight: 600;
}
.tab-bar > .tab-entry.tab-emergency:hover { color: #ff5252; }
.tab-bar > .tab-entry.tab-emergency.active {
    color: #b71c1c; border-bottom-color: #b71c1c;
}

@media (max-width: 600px) {
    .emergency-page { padding: 12px; }
    .emergency-title { font-size: 22px; }
    .emergency-numbers { grid-template-columns: 1fr; }
    .emergency-helpers { grid-template-columns: 1fr; }
    .emergency-number-value { font-size: 32px; }
    .emergency-number-card.emergency-priority .emergency-number-value {
        font-size: 36px;
    }
    .emergency-helper-phone { font-size: 22px; }
    .emergency-acute-steps { font-size: 16px; }
    .emergency-card { padding: 16px; }
}

/* Druckansicht: nur die Notfall-Section bleibt sichtbar. Wir
   ueberschreiben KEINE globalen header/button/a-Regeln, sondern
   verstecken alles ueber visibility — die Selektoren sind alle
   ID- oder klassenscoped. */
@media print {
    body * { visibility: hidden !important; }
    #section-emergency, #section-emergency * { visibility: visible !important; }
    #section-emergency {
        position: absolute; left: 0; top: 0; width: 100%;
    }
    .emergency-print-btn { display: none !important; }
    .emergency-card { box-shadow: none; page-break-inside: avoid; }
    .emergency-numbers, .emergency-helpers { page-break-inside: avoid; }
    @page { margin: 1.5cm; }
}

/* ── Messdaten ──────────────────────────────────────────────── */

.msm-updated {
    font-size: 13px; color: #5a6a80; margin-left: 12px;
    align-self: center;
}
.msm-updated-err { color: #b71c1c; }

.msm-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.msm-card {
    margin: 0; padding: 14px 16px;
    border-left: 4px solid #b0bcce;
    display: flex; flex-direction: column; gap: 6px;
}
.msm-card.msm-ok         { border-left-color: #2e7d32; }
.msm-card.msm-stale      { border-left-color: #e0a800; }
.msm-card.msm-unknown    { border-left-color: #9aa3b2; }
/* Auffälliger als stale, weil Bediener-relevant: */
.msm-card.msm-overrange  { border-left-color: #fb8c00; }
.msm-card.msm-underrange { border-left-color: #fb8c00; }
.msm-card.msm-error      { border-left-color: #c62828; }

.msm-head {
    display: flex; align-items: center; gap: 10px;
    justify-content: space-between;
}
.msm-label {
    font-weight: 600; color: #1e3a5f; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto;
}

.msm-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 3px; text-transform: uppercase;
    letter-spacing: .04em; flex: 0 0 auto;
}
.msm-status-ok         { background: #e6f4ea; color: #1b5e20; }
.msm-status-stale      { background: #fff8e1; color: #8d6e00; }
.msm-status-unknown    { background: #eceff1; color: #455a64; }
.msm-status-overrange  { background: #fff3e0; color: #b54708; }
.msm-status-underrange { background: #fff3e0; color: #b54708; }
.msm-status-error      { background: #ffebee; color: #b71c1c; }

.msm-value {
    margin: 4px 0 2px 0;
    display: flex; align-items: baseline; gap: 6px;
}
.msm-value-num {
    font-size: 22px; font-weight: 700; color: #102a43;
    font-variant-numeric: tabular-nums;
}
.msm-value-unit { font-size: 13px; color: #5a6a80; font-weight: 600; }

.msm-meta {
    font-size: 12px; color: #6a7a90;
    display: flex; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msm-meta-sep { color: #c0c8d3; }

@media (max-width: 600px) {
    .msm-grid { grid-template-columns: 1fr; }
}

/* ── Messdaten-Charts ─────────────────────────────────────── */

.msm-charts {
    margin-top: 24px;
    display: flex; flex-direction: column; gap: 16px;
}

.msm-charts-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 4px;
}
.msm-charts-toolbar-label {
    font-size: 13px; color: #5a6a80; margin-right: 6px;
}
.msm-hours-btn {
    font-size: 12px;
    padding: 4px 12px;
    background: #f6faff;
    border: 1px solid #c8d3e1;
    border-radius: 4px;
    cursor: pointer;
    color: #1e3a5f;
    font-family: inherit;
}
.msm-hours-btn:hover {
    background: #eaf3ff; border-color: #98b4d6;
}
.msm-hours-btn.active {
    background: #1e3a5f; color: #fff; border-color: #1e3a5f;
}

.msm-chart-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 14px 16px 12px 16px;
}
.msm-chart-title {
    font-size: 14px; font-weight: 600; color: #1e3a5f;
    margin-bottom: 8px;
}
.msm-chart-svg {
    width: 100%; height: auto; max-height: 280px;
    display: block;
}
.msm-chart-axis-line { stroke: #c8d3e1; stroke-width: 1; }
.msm-chart-grid      { stroke: #eef1f4; stroke-width: 1; }
.msm-chart-axis-label {
    font-size: 11px; fill: #5a6a80;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.msm-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 8px; font-size: 12px;
    color: #455a64;
}
.msm-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    /* Bei vielen Kryo-Sensoren würden lange Namen die Legende über
       zwei Zeilen treiben.  Cap auf eine vernünftige Maximalbreite —
       der vollständige Name bleibt im title-Attribut sichtbar. */
    max-width: 220px;
}
.msm-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.msm-legend-swatch {
    display: inline-block;
    width: 14px; height: 3px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.msm-chart-note {
    font-size: 12px; color: #b54708;
    margin-top: 6px;
}

/* ── Systemstatus (Admin) ──────────────────────────────────── */

.sys-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sys-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 14px 16px;
}
.sys-card-wide { grid-column: 1 / -1; }
.sys-card-warn { border-left: 4px solid #fb8c00; }

.sys-card-title {
    font-size: 14px; font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f4;
}

.sys-card-body { font-size: 14px; }

.sys-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
}
.sys-stat-row + .sys-stat-row {
    border-top: 1px solid #f6faff;
}
.sys-stat-label {
    color: #5a6a80;
    font-size: 13px;
    flex: 0 0 auto;
}
/* Primary-Zeile: hebt einen Schlüsselwert in einer Karte hervor —
   z.B. "Frei" und "Frei %" in der Speicherplatz-Karte.  Etwas grössere,
   fettere Schrift; sonst dieselbe Flex-Mechanik wie sys-stat-row. */
.sys-stat-row-primary {
    padding: 6px 0;
}
.sys-stat-row-primary > span:not(.sys-stat-label) {
    font-size: 16px;
    font-weight: 600;
    color: #1e3a5f;
}
/* Right-hand value cell: allow shrink so the inner sys-mono can
   wrap inside the card.  Without min-width:0 long file paths force
   the flex row wider than the card and overflow the border. */
.sys-stat-row > span:not(.sys-stat-label) {
    text-align: right;
    min-width: 0;
    flex: 0 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sys-mono {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    background: #f6faff;
    padding: 1px 6px;
    border-radius: 3px;
    color: #1e3a5f;
    /* Long paths wrap instead of overflowing the card — full
       string remains accessible via the title attribute set in
       admin_health.js #_sysMono. */
    overflow-wrap: anywhere;
    word-break: break-all;
    max-width: 100%;
    display: inline-block;
    white-space: normal;
}

.sys-warn {
    color: #b54708;
    font-weight: 600;
}

@media (max-width: 600px) {
    .sys-grid { grid-template-columns: 1fr; }
}