/* TMR Fileservice – dunkles Theme, keine externen Abhängigkeiten */

:root {
  --bg: #16181d;
  --bg-panel: #1f232b;
  --bg-panel-hover: #262b35;
  --border: #323945;
  --text: #e8eaee;
  --text-muted: #9aa2af;
  --akzent: #d32;          /* TMR-Rot */
  --akzent-hell: #e85545;
  --positiv: #4caf7d;
  --negativ: #e85545;
  --radius: 12px;
  --schatten: 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 1.2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.2rem 0 0.6rem; }
a { color: var(--akzent-hell); }
.muted { color: var(--text-muted); }
.hidden { display: none !important; }
.positiv { color: var(--positiv); }
.negativ { color: var(--negativ); }

/* Kopfleiste */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--akzent);
}
.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.logo span { color: var(--akzent-hell); }
.topnav { display: flex; align-items: center; gap: 1rem; }
.topnav a { color: var(--text); text-decoration: none; }
.topnav a:hover { color: var(--akzent-hell); }
.topnav-user { color: var(--text-muted); }

/* Volle Nutzbreite: auf großen Monitoren bis 1700px, sonst 95vw – zentriert.
   Gilt für ALLE Seiten (Fahrzeuge, Detail, Toolbox, Konto, Verwaltung). */
.container { max-width: min(1700px, 95vw); margin: 0 auto; padding: 0 1.2rem 3rem; }

