/* ============================================================================
   DRYLOGIX – Zentrales Design-System (Phase 3)
   ----------------------------------------------------------------------------
   Eine Quelle der Wahrheit für Farben, Abstände, Typografie und wiederkehrende
   Komponenten (Navigation, Karten, Tabellen, Buttons, Formulare, Badges).
   Vereinheitlicht das bisher über jede Seite verstreute Inline-CSS.
   Leitfarbe: DRYLOGIX-Blau. Bewusst hell gehalten (wie der Bestand).
   ============================================================================ */

:root {
  /* Markenfarben (Dunkel-Theme: hellere Blautöne für dunklen Grund) */
  --dlx-primary: #3b9fe0;
  --dlx-primary-dark: #2a7fbf;
  --dlx-primary-light: #12314a;

  /* Akzent (sparsam: genau ein primärer CTA je Seite, "Wasser/Trocknung"-Anmutung) */
  --dlx-accent: #2dd4bf;
  --dlx-accent-dark: #14b8a6;
  --dlx-accent-ink: var(--dlx-bg);
  --dlx-accent-glow: rgba(45, 212, 191, .35);

  /* Status */
  --dlx-success: #10b981;
  --dlx-success-dark: #059669;
  --dlx-danger: #ef4444;
  --dlx-danger-dark: #dc2626;
  --dlx-warning: #f59e0b;
  --dlx-info: #3b82f6;

  /* Neutrale Töne (dunkles Navy-Blau) */
  --dlx-bg: #0b1220;
  --dlx-surface: #131c2b;
  --dlx-surface-2: #0f1826;
  --dlx-surface-3: #1b2740;
  --dlx-text: #e6edf5;
  --dlx-text-muted: #93a4b8;
  --dlx-border: #263245;

  /* Form & Rhythmus — bewusst kantiger (Bento/Brutalism-Sprache der Login-Seite):
     sichtbare Kanten statt weicher Schatten, kaum Rundung statt Pillen/Glas. */
  --dlx-radius: 8px;
  --dlx-radius-sm: 4px;
  --dlx-radius-lg: 8px;
  --dlx-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  --dlx-shadow-lg: 0 14px 34px rgba(0, 0, 0, .5);

  /* Typografie: Display (Überschriften) / Body (UI, Fließtext) / Mono (Messwerte, Zahlen) */
  --dlx-font-display: 'Space Grotesk', var(--dlx-font-body);
  --dlx-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dlx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dlx-font: var(--dlx-font-body); /* Alias, von bestehendem Code weiterverwendet */

  /* Bewegung: eine abgestimmte Eingangs-Animation statt vieler Micro-Interaktionen */
  --dlx-ease: cubic-bezier(.16, .84, .44, 1);
  --dlx-duration: .45s;
}

/* ---------- Grundlayout ---------------------------------------------------- */
body.dlx-app {
  font-family: var(--dlx-font-body);
  background: var(--dlx-bg);
  color: var(--dlx-text);
  min-height: 100vh;
  margin: 0;
}

/* Display-Schrift nur für Überschriften/Markenschriftzug — bewusst sparsam eingesetzt */
body.dlx-app h1, body.dlx-app h2, body.dlx-app h3,
.dlx-brand__text, .dlx-card__title, .dlx-page-head h1, .modal-title {
  font-family: var(--dlx-font-display);
  letter-spacing: -.01em;
}
/* Messwerte, Zahlen, Codes: tabellarische Ziffern für ruhige Spaltenausrichtung */
.dlx-mono { font-family: var(--dlx-font-mono); font-variant-numeric: tabular-nums; }

.dlx-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* ---------- Navigationsleiste ---------------------------------------------- */
.dlx-nav {
  background: var(--dlx-surface);
  border-bottom: 1px solid var(--dlx-border);
  box-shadow: var(--dlx-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.dlx-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  flex-wrap: wrap;
}
.dlx-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dlx-text);
  text-decoration: none;
  white-space: nowrap;
}
.dlx-brand__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dlx-primary), var(--dlx-primary-dark));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 122, 204, .3);
}
.dlx-brand__text { letter-spacing: -.3px; }
.dlx-brand__text small {
  display: block; font-size: .68rem; font-weight: 500;
  color: var(--dlx-text-muted); letter-spacing: 0;
}

