/* ==========================================================================
   LD2 Intern — Kompatibilitäts-Layer
   29.07.2026 · Aisha

   WARUM DIESE DATEI EXISTIERT
   angebote.js, rechnungen.js und customers.js erzeugen Tabellenzeilen, Buttons
   und Badges per innerHTML — mit ALTEN Klassennamen (btn-primary, badge-info,
   status-badge, abr-num …). Diese Klassen stehen NICHT im HTML, also hilft es
   nicht, nur die HTML-Dateien umzubauen: die JS-gerenderten Teile blieben im
   alten Look.

   Statt ~100 innerHTML-Stellen in den JS-Dateien anzufassen (riskant, weil dort
   die Logik hängt), mappt dieser Layer die alten Klassen auf das neue
   Design-System. Ein Ort, keine Logik berührt.

   LADEREIHENFOLGE: ld2-design.css  ->  ld2-compat.css  (danach!)
   ========================================================================== */

/* --- 1. Buttons ------------------------------------------------------- */
.btn:not([class*="btn--"]) {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font); font-size: 13px; font-weight: 550;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  background: #fff; color: var(--grey-600);
  border-color: var(--grey-300);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  box-shadow: none;
}
.btn:not([class*="btn--"]):hover {
  background: var(--grey-50);
  border-color: var(--grey-500);
  transform: none;                 /* altes translateY(-2px) neutralisieren */
}

.btn-primary, .btn.btn-primary {
  background: var(--ld2-orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  background-image: none !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--ld2-orange-dark) !important;
  box-shadow: 0 2px 10px rgba(255,122,0,.3);
}

/* 29.07.2026 (Wunsch Oliver): keine grünen Buttons mehr — LD2-Dunkelblau.
   Grün bleibt Statusfarbe (.badge-success, .pill--ok), ist aber keine Aktion.
   ACHTUNG: dieses !important hat den lokalen Tausch in rechnungen.html
   (.btn-success -> #0c1535) überstimmt. Deshalb gehört der Wert hierher. */
.btn-success, .btn.btn-success {
  background: var(--ld2-navy) !important;
  color: #fff !important;
  border-color: transparent !important;
  background-image: none !important;
}
.btn-success:hover, .btn.btn-success:hover {
  background: var(--ld2-navy-600) !important;
}

.btn-danger, .btn.btn-danger {
  background: #fff !important;
  color: var(--crit-fg) !important;
  border-color: var(--crit-bg) !important;
  background-image: none !important;
}
.btn-danger:hover {
  background: var(--crit-bg) !important;
  border-color: var(--crit-fg) !important;
}

.btn-secondary, .btn.btn-secondary,
.btn-graphite, .btn.btn-graphite {
  background: #fff !important;
  color: var(--grey-600) !important;
  border-color: var(--grey-300) !important;
  background-image: none !important;
}
.btn-secondary:hover { background: var(--grey-50) !important; }

.btn-sm, .btn.btn-sm {
  height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px;
}
.btn-sm i, .btn i { font-size: 12px; }

/* --- 2. Badges -> Pills ---------------------------------------------- */
.badge, .status-badge, .abr-status {
  display: inline-flex; align-items: center;
  height: 21px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--idle-bg); color: var(--idle-fg);
  border: none; text-transform: none;
}
.badge-success, .badge.badge-success,
.status-bezahlt, .status-erteilt, .status-aktiv {
  background: var(--ok-bg) !important; color: var(--ok-fg) !important;
}
.badge-warning, .badge.badge-warning,
.status-offen, .status-versendet, .status-freigegeben {
  background: var(--warn-bg) !important; color: var(--warn-fg) !important;
}
.badge-danger, .badge.badge-danger,
.status-ueberfaellig, .status-storniert, .status-abgelehnt {
  background: var(--crit-bg) !important; color: var(--crit-fg) !important;
}
.badge-info, .badge.badge-info {
  background: rgba(255,122,0,.12) !important; color: var(--ld2-orange-dark) !important;
}
.badge-secondary, .badge.badge-secondary {
  background: var(--idle-bg) !important; color: var(--idle-fg) !important;
}
/* "beauftragt" (30.07.2026). Grün ist für "nur angeboten" reserviert, und auf
   der orangen Angebotszeile würde ein grünes Pill verschwimmen. Steht hier statt
   in einer Seite, weil es inzwischen angebote.html UND customers.html nutzen. */
.badge-auftrag, .badge.badge-auftrag {
  background: var(--ld2-navy); color: #fff;
}

/* --- 3. Tabellen (alte Klassennamen) --------------------------------- */
.customers-table, .angebote-table, .rechnungen-table,
table.data-table, .positions-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font);
}
.customers-table th, .angebote-table th, .rechnungen-table th,
table.data-table th, .positions-table th {
  text-align: left;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--grey-500); font-weight: 600;
  padding: 11px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}
.customers-table td, .angebote-table td, .rechnungen-table td,
table.data-table td, .positions-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--grey-800);
}
.customers-table tbody tr:hover, .angebote-table tbody tr:hover,
.rechnungen-table tbody tr:hover, table.data-table tbody tr:hover {
  background: var(--grey-50);
}

