/* Alarmzentrale – Oberfläche im Stil des WebEditors (PointRegistry/web_editor).
   Theme-Variablen --ps-* aus dessen protosim.css, Knöpfe, Tabellen und
   Spaltenmechanik (Sortieren/Breite/Verschieben, pr-table.js) aus dessen
   style.css, Stand 25.10.2026. Kein pico.css: die Zentrale hat nur wenige
   Seiten, die Grundelemente stehen hier direkt. */

:root,
[data-theme="light"] {
  --ps-bg: #ffffff;
  --ps-bg-surface: #f8f9fa;
  --ps-text: #1a1a2e;
  --ps-text-muted: #6c757d;
  --ps-border: #dee2e6;
  --ps-accent: #0077b6;
  --ps-accent-hover: #005f8a;
  --ps-accent-text: #ffffff;
  --ps-status-ok: #0077b6;
  --ps-status-good: #2f9e44;
  --ps-status-warn: #e67e22;
  --ps-status-error: #d63384;
  --ps-status-off: #6c757d;
  --ps-nav-bg: #f0f4f8;
  --ps-nav-text: #1a1a2e;
  --ps-row-hover: #e8f4fd;
  --az-wartung: #6a4fb3;
}
[data-theme="dark"] {
  --ps-bg: #1a1a2e;
  --ps-bg-surface: #252540;
  --ps-text: #e0e0e0;
  --ps-text-muted: #9e9e9e;
  --ps-border: #3d3d5c;
  --ps-accent: #4dabf7;
  --ps-accent-hover: #74c0fc;
  --ps-accent-text: #1a1a2e;
  --ps-status-ok: #4dabf7;
  --ps-status-good: #51cf66;
  --ps-status-warn: #f0a500;
  --ps-status-error: #f06292;
  --ps-status-off: #757575;
  --ps-nav-bg: #16213e;
  --ps-nav-text: #e0e0e0;
  --ps-row-hover: #2a2a4a;
  --az-wartung: #9b85e0;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Grundelemente ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 14px; }                 /* ui-theme.js überschreibt mit pr-fontpx */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: var(--ps-text);
  background: var(--ps-bg);
}
a { color: var(--ps-accent); }
code { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .88em; }
/* Volle Breite wie im WebEditor (Bernd 26.10.): mit einer festen Höchstbreite konnte die Ereignistabelle,
   die breiter als 1200 px ist, nie mit dem Fenster mitwachsen. */
main { padding: 1rem 1.2rem 2rem; }
footer { text-align: center; color: var(--ps-text-muted); font-size: .8rem; padding: 1rem; }
h1 { font-size: 1.45rem; margin: .3rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h1 small, h2 small { color: var(--ps-text-muted); font-weight: 400; font-size: .75em; }
.klein, .page-intro { font-size: .85rem; color: var(--ps-text-muted); }
a.klein { margin-left: .5rem; font-weight: 400; }
details summary { cursor: pointer; }
details summary:hover { color: var(--ps-accent); }

/* Kopfzeile (wie nav.ps-nav im WebEditor) -------------------------------- */
nav.ps-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem;
  background: var(--ps-nav-bg); color: var(--ps-nav-text);
  border-bottom: 1px solid var(--ps-border);
  padding: .5rem 1.2rem;
  position: sticky; top: 0; z-index: 600;
}
nav.ps-nav a { color: var(--ps-nav-text); text-decoration: none; }
nav.ps-nav a:hover { color: var(--ps-accent); }
nav.ps-nav .marke { font-weight: 700; font-size: 1.1rem; color: var(--ps-accent); }
nav.ps-nav .links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }
nav.ps-nav .links .sub-active { color: var(--ps-accent); font-weight: 600; }
nav.ps-nav .rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.badge-ok { background: color-mix(in srgb, var(--ps-status-ok) 15%, transparent); color: var(--ps-status-ok); }
.badge-warn { background: color-mix(in srgb, var(--ps-status-warn) 15%, transparent); color: var(--ps-status-warn); }
.badge-err { background: color-mix(in srgb, var(--ps-status-error) 15%, transparent); color: var(--ps-status-error); font-weight: 700; }
.badge-off { background: color-mix(in srgb, var(--ps-status-off) 15%, transparent); color: var(--ps-status-off); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ps-nav-text); font: inherit; cursor: pointer;
}
.icon-btn:hover { border-color: var(--ps-border); background: var(--ps-bg-surface); color: var(--ps-accent); }
.icon-btn.font-step { width: auto; height: 1.6rem; padding: 0 .4rem; font-size: .82rem; color: var(--ps-text); }

