/* ============================================================
   ctr_libe — Design System (v1.0)
   ============================================================
   Globale Design-Tokens und Komponenten für alle Apps.
   Wird in base.html geladen, nach Bootstrap.

   Struktur:
     1. Design-Tokens (CSS-Variablen)
     2. Typografie & Basis
     3. Layout (Container, Page-Header)
     4. Buttons (inkl. Icon-Buttons, View-Toggle)
     5. Forms (Floating-Labels, Inputs, Select, Textarea, Select2)
     6. Cards (.ctr-card, .task-card, Empty-State)
     7. Tables (.ctr-table, Status-Pills)
     8. Badges, Status-Filter, Toggle-Button-Group
     9. Pagination
    10. Toasts, Alerts
    11. Navbar, Sidebar, Footer
    12. Utility-Klassen
    13. Mobile-Anpassungen
    14. Dark-Mode-Vorbereitung (deaktiviert, für Phase 2)
   ============================================================ */

/* ── 1. Design-Tokens ──────────────────────────────────────── */
:root {
  /* Markenfarben (Comtura Navy bleibt) */
  --ctr-primary: #1a365d;
  --ctr-primary-light: #2a4a7f;
  --ctr-primary-dark: #0f2440;
  --ctr-primary-50:  #eef2f8;
  --ctr-primary-100: #dbe3ee;
  --ctr-primary-200: #b8c5dc;

  /* Neutrale Graustufen */
  --ctr-bg:            #f5f7fa;
  --ctr-surface:       #ffffff;
  --ctr-surface-alt:   #fafbfc;
  --ctr-border:        #e2e8f0;
  --ctr-border-strong: #cbd5e0;
  --ctr-divider:       #edf0f4;

  /* Text */
  --ctr-text:         #1f2937;
  --ctr-text-muted:   #4b5563;
  --ctr-text-subtle:  #6b7280;
  --ctr-text-inverse: #ffffff;

  /* Status-Farben (Aufträge) */
  --status-offen:         #6c757d;
  --status-zugewiesen:    #0d6efd;
  --status-vor-ort:       #fd7e14;
  --status-warte:         #ffc107;
  --status-bearbeitung:   #198754;
  --status-abmeldung:     #6f42c1;
  --status-abgemeldet:    #20c997;

  /* Semantik-Farben */
  --ctr-success:      #16a34a;
  --ctr-success-bg:   #dcfce7;
  --ctr-warning:      #f59e0b;
  --ctr-warning-bg:   #fef3c7;
  --ctr-danger:       #dc2626;
  --ctr-danger-bg:    #fee2e2;
  --ctr-info:         #0ea5e9;
  --ctr-info-bg:      #e0f2fe;

  /* Schatten */
  --ctr-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --ctr-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --ctr-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --ctr-shadow-lg: 0 10px 25px rgba(15, 23, 42, .10);
  --ctr-card-shadow:       var(--ctr-shadow-sm);
  --ctr-card-shadow-hover: var(--ctr-shadow-md);

  /* Radius */
  --ctr-radius-xs: .25rem;
  --ctr-radius-sm: .4rem;
  --ctr-radius-md: .55rem;
  --ctr-radius-lg: .75rem;
  --ctr-radius-xl: 1rem;
  --ctr-radius-full: 999px;

  /* Spacing (optional, meist Bootstrap genug) */
  --ctr-gap-xs: .25rem;
  --ctr-gap-sm: .5rem;
  --ctr-gap-md: .75rem;
  --ctr-gap-lg: 1rem;
  --ctr-gap-xl: 1.5rem;

  /* Motion */
  --ctr-transition:      .18s ease;
  --ctr-transition-slow: .3s ease;

  /* Layout */
  --ctr-container-max:       1320px;   /* normale Content-Seiten */
  --ctr-container-max-wide:  1536px;   /* Dashboards, breite Tabellen */
  --ctr-sidebar-width:       240px;
  --ctr-navbar-height:       56px;

  /* Focus-Ring */
  --ctr-focus-ring: 0 0 0 .2rem rgba(26, 54, 93, .2);
}

