/* FOK – minimaler Stil (§3 Designsprache: gedecktes Blaugrau, 8 px-Ecken, WCAG-AA).
   Wird in späteren Phasen ausgebaut. */
:root {
  --fok-bg: #f4f6f8;
  --fok-surface: #ffffff;
  --fok-text: #1a2530;
  --fok-muted: #5a6b7a;
  --fok-border: #d6dde4;
  --fok-accent: #2f5d7a;
  --fok-accent-hover: #244a63;
  --fok-radius: 8px;
  --fok-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 4px 12px rgba(20, 30, 40, .04);
  /* Statusfarben – WCAG-AA-Kontrast (Text auf zugehörigem -bg) */
  --fok-erfolg: #1b5e2f;        --fok-erfolg-bg: #d7f0df;
  --fok-fehler: #8a1f1f;        --fok-fehler-bg: #f7d9d9;
  --fok-warnung: #74510a;       --fok-warnung-bg: #f7eccf;
  --fok-info-bg: #e6eef4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fok-bg: #141a20;
    --fok-surface: #1d262f;
    --fok-text: #e6ecf2;
    --fok-muted: #93a3b3;
    --fok-border: #2c3742;
    --fok-accent: #6da3c0;
    --fok-accent-hover: #88b9d2;
    --fok-erfolg: #8fe0a8;      --fok-erfolg-bg: #15331f;
    --fok-fehler: #f2a0a0;      --fok-fehler-bg: #3a1a1a;
    --fok-warnung: #e8c97a;     --fok-warnung-bg: #332a12;
    --fok-info-bg: #22303c;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }  /* native Widgets (select/date) ziehen im Dunkelmodus mit */
html, body { margin: 0; padding: 0; }
body {
  background: var(--fok-bg);
  color: var(--fok-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.fok-header {
  background: var(--fok-surface);
  border-bottom: 1px solid var(--fok-border);
}
.fok-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fok-header__brand {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fok-text);
  text-decoration: none;
  font-size: 1.1rem;
}
.fok-header__nav { display: flex; gap: 16px; align-items: center; }
.fok-header__user { color: var(--fok-muted); }
.fok-header__logoutform { margin: 0; }

.fok-main { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }

.fok-lead { color: var(--fok-muted); }

.fok-card {
  background: var(--fok-surface);
  border: 1px solid var(--fok-border);
  border-radius: var(--fok-radius);
  padding: 24px;
  box-shadow: var(--fok-shadow);
}
.fok-card--narrow { max-width: 380px; margin: 40px auto; }

.fok-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.fok-label { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; color: var(--fok-muted); }
.fok-label input {
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border);
  background: var(--fok-bg);
  color: var(--fok-text);
}
.fok-label input:focus { outline: 2px solid var(--fok-accent); outline-offset: 1px; }

.fok-btn {
  appearance: none;
  font: inherit;
  padding: 10px 16px;
  border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border);
  background: var(--fok-surface);
  color: var(--fok-text);
  cursor: pointer;
}
.fok-btn--primary {
  background: var(--fok-accent);
  border-color: var(--fok-accent);
  color: #fff;
}
.fok-btn--primary:hover { background: var(--fok-accent-hover); border-color: var(--fok-accent-hover); }

.fok-link {
  background: none; border: none; padding: 0;
  color: var(--fok-accent); cursor: pointer; font: inherit;
}
.fok-link:hover { color: var(--fok-accent-hover); }

.fok-messages { list-style: none; padding: 0; }
.fok-messages__item {
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: var(--fok-radius);
  background: var(--fok-surface);
  border: 1px solid var(--fok-border);
}
.fok-messages__item--success { background: var(--fok-erfolg-bg); color: var(--fok-erfolg); border-color: transparent; }
.fok-messages__item--error   { background: var(--fok-fehler-bg); color: var(--fok-fehler); border-color: transparent; }
.fok-messages__item--warning { background: var(--fok-warnung-bg); color: var(--fok-warnung); border-color: transparent; }