/* Kacheln (Hauptmenü) */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.kacheln-schmal { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kachel {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.kachel:hover:not(.kachel-statisch) {
  background: var(--bg-panel-hover);
  border-color: var(--akzent);
  transform: translateY(-2px);
}
.kachel h2 { margin: 0 0 0.4rem; }
.kachel p { margin: 0; color: var(--text-muted); }
.kachel-admin { border-color: var(--akzent); }
.kachel-statisch { cursor: default; }
.badge {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  vertical-align: middle;
}
.betrag { font-size: 1.7rem; font-weight: 700; margin: 0.2rem 0 0; }

/* Karten & Tabellen */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--schatten);
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.aktionen { text-align: right; white-space: nowrap; }

/* Dateien-Tabelle der Fahrzeug-Detailseite: feste Spaltenaufteilung, damit
   die Aktions-Buttons IN der Box bleiben — lange Dateinamen werden mit
   Ellipsis gekürzt (voller Name im title), statt die Tabelle zu sprengen. */
.fz-dateien table { table-layout: fixed; }
.fz-dateien th:nth-child(1) { width: auto; }
.fz-dateien th:nth-child(2) { width: 110px; }
.fz-dateien th:nth-child(3) { width: 90px; }
.fz-dateien th:nth-child(4) { width: 140px; }
.fz-dateien th:nth-child(5) { width: 360px; }
.fz-dateien td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Das Crypt-Dropdown erbt sonst width:100% aus dem Formular-CSS und drueckt
   die Buttons aus der Zelle — Aktionen bleiben kompakt nebeneinander. */
.fz-dateien td.aktionen select { width: auto; max-width: 150px; display: inline-block; }
.fz-dateien td.aktionen .btn { vertical-align: middle; }

/* Ordner-Ansicht (wie Altsystem): Gruppen-Kopf als eigene colspan-Zeile,
   damit das feste Spaltenlayout nicht bricht; Dateizeilen der Gruppe
   leicht eingerückt. Zuklappen blendet die Zeilen per .hidden aus. */
.fz-dateien tr.ordner-zeile td {
  background: var(--bg-panel-hover);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  user-select: none;
  overflow: visible;              /* Kopfzeile braucht kein Ellipsis */
}
.fz-dateien tr.ordner-zeile:hover td { background: rgba(255, 255, 255, 0.08); }
.ordner-pfeil {
  display: inline-block;
  width: 1.1em;
  color: var(--akzent-hell);
  font-size: 0.8rem;
}
.ordner-name { font-weight: 600; }
.ordner-zeile .fz-badge { margin-left: 0.4rem; }
.ordner-datum {
  float: right;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fz-dateien tr.ordner-datei td:first-child { padding-left: 1.7rem; }

/* Formulare */
label { display: block; margin: 0.7rem 0 0.25rem; color: var(--text-muted); font-size: 0.9rem; }
label.check { display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
input, select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
label.check input { width: auto; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel-hover);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--akzent); }
.btn-primary { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.btn-primary:hover { background: var(--akzent-hell); }
.btn-ghost { background: transparent; }
.btn-block { display: block; width: 100%; margin-top: 1rem; }
.btn-klein { padding: 0.25rem 0.7rem; font-size: 0.85rem; }

/* Aktions-Buttons mit Job-Status IM Button (Detailseite) */
.btn-laeuft { opacity: 0.75; cursor: progress; white-space: nowrap; }
.btn-ok {
  border-color: var(--positiv);
  color: var(--positiv);
  background: rgba(76, 175, 125, 0.12);
  white-space: nowrap;
}
.btn-fehler {
  border-color: var(--negativ);
  color: var(--negativ);
  background: rgba(232, 85, 69, 0.12);
  white-space: nowrap;
}
.btn-gefahr {
  border-color: var(--negativ);
  color: var(--negativ);
}
.btn-gefahr:hover {
  background: rgba(232, 85, 69, 0.14);
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-card { width: 100%; max-width: 380px; }
.login-logo {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.login-logo span { color: var(--akzent-hell); }

.tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.tab {
  flex: 1;
  padding: 0.45rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.tab.active { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Meldungen */
.meldung {
  margin-top: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  background: rgba(221, 51, 34, 0.12);
  border: 1px solid var(--akzent);
  color: var(--akzent-hell);
  font-size: 0.9rem;
}
.meldung.ok {
  background: rgba(76, 175, 125, 0.12);
  border-color: var(--positiv);
  color: var(--positiv);
}

/* Toolbar (Verwaltung) */
.toolbar { display: flex; gap: 0.8rem; margin-bottom: 1rem; }
.toolbar input[type="search"] { flex: 1; }
.toolbar .btn { white-space: nowrap; }
/* Benutzer-Filter: kompakt statt geerbter voller Breite */
.toolbar select { width: auto; max-width: 260px; flex: 0 0 auto; }

/* Fahrzeugaufträge (Phase 2) */
.fz-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}
.fz-kopf h1 { margin: 0; }
.fz-kopf p { margin: 0.2rem 0 0; }

.fz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.fz-karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.fz-zeile { margin: 0.3rem 0 0.6rem; min-height: 1.5em; }
.fz-meta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; }
.fz-badge {
  background: var(--bg-panel-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
}
.fz-status { font-size: 0.8rem; }
.fz-status-neu { color: var(--akzent-hell); }
.fz-status-aktiv { color: var(--positiv); }

/* Auftragsstatus-Badges: Werte + Farbschema wie das Altsystem
   (neu=warning, in_bearbeitung=info, auto_tuning=primary, manuell=secondary,
   fertig=success, fehler=danger), abgestimmt auf das dunkle Theme */
.status-badge {
  display: inline-block;
  border-radius: 6px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.status-warnung { background: #b58a1f; color: #1a1408; }
.status-info { background: #2596a6; }
.status-primaer { background: #2f6fd0; }
.status-sekundaer { background: #5a626e; }
.status-erfolg { background: #2f8f5b; }
.status-gefahr { background: #c23636; }
/* fertig_nicht_berechnet: dezent-grün (Umriss statt Fläche) – fertig, aber 0,00 € */
.status-erfolg-dezent {
  background: transparent;
  border: 1px solid #2f8f5b;
  color: #4fbf83;
}

/* Auftragshistorie (Detailseite): dezenter Aufklapper unter dem aktuellen Auftrag */
.auftrag-historie { margin-top: 0.85rem; }
.auftrag-historie summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  user-select: none;
}
.historie-eintrag {
  border-top: 1px solid var(--border);
  padding: 0.55rem 0;
  font-size: 0.9rem;
}
.historie-eintrag .opt-badges { margin: 0.3rem 0 0.1rem; }
.historie-preise { margin-top: 0.2rem; }

/* Toolbox: MMF-Upload-Felder + Crypt-Auswahl in der Fahrzeug-Dateiliste */
.upload-feld {
  display: block;
  margin: 0.8rem 0;
  padding: 1.2rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--akzent-hell);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-feld:hover { border-color: var(--akzent); background: var(--bg-panel-hover); }
.crypt-auswahl {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
}
.radio-zeile { display: flex; gap: 1.2rem; margin: 0.4rem 0 0.8rem; }
.radio-zeile label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* Log-Viewer (vollwertiger Port von pk-solutions) */
/* Log-Viewer: volle Breite (Diagramm + breite Datentabelle) statt des
   zentrierten 1700px-Rahmens — sonst läuft der Inhalt rechts aus der Seite,
   während links der Zentrier-Rand leer bleibt. Alles Breite bleibt IM Rahmen
   scrollbar. */
.container-breit { max-width: calc(100vw - 2.4rem); }
.container-breit .card { overflow-x: auto; }
.lv-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .lv-layout { grid-template-columns: 1fr; } }
/* Nach dem Öffnen eines Logs klappt die Liste zu (volle Chart-Breite) */
#lv-row.list-collapsed { grid-template-columns: 1fr; }
#lv-row.list-collapsed .lv-liste-karte { display: none; }
.lv-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lv-spacer { flex: 1; }
.lv-klein { font-size: 0.8rem; }
.lv-akzent { color: var(--akzent-hell, var(--akzent)); }
.lv-card { margin-bottom: 1rem; }
.lv-viewer-kopf h2 { margin: 0; word-break: break-all; font-size: 1.1rem; }
.lv-leer-karte { cursor: pointer; text-align: center; padding: 2.5rem 1rem; }
.lv-leer-karte:hover { border-color: var(--akzent); }
.lv-drop-overlay {
  position: fixed; inset: 0; z-index: 1080; display: none;
  align-items: center; justify-content: center; pointer-events: none;
  background: rgba(211, 51, 34, 0.12); border: 4px dashed var(--akzent);
  color: var(--text); font-size: 1.5rem;
}
.lv-drop-overlay.active { display: flex; }
/* Log-Liste (Markup kommt aus log-viewer.js: .lv-item/.delbtn/.name/.meta/.src) */
.lv-liste { margin: 0.6rem 0 0; max-height: 70vh; overflow-y: auto; }
.lv-item {
  position: relative; padding: 0.5rem 1.4rem 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; cursor: pointer;
}
.lv-item:hover { background: var(--bg-panel-hover); }
.lv-item.active { border-left-color: var(--akzent); background: var(--bg-panel-hover); }
.lv-item .name { font-weight: 600; word-break: break-all; }
.lv-item .meta { font-size: 0.78rem; color: var(--text-muted); }
.lv-item .vehicle-link a { font-size: 0.8rem; }
.lv-item .src {
  display: inline-block; padding: 0 0.35rem; border-radius: 4px;
  font-size: 0.7rem; border: 1px solid var(--border); color: var(--text-muted);
}
.lv-item .src.nextcloud { color: #58a6ff; border-color: #58a6ff55; }
.lv-item .delbtn {
  position: absolute; top: 0.35rem; right: 0.45rem;
  color: var(--negativ); opacity: 0.5; cursor: pointer; font-size: 1rem;
}
.lv-item:hover .delbtn { opacity: 1; }
/* Chart-Bereich */
.lv-diagramm-zeile { display: grid; grid-template-columns: 230px 1fr; gap: 1rem; margin-top: 0.8rem; }
@media (max-width: 900px) { .lv-diagramm-zeile { grid-template-columns: 1fr; } }
.lv-session-wrap { margin-bottom: 0.5rem; }
.lv-kanal-kopf { cursor: pointer; user-select: none; margin: 0.4rem 0 0.3rem; }
.lv-cols-wrap {
  max-height: 340px; overflow-y: auto; padding: 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; background: rgba(0, 0, 0, 0.2);
}
.lv-col-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lv-col-item label { flex: 1; font-size: 0.82rem; cursor: pointer; margin: 0; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-col-numeric { color: #79c0ff; }
.lv-col-text { color: var(--text-muted); }
.lv-auto-btn { width: 100%; margin-top: 0.5rem; }
#lv-chart-wrap { position: relative; height: 420px; }
.lv-slider-wrap { padding: 4px 14px 2px 14px; }
/* Daten-Tabelle (thead/filter kommen aus dem JS) */
.lv-table-wrap { max-height: 500px; overflow: auto; resize: vertical; border: 1px solid var(--border); border-radius: 8px; margin-top: 0.6rem; }
.lv-tabelle { font-size: 0.78rem; border-collapse: collapse; width: 100%; }
.lv-tabelle th { position: sticky; top: 0; background: var(--bg-panel); padding: 0.3rem 0.5rem; text-align: left; z-index: 1; }
.lv-tabelle td { padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); white-space: nowrap; }
.lv-tabelle th input { margin-top: 0.25rem; font-size: 0.75rem; padding: 0.15rem 0.35rem; min-width: 70px; }
/* Leistungsdiagramm */
.lv-power-box {
  border: 1px solid rgba(88, 166, 255, 0.3); border-radius: 8px;
  background: rgba(0, 0, 0, 0.3); padding: 0.8rem; margin: 0.8rem 0;
}
.lv-power-steuerung { margin-top: 0.6rem; display: grid; gap: 0.45rem; }
.lv-power-steuerung label { cursor: pointer; }
/* Shims für JS-generierte Bootstrap-Klassen + Formular-CSS-Falle (width:100%) */
.lv-seite input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.lv-seite input[type="color"] { width: 24px; height: 20px; padding: 0; border: none; background: transparent; flex: 0 0 auto; }
.lv-seite input[type="range"] { width: auto; padding: 0; border: none; background: transparent; accent-color: var(--akzent); }
.lv-seite .text-secondary { color: var(--text-muted); }
.lv-seite .form-check-input { width: auto; }
/* noUiSlider dunkel (Overrides zum Vendor-CSS) */
.lv-seite .noUi-target { background: var(--bg-panel); border: 1px solid var(--border); box-shadow: none; height: 4px; border-radius: 2px; }
.lv-seite .noUi-connect { background: var(--akzent); border-radius: 2px; }
.lv-seite .noUi-handle {
  background: var(--akzent); border: none; box-shadow: none; border-radius: 2px;
  width: 8px !important; height: 14px !important; right: -4px !important; top: -6px !important; cursor: ew-resize;
}
.lv-seite .noUi-handle:before, .lv-seite .noUi-handle:after { display: none; }

/* Unzip-Dialog (Fahrzeugseite) */
.zip-liste { list-style: none; margin: 0.6rem 0; padding: 0; max-height: 45vh; overflow-y: auto; }
#zipDialog { width: min(600px, 92vw); }
.zip-liste li { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }
/* Die Checkbox erbt sonst width:100% aus dem Formular-CSS und wird zum Balken */
.zip-liste input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.zip-liste li span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.zip-liste .muted { margin-left: auto; font-size: 0.8rem; white-space: nowrap; flex: 0 0 auto; }

/* Fahrzeugliste als sortierbare Tabelle */
.fz-tabelle-wrap { margin-top: 1rem; padding: 0.4rem 1.2rem; overflow-x: auto; }
.fz-tabelle tbody tr { cursor: pointer; }
.fz-tabelle tbody tr:hover td { background: var(--bg-panel-hover); }
.fz-tabelle td { vertical-align: top; }
.fz-unterzeile { font-size: 0.82rem; }
.fz-geaendert { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fz-kennzeichen { white-space: nowrap; }   /* Kennzeichen nie umbrechen */
.fz-benutzer { white-space: nowrap; }      /* Benutzer-Spalte nicht abschneiden */
th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortierbar:hover { color: var(--text); }
.sort-pfeil { color: var(--akzent-hell); font-size: 0.75rem; }
.opt-badges-zeile { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; }

/* Sanfte Einblende-Animation für neue Karten/Zeilen (Live-Updates) */
.einblenden { animation: fz-einblenden 0.6s ease-out; }
@keyframes fz-einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.pulsieren { animation: fz-pulsieren 1.2s ease-out; }
@keyframes fz-pulsieren {
  0% { background: var(--akzent); border-color: var(--akzent); color: #fff; }
  100% { background: var(--bg-panel-hover); border-color: var(--border); }
}

/* Live-Verbindungsanzeige (SSE) */
.live-punkt {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: middle;
}
.live-punkt.aktiv { background: var(--positiv); box-shadow: 0 0 6px var(--positiv); }

/* Detailseite */
.fz-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
@media (max-width: 800px) { .fz-detail-grid { grid-template-columns: 1fr; } }
.fz-detail-grid h2 { margin-top: 0; }
.fz-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}
.fz-details dt { color: var(--text-muted); font-size: 0.9rem; }
.fz-details dd { margin: 0; }
.fz-dateien h2 { margin-top: 0; }
.opt-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.opt-badge {
  background: rgba(221, 51, 34, 0.15);
  border: 1px solid var(--akzent);
  color: var(--akzent-hell);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
/* ECU-Erkennung v2: geprüft, aber kein sicheres Ergebnis (UNKNOWN/REVIEW) */
.opt-badge.opt-badge-grau {
  background: var(--bg-panel-hover);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Peitschen-Easter-Egg (bruderpreis50) */
.kfg-knall {
  position: absolute;
  font-size: 2rem;
  font-weight: 800;
  color: var(--akzent-hell);
  text-shadow: 0 0 12px rgba(232, 85, 69, 0.8);
  pointer-events: none;
  animation: kfg-knall-anim 0.9s ease-out forwards;
  z-index: 10;
}
@keyframes kfg-knall-anim {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  15% { transform: scale(1.4) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg) translateY(-30px); opacity: 0; }
}
.kfg-shake { animation: kfg-shake-anim 0.5s ease-in-out; }
@keyframes kfg-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-9px, 3px) rotate(-0.6deg); }
  40% { transform: translate(8px, -4px) rotate(0.5deg); }
  60% { transform: translate(-6px, 2px) rotate(-0.3deg); }
  80% { transform: translate(4px, -2px) rotate(0.2deg); }
}

/* Rabattcode-Rückmeldung im Konfigurator-Assistenten */
.kfg-code-info { display: block; font-size: 0.8rem; margin-top: 0.25rem; }
.kfg-code-info.ok { color: var(--positiv); }
.kfg-code-info.bad { color: var(--negativ); }

/* Dialoge */
dialog {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  width: min(420px, 92vw);
  box-shadow: var(--schatten);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2 { margin-top: 0; }
#aiDialog .fz-tabelle td, #aiDialog .fz-tabelle th { padding: .35rem .5rem; }
#aiDialog .fz-tabelle td:last-child { white-space: nowrap; }

/* ECU AI (ecufile): anklickbare OFF-Lösungs-Chips */
.ecu-ai-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.ecu-ai-chip { cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.ecu-ai-chip:hover { border-color: var(--positiv); }
.ecu-ai-chip.ecu-ai-aktiv {
  background: var(--positiv);
  border-color: var(--positiv);
  color: #06210f;
  font-weight: 600;
}

/* AI-Modulverwaltung (Phase 4b): breiter Dialog + Familien-Mehrfachauswahl.
   Checkbox-Breite EXPLIZIT (globale input-width-Falle, siehe Projektregeln). */
.modul-dialog { width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; }
.familien-feld {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.6rem 0;
  padding: 0.4rem 0.8rem 0.8rem;
}
.familien-feld legend { color: var(--text-muted); font-size: 0.85rem; padding: 0 0.3rem; }
.familien-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.15rem 0.6rem;
  margin-bottom: 0.5rem;
}
.familien-grid label.check { font-size: 0.9rem; }
.familien-grid input[type="checkbox"] { width: auto; }
.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* ---------- Toolbox (Phase 5) ---------- */
.tb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 700px) { .tb-grid { grid-template-columns: 1fr; } }
.tb-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
  font-size: 13px;
}
.tb-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  color: var(--text-muted);
}
.tb-zone:hover, .tb-zone.dragging { background: var(--bg-panel-hover); border-color: var(--akzent); }
.tb-zone.filled { border-color: var(--positiv); background: rgba(76, 175, 125, 0.08); color: var(--text); }
.tb-zone.bad { border-color: var(--negativ); background: rgba(232, 85, 69, 0.08); }
.tb-zone-name { font-size: 13px; word-break: break-all; }
.tb-info-box { margin-top: 0.5rem; }
.tb-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.tb-info-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.tb-info-val { font-family: ui-monospace, monospace; font-weight: 600; }
.tb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
}
.tb-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.tb-info-card .tb-info-val { display: block; margin-top: 0.2rem; }

/* ── Konfigurator-Assistent „Auftrag erstellen" (Phase 3) ── */
.kfg-dialog { width: min(840px, 96vw); max-height: 92vh; overflow-y: auto; }
.kfg-dialog h3 { font-size: 0.95rem; margin: 0.9rem 0 0.4rem; color: var(--text-muted); }
.kfg-tabs { margin-bottom: 0.8rem; }
.kfg-tabs .tab { cursor: pointer; }
.kfg-tabs .tab.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.kfg-btn-zeile { margin: 0.8rem 0 0; }
.kfg-kaskade { display: flex; gap: 0.5rem; margin: 0.6rem 0; flex-wrap: wrap; }
.kfg-kaskade select { flex: 1 1 180px; min-width: 0; }
#kfgSuche { width: 100%; }
.kfg-treffer-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.5rem; margin: 0.6rem 0; }
.kfg-treffer-titel { grid-column: 1 / -1; margin: 0; }
.kfg-treffer { text-align: left; background: var(--bg-panel-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem;
  cursor: pointer; font: inherit; line-height: 1.35; }
.kfg-treffer:hover { border-color: var(--akzent); }
.kfg-fzg { background: var(--bg-panel-hover); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.4rem 0; }
.kfg-leistung { margin-top: 0.5rem; }
.kfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.15rem 0.8rem; }
.kfg-check { display: flex; align-items: baseline; gap: 0.45rem; cursor: pointer;
  padding: 0.15rem 0; }
.kfg-check input { width: auto; margin: 0; flex: none; }
.kfg-automatik { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-panel-hover); }
.kfg-automatik label { display: block; margin-bottom: 0.4rem; }
.kfg-automatik select { max-width: 260px; }
.kfg-spezial { display: flex; gap: 1rem; flex-wrap: wrap; }
.kfg-spezial label { flex: 1 1 240px; }
.kfg-spezial select { width: 100%; }
.kfg-extras { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-top: 0.8rem; }
.kfg-extras input[type="number"] { width: 90px; }
.kfg-extras input[type="text"] { width: 140px; }
.kfg-nachbesserung { margin-top: 0.2rem; }
.kfg-nachbesserung input[type="number"] { width: 110px; }
.kfg-nachbesserung input[type="text"] { width: 300px; max-width: 100%; }
.kfg-summe { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline;
  margin-top: 0.9rem; padding: 0.6rem 0.9rem; border: 1px solid var(--akzent);
  border-radius: 8px; font-size: 1.05rem; }
.kfg-summe strong { color: var(--akzent-hell); }
.kfg-tabelle { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.kfg-tabelle td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border); }
.kfg-tabelle td.num { text-align: right; white-space: nowrap; }
.kfg-summe-fazit { font-size: 1.1rem; }

/* ── Auftragsstatus-Workflow + Abrechnung ─────────────────────────────── */
/* Fileservice-Preis = der Betrag, der dem Kunden berechnet wird */
.fs-preis { color: var(--akzent-hell); font-size: 1.05em; }
.auftrag-status-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; margin-bottom: 0.8rem; }
.auftrag-status-label { display: inline-flex; gap: 0.5rem; align-items: center;
  margin: 0; font-weight: 600; }
.auftrag-status-label select { width: auto; }
.auftrag-status-meldung { flex-basis: 100%; }
.auftrag-status-meldung.negativ { color: var(--negativ); }
.abr-summe-zeile td { border-top: 2px solid var(--border); padding-top: 0.6rem; }

/* AI-Solutions-Vorschau (Phase 4a): BIN-Auswahl + Freigabe-Badges je ECU */
.ai-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  margin-bottom: 0.4rem; }
.ai-kopf label { display: inline-flex; gap: 0.5rem; align-items: center;
  margin: 0; font-weight: 600; }
.ai-kopf select { width: auto; max-width: 30rem; }
.ai-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ai-tool-gesperrt {
  background: var(--bg-panel-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0.6;
}
.ai-hinweis { margin: 0.7rem 0 0; font-size: 0.85rem; }

/* AI-Solutions-Module (Phase 4b/4c): eine Zeile je Modul mit Name/Preis/Aktion.
   Breit genug für die Flashdaten-Tabelle (Decrypt/Download laufen sonst raus). */
#aiDialog { width: min(980px, 96vw); max-height: 90vh; overflow-y: auto; }
.ai-module { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ai-modul-meldung { font-size: 0.82rem; margin: 0.15rem 0.55rem 0; }
.ai-modul-meldung:empty { display: none; }
.ai-modul-zeile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ai-modul-zeile.ai-modul-grau { opacity: 0.55; }
.ai-modul-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-modul-preis { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ai-modul-aktion { white-space: nowrap; }
.ai-modul-frei { color: var(--positiv); }
/* Original-Auswahl fürs CVN-Modul + Admin-Checkbox: Breite EXPLIZIT setzen
   (globale input/select-width-Falle, siehe Projektregeln) */
.ai-modul-zeile select { width: auto; max-width: 200px; }
.ai-ohne-berechnung { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.ai-ohne-berechnung input[type="checkbox"] { width: auto; }