/* ── 2. Typografie & Basis ─────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--ctr-bg);
  color: var(--ctr-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--ctr-text); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

small, .small { font-size: .825rem; }

a { color: var(--ctr-primary); text-decoration: none; transition: color var(--ctr-transition); }
a:hover { color: var(--ctr-primary-light); text-decoration: underline; }

hr { border-color: var(--ctr-divider); opacity: 1; }

/* ── 3. Layout ─────────────────────────────────────────────── */
.ctr-main {
  margin-left: 0;
  padding: 1.5rem 2rem 3rem;
  min-height: calc(100vh - var(--ctr-navbar-height));
  margin-top: var(--ctr-navbar-height);
  flex: 1;
  overflow-x: hidden;
}

body.has-sidebar.sidebar-visible .ctr-main {
  margin-left: var(--ctr-sidebar-width);
}

/* Zentrierter Content-Bereich mit modernem Maß */
@media (min-width: 992px) {
  body.has-sidebar:not(.sidebar-visible) .ctr-main {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--ctr-container-max);
    width: min(100%, var(--ctr-container-max));
  }
}

/* Ohne Sidebar: immer zentriert mit Max-Breite */
body:not(.has-sidebar) .ctr-main {
  max-width: var(--ctr-container-max);
  margin-left: auto;
  margin-right: auto;
  width: min(100%, var(--ctr-container-max));
}

/* Für Dashboards / breite Tabellen: .ctr-main--wide */
.ctr-main--wide,
body.has-sidebar.sidebar-visible .ctr-main.ctr-main--wide {
  max-width: var(--ctr-container-max-wide);
}

/* Page-Header-Komponente (einheitlicher Titel + Actions) */
.ctr-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ctr-divider);
}
.ctr-page-header__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  flex: 1 1 auto;
}
.ctr-page-header__title h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ctr-primary);
  margin: 0;
  line-height: 1.3;
}
.ctr-page-header__title .subtitle {
  color: var(--ctr-text-muted);
  font-size: .9rem;
  margin-top: .15rem;
}
.ctr-page-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Legacy .page-header (Kompatibilität) */
.page-header {
  margin-bottom: 1.5rem;
}
.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ctr-primary);
  margin: 0;
}