/* --- Zugänglichkeit --- */
.fok-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Header: Inbox-Link + Zähler-Badge --- */
.fok-header__inbox { color: var(--fok-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.fok-header__inbox:hover { color: var(--fok-accent); }
.fok-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--fok-accent); color: #fff;
  font-size: .78rem; font-weight: 600;
}
.fok-badge--leer { display: none; }

/* --- Header-„+"-Dropdown (details/summary, tastaturbedienbar) --- */
.fok-plus { position: relative; }
.fok-plus__btn {
  list-style: none; cursor: pointer; user-select: none;
  width: 34px; height: 34px; border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border); background: var(--fok-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; color: var(--fok-text);
}
.fok-plus__btn::-webkit-details-marker { display: none; }
.fok-plus__btn:hover { border-color: var(--fok-accent); color: var(--fok-accent); }
.fok-plus__btn:focus-visible { outline: 2px solid var(--fok-accent); outline-offset: 2px; }
.fok-plus__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 200px; padding: 6px;
  background: var(--fok-surface); border: 1px solid var(--fok-border);
  border-radius: var(--fok-radius); box-shadow: var(--fok-shadow);
}
.fok-plus__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: 6px;
  background: none; color: var(--fok-text); font: inherit; cursor: pointer; text-decoration: none;
}
.fok-plus__item:hover, .fok-plus__item:focus-visible { background: var(--fok-bg); }

/* --- Seitenkopf --- */
.fok-seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --- Dialog/Overlay (mobil: scrollbar, Footer erreichbar) --- */
.fok-dialog {
  border: none; border-radius: var(--fok-radius); padding: 0;
  width: min(560px, 92vw); max-height: 88vh;
  background: var(--fok-surface); color: var(--fok-text); box-shadow: var(--fok-shadow);
}
.fok-dialog::backdrop { background: rgba(10, 16, 22, .55); }
.fok-dialog--schmal { width: min(440px, 92vw); }
.fok-dialog__form { display: flex; flex-direction: column; max-height: 88vh; }
.fok-dialog__titel { margin: 0; padding: 20px 24px 4px; }
.fok-dialog__form > .fok-lead { padding: 0 24px; }
.fok-dialog__body { padding: 16px 24px; overflow-y: auto; }
.fok-dialog__footer {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; background: var(--fok-surface); border-top: 1px solid var(--fok-border);
}

/* --- Tabelle --- */
.fok-tabelle { width: 100%; border-collapse: collapse; margin-top: 16px; }
.fok-tabelle th, .fok-tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fok-border); vertical-align: middle; }
.fok-tabelle th { font-size: .82rem; color: var(--fok-muted); font-weight: 600; }
.fok-tabelle__num { text-align: right; white-space: nowrap; }
.fok-tabelle__aktionen { white-space: nowrap; display: flex; gap: 10px; align-items: center; }

/* --- Leerzustand --- */
.fok-leerzustand {
  margin-top: 24px; padding: 40px; text-align: center;
  border: 1px dashed var(--fok-border); border-radius: var(--fok-radius); color: var(--fok-muted);
}
.fok-leerzustand .fok-btn { margin-top: 12px; }

/* --- Buttons (Zusatz) --- */
.fok-btn--klein { padding: 5px 10px; font-size: .85rem; }
.fok-btn:disabled { opacity: .5; cursor: not-allowed; }
.fok-link--gefahr { color: var(--fok-fehler); }

/* --- OCR-Statusbadge --- */
.fok-ocr { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; padding: 3px 8px; border-radius: 6px; }
.fok-ocr--fertig { background: var(--fok-erfolg-bg); color: var(--fok-erfolg); }
.fok-ocr--fehler { background: var(--fok-fehler-bg); color: var(--fok-fehler); }
.fok-ocr--ausstehend, .fok-ocr--laeuft { background: var(--fok-info-bg); color: var(--fok-muted); }
.fok-ocr--stale { background: var(--fok-warnung-bg); color: var(--fok-warnung); }
.fok-ocr-dublette { display: block; margin-top: 4px; font-size: .8rem; color: var(--fok-warnung); }
.fok-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }

