/* ============================================================
   MP-Verwaltung – Design-System
   Phase 0 des Modernisierungskonzepts (siehe Modernisierungskonzept_MP-Verwaltung.docx)
   Angelehnt an das Erscheinungsbild von www.loewe-med.de
   Schriftart: Open Sans (in Produktion self-hosted, siehe Hinweis in styleguide.html)
   ============================================================ */

:root {
  /* ---------- Farben ---------- */
  --color-primary: #1B2A4A;        /* Marken-Navy (Headlines, Hauptnavigation) */
  --color-primary-light: #3E6B99;  /* Sekundärblau (Links, aktive Zustände) */
  --color-accent: #D5E0EB;         /* Theme-Farbe loewe-med.de (Flächen, Hover-Hintergründe) */
  --color-accent-dark: #A9C0D6;    /* dunklere Accent-Variante (Rahmen, Hover) */

  --color-bg: #F6F8FB;             /* Seitenhintergrund */
  --color-surface: #FFFFFF;        /* Karten/Formulare/Tabellen */
  --color-surface-alt: #F0F3F8;    /* Zebra-Streifen, dezente Flächen */
  --color-border: #DCE3EC;

  --color-text: #1F2733;
  --color-text-muted: #616B7A;
  --color-text-inverse: #FFFFFF;

  --color-success: #2E9E6B;
  --color-success-bg: #E4F5EE;
  --color-warning: #E08A2C;
  --color-warning-bg: #FCEEDC;
  --color-danger: #D14343;
  --color-danger-bg: #FBE7E7;
  --color-info: var(--color-primary-light);
  --color-info-bg: #E7EFF6;

  /* ---------- Typografie ---------- */
  --font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-xxl: 2.25rem;   /* 36px */
  --lh-base: 1.5;

  /* ---------- Abstände (4px-Raster) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- Radien / Schatten ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(27, 42, 74, 0.10);
  --shadow-lg: 0 12px 32px rgba(27, 42, 74, 0.16);

  /* ---------- Touch/Bedienung ---------- */
  --touch-target: 44px;   /* Mindestgröße für Buttons/Eingaben – iPad-Fingerbedienung */
  --focus-ring: 0 0 0 3px rgba(62, 107, 153, 0.35);

  /* ---------- Breakpoints (als Referenz, in @media direkt verwendet) ----------
     Mobile: < 768px | Tablet/iPad: 768–1279px | Laptop/Desktop: ≥ 1280px */
}

/* ============================================================
   Basis / Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-family);
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-4); color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
a { color: var(--color-primary-light); }

/* ============================================================
   Layout-Hilfen
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* ============================================================
   Navigation (Kopfbereich)
   ============================================================ */
.app-header {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text-inverse);
}

.app-header__logo {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  line-height: 0;
}

.app-header__logo img {
  display: block;
  height: 28px;
  width: auto;
}

.app-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.app-nav a {
  color: var(--color-text-inverse);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.app-nav a:hover,
.app-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.app-nav a.is-active {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ============================================================
   Kunden-Kontext-Leiste (auf jeder Seite innerhalb eines Kunden,
   z. B. Geräteliste/Prüfberichte) - macht auf einen Blick sichtbar, in
   welchem Kunden man sich gerade befindet, damit man nicht versehentlich
   Daten eines falschen Kunden bearbeitet.
   ============================================================ */
.kunde-context-bar {
  background: var(--color-success-bg);
  color: var(--color-primary);
  padding: var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-success);
}

.kunde-context-bar a {
  color: var(--color-success);
  text-decoration: none;
  font-weight: 700;
}

.kunde-context-bar a:hover,
.kunde-context-bar a:focus-visible {
  text-decoration: underline;
}

.kunde-context-bar__label {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* ============================================================
   Footer (Phase K: Copyright/Version + Impressum-Link auf jeder Seite)
   ============================================================ */
.app-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--color-border);
}

.app-footer a {
  color: var(--color-text-muted);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0 var(--space-5);
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: #142038; }

.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-accent); border-color: var(--color-accent-dark); }