/* ── 4. Buttons ────────────────────────────────────────────── */
.btn {
  border-radius: var(--ctr-radius-md);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem 1rem;
  transition: all var(--ctr-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  line-height: 1.4;
  min-height: 2.25rem;
}
.btn:focus,
.btn:focus-visible {
  box-shadow: var(--ctr-focus-ring);
  outline: none;
}
.btn .bi { line-height: 1; }

.btn-sm {
  font-size: .82rem;
  padding: .35rem .75rem;
  min-height: 1.9rem;
  border-radius: var(--ctr-radius-sm);
}
.btn-lg {
  font-size: 1rem;
  padding: .7rem 1.4rem;
  min-height: 2.75rem;
  border-radius: var(--ctr-radius-lg);
}

/* Primary */
.btn-primary,
.btn-ctr-primary {
  background: var(--ctr-primary);
  border-color: var(--ctr-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 54, 93, .15);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-ctr-primary:hover,
.btn-ctr-primary:focus {
  background: var(--ctr-primary-light);
  border-color: var(--ctr-primary-light);
  color: #fff;
  box-shadow: 0 4px 10px rgba(26, 54, 93, .22);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-ctr-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(26, 54, 93, .15);
}

/* Secondary / Outline */
.btn-secondary {
  background: #fff;
  border-color: var(--ctr-border-strong);
  color: var(--ctr-text);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--ctr-primary-50);
  border-color: var(--ctr-primary-200);
  color: var(--ctr-primary);
}
.btn-outline-secondary {
  border-color: var(--ctr-border-strong);
  color: var(--ctr-text-muted);
  background: #fff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--ctr-primary-50);
  border-color: var(--ctr-primary-200);
  color: var(--ctr-primary);
}
.btn-outline-primary {
  border-color: var(--ctr-primary-200);
  color: var(--ctr-primary);
  background: #fff;
}
.btn-outline-primary:hover {
  background: var(--ctr-primary);
  color: #fff;
  border-color: var(--ctr-primary);
}

/* Semantische Varianten mit etwas mehr Präsenz */
.btn-success {
  background: var(--ctr-success);
  border-color: var(--ctr-success);
  box-shadow: 0 1px 2px rgba(22, 163, 74, .15);
}
.btn-success:hover { background: #15803d; border-color: #15803d; transform: translateY(-1px); }
.btn-danger {
  background: var(--ctr-danger);
  border-color: var(--ctr-danger);
  box-shadow: 0 1px 2px rgba(220, 38, 38, .15);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; transform: translateY(-1px); }
.btn-warning {
  background: var(--ctr-warning);
  border-color: var(--ctr-warning);
  color: #fff;
  box-shadow: 0 1px 2px rgba(245, 158, 11, .15);
}
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; transform: translateY(-1px); }

.btn-outline-success { border-color: #bbf7d0; color: var(--ctr-success); }
.btn-outline-success:hover { background: var(--ctr-success); border-color: var(--ctr-success); color: #fff; }
.btn-outline-danger  { border-color: #fecaca; color: var(--ctr-danger); }
.btn-outline-danger:hover  { background: var(--ctr-danger); border-color: var(--ctr-danger); color: #fff; }
.btn-outline-warning { border-color: #fde68a; color: #a16207; }
.btn-outline-warning:hover { background: var(--ctr-warning); border-color: var(--ctr-warning); color: #fff; }

/* Ghost-Button (nur Text/Icon, für Sekundär-Aktionen) */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ctr-text-muted);
}
.btn-ghost:hover {
  background: var(--ctr-primary-50);
  color: var(--ctr-primary);
}

/* Quadratischer Icon-Button */
.btn-icon {
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  justify-content: center;
}
.btn-icon.btn-sm {
  min-width: 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
}

/* View-Toggle (Tabelle/Karten) */
.view-toggle-icon-btn {
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Filter-Toggle (projektweit, identisch zum Kalender).
  Aktive Filter nutzen das gefuellte Icon im Template und zusaetzlich
  einen kleinen blauen Punkt rechts neben dem Trichter-Icon. */
.ctr-filter-toggle { cursor: pointer; }
.ctr-filter-toggle.active-filter::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d6efd;
  margin-left: .35rem;
  vertical-align: middle;
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Button-Group (Bootstrap) — abgerundete Ecken einheitlich */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── 5. Forms ──────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: var(--ctr-radius-md);
  border-color: var(--ctr-border-strong);
  font-size: .9rem;
  padding: .5rem .75rem;
  transition: border-color var(--ctr-transition), box-shadow var(--ctr-transition);
  background: #fff;
  color: var(--ctr-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ctr-primary);
  box-shadow: var(--ctr-focus-ring);
}
.form-control::placeholder { color: var(--ctr-text-subtle); }

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ctr-danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18);
}

/* Floating Labels verfeinern */
.form-floating > .form-control,
.form-floating > .form-select {
  min-height: calc(3.5rem + 2px);
  padding: 1rem .75rem .375rem;
}
.form-floating > label {
  color: var(--ctr-text-subtle);
  font-size: .9rem;
  padding: 1rem .75rem;
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
  border-color: var(--ctr-primary);
  box-shadow: var(--ctr-focus-ring);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--ctr-primary);
  font-weight: 500;
}

.form-label {
  font-weight: 500;
  font-size: .85rem;
  color: var(--ctr-text);
  margin-bottom: .35rem;
}
.form-text {
  color: var(--ctr-text-subtle);
  font-size: .8rem;
}
.form-check-input {
  border-color: var(--ctr-border-strong);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--ctr-primary);
  border-color: var(--ctr-primary);
}
.form-check-input:focus {
  border-color: var(--ctr-primary);
  box-shadow: var(--ctr-focus-ring);
}
.form-switch .form-check-input:checked {
  background-color: var(--ctr-primary);
  border-color: var(--ctr-primary);
}

.invalid-feedback {
  color: var(--ctr-danger);
  font-size: .8rem;
}

/* Input-Group */
.input-group-text {
  background: var(--ctr-primary-50);
  border-color: var(--ctr-border-strong);
  color: var(--ctr-text-muted);
  font-size: .85rem;
}

/* ── 6. Cards ──────────────────────────────────────────────── */
.card,
.ctr-card {
  background: var(--ctr-surface);
  border: 1px solid var(--ctr-border);
  border-radius: var(--ctr-radius-lg);
  box-shadow: var(--ctr-card-shadow);
  transition: box-shadow var(--ctr-transition), transform var(--ctr-transition);
}
.ctr-card {
  border: none;
  box-shadow: var(--ctr-card-shadow);
}
.ctr-card:hover { box-shadow: var(--ctr-card-shadow-hover); }

.card-header,
.ctr-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ctr-divider);
  font-weight: 600;
  padding: 1rem 1.25rem;
  color: var(--ctr-text);
}
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--ctr-surface-alt);
  border-top: 1px solid var(--ctr-divider);
  padding: .75rem 1.25rem;
}

