/* Betriebshof-Skin -- bewusst dieselben Werte wie InstandhaltungsWebsite/index.html (Akzentfarben,
   Glasmorphismus, Darkmode-Mechanik), damit beide Apps optisch identisch aussehen. */
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-Chrome — */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px; flex-wrap: wrap;
}
.topbar h1 { margin: 0; font-size: 26px; flex: 1; }
.topbar .sub { margin: 2px 0 0; font-size: 13px; color: var(--color-neutral-700); }

.layout { display: flex; gap: 20px; padding: 0 24px 100px; align-items: flex-start; flex-wrap: wrap; }

/* — Hof-Canvas — */
/* min-width:0 überschreibt das Flex-Standardverhalten (Item wächst sonst auf die Inhaltsgröße
   mit, hier bis zu 5000px+ breit) -- so bleibt der Wrap in der Layout-Breite und die Gleisfläche
   scrollt stattdessen intern. */
.hof-canvas-wrap { flex: 1; min-width: 0; }
.hof-canvas {
  position: relative; min-height: 420px; max-width: 100%; border: 1.5px dashed rgba(31,38,42,0.25);
  border-radius: 20px; background: rgba(255,255,255,0.25); backdrop-filter: blur(6px);
  overflow: auto; padding: 12px;
}
[data-theme="dark"] .hof-canvas { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.hof-canvas.dragover-ok { border-color: var(--color-accent); }

/* — Gleisplan-Hintergrund: rein visuelle Orientierung, keine echte Streckenlogik — */
.gleise-bg { position: absolute; left: 0; top: 0; pointer-events: none; color: var(--color-text); opacity: 0.35; }
.gleise-bg svg { display: block; width: 100%; height: 100%; }
.gleise-bg svg line, .gleise-bg svg path { stroke: currentColor; }

.stellplatz-box {
  position: absolute; width: 88px; min-height: 50px; padding: 4px 6px;
  display: flex; flex-direction: column; gap: 3px; cursor: default;
}
.stellplatz-box.edit-mode { cursor: grab; }
.stellplatz-box.dragover { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.stellplatz-name { font-family: var(--font-heading); font-weight: 600; font-size: 10px; line-height: 1.2; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.stellplatz-edit-actions { display: flex; gap: 3px; }
.stellplatz-edit-actions button {
  border: none; background: rgba(0,0,0,0.08); border-radius: 999px; width: 14px; height: 14px;
  font-size: 9px; line-height: 1; cursor: pointer; color: inherit; padding: 0;
}
.stellplatz-empty { font-size: 9px; color: var(--color-neutral-600); flex: 1; display: flex; align-items: center; }

/* — Fahrzeug-Karten — */
.vehicle-card {
  border-radius: 12px; padding: 8px 10px; font-size: 13px; cursor: grab;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(31,38,42,0.12);
  border-left: 4px solid var(--color-gruen);
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .vehicle-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.vehicle-card.zustand-rot { border-left-color: var(--color-rot); }
.vehicle-card.gesperrt { opacity: 0.6; }
.vehicle-card[draggable="false"] { cursor: default; }
.vehicle-card .row1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vehicle-card .bezeichnung { font-weight: 600; }
.vehicle-card .modell { font-size: 11px; color: var(--color-neutral-600); }
.vehicle-card .beschreibung { font-size: 11px; color: var(--color-neutral-700); margin-top: 2px; }
.vehicle-card .edit-btn {
  border: none; background: transparent; cursor: pointer; font-size: 13px; padding: 0 2px; color: var(--color-neutral-600);
}
.lock-badge { font-size: 10px; }

/* — Kompakte Fahrzeug-Karte innerhalb einer Stellplatz-Box (voller Name/Modell nur im Dialog) — */
.vehicle-card.compact {
  border-radius: 6px; padding: 3px 5px; border-left-width: 3px; gap: 0;
}
.vehicle-card.compact .row1 { gap: 2px; }
.vehicle-card.compact .bezeichnung { font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vehicle-card.compact .edit-btn { font-size: 10px; }
.vehicle-card.compact .lock-badge { font-size: 8px; }

/* — Seitenleiste — */
.sidebar { width: 280px; flex-shrink: 0; }
.sidebar h2 { font-size: 16px; margin: 0 0 10px; }
.vehicle-sidebar {
  display: flex; flex-direction: column; gap: 8px; min-height: 120px;
  padding: 10px; border-radius: 20px;
}
.vehicle-sidebar.dragover-ok { outline: 2px dashed var(--color-accent); outline-offset: 2px; }
.empty-hint { font-size: 12px; color: var(--color-neutral-600); padding: 8px 2px; }

/* — Dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,24,0.4); display: flex; align-items: center;
  justify-content: center; z-index: 80; padding: 16px;
}
.dialog { width: min(380px, 100%); padding: 22px; }
.dialog h3 { margin: 0 0 4px; }
.dialog .field { margin-top: 12px; }
.dialog .field label { display: block; font-size: 12px; margin-bottom: 4px; color: var(--color-neutral-700); }
.dialog .actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.seg-row { display: flex; gap: 8px; }
.seg-row .btn { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 12px; }

.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);
}

.darkmode-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 70; background: var(--color-surface); }