/* === VG Altenkirchen-Flammersfeld Farbschema ===
   Orange: #F39200 | Dunkel-Orange: #EA560D | Rot: #E30613
   ============================================== */

/* --- Farb-Variablen --- */
:root, [data-bs-theme="light"] {
  --bs-primary:              #C87000;
  --bs-primary-rgb:          200, 112, 0;
  --bs-link-color:           #C87000;
  --bs-link-hover-color:     #9A5500;
  --bs-link-color-rgb:       200, 112, 0;
  --bs-link-hover-color-rgb: 154, 85, 0;
}

[data-bs-theme="dark"] {
  --bs-primary:              #F39200;
  --bs-primary-rgb:          243, 146, 0;
  --bs-link-color:           #F39200;
  --bs-link-hover-color:     #FFC040;
  --bs-link-color-rgb:       243, 146, 0;
  --bs-link-hover-color-rgb: 255, 192, 64;
}

/* --- Navbar (Light Mode) --- */
.essp-navbar {
  background-color: #f4f4f4;
  border-bottom: 3px solid #F39200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.essp-navbar .navbar-brand,
.essp-navbar .nav-link {
  color: #212529;
}

.essp-navbar .navbar-brand:hover,
.essp-navbar .nav-link:hover {
  color: #C87000;
}

.essp-navbar .nav-link.active {
  color: #C87000;
  font-weight: 500;
}

/* Hamburger-Icon für hellen Hintergrund */
.essp-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833%2C37%2C41%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.essp-navbar .navbar-toggler {
  border-color: rgba(33, 37, 41, .2);
}

/* Dark-Mode-Schalter */
.essp-theme-btn {
  color: #212529;
  border: 1px solid rgba(33, 37, 41, .2);
  background: transparent;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.essp-theme-btn:hover {
  background: rgba(33, 37, 41, .08);
  color: #C87000;
  border-color: #C87000;
}

/* --- Navbar (Dark Mode) --- */
[data-bs-theme="dark"] .essp-navbar {
  background-color: #1e1e1e;
  border-bottom-color: #F39200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .essp-navbar .navbar-brand,
[data-bs-theme="dark"] .essp-navbar .nav-link {
  color: #e0e0e0;
}

[data-bs-theme="dark"] .essp-navbar .navbar-brand:hover,
[data-bs-theme="dark"] .essp-navbar .nav-link:hover {
  color: #F39200;
}

[data-bs-theme="dark"] .essp-navbar .nav-link.active {
  color: #F39200;
}

/* Hamburger-Icon für dunklen Hintergrund */
[data-bs-theme="dark"] .essp-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28224%2C224%2C224%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .essp-navbar .navbar-toggler {
  border-color: rgba(224, 224, 224, .2);
}

[data-bs-theme="dark"] .essp-theme-btn {
  color: #e0e0e0;
  border-color: rgba(224, 224, 224, .2);
}

[data-bs-theme="dark"] .essp-theme-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: #F39200;
  border-color: #F39200;
}

/* --- Primär-Buttons (Light) --- */
.btn-primary {
  --bs-btn-bg:                 #C87000;
  --bs-btn-border-color:       #C87000;
  --bs-btn-hover-bg:           #A85E00;
  --bs-btn-hover-border-color: #9A5500;
  --bs-btn-active-bg:          #8A4D00;
  --bs-btn-color:              #fff;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-color:       #fff;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(200, 112, 0, 0.4);
}

.btn-outline-primary {
  --bs-btn-color:              #C87000;
  --bs-btn-border-color:       #C87000;
  --bs-btn-hover-bg:           #C87000;
  --bs-btn-hover-border-color: #C87000;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          #A85E00;
  --bs-btn-active-color:       #fff;
}

/* --- Primär-Buttons (Dark) --- */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg:                 #F39200;
  --bs-btn-border-color:       #F39200;
  --bs-btn-hover-bg:           #D07800;
  --bs-btn-hover-border-color: #C07000;
  --bs-btn-color:              #fff;
  --bs-btn-hover-color:        #fff;
}

/* --- Form-Controls Fokus --- */
.form-control:focus,
.form-select:focus {
  border-color: #F39200;
  box-shadow: 0 0 0 0.25rem rgba(243, 146, 0, 0.25);
}

/* --- Tabellen: vollständige Dark-Mode-Kompatibilität ---
   Ansatz: Bootstrap 5.3 CSS-Variablen (--bs-tertiary-bg, --bs-border-color) nutzen,
   die sich automatisch für Light und Dark Mode anpassen. table-light wird damit
   vollständig überschrieben. !important nötig, da Bootstrap direkte border-color setzt. */

/* thead / tfoot: Bootstrap's --bs-tertiary-bg passt sich automatisch an:
   Light Mode: #f8f9fa (helles Grau)  |  Dark Mode: #2b3035 (dunkles Grau)
   Border-Überschreibung NUR im Dark Mode, damit die Trennlinie im Light Mode
   erhalten bleibt. */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table > thead > tr > td,
[data-bs-theme="dark"] .table > tfoot > tr > th,
[data-bs-theme="dark"] .table > tfoot > tr > td {
  border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .table > thead,
[data-bs-theme="dark"] .table > tfoot {
  border-color: var(--bs-border-color) !important;
}

/* table-primary: heute-Zeile / heute-Spalte (Dark Mode)
   Bootstrap setzt --bs-table-border-color: #a6b5cc (hellblau) direkt auf .table-primary.
   → Muss auf dem <tr> selbst überschrieben werden, damit border-collapse die richtige
     Farbe für die Trennlinie zwischen heute und morgen verwendet. */
/* Fall 1: table-primary auf <tr> */
[data-bs-theme="dark"] tr.table-primary {
  --bs-table-border-color: var(--bs-border-color);
  border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] tr.table-primary > td,
[data-bs-theme="dark"] tr.table-primary > th {
  --bs-table-border-color: var(--bs-border-color);
  background-color: rgba(243, 146, 0, 0.18) !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color) !important;
}
/* Fall 2: table-primary direkt auf <td>/<th> (z.B. Admin-Matrix) */
[data-bs-theme="dark"] td.table-primary,
[data-bs-theme="dark"] th.table-primary {
  --bs-table-border-color: var(--bs-border-color);
  background-color: rgba(243, 146, 0, 0.18) !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color) !important;
}

