/* Dashboard-Skin -- bewusst dieselben Werte wie InstandhaltungsWebsite/app.html und
   BTH/assets/app.css (Akzentfarben, Glasmorphismus, Darkmode-Mechanik), damit alle drei Apps
   optisch identisch aussehen. Abweichungen hier wären sofort als Bruch sichtbar. */
body { margin: 0; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); text-decoration: underline; }
::selection { background: var(--color-accent-200); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

:root {
  --color-accent: color-mix(in srgb, #53dcad 62%, black);
  --color-accent-2: #ac2352;
  --color-accent-100: color-mix(in srgb, #53dcad 16%, white);
  --color-accent-200: color-mix(in srgb, #53dcad 30%, white);
  --color-accent-300: color-mix(in srgb, #53dcad 45%, white);
  --color-accent-600: color-mix(in srgb, #53dcad 75%, black);
  --color-accent-700: color-mix(in srgb, #53dcad 55%, black);
  --color-accent-800: color-mix(in srgb, #53dcad 38%, black);
  --color-accent-900: color-mix(in srgb, #53dcad 22%, black);
  --color-accent-2-100: color-mix(in srgb, #ac2352 14%, white);
  --color-accent-2-800: color-mix(in srgb, #ac2352 60%, black);
  --color-rot: #c23b3b;
  --color-gruen: #2f9e5c;
}
[data-theme="dark"] {
  --color-bg: var(--color-neutral-900);
  --color-surface: var(--color-neutral-800);
  --color-text: var(--color-neutral-100);
  --color-divider: color-mix(in srgb, var(--color-neutral-100) 18%, transparent);
  --color-neutral-600: #a9a9ac;
  --color-neutral-700: #c7c7ca;
}

[data-theme] { background: transparent !important; }
[data-theme="light"]::before, [data-theme="dark"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
[data-theme="dark"]::before {
  background: linear-gradient(135deg, color-mix(in srgb, #ac2352 30%, #201622) 0%, #1f2521 50%, color-mix(in srgb, #53dcad 24%, #101f1a) 100%);
}
[data-theme="light"]::before {
  background: radial-gradient(circle at 15% 15%, color-mix(in srgb, #ac2352 8%, transparent) 0%, transparent 55%), radial-gradient(circle at 85% 20%, color-mix(in srgb, #53dcad 10%, transparent) 0%, transparent 50%), linear-gradient(135deg, color-mix(in srgb, #ac2352 3%, #f3ecf1) 0%, #eef0ea 50%, color-mix(in srgb, #53dcad 4%, #e7f0ea) 100%);
}

.card, .dialog {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6) !important; border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(31,38,42,0.12) !important;
}
[data-theme="dark"] .card, [data-theme="dark"] .dialog {
  background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14) !important;
}
.btn { border-radius: 999px !important; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.btn-secondary { background: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.7) !important; backdrop-filter: blur(12px); }
[data-theme="dark"] .btn-secondary { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; }
.btn-primary { background: var(--color-accent) !important; border-color: transparent !important; color: #fff !important; }
.btn-primary:hover { background: var(--color-accent-600) !important; }
.btn-ghost { background: rgba(255,255,255,0.35) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.7) !important; }
[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.16) !important; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 14%, white) !important; }
.input {
  background: rgba(255,255,255,0.8) !important; border: 1.5px solid rgba(31,38,42,0.18) !important;
  border-radius: 12px !important; backdrop-filter: blur(8px); box-shadow: inset 0 1px 3px rgba(31,38,42,0.06);
}
.input:hover { border-color: rgba(31,38,42,0.3) !important; }
.input:focus-visible { border-color: var(--color-accent) !important; }
[data-theme="dark"] .input { background: rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.25) !important; }
.tag { border-radius: 999px !important; }

/* ============================================================================
   App-Gerüst: feste Seitenleiste links, Kopfzeile + Inhalt rechts.
   Aufbau nach Vorbild einer klassischen Flotten-Oberfläche (Seitenleiste ->
   Kopfzeile -> Kennzahlenreihe -> Panel-Raster); Farben und Formen bleiben
   unverändert die des Design-Systems.
   ============================================================================ */

.shell { display: flex; min-height: 100vh; align-items: flex-start; }

/* — Seitenleiste — */
.sidebar {
  position: sticky; top: 0; align-self: stretch;
  width: 250px; flex: 0 0 250px; min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; padding: 20px 16px;
  border-right: 1px solid var(--color-divider);
  background: rgba(255,255,255,0.4); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme="dark"] .sidebar { background: rgba(255,255,255,0.06); }

.brand { padding: 4px 8px 0; }
.brand .brand-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; letter-spacing: 0.06em; text-transform: uppercase;
}
.brand .brand-sub { font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-700); margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--color-text); text-align: left; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.nav-item.active {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent-900); font-weight: 500;
}
[data-theme="dark"] .nav-item.active { color: var(--color-accent-200); }
/* Noch nicht gebaute Bereiche: sichtbar, damit der Aufbau erkennbar ist, aber klar als
   "kommt noch" markiert statt als toter Klick. */
.nav-item.pending { color: var(--color-neutral-600); cursor: default; }
.nav-item.pending:hover { background: transparent; }
.nav-item .nav-icon { flex: 0 0 18px; width: 18px; height: 18px; opacity: 0.85; }
.nav-item .nav-label { flex: 1; }
.nav-item .nav-phase {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--color-divider);
  color: var(--color-neutral-600);
}

.nav-sep { margin: 10px 12px 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }

.sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-top: 1px solid var(--color-divider);
}
.avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff; font-size: 13px; font-weight: 600;
}
.sidebar-user .who { min-width: 0; }
.sidebar-user .who strong { display: block; font-size: 13.5px; font-weight: 500; }
.sidebar-user .who span { display: block; font-size: 11.5px; color: var(--color-neutral-700); }

.sidebar-toggle { display: none; }

/* — Hauptbereich — */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--color-divider);
}
.topbar .titles { flex: 1; min-width: 160px; }
.topbar h1 { margin: 0; font-size: 25px; }
.topbar .sub { margin: 2px 0 0; font-size: 13px; color: var(--color-neutral-700); }
.topbar .suche { width: min(300px, 100%); padding: 9px 14px; font-size: 13.5px; }
.topbar .suche:disabled { opacity: 0.55; cursor: not-allowed; }

.content { padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 16px; }

/* — Kennzahlenreihe — */
.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { padding: 16px 18px; }
.kpi .kpi-label { font-size: 12.5px; color: var(--color-neutral-700); }
.kpi .kpi-value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: 1.1; margin-top: 6px; }
.kpi .kpi-hint { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 4px; }
.kpi.leer .kpi-value { color: var(--color-neutral-500); }

/* — Panel-Raster: breite Arbeitsfläche links, schmale Spalte rechts — */
.panels { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
/* Seiten ohne rechte Spalte (z.B. die Fahrzeugliste) nutzen die volle Breite. */
.panels.breit { grid-template-columns: minmax(0, 1fr); }
.panel-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { padding: 16px 18px; }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 17px; flex: 1; }
.panel-head .zusatz { font-size: 12px; color: var(--color-neutral-700); }

.leer-text { font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); }
.leer-text .phase { color: var(--color-neutral-600); }

/* Kurzfassung der Flotte auf der Startseite -- Zahl, ein Satz, Weg zur Fahrzeugseite. */
.kurz-zahl { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 40px; line-height: 1; margin-bottom: 6px; }
.panel .kurz-zahl + .leer-text { margin-bottom: 12px; }

/* — Fahrzeug-Kacheln —
   28 Fahrzeuge, feste Flottengröße: das Raster ist so ausgelegt, dass am Rechner alle ohne
   Scrollen sichtbar sind. Deshalb keine Blätterfunktion, kein Nachladen. */
.fleet-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fleet-card {
  position: relative; box-sizing: border-box; padding: 12px 14px 12px 18px; overflow: hidden;
  border-radius: 14px !important; box-shadow: none !important;
  background: rgba(255,255,255,0.45) !important; border: 1px solid var(--color-divider) !important;
}
[data-theme="dark"] .fleet-card { background: rgba(255,255,255,0.05) !important; }
/* Farbbalken links = Zustandsfarbe. In Phase 0 neutral, ab Phase 3 trägt er den echten
   Fahrzeugzustand (einsatzbereit / tot / Werkstatt ...). */
.fleet-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--kachel-farbe, var(--color-neutral-500));
}
.fleet-card .name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; line-height: 1.1; }
.fleet-card .modell { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 2px; }
.fleet-card .meta { margin-top: 8px; font-size: 11.5px; color: var(--color-neutral-700); display: flex; gap: 8px; flex-wrap: wrap; }

