/* ── Farbschema: Nacht-Modus (Standard) und Tag-Modus ──────────────────────
   Umschaltung über data-theme am <html>-Element (siehe index.html + ui.js).
   Alle Bausteine unten arbeiten ausschließlich mit diesen Variablen, damit ein
   Moduswechsel nirgends nachgezogen werden muss.
   --accent-text ist die Schriftfarbe AUF der Akzentfläche (Primär-Buttons).
   --overlay-soft/-strong sind die dezenten Aufheller/Abdunkler für Hover,
   Signaturfläche usw., die im Tag-Modus umgekehrt wirken müssen. */
:root, :root[data-theme="dark"] {
  --bg: #0F1720;
  --card: #172433;
  --border: #26384A;
  --accent: #E8A020;
  --accent-text: #1a1200;
  --text: #E7EDF3;
  --muted: #7C93A8;
  --danger: #E74C3C;
  --success: #27AE60;
  --overlay-soft: rgba(255,255,255,0.05);
  --overlay-strong: rgba(255,255,255,0.15);
  --placeholder: rgba(255,255,255,0.35);
  --modal-backdrop: rgba(0,0,0,0.6);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F2F5F8;
  --card: #FFFFFF;
  --border: #CBD5DF;
  --accent: #B57300;
  --accent-text: #FFFFFF;
  --text: #16212C;
  --muted: #5A6B7B;
  --danger: #C0392B;
  --success: #1E8449;
  --overlay-soft: rgba(0,0,0,0.05);
  --overlay-strong: rgba(0,0,0,0.15);
  --placeholder: rgba(0,0,0,0.4);
  --modal-backdrop: rgba(0,0,0,0.45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100%;
}
#app { min-height: 100vh; }

/* ── Login ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; max-width: 380px; width: 100%; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0; }

/* ── Shell (eingeloggt) ── */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.shell-header {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; color: var(--accent); }
.user-chip { font-size: 12px; color: var(--muted); }
.shell-body { flex: 1; padding-bottom: 76px; max-width: 900px; margin: 0 auto; width: 100%; }
.shell-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card); border-top: 1px solid var(--border);
  display: flex; overflow-x: auto; z-index: 20;
}
.nav-btn {
  flex: 1; min-width: 64px; background: none; border: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; font-size: 10px; cursor: pointer;
}
.nav-btn.active { color: var(--accent); }
.nav-btn span { white-space: nowrap; }

