/* Corporate Design Transport-Express J. Grünhäuser (www.te-jg.de) */
:root {
  --orange: #F5680E;
  --orange-dark: #EC430F;
  --dark: #252525;
  --gray: #666;
  --light: #f5f5f5;
  --border: #ddd;
  --green: #1a7a2e;
  --red: #c11c1c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  background: var(--light);
  min-height: 100vh;
}

/* Kopfzeile: obere Leiste mit Logo, darunter die Navigations-Buttons.
   Weisser Grund, weil das Firmenlogo dunkel gesetzt ist. */
.topbar {
  background: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.topbar .logo img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 62vw;
}
.topbar .kopf-titel {
  font-size: 0.78rem;
  color: var(--gray);
  text-align: right;
  line-height: 1.25;
}

.accent-bar { height: 4px; background: var(--orange); }

/* Navigationsleiste mit echten Buttons */
.navbar {
  background: var(--light);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.navbar a {
  flex: 1 1 auto;
  min-width: 110px;
  text-align: center;
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.navbar a:hover { border-color: var(--orange); color: var(--orange-dark); }
.navbar a.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.navbar a.abmelden { color: var(--gray); font-weight: 500; }
.navbar a.abmelden:hover { border-color: var(--red); color: var(--red); }

@media (min-width: 700px) {
  .navbar a { flex: 0 0 auto; min-width: 0; }
}

main { max-width: 640px; margin: 0 auto; padding: 1rem; padding-bottom: 4rem; }

h1 { font-size: 1.35rem; margin: 0.8rem 0 0.2rem; }
h2 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.subtitle { color: var(--gray); font-size: 0.85rem; margin-bottom: 1rem; }

.card {
  background: #fff; border-radius: 10px; padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 1rem;
}

label { display: block; font-size: 0.85rem; color: var(--gray); margin: 0.7rem 0 0.25rem; }
input, select, textarea {
  width: 100%; padding: 0.65rem 0.7rem; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

/* Passwortfeld mit Auge-Symbol. Die Huelle wird per JavaScript um das
   vorhandene Feld gelegt, damit das Markup der Seiten unveraendert bleibt. */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 3.1rem; }
.pw-auge {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--gray);
  cursor: pointer; border-radius: 6px; font-family: inherit;
}
.pw-auge:hover { color: var(--dark); }
.pw-auge:focus-visible { outline: 2px solid var(--orange); color: var(--dark); }
.pw-auge svg { width: 1.3rem; height: 1.3rem; display: block; }

/* iOS gibt Datums- und Zeitfeldern eine eigene Mindestbreite und zentriert den
   Wert. Auf schmalen Displays laufen sie dadurch aus der Karte heraus. */
input[type="time"], input[type="date"], input[type="datetime-local"] {
  min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  text-align: left;
}

/* Lange Datei- und Pfadangaben duerfen die Seite nicht seitlich aufziehen. */
code {
  overflow-wrap: anywhere; word-break: break-word;
  font-size: 0.92em;
}

.btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--orange); color: #fff; border: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; padding: 0.8rem 1rem;
  border-radius: 8px; margin-top: 1rem; text-decoration: none;
}
.btn:hover { background: var(--orange-dark); }
.btn:disabled { background: #ccc; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--dark); border: 1px solid var(--border); }
.btn.secondary:hover { border-color: var(--orange); color: var(--orange); }
.btn.small { width: auto; font-size: 0.85rem; padding: 0.45rem 0.8rem; margin-top: 0; }
.btn.danger { background: var(--red); }

.error-msg { color: var(--red); font-size: 0.9rem; margin-top: 0.6rem; min-height: 1.2em; }
.success-msg { color: var(--green); font-size: 0.9rem; margin-top: 0.6rem; }

.registration-complete[hidden] { display: none; }
.registration-complete { text-align: center; padding: 0.25rem 0 0.15rem; outline: none; }
.registration-success-icon {
  width: 72px; height: 72px; margin: 0 auto 0.9rem; border-radius: 50%;
  display: grid; place-items: center; background: #e6f4e9; color: var(--green);
  font-size: 2.6rem; font-weight: 700; line-height: 1;
}
.registration-complete h1 { margin: 0 0 0.8rem; font-size: 1.35rem; line-height: 1.25; }
.registration-complete > p { margin: 0.35rem 0; color: var(--gray); font-size: 0.9rem; }
.registration-complete .registration-email {
  margin: 0.55rem 0 1rem; padding: 0.7rem 0.8rem; border-radius: 8px;
  background: var(--light); color: var(--dark); font-weight: 700; word-break: break-word;
}
.registration-next-steps {
  margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid #b9ddc1;
  border-radius: 9px; background: #f1f8f3; text-align: left;
}
.registration-next-steps h2 { margin: 0 0 0.55rem; color: var(--green); font-size: 1rem; }
.registration-next-steps ol { margin: 0; padding-left: 1.3rem; }
.registration-next-steps li { margin: 0.35rem 0; font-size: 0.9rem; line-height: 1.4; }
.registration-complete .registration-delay { margin: 0.9rem 0; line-height: 1.45; }
.registration-complete .btn { display: block; text-decoration: none; }

.center-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
}
.center-page .card { width: 100%; max-width: 400px; }
/* Logo-Kopf auf den Anmeldeseiten */
.logo-block {
  text-align: center;
  margin-bottom: 1.2rem;
  background: #fff;
  border-radius: 10px;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 4px solid var(--orange);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.logo-block img { width: 100%; max-width: 260px; height: auto; display: inline-block; }
.logo-block p { color: var(--gray); font-size: 0.88rem; margin-top: 0.6rem; }

/* Checklisten-Assistent */
.progress { display: flex; gap: 4px; margin: 0.8rem 0; }
.progress i { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.progress i.done { background: var(--orange); }

.check-item {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem; margin-bottom: 0.7rem;
}
.check-item .label { font-weight: 600; font-size: 0.98rem; }
.check-item .hint { color: var(--gray); font-size: 0.8rem; margin-top: 0.15rem; }
.choice-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.choice-row button {
  flex: 1; padding: 0.6rem; font-size: 0.95rem; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 8px; background: #fff;
  cursor: pointer; color: var(--dark); font-family: inherit;
}
.choice-row button.sel-ok { background: var(--green); border-color: var(--green); color: #fff; }
.choice-row button.sel-bad { background: var(--red); border-color: var(--red); color: #fff; }
.choice-row button.sel-na { background: var(--gray); border-color: var(--gray); color: #fff; }
.mangel-box { margin-top: 0.6rem; }
.mangel-box textarea { min-height: 60px; }
.defect-option-row { flex-wrap: wrap; }
.defect-option-row button { flex: 1 1 calc(50% - 0.5rem); min-width: 125px; }
.defect-expiry, .defect-other { margin-top: 0.65rem; }
.maintenance-status { margin-top:0.6rem; padding:0.7rem; border-radius:8px; display:flex; flex-direction:column; gap:0.15rem; background:#eee; }
.maintenance-status span { font-size:0.82rem; color:var(--gray); }
.maintenance-status.ok { background:#e6f4e9; color:var(--green); }
.maintenance-status.soon { background:#fff3e6; color:var(--orange-dark); }
.maintenance-status.due { background:#fbe7e7; color:var(--red); }
/* Reinigung: drei Bereiche mit eigener Frist, jeder als eigener Block. Die
   Farbe zeigt die Lage, nicht das Ergebnis der Meldung. */
.cleaning-area { margin-top: 0.7rem; padding: 0.7rem; border-radius: 9px; border: 1px solid var(--border); background: #fafafa; }
.cleaning-area-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.cleaning-badge { font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eee; color: var(--gray); }
.cleaning-badge.ok { background: #e6f4e9; color: var(--green); }
.cleaning-badge.soon { background: #fff3e6; color: var(--orange-dark); }
.cleaning-badge.due { background: #fbe7e7; color: var(--red); }
.cleaning-badge.unknown { background: #eceff5; color: var(--gray); }
/* Das Verfahren steht als kurzer Hinweis unter dem Bereich - der Fahrer soll
   nicht raten müssen, was "Laderaum reinigen" konkret heißt. */
.cleaning-verfahren { margin-bottom: 0.35rem; font-style: italic; }
.cleaning-action-row { flex-wrap: wrap; }
.cleaning-action-row button { flex: 1 1 calc(50% - 0.5rem); min-width: 130px; }
.cleaning-reason, .cleaning-extra { margin-top: 0.7rem; }
.cleaning-extra textarea { min-height: 60px; }

.photo-list { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.photo-list img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

.known-damage-intro {
  display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.75rem;
  padding: 0.8rem; border-radius: 9px; background: #fff3e6; border: 1px solid #f6c69f;
}
.known-damage-intro strong { color: var(--orange-dark); }
.known-damage-intro span { color: var(--gray); font-size: 0.82rem; line-height: 1.4; }
.known-damage-card {
  background: #fff; border: 2px solid #efb2b2; border-radius: 10px;
  padding: 0.85rem; margin-bottom: 0.8rem;
}
.known-damage-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.known-damage-head small, .known-damage-last {
  display: block; color: var(--gray); font-size: 0.78rem; line-height: 1.35;
}
.known-damage-last { margin-top: 0.3rem; }
.existing-photos img { cursor: default; }
.known-damage-choices { flex-wrap: wrap; }
.known-damage-choices button { min-width: 130px; }
.known-damage-worsened { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.known-damage-note {
  margin-top: 0.65rem; padding: 0.65rem; border-radius: 7px;
  background: #eeeeee; color: var(--gray); font-size: 0.82rem; line-height: 1.4;
}

.damage-history-card { align-items: flex-start; }
.damage-history-card .damage-description { margin-top: 0.3rem; line-height: 1.4; }
.damage-history-card .damage-latest { color: var(--orange-dark); }
.damage-history-card > p { margin: 0.55rem 0; }
.damage-history-head small { display: block; color: var(--gray); margin-top: 0.25rem; }
.damage-history-meta { color: var(--gray); font-size: 0.82rem; line-height: 1.45; }
.damage-photo-links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.45rem; }
.damage-photo-links img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.known-damage-photos { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.55rem 0 0.8rem; }
.known-damage-photos img { width: 88px; height: 88px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.login-version { text-align: center; margin: 0.9rem 0 0; color: var(--gray); font-size: 0.72rem; }

.wizard-nav { display: flex; gap: 0.6rem; margin-top: 1rem; }
.wizard-nav .btn { margin-top: 0; }

/* Unterschrift */
#sig-canvas {
  width: 100%; height: 180px; background: #fff;
  border: 1.5px dashed var(--border); border-radius: 10px; touch-action: none;
}

/* Zusammenfassung / Ergebnis */
.result-banner { padding: 1rem; border-radius: 10px; font-weight: 700; text-align: center; font-size: 1.1rem; }
.result-banner.ok { background: #e6f4e9; color: var(--green); }
.result-banner.bad { background: #fbe7e7; color: var(--red); }
.summary-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--light); font-size: 0.92rem; }
.summary-row span:first-child { color: var(--gray); }

/* Tabellen / Listen */
.list-row {
  background: #fff; border-radius: 10px; padding: 0.8rem; margin-bottom: 0.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.list-row .info { flex: 1; min-width: 180px; }
.list-row .info strong { font-size: 0.98rem; }
.list-row .info small { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 0.1rem; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge.ok { background: #e6f4e9; color: var(--green); }
.badge.bad { background: #fbe7e7; color: var(--red); }
.badge.pending { background: #fff3e6; color: var(--orange-dark); }
.badge.disabled { background: #eee; color: var(--gray); }

.filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.filter-row input { flex: 1; min-width: 120px; }
.filter-actions { display: flex; gap: 0.5rem; }

/* Kompakte Listenzeile (v1.40.0)
   Zuvor trug jede Zeile alle Aktionen ausgeschrieben - bei sechzehn Fahrzeugen
   waren das rund 130 Schaltflaechen auf einer Seite. Sichtbar bleibt jetzt nur
   der haeufigste Weg, alles Weitere liegt hinter dem "..."-Knopf. */
.list-row.compact { padding: 0.55rem 0.75rem; align-items: center; }
.list-row.compact .info strong { font-size: 0.92rem; }
.list-row.compact .info small { font-size: 0.78rem; }
.list-row.compact.gedimmt { opacity: 0.62; }
.row-actions { display: flex; gap: 0.35rem; align-items: center; flex-shrink: 0; }
.row-actions .btn { margin-top: 0; }
.menu-btn { font-weight: 700; letter-spacing: 0.08em; min-width: 2.4rem; }

/* Werkzeugleiste ueber einer Liste: Suche und Schnellfilter */
.list-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.7rem; }
/* Das Suchfeld waechst mit, laesst den Chips und dem Anlegen-Knopf aber Platz. */
.list-toolbar input[type="search"] { flex: 1 1 200px; max-width: 340px; margin: 0; }
.list-toolbar .btn { margin-top: 0; width: auto; margin-left: auto; }
.list-toolbar select { width: auto; margin: 0; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.7rem;
  border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: 0.8rem; font-weight: 600; color: var(--dark); cursor: pointer; width: auto;
}
.filter-chip.aktiv { background: var(--orange); color: #fff; border-color: var(--orange); }
.filter-chip:disabled { opacity: 0.45; cursor: default; }
.list-leer { color: var(--gray); font-size: 0.88rem; padding: 0.9rem; }
.list-treffer { color: var(--gray); font-size: 0.8rem; margin: 0 0 0.6rem 0.2rem; }

/* Aufklappbare Gruppe (Maengel je Fahrzeug) */
.gruppe { margin-bottom: 0.5rem; }
.gruppe-kopf {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: #f0f0f0; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.55rem 0.8rem; font-size: 0.9rem; cursor: pointer; text-align: left;
  color: var(--dark); margin: 0;
}
.gruppe-kopf:hover { background: #e9e9e9; }
.gruppe-titel { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gruppe-pfeil { color: var(--gray); flex-shrink: 0; }
.gruppe-inhalt { padding: 0.5rem 0 0.2rem 0.8rem; }
.gruppe-inhalt .list-row:last-child { margin-bottom: 0.2rem; }

/* Aufklappbarer Abschnitt. Natives <details>, damit Tastatur und Vorlesehilfen
   ohne eigenes JavaScript funktionieren. */
.klapp > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary h2 { margin: 0; }
.klapp > summary::after { content: '▸'; color: var(--gray); flex-shrink: 0; }
.klapp[open] > summary::after { content: '▾'; }
.klapp[open] > summary { margin-bottom: 0.7rem; }

/* Aktionsmenue im Dialog */
.dlg-aktionsliste { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.7rem 0 0.2rem; }
.dlg-aktion {
  display: block; width: 100%; text-align: left; text-decoration: none;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.8rem; font-size: 0.92rem; color: var(--dark); cursor: pointer; margin: 0;
}
.dlg-aktion:hover { background: var(--light); }
.dlg-aktion small { display: block; color: var(--gray); font-size: 0.78rem; margin-top: 0.15rem; }
.dlg-aktion.gefahr { color: var(--red); border-color: #f3c9c9; }
.dlg-aktion.gefahr:hover { background: #fbe7e7; }

/* Strukturierte Admin-Detailansichten */
.detail-page { max-width: 1180px; }
.detail-toolbar { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detail-title-row .badge { margin-top: 0.8rem; font-size: 0.85rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.detail-primary, .detail-sidebar { min-width: 0; }
.detail-sidebar { position: sticky; top: 0.75rem; }
.detail-grid { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr); gap: 0; }
.detail-grid dt, .detail-grid dd { padding: 0.45rem 0; border-bottom: 1px solid var(--light); overflow-wrap: anywhere; }
.detail-grid dt { color: var(--gray); font-size: 0.84rem; }
.detail-grid dd { font-weight: 600; font-size: 0.9rem; }
.answer-category { margin-top: 1rem; }
.answer-category h3 { font-size: 1rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--orange); }
.answer-row { padding: 0.65rem; border-bottom: 1px solid var(--border); }
.answer-row > div:first-child { display: flex; justify-content: space-between; gap: 0.7rem; }
.answer-row span { color: var(--green); font-size: 0.82rem; text-align: right; }
.answer-row p, .answer-row small { display: block; margin-top: 0.25rem; line-height: 1.4; }
.answer-row small { color: var(--gray); }
.answer-row.answer-bad { background: #fff6f6; border-left: 4px solid var(--red); }
.answer-row.answer-bad span { color: var(--red); font-weight: 700; }
.detail-list-link { display: block; padding: 0.65rem 0; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.detail-list-link:hover strong { color: var(--orange-dark); }
.detail-list-link span { display: block; margin-top: 0.2rem; color: var(--gray); font-size: 0.82rem; line-height: 1.4; }
.detail-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.detail-photos img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.detail-photo-link { display: inline-block; }
.signature-preview { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.snapshot-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--light); font-size: 0.84rem; }
.snapshot-row span { color: var(--gray); }
.snapshot-row strong { text-align: right; overflow-wrap: anywhere; }
.muted { color: var(--gray); font-size: 0.84rem; line-height: 1.45; }
.timeline { border-left: 3px solid var(--border); margin-left: 0.4rem; padding-left: 1rem; }
.timeline-entry { position: relative; padding: 0 0 1.2rem; }
.timeline-entry::before { content: ''; position: absolute; width: 11px; height: 11px; left: -1.45rem; top: 0.25rem; border-radius: 50%; background: var(--orange); border: 2px solid #fff; }
.timeline-entry time, .timeline-entry small { color: var(--gray); font-size: 0.76rem; }
.timeline-entry h3 { font-size: 0.95rem; margin: 0.15rem 0; }
.timeline-entry p { font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.related-inspection { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.related-inspection span { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 0.15rem; }
.inline-actions { display: flex; gap: 0.4rem; }
.history-entry-link { color: var(--dark); text-decoration: none; border-radius: 7px; padding: 0.2rem; }
.history-entry-link:hover, .history-entry-link:focus-visible { outline: 2px solid var(--orange); }
.history-entry-link:hover strong { color: var(--orange-dark); }

/* Digitale Fahrzeugakte */
.vehicle-record-page { max-width: 1240px; }
.vehicle-record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vehicle-status-light { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.vehicle-status-light::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.vehicle-status-light.ok { color: var(--green); background: #e6f4e9; }
.vehicle-status-light.warning { color: var(--orange-dark); background: #fff3e6; }
.vehicle-status-light.critical { color: var(--red); background: #fbe7e7; }
.vehicle-status-light.inactive { color: var(--gray); background: #eee; }
.record-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.record-summary-card { min-width: 0; background: #fff; border-radius: 10px; padding: 0.85rem; border-top: 4px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.record-summary-card > span, .record-summary-card small { display: block; color: var(--gray); font-size: 0.74rem; line-height: 1.35; }
.record-summary-card strong { display: block; margin: 0.25rem 0; font-size: 0.98rem; overflow-wrap: anywhere; }
.record-summary-card.ok { border-color: var(--green); }
.record-summary-card.warning { border-color: var(--orange); }
.record-summary-card.critical { border-color: var(--red); }
.record-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.2rem 0 0.7rem; margin-bottom: 0.5rem; scrollbar-width: thin; }
.record-tabs button { flex: 1 0 auto; min-width: 120px; padding: 0.65rem 0.85rem; border: 1px solid var(--border); background: #fff; border-radius: 8px; color: var(--gray); font: 600 0.88rem inherit; cursor: pointer; }
.record-tabs button.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.record-section[hidden] { display: none; }
.record-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.privacy-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 0 0.7rem; }
.privacy-doc-grid label { margin-top: 0.7rem; }
.privacy-doc-entry { border-top: 1px solid var(--border); padding: 0.7rem 0; }
.privacy-doc-entry.is-editing { background: var(--light); }
.privacy-doc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.privacy-doc-actions .btn { margin: 0; }
.record-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto; gap: 0.6rem; align-items: end; }
.record-filter-grid label { margin-top: 0; }
.record-filter-grid .btn { margin: 0 0 0.02rem; }
.record-filter-wide { min-width: 230px; }
.record-checkbox { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; color: var(--dark); }
.record-checkbox input { width: auto; }
.record-callout, .record-alert { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; border-radius: 8px; margin: 0.5rem 0 0.8rem; background: #eee; }
.record-callout span, .record-alert span { color: var(--gray); font-size: 0.84rem; }
.record-alert.ok { background: #e6f4e9; color: var(--green); }
.record-alert.critical { background: #fbe7e7; color: var(--red); }
.record-alert.warning { background: #fdf1e3; color: var(--orange); }
.record-alert.neutral { background: #eee; color: var(--gray); }

/* Wartungsreiter: erst der Zustand, dann die Aktionen. Die haeufige Aktion
   (Wartung dokumentieren) steht vor der seltenen (Intervall aendern). */
.maintenance-status .record-alert { margin-bottom: 0; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.9rem 0 0.4rem; }
.maintenance-hint { display: block; color: var(--gray); font-size: 0.8rem; margin-bottom: 1.2rem; }
.maintenance-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; }
.maintenance-cancelled { opacity: 0.72; }
.maintenance-cancelled .info strong { text-decoration: line-through; }
.maintenance-cancel-note { color: var(--red) !important; }
.maintenance-change { color: var(--orange) !important; }
.record-pagination { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin: 1rem 0; flex-wrap: wrap; }
.record-pagination span { color: var(--gray); font-size: 0.82rem; }
.record-red { color: var(--red) !important; }
.document-card { border-left: 4px solid var(--orange); }
.document-card.archived { border-color: var(--border); opacity: 0.78; }
.document-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; }
.document-head strong { margin-right: 0.45rem; }
.document-head small { display: block; margin-top: 0.25rem; color: var(--gray); font-size: 0.78rem; }
.detail-grid.compact { margin-bottom: 0.75rem; }
.detail-grid.compact dt, .detail-grid.compact dd { padding: 0.28rem 0; font-size: 0.8rem; }
.record-doc-layout { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); }

/* Admin-Dashboard */
.dashboard-page { max-width: 1440px; }
.dashboard-heading, .dashboard-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dashboard-heading h1, .dashboard-section-heading h2 { margin-top: 0; }
.dashboard-section-heading p { margin: -0.2rem 0 0.8rem; color: var(--gray); font-size: 0.82rem; }
.dashboard-refresh { display: grid; grid-template-columns: minmax(120px, 170px) auto; gap: 0.45rem; align-items: end; }
.dashboard-refresh label { grid-column: 1 / -1; margin: 0; }
.dashboard-refresh .btn { margin: 0; height: 100%; }
.dashboard-quick-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 1.2rem; }
.dashboard-quick-actions .btn { margin: 0; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 0.7rem; }
.dashboard-metric { min-width: 0; min-height: 116px; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.9rem; color: var(--dark); text-decoration: none; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--border); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dashboard-metric:hover, .dashboard-metric:focus-visible { transform: translateY(-1px); outline: 2px solid var(--orange); }
.dashboard-metric.critical { border-top-color: var(--red); }
.dashboard-metric.warning { border-top-color: var(--orange); }
.dashboard-metric.ok { border-top-color: var(--green); }
/* Rein informative Kennzahl ohne Handlungsbedarf - weder Ampelfarbe noch
   Entwarnung. Gruen waere hier irrefuehrend: Ein Schaden ist nichts Gutes,
   er steht nur nicht auf der Aufgabenliste. */
.dashboard-metric.neutral { border-top-color: var(--gray); }
.dashboard-metric-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: var(--light); font-weight: 800; }
.dashboard-metric.critical .dashboard-metric-icon { color: var(--red); background: #fbe7e7; }
.dashboard-metric.warning .dashboard-metric-icon { color: var(--orange-dark); background: #fff3e6; }
.dashboard-metric.ok .dashboard-metric-icon { color: var(--green); background: #e6f4e9; }
.dashboard-metric.neutral .dashboard-metric-icon { color: var(--gray); background: #ececec; }
.dashboard-metric strong, .dashboard-metric b, .dashboard-metric small { display: block; }
.dashboard-metric strong { font-size: 1.65rem; line-height: 1; }
.dashboard-metric b { margin-top: 0.35rem; font-size: 0.86rem; }
.dashboard-metric small { margin-top: 0.25rem; color: var(--gray); font-size: 0.72rem; line-height: 1.3; }
.dashboard-note { color: var(--gray); font-size: 0.76rem; line-height: 1.4; }
.dashboard-primary-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: 1rem; margin: 1.2rem 0; }
.dashboard-panel { margin: 0; min-width: 0; }
.dashboard-task-list, .dashboard-activity-list { max-height: 560px; overflow-y: auto; }
.dashboard-task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.dashboard-task:hover strong, .dashboard-activity:hover strong { color: var(--orange-dark); }
.dashboard-task-priority { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #eee; color: var(--gray); font-size: 0.75rem; font-weight: 700; }
.dashboard-task.critical .dashboard-task-priority { background: #fbe7e7; color: var(--red); }
.dashboard-task.warning .dashboard-task-priority { background: #fff3e6; color: var(--orange-dark); }
.dashboard-task strong, .dashboard-task small, .dashboard-activity strong, .dashboard-activity small { display: block; overflow-wrap: anywhere; }
.dashboard-task small, .dashboard-activity small { margin-top: 0.2rem; color: var(--gray); font-size: 0.76rem; line-height: 1.35; }
/* Erledigungsmeldungen: Textteil bleibt Link, daneben die Direkt-Aktionen. */
.dashboard-task-link { color: inherit; text-decoration: none; min-width: 0; }
.dashboard-task-link:hover strong { color: var(--orange-dark); }
.dashboard-task-actions { display: flex; flex-direction: column; gap: 0.35rem; }
.dashboard-task-actions .btn { white-space: nowrap; }
/* Mängelliste der Fahrzeugakte: Gruppenüberschriften trennen wartende
   Erledigungsmeldungen von den tatsächlich offenen Mängeln. */
.defect-group-title { margin: 1.1rem 0 0.4rem; font-size: 0.95rem; color: var(--dark); }
.defect-group-title:first-child { margin-top: 0.2rem; }
.defect-group-hint { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--gray); }
.dashboard-activity { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0.7rem; padding: 0.65rem 0.3rem; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.dashboard-activity-dot { width: 10px; height: 10px; margin-top: 0.25rem; border-radius: 50%; background: var(--gray); }
.dashboard-activity-dot.not_ready, .dashboard-activity-dot.defect, .dashboard-activity-dot.expired_document { background: var(--red); }
.dashboard-activity-dot.resolution_reported, .dashboard-activity-dot.maintenance, .dashboard-activity-dot.adblue { background: var(--orange); }
.dashboard-activity-dot.inspection, .dashboard-activity-dot.defect_closed, .dashboard-activity-dot.user_approved { background: var(--green); }
.dashboard-empty { padding: 1.2rem; text-align: center; color: var(--gray); background: var(--light); border-radius: 8px; }
.dashboard-empty.ok { color: var(--green); background: #e6f4e9; }
.dashboard-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 0.2rem; }
.dashboard-table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; }
.dashboard-table th { padding: 0.75rem; text-align: left; color: var(--gray); background: #f4f4f4; font-size: 0.74rem; white-space: nowrap; }
.dashboard-table td { padding: 0.75rem; border-top: 1px solid var(--border); font-size: 0.82rem; vertical-align: top; }
.dashboard-table td strong, .dashboard-table td small { display: block; }
.dashboard-table td small { margin-top: 0.22rem; color: var(--gray); line-height: 1.3; }
.dashboard-click-row { cursor: pointer; }
.dashboard-click-row:hover, .dashboard-click-row:focus-visible { background: #fff8f2; outline: 2px solid var(--orange); outline-offset: -2px; }
.dashboard-highlight { background: #fff8f2; }
#employees-section, #fleet-section { scroll-margin-top: 1rem; margin-top: 1.4rem; }

/* Umbruch statt Abschneiden: ab fuenf Reitern passt sonst der letzte nicht mehr
   in die Zeile. Die Kopfnavigation bricht aus demselben Grund bereits um. */
/* Bleibt beim Scrollen stehen, damit man den Bereich wechseln kann, ohne erst
   an den Seitenanfang zurueckzukehren. Nur in der Verwaltung verwendet. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
  position: sticky; top: 0; z-index: 5;
  background: var(--light); padding: 0.6rem 0;
}
.tabs button {
  flex: 1 1 auto; min-width: 6rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--border); background: #fff;
  border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--gray); font-family: inherit;
}
.tabs button.active { background: var(--dark); color: #fff; border-color: var(--dark); }

@media (min-width: 700px) {
  .topbar { padding: 0.7rem 2rem; }
}

@media (max-width: 520px) {
  .filter-row input { flex: 1 1 100%; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
  .known-damage-choices { display: grid; grid-template-columns: 1fr; }
  .known-damage-choices button { width: 100%; min-width: 0; }
  .detail-toolbar .btn { flex: 1 1 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid dt { padding-bottom: 0.05rem; border-bottom: 0; }
  .detail-grid dd { padding-top: 0.05rem; }
  .answer-row > div:first-child { flex-direction: column; gap: 0.15rem; }
  .answer-row span { text-align: left; }
  .detail-photos img { width: 82px; height: 82px; }
  .related-inspection .inline-actions { width: 100%; }
  .related-inspection .inline-actions .btn { flex: 1; }
  .vehicle-status-light { width: 100%; justify-content: center; }
  .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-summary-card { padding: 0.7rem; }
  .record-filter-grid { grid-template-columns: 1fr; }
  .record-filter-grid .btn { width: 100%; }
  .record-pagination { display: grid; grid-template-columns: 1fr 1fr; }
  .record-pagination span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .document-card .inline-actions { display: grid; grid-template-columns: 1fr; }
  .document-card .inline-actions .btn { width: 100%; }
  .privacy-doc-grid { grid-template-columns: 1fr; }
  .privacy-doc-actions { display: grid; grid-template-columns: 1fr; }
  .privacy-doc-actions .btn { width: 100%; }
}

@media (max-width: 820px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .record-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-two-column, .record-doc-layout { grid-template-columns: 1fr; }
  .record-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-filter-grid { grid-template-columns: 1fr; }
  .dashboard-heading { display: block; }
  .dashboard-refresh { grid-template-columns: 1fr 1fr; margin-top: 0.8rem; }
  .dashboard-quick-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-quick-actions .btn { width: 100%; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric { min-height: 105px; padding: 0.7rem; gap: 0.45rem; }
  .dashboard-metric-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .dashboard-metric strong { font-size: 1.35rem; }
  .dashboard-table-wrap { overflow: visible; box-shadow: none; }
  .dashboard-table { min-width: 0; display: block; background: transparent; }
  .dashboard-table thead { display: none; }
  .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; }
  .dashboard-table tr { margin-bottom: 0.8rem; padding: 0.45rem 0.7rem; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .dashboard-table td { display: grid; grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.2fr); gap: 0.55rem; padding: 0.48rem 0; border-top: 1px solid var(--light); overflow-wrap: anywhere; }
  .dashboard-table td:first-child { border-top: 0; }
  .dashboard-table td::before { content: attr(data-label); color: var(--gray); font-size: 0.75rem; font-weight: 600; }
  .dashboard-table td[colspan] { display: block; }
  .dashboard-table td[colspan]::before { content: none; }
  .dashboard-table .btn { width: 100%; }
}

/* ---------- Dialoge (Ersatz fuer prompt/confirm/alert) ---------- */
/* Das native <dialog> bringt Modalitaet, Tastaturfalle und Escape schon mit.
   Gestaltet wird deshalb nur die Karte selbst - bewusst wie .card, damit der
   Dialog nicht wie ein Fremdkoerper in der Verwaltung wirkt. */
.dlg {
  border: none;
  border-radius: 10px;
  padding: 0;
  /* Der globale Reset (* { margin: 0 }) setzt auch das margin:auto zurueck, mit
     dem der Browser ein <dialog> sonst mittig stellt. Ohne diese Zeile klebt
     der Dialog in der linken oberen Ecke. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  background: #fff;
  color: var(--dark);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.45); }
.dlg-inhalt {
  padding: 1.2rem 1.3rem 1.3rem;
  /* Lange Formulare sollen im Dialog rollen, nicht die Seite dahinter. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.dlg-titel {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--orange);
}
.dlg-text { font-size: 0.9rem; color: var(--gray); margin: 0 0 0.4rem; white-space: pre-line; }
.dlg-felder label:first-of-type { margin-top: 0.6rem; }
.dlg-optional { color: var(--gray); font-weight: normal; }
.dlg-hinweis { font-size: 0.78rem; color: var(--gray); margin: 0.25rem 0 0; }
.dlg-feldfehler { font-size: 0.8rem; color: var(--red); margin: 0.2rem 0 0; min-height: 1em; }
.dlg-fehler { color: var(--red); font-size: 0.88rem; margin: 0.4rem 0 0; min-height: 0; }
.dlg input.dlg-ungueltig,
.dlg textarea.dlg-ungueltig { border-color: var(--red); }
.dlg-liste { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.dlg-liste li { margin-bottom: 0.3rem; }
.dlg-knoepfe {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.dlg-knoepfe .btn { width: auto; flex: 1; margin-top: 0; }

/* Auf schmalen Displays stehen die Schaltflaechen untereinander, damit die
   Beschriftung nicht umbricht. Die bestaetigende Aktion bleibt oben und damit
   in Daumenreichweite. */
@media (max-width: 380px) {
  .dlg-knoepfe { flex-direction: column-reverse; }
}

/* Gestaffelte Kostenhistorie (Jahr / Monat / Tag).

   Nach dem Import einer Tankkartenabrechnung stehen je Fahrzeug mehrere
   hundert Einzelbuchungen in der Historie. Die Gruppenzeilen sind Schaltflaechen
   und muessen auf dem Handy mit dem Daumen treffbar bleiben - deshalb die
   Mindesthoehe, nicht nur Innenabstand. */
.cost-group {
  width: 100%; margin: 0 0 0.4rem; text-align: left;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  min-height: 44px; padding: 0.55rem 0.75rem;
  background: #fff; color: inherit; border: 1px solid var(--border);
  font-weight: 600;
}
.cost-group:hover { background: var(--light); }
.cost-group-arrow { color: var(--gray); font-size: 0.85rem; width: 0.9rem; flex: none; }
.cost-group-title { flex: 1; min-width: 7rem; }
.cost-group-sum { color: var(--gray); font-size: 0.8rem; font-weight: 500; }
/* Der durchschnittliche Kraftstoffpreis ist die Zahl, die man ueber die Monate
   hinweg vergleicht - deshalb hebt sie sich vom Rest der Zeile ab. */
.cost-group-price { color: var(--dark); font-weight: 600; white-space: nowrap; }

/* Die drei Ebenen unterscheiden sich durch Einzug und Schriftgroesse. Der
   Einzug bleibt klein, sonst bleibt auf dem Handy fuer den Text nichts uebrig. */
.cost-group-year { font-size: 1rem; background: var(--light); }
.cost-group-month { font-size: 0.94rem; }
.cost-month { margin-left: 0.7rem; }
.cost-group-day { font-size: 0.88rem; font-weight: 500; }
.cost-day { margin-left: 1.4rem; }
.cost-day-rows { margin-left: 1.4rem; }
.cost-day-rows .list-row { margin-bottom: 0.4rem; }

@media (max-width: 480px) {
  .cost-month, .cost-day, .cost-day-rows { margin-left: 0.5rem; }
  .cost-group-sum { width: 100%; }
}