/* Task-Card (Aufträge) */
.task-card {
  border-left: 4px solid var(--status-offen);
  border-radius: var(--ctr-radius-lg);
  transition: transform var(--ctr-transition), box-shadow var(--ctr-transition);
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ctr-card-shadow-hover);
}
.task-card.status-offen              { border-left-color: var(--status-offen); }
.task-card.status-zugewiesen         { border-left-color: var(--status-zugewiesen); }
.task-card.status-vor_ort            { border-left-color: var(--status-vor-ort); }
.task-card.status-warte_auf_freigabe { border-left-color: var(--status-warte); }
.task-card.status-in_bearbeitung     { border-left-color: var(--status-bearbeitung); }
.task-card.status-in_pruefung,
.task-card.status-abmeldung_angefragt { border-left-color: var(--status-abmeldung); }
.task-card.status-geprueft,
.task-card.status-abgemeldet         { border-left-color: var(--status-abgemeldet); }

/* Empty-State */
.ctr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ctr-text-subtle);
  background: var(--ctr-surface);
  border: 1px dashed var(--ctr-border-strong);
  border-radius: var(--ctr-radius-lg);
}
.ctr-empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: .45;
  color: var(--ctr-text-subtle);
}
.ctr-empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ctr-text-muted);
  margin: 0;
}
.ctr-empty-state__body {
  font-size: .88rem;
  color: var(--ctr-text-subtle);
  max-width: 32rem;
}
.ctr-empty-state__actions {
  margin-top: .75rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 7. Tables ─────────────────────────────────────────────── */
.ctr-table-wrap {
  border-radius: var(--ctr-radius-lg);
  overflow: hidden;
  box-shadow: var(--ctr-card-shadow);
  background: #fff;
}
.ctr-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.ctr-table thead th {
  background: linear-gradient(180deg, #f5f8fc 0%, #eef2f8 100%);
  color: #425466;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none;
  border-bottom: 1px solid var(--ctr-border);
  padding: .85rem 1rem;
  vertical-align: middle;
  white-space: nowrap;
}
.ctr-table thead th:first-child { border-top-left-radius: var(--ctr-radius-lg); }
.ctr-table thead th:last-child  { border-top-right-radius: var(--ctr-radius-lg); }

.ctr-table tbody td {
  padding: .85rem 1rem;
  border-top: 1px solid var(--ctr-divider);
  border-bottom: none;
  vertical-align: middle;
  color: var(--ctr-text);
  font-size: .9rem;
}
.ctr-table tbody tr:first-child td { border-top: none; }
.ctr-table tbody tr {
  transition: background var(--ctr-transition);
}
.ctr-table tbody tr:hover td {
  background: var(--ctr-primary-50);
}
.ctr-table.table-sm thead th,
.ctr-table.table-sm tbody td {
  padding: .6rem .85rem;
  font-size: .85rem;
}

/* Card > table-responsive Ecken runden */
.card > .table-responsive,
.ctr-card > .table-responsive,
.card > .card-body.p-0 > .table-responsive,
.ctr-card > .card-body.p-0 > .table-responsive {
  border-radius: inherit;
}

/* Status-Pills für Tabellen-Zellen */
.ctr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: var(--ctr-radius-full);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.ctr-status-pill::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}
.ctr-status-pill.is-pending   { background: var(--ctr-warning-bg); color: #a16207; }
.ctr-status-pill.is-approved  { background: var(--ctr-success-bg); color: #15803d; }
.ctr-status-pill.is-rejected  { background: var(--ctr-danger-bg);  color: #b91c1c; }
.ctr-status-pill.is-info      { background: var(--ctr-info-bg);    color: #1e40af; }
.ctr-status-pill.is-neutral   { background: #e5e7eb;               color: var(--ctr-text-muted); }

/* Inline-Action-Buttons in Tabellen (z.B. Genehmigen/Ablehnen) */
.table-actions-inline {
  display: inline-flex;
  gap: .35rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.table-actions-inline form { margin: 0; }

/* ── 8. Badges, Status-Filter ──────────────────────────────── */
.badge {
  font-weight: 600;
  font-size: .72rem;
  padding: .3rem .55rem;
  border-radius: var(--ctr-radius-sm);
  letter-spacing: .01em;
}
.badge.rounded-pill { border-radius: var(--ctr-radius-full); }

/* Auftrags-Status-Badges */
.badge-offen       { background: var(--status-offen) !important; color: #fff; }
.badge-zugewiesen  { background: var(--status-zugewiesen) !important; color: #fff; }
.badge-vor_ort     { background: var(--status-vor-ort) !important; color: #fff; }
.badge-warte_auf_freigabe {
  background: var(--status-warte) !important;
  color: #000 !important;
  animation: ctr-pulse-badge 2s infinite;
}
.badge-in_bearbeitung { background: var(--status-bearbeitung) !important; color: #fff; }
.badge-in_pruefung,
.badge-abmeldung_angefragt { background: var(--status-abmeldung) !important; color: #fff; }
.badge-geprueft,
.badge-abgemeldet  { background: var(--status-abgemeldet) !important; color: #fff; }
/* 2026-05-14 — vollständige Status-Palette */
.badge-erstellt       { background: #6c757d !important; color: #fff !important; }
.badge-angefragt      { background: #0dcaf0 !important; color: #003a4d !important; }
.badge-handlungsbedarf { background: #dc3545 !important; color: #fff !important; }
.badge-vorabbegehung  { background: #6610f2 !important; color: #fff !important; }
.badge-abbruch        { background: #dc3545 !important; color: #fff !important; }
.badge-storno         { background: #495057 !important; color: #fff !important; }
.badge-wiedereinsatz  { background: #fd7e14 !important; color: #fff !important; }

@keyframes ctr-pulse-badge {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* Status-Filter-Group (farbcodiert) */
.ctr-filter-group {
  display: inline-flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.ctr-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border-radius: var(--ctr-radius-md);
  border: 1px solid var(--ctr-border-strong);
  background: #fff;
  color: var(--ctr-text-muted);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: all var(--ctr-transition);
  white-space: nowrap;
  line-height: 1.3;
}
.ctr-filter-btn:hover {
  border-color: var(--ctr-primary-200);
  color: var(--ctr-primary);
  background: var(--ctr-primary-50);
  text-decoration: none;
}
.ctr-filter-btn .ctr-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .4rem;
  border-radius: var(--ctr-radius-full);
  background: var(--ctr-primary-50);
  color: var(--ctr-text-muted);
  font-size: .72rem;
  font-weight: 700;
}
.ctr-filter-btn.is-active { color: #fff; }
.ctr-filter-btn.is-active .ctr-filter-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.ctr-filter-btn.is-active.is-pending  { background: var(--ctr-warning); border-color: #d97706; }
.ctr-filter-btn.is-active.is-approved { background: var(--ctr-success); border-color: #15803d; }
.ctr-filter-btn.is-active.is-rejected { background: var(--ctr-danger);  border-color: #b91c1c; }
.ctr-filter-btn.is-active.is-neutral,
.ctr-filter-btn.is-active.is-primary  { background: var(--ctr-primary); border-color: var(--ctr-primary); }

/* ── 9. Pagination ─────────────────────────────────────────── */
.ctr-pagination .pagination { gap: .35rem; margin: 0; }
.ctr-pagination .page-item {
  border-radius: var(--ctr-radius-md);
  overflow: hidden;
}
.ctr-pagination .page-link {
  min-width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ctr-border-strong);
  border-radius: var(--ctr-radius-md);
  background: #fff;
  color: var(--ctr-primary);
  font-weight: 600;
  transition: all var(--ctr-transition);
  box-shadow: var(--ctr-shadow-xs);
}
.ctr-pagination .page-link:hover {
  background: var(--ctr-primary-50);
  border-color: var(--ctr-primary-200);
  color: var(--ctr-primary-dark);
}
.ctr-pagination .page-item.active .page-link {
  background: var(--ctr-primary);
  border-color: var(--ctr-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(26, 54, 93, .24);
}
.ctr-pagination .form-select {
  border-radius: var(--ctr-radius-md);
  border-color: var(--ctr-border-strong);
  font-weight: 600;
  min-height: 2.3rem;
  color: var(--ctr-primary-dark);
  box-shadow: var(--ctr-shadow-xs);
}
.ctr-pagination .form-select:focus {
  border-color: var(--ctr-primary);
  box-shadow: var(--ctr-focus-ring);
}

/* ── 10. Toasts, Alerts ───────────────────────────────────── */
.toast-container-fixed {
  position: fixed;
  top: calc(var(--ctr-navbar-height) + 14px);
  right: 1rem;
  z-index: 1090;
}
.toast {
  border: 1px solid var(--ctr-border);
  border-radius: var(--ctr-radius-md);
  box-shadow: var(--ctr-shadow-lg);
}

.alert {
  border-radius: var(--ctr-radius-md);
  border: 1px solid transparent;
  padding: .75rem 1rem;
  font-size: .9rem;
}
.alert-success { background: var(--ctr-success-bg); color: #15803d; border-color: #bbf7d0; }
.alert-warning { background: var(--ctr-warning-bg); color: #a16207; border-color: #fde68a; }
.alert-danger  { background: var(--ctr-danger-bg);  color: #b91c1c; border-color: #fecaca; }
.alert-info    { background: var(--ctr-info-bg);    color: #0c4a6e; border-color: #bae6fd; }

/* ── 11. Navbar, Sidebar, Footer ──────────────────────────── */
.ctr-navbar {
  background: var(--ctr-primary) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  z-index: 1040;
  min-height: var(--ctr-navbar-height);
}
.ctr-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.ctr-navbar .nav-link {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 500;
  padding: .5rem 1rem;
  border-radius: var(--ctr-radius-sm);
  transition: all var(--ctr-transition);
}
.ctr-navbar .nav-link:hover,
.ctr-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
}
.ctr-navbar .nav-link .bi { margin-right: .35rem; }
.ctr-navbar .dropdown-menu {
  border: 1px solid var(--ctr-border);
  border-radius: var(--ctr-radius-md);
  box-shadow: var(--ctr-shadow-lg);
  padding: .4rem;
}
.ctr-navbar .dropdown-item {
  border-radius: var(--ctr-radius-sm);
  padding: .5rem .75rem;
  font-size: .9rem;
}
.ctr-navbar .dropdown-item:hover { background: var(--ctr-primary-50); color: var(--ctr-primary); }

.ctr-sidebar {
  position: fixed;
  top: var(--ctr-navbar-height);
  left: 0;
  bottom: 0;
  width: var(--ctr-sidebar-width);
  background: #fff;
  border-right: 1px solid var(--ctr-border);
  overflow-y: auto;
  z-index: 1030;
  transition: transform .3s ease;
}
.ctr-sidebar .nav-link {
  color: var(--ctr-text-muted);
  padding: .6rem 1.25rem;
  font-size: .88rem;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: all var(--ctr-transition);
  display: flex;
  align-items: center;
}
.ctr-sidebar .nav-link:hover {
  background: var(--ctr-primary-50);
  color: var(--ctr-primary);
  border-left-color: var(--ctr-primary-200);
}
.ctr-sidebar .nav-link.active {
  background: var(--ctr-primary-50);
  color: var(--ctr-primary);
  border-left-color: var(--ctr-primary);
  font-weight: 600;
}
.ctr-sidebar .nav-link .bi {
  width: 1.15rem;
  margin-right: .55rem;
  text-align: center;
  font-size: 1rem;
}
.ctr-sidebar .sidebar-heading {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ctr-text-subtle);
  padding: 1.15rem 1.25rem .4rem;
  font-weight: 700;
}

.ctr-footer {
  background: var(--ctr-primary-dark);
  color: rgba(255, 255, 255, .6);
  font-size: .8rem;
  padding: 1rem 0;
  text-align: center;
  margin-top: auto;
}

/* ── 12. Utility-Klassen ──────────────────────────────────── */
.text-muted      { color: var(--ctr-text-muted) !important; }
.text-subtle     { color: var(--ctr-text-subtle); }
.text-primary    { color: var(--ctr-primary) !important; }
.bg-subtle       { background: var(--ctr-surface-alt); }
.border-subtle   { border-color: var(--ctr-border) !important; }
.shadow-xs       { box-shadow: var(--ctr-shadow-xs) !important; }
.shadow-sm-soft  { box-shadow: var(--ctr-shadow-sm) !important; }

.divider {
  height: 1px;
  background: var(--ctr-divider);
  margin: 1rem 0;
}

/* Card-Title-Kombi */
.ctr-kpi {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ctr-kpi__label {
  font-size: .75rem;
  color: var(--ctr-text-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.ctr-kpi__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ctr-text);
  line-height: 1.2;
}
.ctr-kpi__hint { font-size: .82rem; color: var(--ctr-text-subtle); }

/* ── 13. Mobile-Anpassungen ───────────────────────────────── */
@media (max-width: 991.98px) {
  .ctr-sidebar { transform: translateX(-100%); }
  .ctr-sidebar.show { transform: translateX(0); }
  .ctr-main { margin-left: 0; }
}

@media (max-width: 767.98px) {
  .ctr-main {
    padding: 1rem 1rem 2rem;
  }

  /* Page-Header stapeln */
  .ctr-page-header,
  .page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }
  .ctr-page-header__actions,
  .page-header > .d-flex,
  .page-header > [class*="d-flex"] {
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch !important;
  }
  .ctr-page-header .btn,
  .ctr-page-header .btn-group,
  .page-header .btn,
  .page-header .btn-group {
    width: 100%;
  }
  .ctr-page-header .btn-group .btn,
  .page-header .btn-group .btn { flex: 1; }

  /* Tabellen: responsive Labels via data-label */
  .table-responsive-labels .ctr-table thead {
    display: none;
  }
  .table-responsive-labels .ctr-table,
  .table-responsive-labels .ctr-table tbody,
  .table-responsive-labels .ctr-table tr,
  .table-responsive-labels .ctr-table td {
    display: block;
    width: 100%;
  }
  .table-responsive-labels .ctr-table tr {
    border: 1px solid var(--ctr-border);
    border-radius: var(--ctr-radius-md);
    margin-bottom: .75rem;
    padding: .5rem;
    background: #fff;
  }
  .table-responsive-labels .ctr-table td {
    border: none !important;
    padding: .4rem .5rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .table-responsive-labels .ctr-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ctr-text-subtle);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
  }
  .table-responsive-labels .ctr-table td[data-label=""]::before { content: none; }

  .ctr-card .table { font-size: .9rem; }
  .ctr-card .btn { min-height: 42px; }

  /* Status-Filter auf Mobile auf volle Breite */
  .ctr-filter-group {
    width: 100%;
  }
  .ctr-filter-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  body { font-size: 14.5px; }
}

/* ── 14. Dark-Mode-Vorbereitung ───────────────────────────── */
/* Phase 2: wird durch [data-theme="dark"] auf <html> aktiviert.
   Alle Farbwerte oben sind bereits Tokens — nur diese Sektion
   muss bei Aktivierung befüllt werden. */
/*
[data-theme="dark"] {
  --ctr-bg:          #0f172a;
  --ctr-surface:     #1e293b;
  --ctr-surface-alt: #263449;
  --ctr-border:      #334155;
  --ctr-border-strong: #475569;
  --ctr-divider:     #2d3a52;
  --ctr-text:         #f1f5f9;
  --ctr-text-muted:   #cbd5e1;
  --ctr-text-subtle:  #94a3b8;
  --ctr-primary-50:  #1e293b;
  --ctr-primary-100: #334155;
}
*/