/* Tickets (§17) */
.fok-status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .85rem; }
.fok-status--neu { background: var(--fok-info-bg); color: var(--fok-muted); }
.fok-status--in_arbeit { background: var(--fok-warnung-bg); color: var(--fok-warnung); }
.fok-status--erledigt { background: var(--fok-erfolg-bg); color: var(--fok-erfolg); }
.fok-status--geschlossen { background: var(--fok-info-bg); color: var(--fok-muted); }
.fok-ticket-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fok-ticket-beschreibung { margin-top: 10px; white-space: normal; }
.fok-kommentar { border-top: 1px solid var(--fok-rahmen, #d9dde3); padding: 8px 0; }
.fok-kommentar__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fok-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; animation: fok-spin .8s linear infinite;
}
@keyframes fok-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fok-spin { animation: none; } }

/* --- Formular-Steuerelemente (Übernahme-Maske) --- */
.fok-label select,
.fok-label textarea,
.fok-label input[type="date"],
.fok-label input[type="number"],
.fok-label input[type="text"] {
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border);
  background: var(--fok-bg);
  color: var(--fok-text);
  width: 100%;
}
.fok-label select[multiple] { min-height: 96px; }
.fok-label textarea { resize: vertical; }
.fok-label select:focus, .fok-label textarea:focus, .fok-label input:focus {
  outline: 2px solid var(--fok-accent); outline-offset: 1px;
}
.fok-pflicht { color: var(--fok-fehler); }
.fok-feldfehler { color: var(--fok-fehler); font-size: .88rem; }
.fok-form__footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* --- Hinweise --- */
.fok-hinweis { padding: 12px 14px; border-radius: var(--fok-radius); margin: 12px 0; }
.fok-hinweis--warnung { background: var(--fok-warnung-bg); color: var(--fok-warnung); }
.fok-muted-text { color: var(--fok-muted); font-size: .9rem; }

/* --- Dateiname-Vorschau --- */
.fok-vorschau-box {
  background: var(--fok-bg); border: 1px solid var(--fok-border);
  border-radius: var(--fok-radius); padding: 12px 14px;
}
.fok-vorschau-box__label { display: block; color: var(--fok-muted); font-size: .85rem; margin-bottom: 4px; }
.fok-vorschau-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; color: var(--fok-text); }

/* --- Tabellen-Wrapper (mobil scrollbar) --- */
.fok-tabelle-wrap { overflow-x: auto; }

/* --- Definitionsliste (Detailseite) --- */
.fok-card + .fok-card { margin-top: 16px; }
.fok-card h2 { margin-top: 0; }
.fok-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.fok-dl dt { color: var(--fok-muted); }
.fok-dl dd { margin: 0; }
@media (max-width: 560px) {
  .fok-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .fok-dl dd { margin-bottom: 8px; }
}

/* --- Header-Navlink --- */
.fok-header__navlink { color: var(--fok-text); text-decoration: none; }
.fok-header__navlink:hover { color: var(--fok-accent); }

/* --- Such-/Filterleiste (§7) --- */
.fok-suchleiste {
  background: var(--fok-surface); border: 1px solid var(--fok-border);
  border-radius: var(--fok-radius); padding: 14px; margin: 16px 0;
}
.fok-suchleiste__zeile { display: flex; gap: 10px; }
.fok-suchleiste__zeile input[type="text"], .fok-suchleiste__zeile input:not([type]) {
  flex: 1; font: inherit; padding: 10px 12px; border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border); background: var(--fok-bg); color: var(--fok-text);
}
.fok-filterzeile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-top: 12px;
}
.fok-filter { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--fok-muted); }
.fok-filter select, .fok-filter input {
  font: inherit; font-size: .92rem; padding: 7px 9px; border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border); background: var(--fok-bg); color: var(--fok-text);
}
.fok-filter-status { margin-top: 12px; color: var(--fok-muted); font-size: .9rem; }
@media (max-width: 560px) {
  .fok-suchleiste__zeile { flex-direction: column; }
  .fok-filterzeile { grid-template-columns: 1fr 1fr; }
}