/* — Schnellzugriff — */
.schnell { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.schnell .btn { font-size: 13px; }

.theme-btn { padding: 8px 14px; font-size: 13px; }

/* ============================================================================
   Nutzer, Rollen und die Rechtematrix (Phase 1)
   ============================================================================ */

.abschnitt { margin: 18px 0 8px; font-size: 14px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: 0.02em; }

/* — Rollen-Chips — */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.6; white-space: nowrap;
  background: color-mix(in srgb, var(--chip-farbe, var(--color-neutral-500)) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-farbe, var(--color-neutral-500)) 45%, transparent);
}
.chip-blass { font-style: italic; color: var(--color-neutral-700); }

/* — Listen (Nutzer, Rollen) — */
.liste { display: flex; flex-direction: column; gap: 4px; }
.listen-zeile {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; text-align: left;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  font: inherit; color: var(--color-text); cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.listen-zeile:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.listen-zeile.gewaehlt {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.listen-zeile.inaktiv { opacity: 0.55; }
.zeilen-text { flex: 1; min-width: 0; }
.zeilen-text strong { font-size: 14px; font-weight: 500; }
.zeilen-sub { font-size: 12px; color: var(--color-neutral-700); margin-top: 2px; }
.zeilen-zahl { flex: 0 0 auto; font-size: 11.5px; color: var(--color-neutral-700); white-space: nowrap; }
.avatar.klein { flex: 0 0 28px; width: 28px; height: 28px; font-size: 11px; }
.farb-punkt { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; }

.hinweis-zeile { padding: 4px 2px; }
.neu-zeile { display: flex; gap: 8px; margin-top: 14px; }
.neu-zeile .input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13.5px; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* — Rechtematrix —
   Zweispaltig, damit die knapp 40 Rechte nicht zu einer endlosen Kolonne werden. */
.matrix { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.matrix-gruppe {
  padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 14px;
  background: rgba(255,255,255,0.35);
}
[data-theme="dark"] .matrix-gruppe { background: rgba(255,255,255,0.04); }
.matrix-gruppe h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-700); font-family: var(--font-body); font-weight: 600;
}
.matrix-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.matrix-zeile.anklickbar { cursor: pointer; }
.matrix-label { flex: 1; min-width: 0; }
.matrix-code { font-size: 10.5px; color: var(--color-neutral-600); font-family: ui-monospace, monospace; }
.matrix-status { flex: 0 0 16px; text-align: center; font-weight: 600; }
.matrix-status.ja { color: var(--color-gruen); }
.matrix-status.nein { color: var(--color-neutral-500); }
.matrix-wahl { flex: 0 0 auto; max-width: 190px; padding: 4px 8px !important; font-size: 11.5px; }

/* — Rollenauswahl beim Nutzer — */
.rollen-wahl { display: flex; flex-wrap: wrap; gap: 12px; }
.rollen-option { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* — Protokoll — */
.protokoll { display: flex; flex-direction: column; gap: 10px; }
.protokoll-eintrag { border-left: 3px solid var(--color-divider); padding-left: 10px; }
.protokoll-kopf { font-size: 13px; }
.protokoll-fuss { font-size: 11.5px; color: var(--color-neutral-700); margin-top: 2px; }

/* — Rückfrage-Dialog — */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,24,22,0.45); backdrop-filter: blur(2px);
}
.overlay .dialog { max-width: 460px; padding: 22px 24px; }
.overlay .dialog h2 { margin: 0 0 8px; font-size: 19px; }
.btn-gefahr { background: var(--color-rot) !important; border-color: transparent !important; color: #fff !important; }
.btn-gefahr:hover { background: color-mix(in srgb, var(--color-rot) 82%, black) !important; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90;
  padding: 10px 18px; border-radius: 999px; font-size: 13px; background: var(--color-rot); color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); max-width: min(520px, 92vw); text-align: center;
}
.toast.gut { background: var(--color-gruen); }