/* ── Layout basics ── */
.page { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.title { font-size: 22px; font-weight: 700; color: var(--accent); margin: 0; }
.subtitle { font-size: 13px; color: var(--muted); margin: 0 0 8px 0; }
.section-title { font-weight: 600; margin-bottom: 8px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.note { font-size: 12px; color: var(--muted); }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
/* Feldbeschriftungen waren mit 11 px kaum lesbar (03.10.2026 gemeldet: „zu kleine
   Schrift, zu wenig Kontrast“). Eine Auswahlzeile trägt ihren eigenen Text und bleibt
   deshalb so groß wie normaler Text. */
.field label { font-size: 13px; color: var(--muted); }
.field label.radio-row, .field .radio-list label { font-size: 15px; color: var(--text); }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row > * { flex: 1; min-width: 140px; }
/* Bewusst über :not() statt einer Aufzählung der Typen (10.09.2026): tel- und
   email-Felder waren in der alten Aufzählung nicht enthalten und blieben deshalb im
   Browser-Standardlook — schmaler, hell und im Nacht-Modus weiß. Genau das war mit
   "alle Felder gleich groß und gleiche Farbe" gemeint. Mit :not() gilt der Stil auch
   für später hinzukommende Feldtypen. */
/* 16 px ist kein Geschmack, sondern eine Regel von iOS: Bei kleinerer Schrift zoomt
   Safari beim Antippen in das Feld hinein, und der Fahrer muss danach erst wieder
   herauswischen. Draußen am Fahrzeug ist das der Unterschied zwischen „geht" und
   „nervt" (03.10.2026, bei der Prüfung an 178 Feldern aufgefallen). */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  padding: 10px 8px; font-size: 16px; width: 100%; font-family: inherit;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkbox-row input { width: auto; }

/* Der kleine grüne Kreis hinter einer Beschriftung (14.10.2026): Angefasst oder überfahren
   erklärt er, was das Feld bedeutet. Rund, grün, mit einem „i" — groß genug, um ihn auf
   dem Tablet zu treffen (24 px), ohne die Zeile auseinanderzuziehen. */
.info-kreis {
  flex: none; width: 20px; height: 20px; min-width: 20px; padding: 0;
  border: none; border-radius: 50%; background: var(--success); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
  cursor: pointer;
}
.info-kreis:hover, .info-kreis:focus { filter: brightness(1.15); }

/* Prüfstand: die hinterlegten Bilder beim Überfahren (14.10.2026).
   Rein über CSS — die Miniaturen hängen schon im Baum und tragen `loading="lazy"`, also holt
   der Browser sie erst, wenn die Vorschau sichtbar wird. Kein Zeitgeber, kein Zuhörer, nichts,
   was beim Neuaufbau der Karte hängen bleiben könnte. */
.pruef-kachel.hat-bilder { cursor: pointer; position: relative; }
.pruef-vorschau {
  display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
  gap: 4px; padding: 4px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.pruef-kachel.hat-bilder:hover .pruef-vorschau,
.pruef-kachel.hat-bilder:focus-within .pruef-vorschau { display: flex; }
.pruef-vorschau img { height: 72px; width: auto; border-radius: 4px; display: block; }
.pruef-vorschau img.ist-dokument { background: #fff; }
.pruef-vorschau .pdf-feld {
  height: 72px; min-width: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 4px; font-weight: 700; font-size: 12px;
}
.pruef-mehr { align-self: center; padding: 0 4px; font-size: 12px; }

/* Ausgewählte/angehakte Felder waren bei gesperrter (readonly) Checkliste schlecht zu
   erkennen (grauer Haken auf grauem Kästchen) — accent-color sorgt für deutlichen
   Farbkontrast, auch im disabled-Zustand, statt der blassen Browser-Standarddarstellung. */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled {
  opacity: 1;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--overlay-soft);
}

/* ── Buttons ── */
/* Alle Button-Klassen (21.08.2026 auf Nutzerwunsch) explizit auf inline-flex mit zentriertem
   Inhalt umgestellt: garantiert, dass die komplette sichtbare Fläche (inkl. Padding, nicht
   nur Icon/Text-Baseline) klickbar ist und Icon+Text bei mehrzeiligem/kurzem Inhalt sauber
   mittig sitzen, statt am Rand zu "kleben" und dort schwerer treffbar zu wirken. */
.btn-primary, .btn-outline, .btn-icon, .btn-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary { background: var(--accent); color: var(--accent-text); border: none; border-radius: 8px; padding: 12px 16px; font-weight: 700; cursor: pointer; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.btn-outline.accent { color: var(--accent); border-color: var(--accent); }
.btn-outline.danger { color: var(--danger); border-color: var(--danger); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Vorher nur 4px/8px Padding um ein 15px-Icon (~23px Fläche) — auf Touchgeräten wirkte dadurch
   oft nur das Icon selbst treffsicher klickbar. Jetzt min. 40x40px (Empfehlung für Touch-Ziele). */
.btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 8px; min-width: 40px; min-height: 40px; border-radius: 8px; }
.btn-link { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 6px 4px; text-decoration: underline; }
.btn-link:hover { color: var(--accent); }

/* ── Stats / Hub ── */
.stats-row { display: flex; gap: 10px; }
.stat-card { flex: 1; align-items: flex-start; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; }
.hub-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  padding: 16px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px;
}
.hub-icon { font-size: 26px; }

/* ── Tabs ── */
.tab-row-wide { display: flex; gap: 6px; overflow-x: auto; }
.tab-btn { background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 8px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.tab-btn.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ── Lists / entries ── */
.list { display: flex; flex-direction: column; gap: 8px; }
.entry-card { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; }
.entry-card .stripe { width: 4px; flex-shrink: 0; }
.entry-card .body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.entry-card .row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.entry-card .date { font-weight: 700; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty-state .emoji { font-size: 40px; display: block; margin-bottom: 8px; }

.pill { font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }

/* ── Checklist / Damages / Photos ── */
.checklist-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.checklist-label { flex: 1; min-width: 140px; font-size: 13px; }
.chip { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.chip.selected.chip-yes { color: var(--success); border-color: var(--success); background: rgba(39,174,96,0.15); }
.chip.selected.chip-no { color: var(--danger); border-color: var(--danger); background: rgba(231,76,60,0.15); }

.damage-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.damage-badge { background: var(--danger); color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 700; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 8px; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; }

.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.history-item { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.history-action { font-weight: 600; font-size: 13px; }
.history-meta { font-size: 11px; color: var(--muted); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
/* Breiter und lesbarer (03.10.2026 gemeldet: „zu schmal, zu kleine Schrift, zu wenig
   Kontrast“). Auf dem Telefon bleibt es bei der vollen Breite. */
.modal { background: var(--card); border-radius: 10px; padding: 22px; max-width: 620px; width: 100%; max-height: 85vh; overflow-y: auto; }
.modal h3 { margin: 0 0 12px 0; }
.modal p { font-size: 15px; line-height: 1.45; }
.modal-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 14px; align-items: center; }
.modal-actions button { background: none; border: none; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text); }
/* Der Hauptknopf im Dialog war nur Text und wurde übersehen (03.10.2026). */
.modal-actions .btn-primary { background: var(--accent); color: var(--accent-text); border-radius: 8px; padding: 10px 20px; }
.modal-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
.prompt-input { width: 100%; }

/* ── Toast ── */
.toast-host { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; width: calc(100% - 32px); max-width: 480px; }
.toast { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); text-align: center; }

@media (min-width: 700px) {
  .shell-nav { position: sticky; }
}

/* ── Kopfzeile mit Haupt- und Untermenü (11.09.2026) ──
   Ersetzt die frühere Zurück-Leiste. Oben die Hauptpunkte, darunter die Untermenüs des
   aktiven Punkts. Auf schmalen Bildschirmen rutscht das Hauptmenü in eine eigene Zeile und
   ist, wie das Untermenü, waagerecht scrollbar — die Seite selbst scrollt nie seitlich. */
.app-header { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--border); }
.app-header-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap; }
.brand-block { display: flex; flex-direction: column; line-height: 1.2; }
.header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Stützpunktwahl in der Kopfzeile (08.10.2026) — nur sichtbar, wenn ein Zugang für
   mehrere Stützpunkte freigegeben ist. */
.mandant-wahl {
  background: var(--overlay-soft); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; max-width: 150px;
}
.main-menu { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
.main-menu::-webkit-scrollbar { display: none; }
.main-menu-btn {
  background: none; border: none; color: var(--text); cursor: pointer; white-space: nowrap;
  padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit;
}
.main-menu-btn:hover { background: var(--overlay-soft); }
.main-menu-btn.active { color: var(--accent); background: var(--overlay-soft); }
.sub-menu { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 16px; border-top: 1px solid var(--border); scrollbar-width: thin; }
.sub-menu-back { background: none; border: none; color: var(--muted); cursor: pointer; white-space: nowrap; font-size: 13px; padding: 6px 8px 6px 0; margin-right: 4px; font-family: inherit; }
.sub-menu-back:hover { color: var(--accent); }
@media (max-width: 760px) {
  .main-menu { order: 3; flex-basis: 100%; }
}

/* ── Login logo ── */
.login-logo { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 20px; }

/* ── Row helpers ── */
.row-top, .row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.field-label-bold { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; opacity: 0.3; }
.card-flat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.card-flow { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Radio / checkbox lists ── */
.radio-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.radio-row { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; padding: 3px 0; cursor: pointer; }
.radio-row input { width: auto; }
.condition-selector { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

/* ── FAB ── */
.fab {
  position: fixed; right: max(16px, calc(50vw - 450px + 16px)); bottom: 24px;
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  border: none; font-size: 26px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 50;
}

/* ── Damage marking view ── */
.damage-grid-row { display: flex; gap: 8px; margin-bottom: 8px; }
.damage-grid-row .damage-box { flex: 1; }
.damage-box {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  height: 100px; cursor: crosshair; overflow: hidden; min-width: 0;
}
.damage-svg { width: 100%; height: 100%; display: block; }
.damage-box-title { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; color: #000; }
.damage-markers { position: absolute; inset: 0; pointer-events: none; }
.damage-marker {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; background: rgba(231,76,60,0.85);
  border: 1.5px solid #fff; color: #fff; font-size: 10px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; pointer-events: auto; cursor: pointer;
}
.damage-item-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }

/* ── Signature pad ── */
.signature-pad { display: flex; flex-direction: column; gap: 6px; }
.signature-surface-wrap { position: relative; }
.signature-surface { position: relative; height: 200px; background: var(--overlay-soft); border: 1px solid var(--overlay-strong); border-radius: 16px; overflow: hidden; }
.signature-canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.signature-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--placeholder); font-size: 13px; pointer-events: none; }
.signature-clear { position: absolute; top: 8px; right: 8px; background: rgba(231,76,60,0.15); color: var(--danger); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }

/* ── Checklist sections ── */
/* Abstände zwischen den Blöcken der Checkliste etwas größer (11.09.2026 auf Nutzerwunsch):
   vorher 6px zwischen den Abschnitten und 8px je Tabellenzeile — die Blöcke liefen optisch
   ineinander, besonders seit unter jedem Feld Fotos stehen können. */
.checklist-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.checklist-item { border-bottom: 1px solid var(--border); padding: 12px 0; }
.checklist-item-row { display: flex; align-items: center; gap: 8px; }
.checklist-item-note { margin-left: 32px; margin-top: 4px; }
.field-error { color: var(--danger); font-size: 11px; margin-top: 2px; }
.input-error { border-color: var(--danger) !important; }
/* Fehlende Pflichtangaben (29.09.2026): rot umrandet, bis der Benutzer die Stelle anfasst.
   Vorher blitzte die Markierung nur sechs Sekunden auf (.validation-flash, 21.08.2026) — wer
   in der Zeit scrollte, fand die Stelle nicht wieder. outline statt border, damit bestehende
   Rahmen und Radien von Karten und Zeilen unverändert bleiben. */
.feld-fehlt { outline: 2px solid var(--danger); outline-offset: 3px; border-radius: 8px; }
.feld-fehlt input, .feld-fehlt textarea, .feld-fehlt canvas { border-color: var(--danger); }
/* Fortschritt beim Erzeugen eines Protokolls (30.09.2026): unten über allem, auch über
   offenen Fenstern — der Abschluss läuft ja aus einer Maske heraus. */
.fortschritt-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 10000;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; box-shadow: 0 4px 16px #0007;
  max-width: calc(100vw - 32px); text-align: center;
}

.fehlend-liste { margin: 6px 0 0 18px; padding: 0; }
.fehlend-liste li { margin: 3px 0; }

/* ── Release / order photo grid ── */
.photo-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.release-photo-card { position: relative; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--card); }
.release-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.release-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 6px; color: var(--muted); font-size: 12px; }
.release-photo-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); color: #fff; font-size: 11px; padding: 3px 6px; }
.photo-thumb-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; margin: 4px; }