/* --- Fundstelle / Highlight (§7) --- */
.fok-fundstelle { margin-top: 4px; font-size: .85rem; color: var(--fok-muted); }
.fok-fundstelle mark { background: var(--fok-warnung-bg); color: var(--fok-warnung); padding: 0 2px; border-radius: 3px; }

/* --- Paginierung --- */
.fok-pagination { display: flex; align-items: center; gap: 14px; margin: 16px 0; color: var(--fok-muted); }

/* --- Export-Leiste + Fortschritt (§8) --- */
.fok-export-leiste { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.fok-export-status { color: var(--fok-muted); font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; }
.fok-export-status progress { width: 160px; height: 12px; }
.fok-export-fertig { color: var(--fok-erfolg); display: inline-flex; align-items: center; gap: 8px; }
.fok-tabelle td input[type="checkbox"] { width: 18px; height: 18px; }

/* --- Papierkorb / Sofortlöschung (§9) --- */
.fok-btn--gefahr { background: var(--fok-fehler); border-color: var(--fok-fehler); color: #fff; }
.fok-btn--gefahr:hover { filter: brightness(.92); }
.fok-check { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.fok-check input { width: 18px; height: 18px; }

/* --- Hilfe / Versionsinfo (§13) --- */
.fok-versionsinfo { margin-top: 16px; }
.fok-version { padding: 14px 0; border-bottom: 1px solid var(--fok-border); }
.fok-version h2 { margin: 0 0 2px; font-size: 1.1rem; }
.fok-version__datum { margin: 0 0 8px; color: var(--fok-muted); font-size: .85rem; }
.fok-version--neu h2 { color: var(--fok-accent); }

/* --- Verwaltung: Hub-Kacheln (§12) --- */
.fok-kacheln {
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fok-kachel {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: var(--fok-surface); border: 1px solid var(--fok-border);
  border-radius: var(--fok-radius); text-decoration: none; color: var(--fok-text);
}
.fok-kachel:hover { border-color: var(--fok-accent); }
.fok-kachel__titel { font-weight: 600; font-size: 1.05rem; }
.fok-kachel__zahl { color: var(--fok-muted); font-size: .9rem; }
.fok-kachel--inaktiv { opacity: .55; cursor: default; }
.fok-kachel--inaktiv:hover { border-color: var(--fok-border); }

/* --- Nutzerverwaltung (§10/§11) --- */
.fok-header__user { text-decoration: none; }
.fok-header__user:hover { color: var(--fok-accent); }
.fok-status { font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.fok-status--ok  { background: var(--fok-erfolg-bg, #d9f2e3); color: var(--fok-erfolg); }
.fok-status--aus { background: var(--fok-border); color: var(--fok-muted); }
.fok-zeile--inaktiv td { opacity: .55; }
.fok-passwort-wrap { display: flex; gap: 8px; align-items: stretch; }
.fok-passwort-wrap input { flex: 1; }
.fok-passwort-toggle {
  white-space: nowrap; border: 1px solid var(--fok-border); background: var(--fok-surface);
  border-radius: var(--fok-radius); padding: 0 12px; cursor: pointer;
  color: var(--fok-accent); font-size: .85rem;
}
.fok-passwort-toggle:hover { border-color: var(--fok-accent); }

/* ---------- Geräteverzeichnis (Phase 16/1a) ---------- */
/* Status-Abzeichen (nutzt die .fok-status-Basis). */
.fok-status--betrieb      { background: var(--fok-erfolg-bg);  color: var(--fok-erfolg); }
.fok-status--service      { background: var(--fok-warnung-bg); color: var(--fok-warnung); }
.fok-status--defekt       { background: var(--fok-fehler-bg);  color: var(--fok-fehler); }
.fok-status--ausgemustert { background: var(--fok-border);     color: var(--fok-muted); }

/* Verträge (v1.19, Modulkonzept §11): In Anbahnung = ruhiges Blau, Aktiv = Grün, Gekündigt = Gelb, Beendet = Grau. */
.fok-status--in_anbahnung { background: var(--fok-info-bg);    color: var(--fok-accent); }
.fok-status--aktiv        { background: var(--fok-erfolg-bg);  color: var(--fok-erfolg); }
.fok-status--gekuendigt   { background: var(--fok-warnung-bg); color: var(--fok-warnung); }
.fok-status--beendet      { background: var(--fok-border);     color: var(--fok-muted); }

/* Detail: Foto links, Stammdaten rechts (mobil untereinander). */
.fok-geraet-detail { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.fok-geraet-detail .fok-dl { flex: 1 1 320px; }
.fok-geraet-foto { flex: 0 0 200px; }
.fok-geraet-foto__bild {
  max-width: 200px; max-height: 200px; border-radius: var(--fok-radius);
  border: 1px solid var(--fok-border); object-fit: cover;
}
.fok-geraet-foto__platzhalter {
  width: 120px; height: 120px; color: var(--fok-border);
  border: 1px dashed var(--fok-border); border-radius: var(--fok-radius); padding: 16px;
}

/* Notizen + Links am Gerät. */
.fok-notizen { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.fok-notiz {
  border: 1px solid var(--fok-border); border-radius: var(--fok-radius);
  padding: 10px 12px; background: var(--fok-bg);
}
.fok-notiz__titel { display: block; margin-bottom: 2px; }
.fok-notiz__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.fok-links { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.fok-link-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Inline-Label (Checkbox + Text nebeneinander), z. B. Lösch-Bestätigung. */
.fok-label--inline { flex-direction: row; align-items: center; gap: 8px; }

/* ---------- Reiter (§15-Muster, Phase 3a; erster Umsetzer, wiederverwendbar) ---------- */
.fok-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--fok-border); margin: 16px 0 0; }
.fok-tab {
  appearance: none; font: inherit; cursor: pointer;
  padding: 10px 16px; border: 1px solid transparent; border-bottom: none;
  border-radius: var(--fok-radius) var(--fok-radius) 0 0;
  background: none; color: var(--fok-muted);
}
.fok-tab:hover { color: var(--fok-accent); }
.fok-tab[aria-selected="true"] {
  color: var(--fok-text); background: var(--fok-surface);
  border-color: var(--fok-border); margin-bottom: -1px;
}
.fok-tab:focus-visible { outline: 2px solid var(--fok-accent); outline-offset: 2px; }
.fok-tab-panel { padding-top: 16px; }
.fok-tab-panel[hidden] { display: none; }

/* ---------- Gerätehistorie-Zeitleiste (§8, Phase 3a) ---------- */
.fok-zeitleiste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fok-zeitleiste__eintrag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  border-left: 2px solid var(--fok-border); padding: 4px 0 4px 12px;
}
.fok-zeitleiste__datum { color: var(--fok-muted); font-size: .9rem; min-width: 9.5em; }
.fok-zeitleiste__art { font-weight: 600; }

/* ---------- Verschachtelte Kommentare (§12, Phase 3c) ---------- */
.fok-kommentar__antworten {
  margin-left: 20px; border-left: 2px solid var(--fok-border); padding-left: 12px; margin-top: 8px;
}
.fok-kommentar__antwortform > summary {
  cursor: pointer; color: var(--fok-accent); font-size: .9rem; margin-top: 4px; list-style: none;
}
.fok-kommentar__antwortform > summary::-webkit-details-marker { display: none; }
.fok-kommentar__antwortform[open] > summary { margin-bottom: 6px; }
@media (max-width: 560px) { .fok-kommentar__antworten { margin-left: 10px; padding-left: 8px; } }