.nav-user-wrap { position: relative; }
.nav-user-menu {
  position: absolute; right: 0; top: calc(100% + .3rem); min-width: 14rem;
  background: var(--ps-bg); color: var(--ps-text);
  border: 1px solid var(--ps-border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding: .3rem; z-index: 650;
}
.nav-user-menu .num-head { padding: .4rem .6rem .5rem; font-weight: 600; border-bottom: 1px solid var(--ps-border); margin-bottom: .2rem; }
.nav-user-menu .num-head small { color: var(--ps-text-muted); font-weight: 400; }
.nav-user-menu .num-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .6rem; margin: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--ps-text); font: inherit; text-align: left;
  cursor: pointer; text-decoration: none;
}
.nav-user-menu .num-item:hover { background: var(--ps-row-hover); color: var(--ps-accent); }
.nav-user-menu .num-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .6rem; }
.nav-user-menu .nav-fontsize { display: inline-flex; gap: .25rem; }

/* Hinweise ---------------------------------------------------------------- */
.meldung { padding: .55rem .85rem; border-radius: 6px; margin-bottom: .9rem; font-size: .9rem; border: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.meldung.ok { border-color: var(--ps-status-good); background: color-mix(in srgb, var(--ps-status-good) 12%, transparent); }
.meldung.fehler { border-color: var(--ps-status-error); background: color-mix(in srgb, var(--ps-status-error) 12%, transparent); }

/* Karten (Parks, Formulare) ---------------------------------------------- */
.karte {
  background: var(--ps-bg-surface); border: 1px solid var(--ps-border);
  border-left-width: 6px; border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.karte.schmal { max-width: 24rem; }
.park.scharf { border-left-color: var(--ps-status-good); }
.park.unscharf { border-left-color: var(--ps-status-warn); }
.park.alarm, .park.sabotage { border-left-color: var(--ps-status-error); background: color-mix(in srgb, var(--ps-status-error) 10%, var(--ps-bg-surface)); }
.park.wartung { border-left-color: var(--az-wartung); }
.park.unbekannt { border-left-color: var(--ps-status-off); }

.bereiche { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.zustand {
  display: inline-block; padding: .15rem .65rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  color: var(--ps-accent-text); background: var(--ps-status-off);
}
.zustand.scharf { background: var(--ps-status-good); }
.zustand.unscharf { background: var(--ps-status-warn); }
.zustand.alarm, .zustand.sabotage { background: var(--ps-status-error); }
.zustand.wartung { background: var(--az-wartung); }

/* Knöpfe (.btn wie im WebEditor; gruen/gelb für Scharf/Unscharf) --------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; margin: 0; vertical-align: middle; white-space: nowrap;
  background: var(--ps-accent); color: var(--ps-accent-text);
  border: 1px solid var(--ps-accent); border-radius: 6px;
  padding: 0 .85rem; font: inherit; line-height: 1.2;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ps-accent-hover); border-color: var(--ps-accent-hover); color: var(--ps-accent-text); }
.btn.secondary { background: var(--ps-bg-surface); color: var(--ps-text); border-color: var(--ps-border); }
.btn.secondary:hover { background: var(--ps-bg-surface); border-color: var(--ps-accent); color: var(--ps-accent); }
.btn.gruen { background: var(--ps-status-good); border-color: var(--ps-status-good); }
.btn.gelb { background: var(--ps-status-warn); border-color: var(--ps-status-warn); }
.btn.gruen:hover, .btn.gelb:hover { filter: brightness(.92); background: inherit; }
.btn.gruen:hover { background: var(--ps-status-good); border-color: var(--ps-status-good); }
.btn.gelb:hover { background: var(--ps-status-warn); border-color: var(--ps-status-warn); }
.btn.danger { background: transparent; color: var(--ps-status-error); border-color: var(--ps-status-error); }
.btn.danger:hover { background: color-mix(in srgb, var(--ps-status-error) 12%, transparent); color: var(--ps-status-error); }
.btn.small { height: 1.7rem; padding: 0 .6rem; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* Formularelemente: flach, eine Höhe mit den Knöpfen ----------------------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font: inherit; line-height: 1.25; margin: 0;
  height: 2rem; padding: 0 .5rem;
  border: 1px solid var(--ps-border); border-radius: 5px;
  background: var(--ps-bg); color: var(--ps-text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--ps-accent) 45%, transparent); border-color: var(--ps-accent); }
input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; vertical-align: middle; accent-color: var(--ps-accent); }
label { display: inline-flex; align-items: center; gap: .4rem; }
.knoepfe, .toolbar { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; margin: .5rem 0; }
.knoepfe form, .toolbar form { margin: 0; display: contents; }
/* Gestapeltes Formular (Wartungsfenster): Beschriftung links in fester Breite */
.formular label { display: flex; align-items: center; gap: .5rem; margin: .45rem 0; }
.formular label .lt { flex: 0 0 4.5rem; }
.formular input[type="datetime-local"], .formular input[name="grund"] { width: 20rem; max-width: 100%; }
/* Schmale Karte (Anmeldung, Passwort): Beschriftung über dem Feld */
.karte.schmal label { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; margin: .5rem 0; }
.karte.schmal input { width: 100%; }
.karte.schmal .btn { margin-top: .4rem; }

/* Tabellen (table.data wie im WebEditor, advanced = pr-table.js) ----------- */
.table-scroll { overflow-x: auto; margin: .3rem 0 1rem; }
/* min-width: pr-table.js setzt nach einem Spaltenziehen table-layout: fixed und eine feste Pixelbreite (inline);
   die Tabelle soll trotzdem mindestens den Kasten füllen und mit dem Fenster wachsen (Bernd 26.10.).
   Den Abgleich der Spaltenbreiten dazu macht app.js. */
table.data {
  width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--ps-bg); border: 1px solid var(--ps-border); border-radius: 8px;
  font-size: .9rem;
}
table.data th, table.data td {
  padding: .22rem .55rem; border-bottom: 1px solid var(--ps-border);
  text-align: left; vertical-align: middle;
  height: 2.3rem;                           /* alle Zeilen gleich hoch, mit oder ohne Bedienelemente */
}
table.data tbody tr:last-child td { border-bottom-color: transparent; }
table.data th {
  background: var(--ps-bg-surface); font-weight: 600; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.data thead th:first-child { border-top-left-radius: 7px; }
table.data thead th:last-child { border-top-right-radius: 7px; }
table.data td { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover td { background: var(--ps-row-hover); }
table.data td.leer { text-align: center; color: var(--ps-text-muted); padding: 1rem; }
/* Jede Zeile einzeilig (wie im WebEditor; Spalten lassen sich breiter ziehen, die Tabelle scrollt
   waagerecht). Nur geöffnete Details (Topic + Rohdaten der Meldung) dürfen umbrechen. */
table.data td details[open] { white-space: normal; }
table.data td details[open] code { display: block; margin-top: .15rem; white-space: pre-wrap; word-break: break-all; }
/* Lange Zellen (Mail-Empfänger, Rohnachricht) mit Ellipse kürzen; der volle Text steht im title (Tooltip).
   max-width auf der Zelle selbst hält Chromium bei automatischem Tabellenlayout nicht ein, daher ein span. */
table.data .kurz { display: inline-block; max-width: max(20rem, 22vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
table.data .kurz.lang { max-width: max(44rem, 50vw); }
/* Mailstufen-Tönung (nach dem Hover deklariert, damit die Tönung beim Hover bleibt) */
table.data tr.stufe-leitstelle td { background: color-mix(in srgb, var(--ps-status-error) 12%, transparent); }
table.data tr.stufe-intern td { background: color-mix(in srgb, var(--ps-status-warn) 12%, transparent); }
/* Bedienelemente in Zellen: flacher als außerhalb */
table.data td input:not([type="checkbox"]), table.data td select { height: 1.7rem; padding: 0 .4rem; line-height: 1.2; }
table.data td .btn { height: 1.7rem; padding: 0 .6rem; font-size: .82rem; }
table.data td .btn + .btn, table.data td input + .btn { margin-left: .3rem; }
table.data th.actions, table.data td.actions { white-space: nowrap; width: 1%; text-align: right; overflow: visible; text-overflow: clip; }

/* Spaltenmechanik (Sortieren / Breite ändern / Verschieben) — wie WebEditor */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 1.2rem; }
th.sortable::after {
  content: '\21C5'; position: absolute; right: .3rem;
  top: 50%; transform: translateY(-50%);
  opacity: .4; font-size: .75rem;
}
th.sortable.sort-asc::after { content: '\2191'; opacity: 1; }
th.sortable.sort-desc::after { content: '\2193'; opacity: 1; }
table.advanced { table-layout: auto; }
table.advanced th { position: relative; user-select: none; white-space: nowrap; }
table.advanced th[draggable="true"] { cursor: grab; }
table.advanced th.dragging { cursor: grabbing; opacity: .5; }
table.advanced th.drop-target { box-shadow: inset 3px 0 0 var(--ps-accent); }
table.advanced td { overflow: hidden; text-overflow: ellipsis; }
table.advanced td:has(details[open]) { overflow: visible; text-overflow: clip; }
.col-resize-handle {
  position: absolute; top: 0; right: 0; width: 5px; height: 100%;
  cursor: col-resize; user-select: none; background: transparent;
}
.col-resize-handle:hover { background: var(--ps-accent); opacity: .4; }
button.reset-layout {
  margin: 0; padding: .05rem .45rem; font-size: 1rem; line-height: 1.1;
  background: transparent; color: var(--ps-text-muted);
  border: 1px solid var(--ps-border); border-radius: 3px; cursor: pointer;
}
button.reset-layout:hover { background: var(--ps-bg-surface); color: var(--ps-accent); border-color: var(--ps-accent); }

/* Schmale Bildschirme ------------------------------------------------------ */
@media (max-width: 700px) {
  nav.ps-nav { padding: .4rem .7rem; gap: .3rem .8rem; }
  nav.ps-nav .rechts { margin-left: 0; }
  main { padding: .6rem .7rem 1.5rem; }
  .formular input[type="datetime-local"], .formular input[name="grund"] { width: 100%; }
}