/* ── Foto-Vorschau in der Checkliste (09.09.2026) ──
   Vorher gab es nach einer Aufnahme nur ein grünes Kamera-Icon; das Foto selbst war
   nicht zu sehen. Jetzt steht die Miniatur direkt unter der jeweiligen Zeile. */
/* Hinweis auf eine neue Fassung (16.09.2026) — unten quer, über allem, aber schmal. */
.update-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.update-bar > div:first-child { flex: 1; min-width: 180px; font-weight: 600; }

.photo-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-thumb-box { position: relative; width: 72px; height: 72px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.photo-thumb-box img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
/* Eine PDF-Seite ist hochkant und trägt ihre Aussage oben — Briefkopf, Kennzeichen, Datum.
   In der Mitte beschnitten (dem Normalfall für Fotos) sähe man weißes Papier (17.10.2026). */
.photo-thumb-box img.ist-dokument { object-position: top; cursor: pointer; background: #fff; }
/* Tritt das Wort „PDF" an die Stelle der Seite (älteres Dokument, Zeichnen misslungen), füllt
   es die Kachel genauso aus. */
.photo-thumb-box .pdf-feld {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; cursor: pointer;
}

/* ── Großansicht (Popup) für Fotos, 11.09.2026 ──
   Bewusst in beiden Farbmodi dunkel: Fotos wirken auf dunklem Grund am besten, und das
   Popup soll sich klar von der Seite abheben. */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.lightbox-close { top: 14px; right: 16px; width: 40px; height: 40px; font-size: 20px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 32px; line-height: 1; }
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: 0.85; }
.photo-add { white-space: nowrap; }

/* ── Terminauswahl (eigener Kalender-Dialog statt nativem datetime-local) ── */
.date-field {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  padding: 10px 8px; font-size: 14px; width: 100%; font-family: inherit; text-align: left; cursor: pointer;
}
.date-field.empty { color: var(--placeholder); }
.date-field:disabled { cursor: default; background: var(--overlay-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekday { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
.cal-day {
  background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 6px;
  padding: 8px 0; font-size: 13px; cursor: pointer; min-height: 36px;
}
.cal-day:hover { border-color: var(--accent); }
.cal-day.today { border-color: var(--muted); font-weight: 700; }
.cal-day.selected { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }

/* ── Menus / autocomplete ── */
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item { background: none; border: none; color: var(--text); text-align: left; padding: 10px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.menu-item:hover { background: var(--overlay-soft); }
.menu-item.danger { color: var(--danger); }
.autocomplete-list { display: flex; flex-direction: column; }
.autocomplete-item { padding: 8px; background: var(--card); border: 1px solid var(--border); border-top: none; cursor: pointer; font-size: 13px; }
.autocomplete-item:hover { background: var(--overlay-soft); }

/* Dashboard (11.09.2026) — Kacheln je nach Benutzergruppe, siehe screens-home.js */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.dash-card { gap: 6px; min-width: 0; }
.dash-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 2px 4px; text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; border-top: 1px solid var(--border); }
.dash-row:first-child { border-top: none; }
.dash-row:hover { background: var(--overlay-soft); }
.dash-row.static { cursor: default; }
.dash-row.static:hover { background: none; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.dash-stat { background: var(--overlay-soft); border-radius: 8px; padding: 10px; text-align: center; }
.dash-stat.clickable { cursor: pointer; }
.dash-stat.clickable:hover { background: var(--overlay-strong); }
.dash-stat .n { font-size: 22px; font-weight: 700; color: var(--accent); }
.dash-stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-due-past { color: var(--danger); font-weight: 600; font-size: 13px; }
.dash-due-soon { color: var(--accent); font-size: 13px; }

/* Admin → Benutzergruppen (11.09.2026) */
.access-table-wrap { overflow-x: auto; }
.access-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.access-table th { text-align: center; font-size: 13px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.access-table th:first-child { text-align: left; }
.access-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.access-table td.center { text-align: center; width: 90px; }
.access-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.access-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; }
/* Admin → Sprache (13.09.2026): Sprachtabelle, einspaltig und großflächig, damit sie auch
   auf dem Telefon zu bedienen ist. */
.lang-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lang-group { border: 1px solid var(--border); border-radius: 8px; background: var(--card); overflow: hidden; }
.lang-group > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none;
}
.lang-group > summary::-webkit-details-marker { display: none; }
.lang-group > summary::before { content: "▸"; color: var(--muted); margin-right: 6px; }
.lang-group[open] > summary::before { content: "▾"; }
.lang-group > summary:hover { background: var(--overlay-soft); }
.lang-group-body { display: flex; flex-direction: column; }
.lang-row { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.lang-row.geaendert { border-left: 3px solid var(--accent); }
.lang-de { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lang-marke { font-size: 11px; color: var(--accent); background: var(--overlay-soft); padding: 1px 6px; border-radius: 4px; }
.lang-en { display: flex; gap: 8px; align-items: center; }
.lang-en input { flex: 1; min-width: 0; }
.lang-actions { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
@media (min-width: 760px) {
  .lang-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
}

/* Tankstellensuche (13.09.2026) */
.fuel-start { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fuel-start button { flex: 1 1 200px; }
.fuel-start select { flex: 0 1 160px; }
.fuel-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.fuel-map { height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--overlay-soft); }
.fuel-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fuel-badge { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--overlay-soft); color: var(--muted); }
.fuel-badge.cng { background: rgba(39,174,96,0.18); color: #27AE60; }
.leaflet-container { font: inherit; }

/* Dashboard-Kopf mit dem Tankstellen-Knopf (13.09.2026): Der Knopf steht rechts neben der
   Begrüßung und rutscht auf schmalen Bildschirmen darunter. */
.dash-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-tank { white-space: nowrap; }
@media (max-width: 560px) {
  .dash-tank { width: 100%; }
}

/* Tankstellensuche: Legende unter der Karte (13.09.2026) */
.fuel-kartenzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fuel-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fuel-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fuel-legende .punkt { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.fuel-legende .punkt.eigen { background: #7B4FD3; box-shadow: 0 0 0 2px #FFFFFF inset; }
.fuel-legende .punkt.start { background: #E8A020; }
.fuel-legende .punkt.cng { background: #27AE60; }
.fuel-legende .punkt.normal { background: #3498DB; }

/* Durchgehende Auftragsnummer vor dem Kennzeichen (19.09.2026). */
.order-no { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* Prüfstand in der Fahrzeugakte — die Compliance-Zeile der Excel auf einen Blick (19.09.2026). */
.pruef-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.pruef-kachel { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 5px 8px; font-size: 13px; }

/* Fotosatz in der Fahrzeugakte (19.09.2026). */
.fotosatz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.fotosatz-feld { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; }
.fotosatz-feld.belegt { border-color: var(--accent); }
.fotosatz-bild { position: relative; width: 100%; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 6px; overflow: hidden; background: var(--overlay-soft); display: flex; align-items: center; justify-content: center; }
.fotosatz-bild img { width: 100%; height: 100%; object-fit: cover; }
.fotosatz-beispiel { opacity: 0.35; filter: grayscale(0.6); }
.fotosatz-leer { font-size: 22px; opacity: 0.5; }
.fotosatz-anzahl { position: absolute; top: 4px; right: 4px; background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.fotosatz-titel { font-size: 12px; font-weight: 600; line-height: 1.2; }
.fotosatz-hinweis { font-size: 11px; color: var(--muted); }
.fotosatz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.fotosatz-miniatur { display: flex; flex-direction: column; gap: 3px; padding: 0; border: none; background: none; cursor: pointer; text-align: left; }
.fotosatz-miniatur img { width: 100%; aspect-ratio: 3 / 4; max-width: 100%; object-fit: cover; border-radius: 6px; }

/* Bilderliste (19.09.2026): ohne Vorschau reine Textzeilen, mit Vorschau ein kleines Bild davor. */
.bild-zeile { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; }
.bild-vorschau { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--overlay-soft); }
.bild-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.bild-dateiname { word-break: break-all; opacity: 0.8; }

/* Sentinel-Ansicht (20.09.2026): Tabelle in der Form der Kunden-Excel — viele Spalten,
   deshalb waagerecht scrollbar mit feststehender Kopfzeile. */
.sentinel-tabelle { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.sentinel-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.sentinel-table th, .sentinel-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.sentinel-table th { position: sticky; top: 0; background: var(--card); z-index: 1; font-weight: 700; }
.sentinel-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sentinel-table tbody tr:nth-child(even) { background: var(--overlay-soft); }
.sentinel-de { font-size: 10px; font-weight: 400; color: var(--muted); }

/* Gesetzte Haken grün (26.09.2026 auf Nutzerwunsch: „damit man sie besser sieht") — ein
   angekreuztes Feld hebt sich jetzt deutlich vom leeren ab, statt im Orange der Oberfläche
   mitzuschwimmen. Etwas größer sind sie zusätzlich, das hilft auf dem Telefon. Optionsfelder
   (Radio) bleiben in der Akzentfarbe: Dort ist immer genau eines gewählt. */
input[type=checkbox] { width: 17px; height: 17px; }
input[type=checkbox]:checked { accent-color: var(--success); }

/* Gesperrte Felder zeichnet Chrome grau, auch wenn accent-color gesetzt ist — bei
   abgeschlossenen Aufträgen wäre das Grün also wirkungslos gewesen. Deshalb übernimmt die
   Oberfläche hier die Zeichnung selbst: grünes Kästchen mit weißem Haken, in jedem Zustand
   gleich (26.09.2026). */
input[type=checkbox]:disabled:checked {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: none;
  border-radius: 4px;
  background: var(--success);
  position: relative;
  opacity: 1;
}
input[type=checkbox]:disabled:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Änderungsprotokoll (Admin → Änderungen) */
.changelog-liste { margin: 6px 0 0; padding-left: 18px; }
.changelog-liste li { margin: 4px 0; line-height: 1.45; }

/* „fehlt"-Häkchen an jeder Checklistenzeile (01.10.2026) */
.fehlt-haken {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.fehlt-haken input { margin: 0; }
.fehlt-haken input:checked + span { color: var(--danger); font-weight: 600; }

/* Stückzahlen und Füllstände unter einer Checklistenzeile */
.anzahl-feld { max-width: 170px; }
.anzahl-feld select { width: 100%; }

/* Rückmeldung beim Speichern (01.10.2026) */
.speicher-anzeige {
  position: fixed; top: 10px; right: 12px; z-index: 10001;
  padding: 6px 12px; border-radius: 14px;
  background: var(--overlay-soft); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.speicher-anzeige.fertig { color: var(--success); border-color: var(--success); }
.speicher-anzeige.fehler { color: var(--danger); border-color: var(--danger); }

/* Mailverteiler (07.10.2026): Haken nebeneinander statt untereinander — zwölf Fälle mit je
   acht Gruppen und mehreren Kreisen ergäben sonst eine sehr lange Seite. */
.verteiler-reihe { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.verteiler-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.verteiler-haken input { margin: 0; }