.btn-danger { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-danger:hover { background: #b23434; }

.btn-ghost { background: transparent; color: var(--color-primary-light); }
.btn-ghost:hover { background: var(--color-accent); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Kompakte Variante fuer wiederholte Aktionen in Tabellenzeilen (z. B.
   Geraeteliste/Kundenliste) - der volle .btn-Abstand (space-5 + 44px
   Touch-Ziel) macht die Aktionsspalte bei 2-3 Buttons je Zeile sehr breit
   und die Liste dadurch unuebersichtlich. Bewusst weiterhin gut lesbar/
   klickbar (kein Icon-only), nur kompakter. */
.btn-sm {
  padding: 0 var(--space-3);
  min-height: 32px;
  min-width: auto;
  font-size: var(--fs-xs);
}

/* Aktionsleiste in Formularen: Speichern/Abbrechen bewusst weit auseinander (CMS-5463) */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* ============================================================
   Formulare
   ============================================================ */
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.field .hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-target);
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: var(--focus-ring);
}

.input.is-invalid { border-color: var(--color-danger); background: var(--color-danger-bg); }
.field .error-text { color: var(--color-danger); font-size: var(--fs-xs); margin-top: var(--space-1); }

/* Kompakte Variante von .input - Pendant zu .btn-sm, fuer die von
   table-search.js injizierte Spalten-Suchzeile in Tabellen (siehe unten). */
.input-sm {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--fs-xs);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  min-height: 32px;
  appearance: none;
}
.input-sm:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: var(--focus-ring);
}

.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ============================================================
   Tabellen
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 480px;
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  white-space: nowrap;
}

.table thead th.is-sortable { cursor: pointer; }
.table thead th.is-sortable:hover { background: #142038; }

.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  min-height: var(--touch-target);
}

.table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.table tbody tr:hover { background: var(--color-accent); }

/* Phase D.12: Zeilen mit data-href (siehe design-system/tabellen-zeile-klickbar.js) */
.table tbody tr[data-href] { cursor: pointer; }

/* Spalten-Suchzeile, automatisch von design-system/table-search.js unter
   den Tabellenkopf von table.table-searchable eingefuegt - siehe dortiger
   Kommentar. Bewusst NICHT sticky (anders als .table thead th): eine feste
   Hoehe fuer die Kopfzeile laesst sich in CSS nicht robust vorausberechnen,
   und der Header selbst bleibt beim Scrollen ohnehin fixiert. */
.table-search-row td {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
}

/* Verstellbare/ein-ausblendbare Spalten, siehe design-system/tabellen-spalten.js.
   .table thead th ist bereits "position: sticky" (siehe oben) - das reicht
   als Positionierungskontext fuer den absolut positionierten Ziehgriff. */
.table tbody td { overflow: hidden; text-overflow: ellipsis; }

.spalten-resize-griff {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.spalten-resize-griff:hover,
.spalten-resize-griff.spalten-resize-aktiv {
  background: rgba(255, 255, 255, 0.35);
}

.spalten-toolbar {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-bottom: var(--space-2);
}
.spalten-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  margin-top: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
}
.spalten-menu label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-weight: 400;
  white-space: nowrap;
}
.table-search-empty td { text-align: center; color: var(--color-text-muted); }

/* ============================================================
   Status-Badges (ersetzen die alten Ampel-Icons lichtgelb/lichtaus etc.)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-neutral { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Risiko-Einstufung Begehungsbericht (Gefährdungsbeurteilung, Phase G) -
   bewusst deutlich kräftiger als die normalen Status-Badges oben ("muss
   direkt auffallen"): "Hoch"/"Sicherheitskritisch" bekommen eine satte,
   volltonige Füllung statt der sonst üblichen zurückhaltenden Pastellfarbe. */
.badge-risiko-gering      { background: var(--color-success-bg); color: var(--color-success); }
.badge-risiko-mittel      { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-risiko-hoch        { background: var(--color-warning);    color: var(--color-text-inverse); font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); }
.badge-risiko-kritisch    { background: var(--color-danger);     color: var(--color-text-inverse); font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); box-shadow: 0 0 0 2px var(--color-danger-bg); }

/* ============================================================
   Modal (löst modal.css / window.confirm-Dialoge ab)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 42, 74, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 100;
}

.modal-dialog {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.modal-header h3 { margin: 0; }

.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--color-surface-alt); }

.modal-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* ============================================================
   Responsive-Anpassungen: Tablet (iPad) und Laptop
   ============================================================ */
@media (max-width: 767px) {
  .app-nav { width: 100%; justify-content: flex-start; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* iPad: großzügigere Touch-Ziele, etwas mehr Zeilenabstand für Finger-Bedienung */
  .btn, .input, .select, .textarea { min-height: 48px; }
  .btn-sm { min-height: 36px; }
  .table tbody td, .table thead th { padding: var(--space-4); }
}

@media (min-width: 1280px) {
  .container { padding: 0 var(--space-6); }
}