/* --- Tabellen in Cards: äußere Zell-Borders entfernen ---
   Ursache: Card hat 1px Border + table-bordered legt nochmal 1px direkt daneben
   → erscheint doppelt so dick. Card-Border übernimmt den äußeren Rahmen. */
/* Row-Group-Border oben/unten */
.card-body .table-bordered > :not(caption):first-child {
  border-top-width: 0 !important;
}
.card-body .table-bordered > :not(caption):last-child {
  border-bottom-width: 0 !important;
}
/* Zell-Border der ersten Zeile (Bootstrap setzt border-bottom auf Zellen) */
.card-body .table-bordered > :not(caption):first-child > tr:first-child > * {
  border-top-width: 0 !important;
}
/* Zell-Border der letzten Zeile */
.card-body .table-bordered > :not(caption):last-child > tr:last-child > * {
  border-bottom-width: 0 !important;
}
/* Linke/rechte Außenborder der Zellen */
.card-body .table-bordered > :not(caption) > * > *:first-child {
  border-left-width: 0 !important;
}
.card-body .table-bordered > :not(caption) > * > *:last-child {
  border-right-width: 0 !important;
}

/* table-secondary: Trennzeilen (z.B. Springer-Sektion) */
[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg:           rgba(255, 255, 255, 0.07);
  --bs-table-color:        #e0e0e0;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
}