/* — Touch-Geräte: größere Tippflächen (min ~44px), damit man nicht danebentippt — */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .nav-item { min-height: 44px; }
}

/* — Schmale Fenster: rechte Panelspalte unter den Inhalt — */
@media (max-width: 1180px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
}

/* — Handy/Tablet hoch: Seitenleiste wird über den Menüknopf eingeblendet — */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; flex: none; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--color-divider);
  }
  .sidebar.zu .nav, .sidebar.zu .sidebar-user { display: none; }
  .sidebar-toggle { display: inline-flex; align-self: flex-start; }
  .brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
  .topbar { padding: 14px; gap: 10px; }
  /* Titel und Umschalter teilen sich die erste Zeile, das Suchfeld bekommt die zweite --
     sonst landet jedes der drei Elemente auf einer eigenen Zeile. */
  .topbar .titles { min-width: 0; }
  .topbar .suche { width: 100%; order: 3; }
  .content { padding: 14px 14px 40px; }
  /* Vier gestapelte Kennzahlkarten wären auf dem Handy eine halbe Bildschirmlänge Scrollen,
     bevor die Flotte anfängt -- deshalb zwei Spalten und kompaktere Zahlen. */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .kpi-value { font-size: 26px; }
  .panel { padding: 14px; }
  .panel-head { flex-wrap: wrap; }
  /* Auf dem Handy hat die Matrix nur eine Spalte -- die Auswahlliste muss schmaler werden,
     sonst bleibt für die Bezeichnung des Rechts kaum Platz. */
  .matrix-wahl { max-width: 132px; }
  .matrix-zeile { font-size: 12.5px; }
  /* 138px statt 150px: bei 375px Bildschirmbreite bleiben nach Seiten- und Panel-Innenabstand
     nur ~311px übrig -- mit 150px kippt das Raster auf eine einzige Spalte. */
  .fleet-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
}