/*
 * Fahrschule Strothmann - CI-Override.
 *
 * Überschreibt nur die Bootstrap-5-Custom-Properties aus
 * vendor/css/core.css (":root, [data-bs-theme=light]"). Muss NACH
 * core.css eingebunden werden, damit die Kaskade ohne !important
 * greift. Die Vendor-Datei selbst bleibt unangetastet (Update-Pfad).
 *
 * Primärfarbe laut Wunsch aus dem Template-Customizer-Test: #E0083A (Rot).
 */
:root {
  --bs-primary: #e0083a;
  --bs-primary-rgb: 224, 8, 58;
  --bs-primary-bg-subtle: #fce6eb;
  --bs-primary-border-subtle: #f4a9ba;
  --bs-primary-text-emphasis: #7b0420;

  --bs-info: #e0083a;
  --bs-info-rgb: 224, 8, 58;
}

/*
 * core.css definiert --bs-primary auch direkt auf [data-bs-theme=dark]
 * (eigene Farbpalette für den Dark-Modus). Das Semi-Dark-Menü trägt
 * dieses Attribut auf dem <aside>, daher überschreibt eine geerbte
 * :root-Regel dort NICHT - core.css's direkte Deklaration auf demselben
 * Element gewinnt sonst gegen die geerbte :root-Variable. Ohne diesen
 * zusätzlichen Block bliebe das Menü beim Vuexy-Standard-Lila (#7367f0).
 */
[data-bs-theme=dark] {
  --bs-primary: #e0083a;
  --bs-primary-rgb: 224, 8, 58;
  --bs-primary-bg-subtle: #fce6eb;
  --bs-primary-border-subtle: #f4a9ba;
  --bs-primary-text-emphasis: #7b0420;

  --bs-info: #e0083a;
  --bs-info-rgb: 224, 8, 58;

  /* Sidebar-Hintergrund des Semi-Dark-Menüs. */
  --bs-menu-bg: #0b264e;
  --bs-menu-bg-rgb: 11, 38, 78;
}

/* Sidebar-Logo wirkt bei fester Menü-Kopfhöhe sonst gequetscht. */
.app-brand-logo-img {
  padding-top: 6px;
}

/*
 * DataTables (Listenansichten): Pagination-Zeile hatte keinen
 * Abstand zum unteren Kartenrand, da die Tabelle direkt in
 * ".table-responsive" statt ".card-body" liegt. Zusätzlich: die
 * rohe, noch unstylisierte Tabelle wird bis zur Initialisierung
 * versteckt (kein Flackern bei großen Tabellen) und blendet danach
 * sanft ein.
 */
.dt-container > div:last-child {
  padding: 1rem 1.5rem 1.5rem;
}

.datatable-pending:not(.dataTable) {
  display: none;
}

.dt-container {
  animation: dt-fade-in .2s ease-out;
}

@keyframes dt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}