/* --- Status-Badges --- */
.badge.bg-success { background-color: #4caf50 !important; color: #fff; }
.badge.bg-danger  { background-color: #dc3545 !important; color: #fff; }
[data-bs-theme="dark"] .badge.bg-success { background-color: #66bb6a !important; color: #000; }
[data-bs-theme="dark"] .badge.bg-danger  { background-color: #ef5350 !important; color: #fff; }

/* --- Zukünftige Tage in der Matrix (Platzhalter) --- */
.cell-future {
  background-color: rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .cell-future {
  background-color: rgba(255, 255, 255, 0.04);
}

/* --- Vergangene Matrix-Zellen ohne Eintrag (Ausstehend-Hinweis) --- */
.cell-pending {
  background-color: rgba(255, 193, 7, 0.08);
}
[data-bs-theme="dark"] .cell-pending {
  background-color: rgba(255, 193, 7, 0.06);
}

/* --- Gesperrte (readonly) Felder — passt sich Light/Dark an --- */
.form-control.field-locked {
  background-color: #f0f0f0;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control.field-locked {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #e0e0e0 !important;
}
/* Autofill-Override: Browser überschreibt sonst den Hintergrund bei vorbefüllten Feldern */
[data-bs-theme="dark"] .form-control.field-locked:-webkit-autofill,
[data-bs-theme="dark"] .form-control.field-locked:autofill {
  -webkit-box-shadow: 0 0 0 100px #2b3035 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  box-shadow: 0 0 0 100px #2b3035 inset !important;
}

/* --- Tooltips --- */
.tooltip .tooltip-inner { max-width: 240px; text-align: left; }

/* --- Mobile: Touch-freundliche Elemente --- */
@media (max-width: 767.98px) {
  /* Checkboxen in Staff-Tabellen größer machen */
  .form-check-input.absent-cb {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0.1em;
    cursor: pointer;
  }

  /* Buttons nicht zu klein */
  .btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
  }

  /* Dropdown-Items auf Mobile größeres Touch-Target */
  .dropdown-item {
    padding: 0.6rem 1rem;
  }

  /* Modal immer scrollbar auf kleinen Bildschirmen */
  .modal-dialog {
    margin: 0.5rem;
  }
  .modal-body {
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
  }
}

/* --- Kita-Liste: Buttons auf Mobile stapeln --- */
@media (max-width: 575.98px) {
  .kita-actions .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .kita-actions .btn-group > .btn,
  .kita-actions .btn-group > .btn-group {
    border-radius: 0.375rem !important;
    flex: 1 1 auto;
    min-width: 80px;
  }
}

/* --- Aktive Dropdown-Items (subtil, überschreibt Bootstrap-Blau) --- */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary-bg-subtle, rgba(200, 112, 0, 0.12));
  color: var(--bs-primary);
  font-weight: 500;
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  background-color: rgba(243, 146, 0, 0.15);
  color: #F39200;
}

/* --- Offcanvas Mobile Navigation (Light) --- */
.essp-offcanvas {
  background-color: #f4f4f4;
  border-left: 3px solid #F39200;
  width: 320px;
  max-width: 88vw;
}
.essp-offcanvas .offcanvas-title { color: #C87000; font-size: 1.1rem; }
.essp-offcanvas-user {
  background-color: rgba(200,112,0,.08);
  border: 1px solid rgba(200,112,0,.2);
}
.essp-offcanvas-link {
  padding: .65rem .75rem;
  border-radius: .375rem;
  color: #212529;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.essp-offcanvas-link:hover { background-color: rgba(200,112,0,.08); color: #C87000; }
.essp-offcanvas-link.active { background-color: rgba(200,112,0,.12); color: #C87000; font-weight: 500; }

/* --- Offcanvas Dark Mode --- */
[data-bs-theme="dark"] .essp-offcanvas { background-color: #1e1e1e; border-left-color: #F39200; }
[data-bs-theme="dark"] .essp-offcanvas .offcanvas-title { color: #F39200; }
[data-bs-theme="dark"] .essp-offcanvas-user { background-color: rgba(243,146,0,.1); border-color: rgba(243,146,0,.25); }
[data-bs-theme="dark"] .essp-offcanvas-link { color: #e0e0e0; }
[data-bs-theme="dark"] .essp-offcanvas-link:hover { background-color: rgba(243,146,0,.1); color: #F39200; }
[data-bs-theme="dark"] .essp-offcanvas-link.active { background-color: rgba(243,146,0,.15); color: #F39200; }