/* Zahlen tabellarisch + rechts */
.text-right, .abr-num, .abr-rechts, td.betrag, .summe {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.text-center { text-align: center; }
.abr-leer { color: var(--grey-300); }

/* --- 4. Formulare ---------------------------------------------------- */
.form-input, .form-select, .form-control, input.form-control, select.form-control,
textarea.form-control {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--grey-300) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font); font-size: 13.5px;
  background: #fff; color: var(--grey-800);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.form-input:focus, .form-select:focus, .form-control:focus {
  outline: none;
  border-color: var(--ld2-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.13) !important;
}
.form-label, label.form-label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--grey-600);
}

/* --- 5. Karten / Sektionen ------------------------------------------- */
.card:not([class*="card--"]), .table-section, .controls,
.controls-section, .panel, .box {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* --- 6. Statistik-Kacheln ------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat-card, .stats-grid > div {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.stat-card:hover, .stats-grid > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.stat-value, .stat-number {
  font-size: 26px; font-weight: 650; letter-spacing: -.025em;
  color: var(--ld2-navy); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label, .stat-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--grey-500); font-weight: 600; margin-bottom: 6px;
}

/* --- 7. Ladeanzeige / Leerzustand ----------------------------------- */
.loading, .no-data, .loading-persons, .no-persons {
  text-align: center; padding: 28px 18px;
  color: var(--grey-500); font-size: 13.5px;
}
.fa-spinner.fa-spin { color: var(--ld2-orange); }

/* --- 8. Pagination --------------------------------------------------- */
.pagination { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.pagination button, .pagination a, .page-btn {
  min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--grey-300);
  background: #fff; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 12.5px;
  color: var(--grey-600); cursor: pointer; text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.pagination button:hover, .pagination a:hover, .page-btn:hover {
  border-color: var(--ld2-orange); color: var(--ld2-orange);
}
.pagination .active, .page-btn.active,
.pagination button[disabled] {
  background: var(--ld2-navy); border-color: var(--ld2-navy);
  color: #fff; font-weight: 600;
}

/* --- 9. Positionen / Artikel (angebote.js) -------------------------- */
.position-item, .artikel-item {
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 9px;
  background: #fff;
  transition: border-color var(--t-fast) var(--ease);
}
.position-item:hover, .artikel-item:hover { border-color: var(--grey-300); }
.position-title { font-weight: 600; color: var(--ld2-navy); font-size: 13.5px; }
.position-actions { display: flex; gap: 4px; }
.rechnung-angebotsbezug { font-size: 12px; color: var(--grey-500); }

/* --- 10. Altes Gehüpf abschalten ------------------------------------ */
.nav-button:hover, .btn:hover, .stat-card:hover .stat-value {
  transform: none;
}
.nav-button {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- 11. Alter .header-Block (falls noch irgendwo) ------------------ */
.header {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.header h1 {
  font-family: var(--font);
  font-size: 22px; font-weight: 650;
  letter-spacing: -.02em; color: var(--ld2-navy);
}

/* ==========================================================================
   12. UMFRAGEN — Ergebnis-Balken
   Nachtrag 29.07.2026: Abschnitt 3 (.bar in Tabellen) hat die Umfrage-Balken
   überschrieben. Die Balken werden von umfragen.js per innerHTML erzeugt und
   tragen Inline-Hex (#16a34a ja / #dc2626 nein / #0c1535 optionen).
   Hier gezielt wiederherstellen und auf Tokens heben.
   Nachtrag 3 (Wunsch Oliver, 29.07.2026 abends): Die Geometrie-Regeln von hier
   sind ZURÜCKGENOMMEN. Halbe Breite / halbe Höhe waren zu klein — die Balken
   wirkten "mikrig". Größe und Farbe stehen jetzt im eigenen <style> von
   umfragen.html bzw. umfrage-ergebnisse.html (30px hoch, volle Breite, orange).
   Hier bleibt nur, was Abschnitt 3 sonst wieder kaputtmachen würde:
   .bar darf kein Tabellen-Styling abbekommen.
   Nicht wieder Breite/Höhe hier setzen — das überstimmt die Seiten per
   !important und war genau der Fehler.
   ========================================================================== */

/* Nur Neutralisierung gegen Abschnitt 3 — keine Geometrie, keine Farbe. */
.bar {
  box-shadow: none !important;
  padding: 0 !important;
}
.bar > div {
  height: 100% !important;
  min-width: 0;
}

/* Ja / Nein — beide orange, damit die Teilung trotzdem lesbar bleibt:
   Ja = volles Orange, Nein = helles Orange */
.bar .ja   { background: var(--ld2-orange)      !important; }
.bar .nein { background: var(--ld2-orange-lite) !important; }

/* Prozent-Label rechts neben dem Balken */
.qmeta {
  font-size: 12px !important;
  color: var(--grey-500) !important;
  margin-top: 5px !important;
  font-variant-numeric: tabular-nums;
}

/* Bemerkungs-Kaesten */
.bem {
  background: var(--grey-50) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  color: var(--grey-600);
  margin: 5px 0 !important;
}

/* Leer-/Ladezustand */
.state {
  text-align: center !important;
  color: var(--grey-500) !important;
  padding: 30px !important;
  font-size: 13.5px;
}

/* Frage-Block */
.q, .frage {
  margin-bottom: 18px;
}
.q > strong, .frage > strong {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ld2-navy);
}