.dlx-nav__links {
  display: flex; align-items: center; gap: .25rem;
  margin-left: auto; flex-wrap: wrap;
}
.dlx-nav__link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem;
  border-radius: var(--dlx-radius-sm);
  color: var(--dlx-text-muted);
  text-decoration: none;
  font-weight: 600; font-size: .92rem;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.dlx-nav__link:hover { background: var(--dlx-primary-light); color: var(--dlx-primary-dark); }
.dlx-nav__link.is-active { background: var(--dlx-primary); color: #fff; }
.dlx-nav__link.is-active:hover { color: #fff; }
.dlx-nav__link--danger { color: var(--dlx-danger); }
.dlx-nav__link--danger:hover { background: #fef2f2; color: var(--dlx-danger-dark); }

/* Dropdown (Stammdaten) – reines CSS, kein JS nötig */
.dlx-dd { position: relative; }
.dlx-dd__menu {
  position: absolute; top: 100%; left: 0;
  background: var(--dlx-surface);
  border: 1px solid var(--dlx-border);
  border-radius: var(--dlx-radius-sm);
  box-shadow: var(--dlx-shadow-lg);
  min-width: 200px; padding: .4rem;
  display: none; z-index: 1040;
}
.dlx-dd:hover .dlx-dd__menu, .dlx-dd:focus-within .dlx-dd__menu { display: block; }
.dlx-dd__menu a {
  display: block; padding: .55rem .7rem; border-radius: 6px;
  color: var(--dlx-text); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.dlx-dd__menu a:hover { background: var(--dlx-primary-light); color: var(--dlx-primary-dark); }

/* ---------- Seitenkopf (Titel + Aktionen) ---------------------------------- */
.dlx-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.dlx-page-head h1 {
  font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--dlx-text);
  display: inline-flex; align-items: center; gap: .6rem;
}
.dlx-page-head h1 > i { color: var(--dlx-primary); }
.dlx-page-head p { color: var(--dlx-text-muted) !important; }
.dlx-page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Modals (einheitlich für die ganze App) -------------------------
   !important: viele Seiten setzen noch Inline-Styles auf .modal-content/
   .modal-header (border-radius:16px, eigene Verlaufsfarben) — die App-weite
   Kante/Farbe soll trotzdem überall konsistent gelten. */
body.dlx-app .modal-content {
  background: var(--dlx-surface) !important; border: 2px solid var(--dlx-border) !important;
  border-radius: var(--dlx-radius-lg) !important;
  overflow: hidden; box-shadow: var(--dlx-shadow-lg);
}
body.dlx-app .modal-header {
  background: var(--dlx-primary) !important;
  color: #fff !important; border: none !important; padding: 1.25rem 1.5rem;
}
body.dlx-app .modal-body { padding: 1.75rem; }

/* ---------- Karten --------------------------------------------------------- */
.dlx-card {
  background: var(--dlx-surface);
  border: 2px solid var(--dlx-border);
  border-radius: var(--dlx-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color .12s;
}
.dlx-card:hover { border-color: rgba(59, 159, 224, .4); }
.dlx-card__title {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 1.25rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
/* Nur das direkte Icon der Überschrift einfärben, nicht auch das Icon eines
   eingebetteten Buttons (z.B. "+ Notieren") - sonst verschwindet dessen Icon
   auf gleichfarbigem Button-Hintergrund und wird erst beim Hover sichtbar. */
.dlx-card__title > i { color: var(--dlx-primary); }

/* ---------- Buttons (flach + sichtbare Kante statt Verlauf/Schwebe-Effekt) -- */
.dlx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.2rem;
  border: 2px solid transparent; border-radius: var(--dlx-radius-sm);
  font-family: inherit; font-weight: 700; font-size: .92rem;
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.2;
}
.dlx-btn--primary { background: var(--dlx-primary); border-color: var(--dlx-primary); color: #fff; }
.dlx-btn--primary:hover { background: var(--dlx-primary-dark); border-color: var(--dlx-primary-dark); }
.dlx-btn--success { background: var(--dlx-success); border-color: var(--dlx-success); color: #fff; }
.dlx-btn--success:hover { background: var(--dlx-success-dark); border-color: var(--dlx-success-dark); }
.dlx-btn--danger  { background: var(--dlx-danger); border-color: var(--dlx-danger); color: #fff; }
.dlx-btn--danger:hover { background: var(--dlx-danger-dark); border-color: var(--dlx-danger-dark); }
.dlx-btn--ghost   { background: transparent; color: var(--dlx-text); border-color: var(--dlx-border); }
.dlx-btn--ghost:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
.dlx-btn--sm { padding: .4rem .8rem; font-size: .82rem; }
/* Akzent: genau ein primärer CTA je Seite (z.B. "Neuer Kunde", "Neuer Termin") — kein zweites Blau */
.dlx-btn--accent { background: var(--dlx-accent); border-color: var(--dlx-accent); color: var(--dlx-accent-ink); }
.dlx-btn--accent:hover { background: var(--dlx-accent-dark); border-color: var(--dlx-accent-dark); }

/* ---------- Kompakte Icon-Buttons (Tabellenzeilen-Aktionen) ---------------- */
.icon-btn {
  border: 1px solid var(--dlx-border); background: var(--dlx-surface-2);
  color: var(--dlx-text-muted); border-radius: 8px;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; font-size: .9rem;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.icon-btn:hover { color: var(--dlx-primary); border-color: var(--dlx-primary); background: var(--dlx-primary-light); transform: translateY(-1px); }

/* Bereits im Ruhezustand (nicht erst bei Hover) farblich unterschieden, damit
   mehrere Aktions-Icons nebeneinander (z.B. Kundenverwaltung: Kundenakte/
   Projekte/Bearbeiten/Löschen) ohne Draufhalten auseinandergehalten werden
   koennen - vorher waren alle vier im Ruhezustand identisch grau. */
.icon-btn.edit    { color: var(--dlx-primary); border-color: rgba(59, 159, 224, .35); background: rgba(59, 159, 224, .08); }
.icon-btn.success { color: var(--dlx-success); border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .08); }
.icon-btn.info    { color: #22d3ee; border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); }
.icon-btn.danger  { color: var(--dlx-danger); border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .08); }

.icon-btn.edit:hover    { color: var(--dlx-primary); border-color: var(--dlx-primary); background: var(--dlx-primary-light); }
.icon-btn.success:hover { color: var(--dlx-success); border-color: var(--dlx-success); background: rgba(16, 185, 129, .12); }
.icon-btn.info:hover    { color: #22d3ee; border-color: #22d3ee; background: rgba(34, 211, 238, .12); }
.icon-btn.danger:hover  { color: var(--dlx-danger); border-color: var(--dlx-danger); background: rgba(239, 68, 68, .12); }

.dlx-row-actions { display: flex; align-items: center; gap: .4rem; }
/* Etwas mehr Abstand vor der destruktiven Aktion - senkt Fehlklick-Risiko
   bei eng beieinanderstehenden Icon-Buttons. */
.dlx-row-actions .icon-btn.danger { margin-left: .3rem; }

/* ---------- Tabellen ------------------------------------------------------- */
.dlx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--dlx-radius-sm); }
table.dlx-table { width: 100%; border-collapse: collapse; margin: 0; }
table.dlx-table thead th {
  background: var(--dlx-primary);
  color: #fff; font-weight: 700; font-size: .85rem;
  text-align: left; padding: .9rem 1rem; border: none; white-space: nowrap;
}
/* DataTables legt auf sortierbaren Spalten ein Hintergrund-Icon an, das die
   Markenfarbe überdecken würde – hier erzwingen. */
table.dlx-table.dataTable thead th,
table.dlx-table.dataTable thead th.sorting,
table.dlx-table.dataTable thead th.sorting_asc,
table.dlx-table.dataTable thead th.sorting_desc {
  background-color: var(--dlx-primary) !important;
  background-image: none !important;
  color: #fff !important;
}
table.dlx-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--dlx-border); vertical-align: middle; }
table.dlx-table tbody tr { transition: background .15s; }
table.dlx-table tbody tr:hover { background: var(--dlx-primary-light); }

/* ---------- Formulare ------------------------------------------------------ */
.dlx-field { margin-bottom: 1.1rem; }
.dlx-field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .9rem; }
.dlx-input, .dlx-select, .dlx-textarea {
  width: 100%; display: block;
  border: 2px solid var(--dlx-border); border-radius: var(--dlx-radius-sm);
  padding: .7rem .9rem; font-family: inherit; font-size: 1rem;
  min-height: 44px; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.dlx-input:focus, .dlx-select:focus, .dlx-textarea:focus {
  outline: none; border-color: var(--dlx-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, .12);
}

/* ---------- Badges --------------------------------------------------------- */
.dlx-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.dlx-badge--success { background: #dcfce7; color: #166534; }
.dlx-badge--danger  { background: #fef2f2; color: #991b1b; }
.dlx-badge--muted   { background: #f1f5f9; color: var(--dlx-text-muted); }

/* ---------- Utilities ------------------------------------------------------ */
.dlx-muted { color: var(--dlx-text-muted); }
.dlx-empty { text-align: center; color: var(--dlx-text-muted); padding: 2rem 1rem; font-style: italic; }

/* ---------- DataTables-Feinschliff ----------------------------------------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; color: var(--dlx-text-muted); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 2px solid var(--dlx-border); border-radius: var(--dlx-radius-sm);
  padding: .45rem .7rem; min-height: 40px; margin: 0 .4rem;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none; border-color: var(--dlx-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, .12);
}
.dataTables_wrapper .dataTables_info { color: var(--dlx-text-muted); padding-top: 1rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .8rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important; border: none !important;
  padding: .4rem .8rem !important; color: var(--dlx-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dlx-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dlx-primary-light) !important; color: var(--dlx-primary-dark) !important;
}

/* ---------- Tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .dlx-container { padding: 1.25rem 1rem 2.5rem; }
}

/* ---------- Mobil ---------------------------------------------------------- */
@media (max-width: 720px) {
  .dlx-nav__inner { min-height: 56px; gap: .5rem; }
  .dlx-brand__text small { display: none; }
  .dlx-nav__links { width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: .4rem; }
  .dlx-nav__link { padding: .5rem .7rem; font-size: .85rem; }
  .dlx-page-head { flex-direction: column; align-items: stretch; gap: .75rem; }
  .dlx-page-head h1 { font-size: 1.25rem; }
  .dlx-page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .dlx-page-head__actions .dlx-btn { flex: 1 1 auto; justify-content: center; }
  .dlx-card { padding: 1rem; }

  /* Tabellen nie die Seite sprengen - im eigenen Container scrollen */
  .dlx-table-wrap, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bootstrap-Modals: volle Breite mit kleinem Rand, Inhalte scrollbar */
  .modal-dialog { margin: .5rem; max-width: none; }
  .modal-body { max-height: calc(100vh - 180px); overflow-y: auto; }

  /* DataTables-Kopfzeile (Suche/Anzahl) untereinander */
  .dataTables_length, .dataTables_filter { float: none !important; text-align: left !important; margin-bottom: .5rem; }
  .dataTables_filter input { width: 100%; margin-left: 0 !important; }
}

/* ============================================================================
   Dunkel-Theme: Feinschliff für Bestandskomponenten
   ============================================================================ */
/* Dashboard-Kundentabelle (nutzt noch .table-modern mit hellen Zeilen) */
body.dlx-app .table-modern thead th { background: var(--dlx-surface-2) !important; color: var(--dlx-text-muted) !important; }
body.dlx-app .table-modern tbody tr { background: var(--dlx-surface) !important; box-shadow: none !important; }
body.dlx-app .table-modern tbody tr:hover { background: var(--dlx-primary-light) !important; }
body.dlx-app .table-modern tbody td { color: var(--dlx-text) !important; border-color: var(--dlx-border) !important; }
body.dlx-app .table-modern tbody tr td:first-child { color: var(--dlx-text) !important; }

/* DataTables-Steuerelemente (Suche / Anzahl) im Dunkel-Theme */
body.dlx-app .dataTables_filter input,
body.dlx-app .dataTables_length select {
  background: var(--dlx-surface-2); color: var(--dlx-text);
}
body.dlx-app .dataTables_wrapper { color: var(--dlx-text-muted); }

/* Lade-Overlay dunkel statt weiß */
body.dlx-app .loading-overlay { background: rgba(11, 18, 32, .85) !important; }

/* ============================================================================
   Legacy-Kompatibilität: bestehende Formular-/Erfassungsseiten aufs Dunkel-Theme
   (greift nur unter body.dlx-app; !important, um Inline-Styles zu überschreiben)
   ============================================================================ */
/* Alte Vollbild-Header nicht mehr sticky/weiß – die globale Navigation trägt das */
body.dlx-app .modern-header,
body.dlx-app .header {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  position: static !important;
  padding: 1rem 0 !important;
}
body.dlx-app .logo-text h4,
body.dlx-app .logo-text p,
body.dlx-app .header h1,
body.dlx-app .page-title h4 { color: var(--dlx-text) !important; }

/* Surfaces -> dunkle Karten */
body.dlx-app .form-card,
body.dlx-app .content-card,
body.dlx-app .card,
body.dlx-app .modern-card,
body.dlx-app .pressure-test-group,
body.dlx-app .pressure-row,
body.dlx-app .pressure-card,
body.dlx-app .measurement-entry,
body.dlx-app .info-box,
body.dlx-app .text-content,
body.dlx-app .location-card,
body.dlx-app .upload-box,
body.dlx-app .modal-content {
  background: var(--dlx-surface) !important;
  color: var(--dlx-text) !important;
  border-color: var(--dlx-border) !important;
}
body.dlx-app .card-body { background: transparent !important; color: var(--dlx-text) !important; }
body.dlx-app .checkbox-item { background: var(--dlx-surface-2) !important; color: var(--dlx-text) !important; }

/* Titel / Überschriften / Fließtext */
body.dlx-app .section-title,
body.dlx-app .card-title { color: var(--dlx-text) !important; border-color: var(--dlx-border) !important; }
body.dlx-app .section-title > i, body.dlx-app .card-title > i { color: var(--dlx-primary) !important; }
body.dlx-app label,
body.dlx-app .form-group label,
body.dlx-app .info-value { color: var(--dlx-text) !important; }
body.dlx-app .info-label { color: var(--dlx-text-muted) !important; }
body.dlx-app .upload-box p { color: var(--dlx-text-muted) !important; }

/* Eingabefelder */
body.dlx-app input[type=text],
body.dlx-app input[type=date],
body.dlx-app input[type=email],
body.dlx-app input[type=tel],
body.dlx-app input[type=password],
body.dlx-app input[type=number],
body.dlx-app input[type=search],
body.dlx-app input[type=file],
body.dlx-app textarea,
body.dlx-app select,
body.dlx-app .form-control {
  background: var(--dlx-surface-2) !important;
  color: var(--dlx-text) !important;
  border-color: var(--dlx-border) !important;
}
body.dlx-app input::placeholder, body.dlx-app textarea::placeholder { color: var(--dlx-text-muted) !important; }
/* Datei-Upload-Felder: der native "Datei auswählen"-Button war bislang naturbelassen
   (grau/hell) - inmitten der sonst durchgängig dunklen Formulare ein Fremdkörper. */
body.dlx-app input[type=file]::file-selector-button {
  background: var(--dlx-surface-3) !important; color: var(--dlx-text) !important;
  border: 2px solid var(--dlx-border) !important; border-radius: var(--dlx-radius-sm);
  padding: .45rem .9rem; font-family: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer; margin-right: .75rem; transition: border-color .12s, color .12s;
}
body.dlx-app input[type=file]::file-selector-button:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); }
body.dlx-app .info-box { border-left-color: var(--dlx-primary) !important; }
body.dlx-app .text-content { border-left-color: var(--dlx-primary) !important; }

/* Messwerttabelle (Schadenbericht-Ansicht) */
body.dlx-app .measurements-table { border-color: var(--dlx-border) !important; }
body.dlx-app .measurements-table th { background: var(--dlx-primary) !important; color: #fff !important; }
body.dlx-app .measurements-table td { background: var(--dlx-surface) !important; color: var(--dlx-text) !important; border-color: var(--dlx-border) !important; }
body.dlx-app .measurements-table tr:nth-child(even) td { background: var(--dlx-surface-2) !important; }
body.dlx-app .method-badge { background: var(--dlx-primary-light) !important; color: var(--dlx-text) !important; border-color: var(--dlx-border) !important; }

/* Alt-Buttons vereinheitlichen (blaue/lila Varianten -> Markenblau des Themes) */
body.dlx-app .btn-primary,
body.dlx-app .btn-modern.btn-primary-modern,
body.dlx-app .btn-success-modern {
  background: var(--dlx-primary) !important;
  border: 2px solid var(--dlx-primary) !important; color: #fff !important;
}
body.dlx-app .btn-secondary,
body.dlx-app .btn-outline-modern {
  background: var(--dlx-surface) !important; color: var(--dlx-primary) !important;
  border: 2px solid var(--dlx-border) !important;
}

/* ============================================================================
   Nachtrag: weitere Alt-Flächen + unsichtbare Titel (Nutzer-Feedback)
   ============================================================================ */
/* Karten-Flächen, die der erste Layer nicht erwischt hat */
body.dlx-app .customer-info,
body.dlx-app .action-buttons-card,
body.dlx-app .sort-card,
body.dlx-app .measuring-point-card,
body.dlx-app .search-sort-card,
body.dlx-app .save-order-section,
body.dlx-app .measurement-card,
body.dlx-app .empty-state,
body.dlx-app .card-header-modern,
body.dlx-app .card-body-modern,
body.dlx-app .stat-card,
body.dlx-app .detail-card,
body.dlx-app .glass-card {
  background: var(--dlx-surface) !important;
  color: var(--dlx-text) !important;
  border-color: var(--dlx-border) !important;
}
/* ALLE Überschriften hell (Design ist durchgehend dunkel) – außer in der Nav */
body.dlx-app h1, body.dlx-app h2, body.dlx-app h3, body.dlx-app h4, body.dlx-app h5,
body.dlx-app .page-title, body.dlx-app .card-title-modern, body.dlx-app .main-title,
body.dlx-app .customer-info h3, body.dlx-app .customer-info p, body.dlx-app .customer-info strong,
body.dlx-app .customer-info-box h6, body.dlx-app .customer-info-box p, body.dlx-app .customer-info-box strong {
  color: var(--dlx-text) !important;
}
body.dlx-app .dlx-nav h1, body.dlx-app .dlx-nav h2 { color: inherit !important; }
/* Blasse Detailwerte in Mess-/Kartenlisten lesbar (heller Muted-Ton statt Dunkelgrau) */
body.dlx-app .measuring-point-card [style*="color: var(--text-secondary)"],
body.dlx-app .measuring-point-card .detail-value,
body.dlx-app .measuring-point-card .value,
body.dlx-app .measurement-card .value,
body.dlx-app .measurement-card .detail-value { color: var(--dlx-text-muted) !important; }
/* Drag-Handle / Icons in den Karten sichtbar halten */
body.dlx-app .drag-handle, body.dlx-app .card-drag-handle { color: var(--dlx-text-muted) !important; }

/* ============================================================================
   Administration (admin/src/index.php) im Dunkel-Theme
   ============================================================================ */
body.dlx-app #pgside { background: var(--dlx-surface) !important; border-right: 1px solid var(--dlx-border); }
body.dlx-app #pgside, body.dlx-app #pgside a { color: var(--dlx-text) !important; }
body.dlx-app #pgside a.current { background: var(--dlx-primary) !important; color: #fff !important; }
body.dlx-app #pgside a:hover { background: var(--dlx-primary-light) !important; color: var(--dlx-primary) !important; }
body.dlx-app #pguser { color: var(--dlx-text-muted) !important; border-bottom: 1px solid var(--dlx-border); }
body.dlx-app #pgmain { background: var(--dlx-bg) !important; color: var(--dlx-text); }

/* Bootstrap-Tabs im Admin */
body.dlx-app .nav-tabs { border-color: var(--dlx-border) !important; }
body.dlx-app .nav-tabs .nav-link { color: var(--dlx-text-muted) !important; border: none !important; }
body.dlx-app .nav-tabs .nav-link.active {
  background: var(--dlx-surface) !important; color: var(--dlx-primary) !important;
  border: 1px solid var(--dlx-border) !important; border-bottom-color: var(--dlx-surface) !important;
}

/* Bootstrap-Tabellen (Admin-Firmenliste u. a.) dunkel */
body.dlx-app .table { color: var(--dlx-text) !important; }
body.dlx-app .table th, body.dlx-app .table td { border-color: var(--dlx-border) !important; }
body.dlx-app .table-bordered, body.dlx-app .table-bordered th, body.dlx-app .table-bordered td { border-color: var(--dlx-border) !important; }
body.dlx-app .table thead th { background: var(--dlx-surface-2) !important; color: var(--dlx-text-muted) !important; }
body.dlx-app .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }

/* Bootstrap-Badges im Admin (Freeze/Unfreeze) bleiben farbig – nur Kontrast sichern */
body.dlx-app .badge { color: #fff; }

/* ============================================================================
   Breiter Fang: ALLE karten-/box-/sektionsartigen Flächen dunkel
   (Muster-Selektoren statt Einzelklassen; farbige Projekttyp-Karten ausgenommen)
   ============================================================================ */
body.dlx-app [class*="-card"]:not(.project-type-card),
body.dlx-app [class*="-box"]:not(.checkbox-item),
body.dlx-app [class*="-section"] {
  background: var(--dlx-surface) !important;
  color: var(--dlx-text) !important;
  border-color: var(--dlx-border) !important;
}

/* Zurück-/Outline-Buttons als Ghost auf dunkel (waren teils weiß) */
body.dlx-app .btn-back,
body.dlx-app .btn-outline-modern,
body.dlx-app .btn-outline-secondary,
body.dlx-app .btn-light {
  background: transparent !important;
  color: var(--dlx-text) !important;
  border: 1.5px solid var(--dlx-border) !important;
}
body.dlx-app .btn-back:hover,
body.dlx-app .btn-outline-modern:hover,
body.dlx-app .btn-outline-secondary:hover {
  border-color: var(--dlx-primary) !important; color: var(--dlx-primary) !important; background: var(--dlx-primary-light) !important;
}

/* "Akte"-Button in der Kundentabelle: gefüllt (Teal), passend zu den anderen */
body.dlx-app .action-buttons .btn-outline-info,
body.dlx-app .btn-outline-info {
  background: var(--dlx-accent) !important;
  color: var(--dlx-accent-ink) !important; border: 2px solid var(--dlx-accent) !important;
}

/* Bootstrap-Pagination (DataTables bootstrap4) + weitere Standardflächen dunkel */
body.dlx-app .page-link {
  background: var(--dlx-surface-2) !important; color: var(--dlx-primary) !important; border-color: var(--dlx-border) !important;
}
body.dlx-app .page-item.active .page-link { background: var(--dlx-primary) !important; border-color: var(--dlx-primary) !important; color: #fff !important; }
body.dlx-app .page-item.disabled .page-link { background: var(--dlx-surface-2) !important; color: var(--dlx-text-muted) !important; }
body.dlx-app .paginate_button { background: transparent !important; }
body.dlx-app .dropdown-menu { background: var(--dlx-surface) !important; border-color: var(--dlx-border) !important; }
body.dlx-app .dropdown-item { color: var(--dlx-text) !important; }
body.dlx-app .dropdown-item:hover { background: var(--dlx-primary-light) !important; color: var(--dlx-primary) !important; }
body.dlx-app .list-group-item { background: var(--dlx-surface) !important; color: var(--dlx-text) !important; border-color: var(--dlx-border) !important; }
body.dlx-app .modal-header, body.dlx-app .modal-footer { border-color: var(--dlx-border) !important; }
body.dlx-app .close { color: var(--dlx-text) !important; text-shadow: none !important; }

/* DataTables-Zebra (.odd/.even) auf dlx-Tabellen dunkel/transparent halten */
body.dlx-app table.dlx-table.dataTable tbody tr,
body.dlx-app table.dlx-table.dataTable tbody tr.odd,
body.dlx-app table.dlx-table.dataTable tbody tr.even,
body.dlx-app table.dataTable.stripe tbody tr.odd,
body.dlx-app table.dataTable.display tbody tr.odd { background-color: transparent !important; }
body.dlx-app table.dlx-table.dataTable tbody tr:hover,
body.dlx-app table.dlx-table.dataTable tbody tr.odd:hover,
body.dlx-app table.dlx-table.dataTable tbody tr.even:hover { background-color: var(--dlx-primary-light) !important; }

/* Vorausgewählter Kunde (Schadenbericht-Formular) + verwandte helle Flächen */
body.dlx-app .locked-customer,
body.dlx-app .selected-customer,
body.dlx-app .customer-badge {
  background: var(--dlx-surface) !important; color: var(--dlx-text) !important; border-color: var(--dlx-border) !important;
}
body.dlx-app .locked-customer i { color: var(--dlx-primary) !important; }

/* SweetAlert2-Dialoge an das dunkle Theme anpassen (sonst weißes Popup) */
body.dlx-app .swal2-popup {
  background: var(--dlx-surface) !important;
  color: var(--dlx-text) !important;
}
body.dlx-app .swal2-title,
body.dlx-app .swal2-html-container {
  color: var(--dlx-text) !important;
}
body.dlx-app .swal2-actions .swal2-confirm {
  background: var(--dlx-primary) !important;
}
body.dlx-app .swal2-actions .swal2-cancel {
  background: var(--dlx-surface-2) !important;
  color: var(--dlx-text) !important;
}

/* ============================================================================
   Eingangs-Animation: EINE abgestimmte Bewegung beim Laden statt vieler
   kleiner Micro-Interaktionen. .dlx-reveal für einzelne Blöcke (Seitenkopf,
   Karte um eine DataTable), .dlx-reveal-stagger für echte, serverseitig
   gerenderte Karten-Raster (nicht für DataTables-Zeilen — die werden von
   DataTables bei jedem Redraw neu erzeugt, ein Stagger würde dort bei jeder
   Sortierung/Seite erneut und damit störend abspielen).
   ============================================================================ */
@keyframes dlx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dlx-reveal { animation: dlx-rise var(--dlx-duration) var(--dlx-ease) both; }
.dlx-reveal-stagger > * { opacity: 0; animation: dlx-rise var(--dlx-duration) var(--dlx-ease) both; }
.dlx-reveal-stagger > *:nth-child(1) { animation-delay: .00s; }
.dlx-reveal-stagger > *:nth-child(2) { animation-delay: .05s; }
.dlx-reveal-stagger > *:nth-child(3) { animation-delay: .10s; }
.dlx-reveal-stagger > *:nth-child(4) { animation-delay: .15s; }
.dlx-reveal-stagger > *:nth-child(5) { animation-delay: .20s; }
.dlx-reveal-stagger > *:nth-child(6) { animation-delay: .25s; }
.dlx-reveal-stagger > *:nth-child(7) { animation-delay: .30s; }
.dlx-reveal-stagger > *:nth-child(8) { animation-delay: .35s; }
.dlx-reveal-stagger > *:nth-child(n+9) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .dlx-reveal, .dlx-reveal-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}