/* =========================================================
   Reparaturverwaltung — Designsystem "Werkstattticket"
   Idee: Auftraege wirken wie echte Reparatur-Anhaenger:
   Tinte-Tuerkis als Werkbank-Farbe, Signalorange als
   Werkzeug-Akzent, Monospace fuer Auftragsnummern/Daten.
   ========================================================= */

:root {
  --bg: #eef1f2;
  --surface: #ffffff;
  --surface-sunken: #e4e9eb;
  --border: #d8dee1;
  --border-strong: #b9c2c6;

  --ink: #1b2428;
  --ink-soft: #5b6a70;
  --ink-faint: #8b979c;

  --primary: #91C3C3;
  --primary-hover: #7aafaf;
  --on-primary: #ffffff;

  --accent: #e0590c;
  --accent-hover: #c44c08;
  --on-accent: #fff8f2;

  --status-offen: #2f6fa3;
  --status-offen-bg: #e3eef7;
  --status-bearbeitung: #b9690f;
  --status-bearbeitung-bg: #faecd8;
  --status-teil: #6e4fa8;
  --status-teil-bg: #ece5f7;
  --status-erledigt: #2c7a4b;
  --status-erledigt-bg: #e2f2e7;

  --prio-niedrig: #5b6a70;
  --prio-niedrig-bg: #e7eaeb;
  --prio-normal: #2f6fa3;
  --prio-normal-bg: #e3eef7;
  --prio-hoch: #b9690f;
  --prio-hoch-bg: #faecd8;
  --prio-dringend: #c4280f;
  --prio-dringend-bg: #fbe3de;

  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(20, 49, 56, 0.06), 0 1px 1px rgba(20, 49, 56, 0.04);
  --shadow-hover: 0 6px 16px rgba(20, 49, 56, 0.12);

  /* Radio-Manufaktur CI */
  --rm-teal: #91C3C3;
  --rm-teal-hover: #7aafaf;
  --rm-red: #B9002D;
  --rm-dark-red: #732D32;
  --header-bg: #f3eece;
  --header-text: #1b2428;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.mono { font-family: var(--font-mono); }

/* ---------- Kopfzeile ---------- */
.app-header {
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 3px solid var(--rm-red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.app-header a, .app-header h1 { color: var(--header-text); }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--rm-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.back-link {
  color: var(--ink-soft);
  font-size: 0.875rem;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--ink); }

.app-logo { height: 40px; width: auto; object-fit: contain; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--rm-teal);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-primary:hover { background: var(--rm-teal-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: var(--surface-sunken);
  color: var(--ink);
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.btn-secondary:hover { background: var(--border-strong); }

.btn-danger-text {
  color: var(--prio-dringend);
  font-size: 0.875rem;
  font-weight: 500;
}
.btn-danger-text:hover { text-decoration: underline; }

/* ---------- Karten / Panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.field-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20, 49, 56, 0.12);
}

.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  margin-bottom: 0.375rem;
  padding-left: 1rem; /* an Input-Padding angeglichen */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Hinweis: bewusst KEIN ":first-child"-Reset mehr hier – das griff fälschlich auch
   bei verschachtelten Wrapper-Divs (z. B. Straße), wo das Label technisch das erste
   Kind seines eigenen Wrappers ist, aber im Formular nicht das erste Feld. Für die
   tatsächlich ersten Felder eines Panels wird margin-top:0 gezielt inline gesetzt. */

/* Zuverlässiges Verstecken, unabhängig vom Tailwind-CDN-Timing */
.hidden { display: none !important; }

/* Konsistente Höhe für alle Eingabefelder (außer Textarea) */
input.field-input, select.field-input {
  height: 2.65rem;
  box-sizing: border-box;
}

/* Bugfix: number-Inputs mit nativen Spinner-Pfeilen zentrieren den Text sonst nicht
   vertikal, wenn eine feste Höhe gesetzt ist (v. a. Safari/WebKit) */
input.field-input[type="number"] {
  line-height: 1.4rem;
}

/* Textarea wächst mit dem Inhalt statt manuell skalierbar zu sein */
textarea.field-input {
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Read-only Anzeige-Feld (z. B. Kunden-Nr.), optisch wie ein normales Feld */
.field-input[readonly], .field-input:disabled {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  cursor: default;
}

/* Panel-Überschriften: einheitlich GROSSBUCHSTABEN, gleiche Einrückung wie Feldinhalte */
.panel-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding-left: 1rem;
  margin-bottom: 1rem;
}

/* Hinweistexte innerhalb eines Panels (z. B. "Noch keine ...") gleiche Einrückung */
.panel-note { padding-left: 1rem; }

/* Summenzeile (Gesamtbetrag Teile / Lohn) – rechtsbündig, einheitliche Optik */
.total-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.total-row .total-label { font-size: 0.75rem; color: var(--ink-faint); }
.total-row .total-value { font-weight: 700; font-size: 0.875rem; }

/* Stammdaten: Kunde / Gerät & Auftrag nebeneinander, auf schmalen Bildschirmen gestapelt */
.stammdaten-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .stammdaten-grid { grid-template-columns: 1fr; }
}

/* Ersatzteil-Eingabezeile: Suche + kompakte Menge/Preis/Rabatt-Gruppe */
.part-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
.part-form-grid .pf-search { flex: 1 1 220px; min-width: 200px; }
.pf-qty-group { display: flex; gap: 0.5rem; }
.pf-qty-group .field-label {
  white-space: nowrap;
  padding-left: 0;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.pf-qty-group .pf-menge  { width: 80px; }
.pf-qty-group .pf-preis  { width: 110px; }
.pf-qty-group .pf-rabatt { width: 75px; }
.pf-submit { white-space: nowrap; }

@media (max-width: 640px) {
  .part-form-grid { align-items: stretch; }
  .part-form-grid .pf-search { flex: 1 1 100%; min-width: 0; }
  .pf-qty-group { flex: 1 1 100%; }
  .pf-qty-group .pf-menge, .pf-qty-group .pf-preis, .pf-qty-group .pf-rabatt {
    width: auto;
    flex: 1 1 0;
  }
  .pf-submit { flex: 1 1 100%; }
}

/* Gruppierungs-Box für zusammengehörige Feldpaare */
.field-group-box {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.85rem 0.85rem;
}
.field-group-box .field-label:first-child { margin-top: 0; }

/* ---------- Statistik-Kacheln ---------- */
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tile-color, var(--primary));
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
}
.stat-tile .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Kanban-Spalten ---------- */
.board-column {
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 0.75rem;
  min-height: 140px;
}
.board-column-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
}
.board-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ---------- Auftrags-Ticket (Signature-Element) ---------- */
.ticket {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ticket:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
/* Lochung oben links wie bei einem Anhaenger */
.ticket::before {
  content: '';
  position: absolute;
  top: 0.85rem;
  left: -5px;
  width: 9px;
  height: 9px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.ticket-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.ticket-divider {
  border: none;
  border-top: 1px dashed var(--border-strong);
  margin: 0.5rem 0;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }

.badge-status-offen { background: var(--status-offen-bg); color: var(--status-offen); }
.badge-status-offen .badge-dot { background: var(--status-offen); }
.badge-status-in_bearbeitung { background: var(--status-bearbeitung-bg); color: var(--status-bearbeitung); }
.badge-status-in_bearbeitung .badge-dot { background: var(--status-bearbeitung); }
.badge-status-wartet_teil { background: var(--status-teil-bg); color: var(--status-teil); }
.badge-status-wartet_teil .badge-dot { background: var(--status-teil); }
.badge-status-teil_eingetroffen { background: #e2f2f3; color: #0e7c86; }
.badge-status-teil_eingetroffen .badge-dot { background: #0e7c86; }
.badge-status-kva        { background: #fef3e8; color: #d4860a; }
.badge-status-kva .badge-dot { background: #d4860a; }
.badge-status-kva_genehmigt { background: #e7f3ea; color: #3f8f4f; }
.badge-status-kva_genehmigt .badge-dot { background: #3f8f4f; }
.badge-status-kva_abgelehnt { background: #fbe9e9; color: #b23b3b; }
.badge-status-kva_abgelehnt .badge-dot { background: #b23b3b; }
.badge-status-probelauf  { background: #f0eaf7; color: #7b5ea7; }
.badge-status-probelauf .badge-dot { background: #7b5ea7; }
.badge-status-rueckfrage { background: #fff0e6; color: #b05a00; }
.badge-status-rueckfrage .badge-dot { background: #b05a00; }
.badge-status-abholbereit { background: #e6f7ef; color: #2e7d4f; }
.badge-status-abholbereit .badge-dot { background: #2e7d4f; }
.badge-status-abgeholt { background: #e3ede8; color: #1d5c38; }
.badge-status-abgeholt .badge-dot { background: #1d5c38; }
.badge-status-erledigt { background: var(--status-erledigt-bg); color: var(--status-erledigt); }
.badge-status-erledigt .badge-dot { background: var(--status-erledigt); }

.badge-prio-niedrig { background: var(--prio-niedrig-bg); color: var(--prio-niedrig); }
.badge-prio-normal { background: var(--prio-normal-bg); color: var(--prio-normal); }
.badge-prio-hoch { background: var(--prio-hoch-bg); color: var(--prio-hoch); }
.badge-prio-dringend { background: var(--prio-dringend-bg); color: var(--prio-dringend); }

/* ---------- Notizen ---------- */
.note-item {
  border-left: 2px solid var(--border-strong);
  padding: 0.25rem 0 0.25rem 0.75rem;
}
.note-text { font-size: 0.875rem; color: var(--ink); white-space: pre-wrap; }
.note-meta { font-size: 0.7rem; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 0.2rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  box-shadow: var(--shadow-hover);
  z-index: 50;
  animation: toast-in 0.2s ease-out;
}
.toast-error { background: var(--prio-dringend); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}