/*
 * 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; }
}

/*
 * Vertrauliche Zahlen verbergen (Nutzer-Vorgabe 29.08.2026: "wir
 * brauchen oben auch ein auge was standardmäßig alle zahlen
 * ausblendet. nur wenn ich aktiv das auge akrtiviere sehe ich
 * vertrauliche zahlen").
 *
 * Standard ist verborgen: Die Klasse am <html>-Element wird erst
 * gesetzt, wenn jemand das Auge aktiv einschaltet. Sie wird bereits im
 * <head> gesetzt (siehe zahlen.js), damit ein freigeschalteter Wert
 * beim Seitenwechsel nicht kurz aufblitzt.
 *
 * Sichtschutz gegen Mitlesen über die Schulter, KEINE Zugriffskontrolle -
 * der Wert steht weiterhin im Quelltext der Seite.
 */
.vertraulich {
  transition: filter .15s ease-out;
}

html:not(.zahlen-sichtbar) .vertraulich {
  filter: blur(0.4em);
  /* Verhindert versehentliches Markieren und Kopieren des Werts. */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .vertraulich { transition: none; }
}

/*
 * Schnellzugriff-Kacheln im Kopfleisten-Raster (Nutzer-Vorgabe
 * 29.08.2026). Bewusst nur ein dezenter Hintergrund beim Überfahren -
 * das Raster soll ruhig wirken, nicht wie ein zweites Menü.
 */
.kurzwahl-kachel {
  transition: background-color .12s ease-out;
}

.kurzwahl-kachel:hover,
.kurzwahl-kachel:focus-visible {
  background-color: var(--bs-secondary-bg);
}

/*
 * Globale Suche in der Kopfleiste (Nutzer-Vorgabe 29.08.2026).
 * Die Treffer sind einfache Verweise; markiert wird sowohl per Maus als
 * auch per Pfeiltaste - beides soll gleich aussehen.
 */
.suche-treffer:hover,
.suche-treffer.active {
  background-color: var(--bs-secondary-bg);
}

.suche-treffer .min-w-0 {
  min-width: 0;
}

/*
 * Breite der globalen Suche (Nutzer-Rückfrage 29.08.2026: "die spalte
 * muss vieeeel breiter also die suche").
 *
 * Das Vuexy-Template gibt der rechten Seite der Kopfleiste
 * `flex-basis: 100%`. Sie beansprucht damit die volle Breite, und für die
 * Suche blieb nur der Rest - rund 17 % statt der Hälfte. Die rechte Seite
 * nimmt jetzt nur noch, was ihre Symbole brauchen; der freie Platz gehört
 * der Suche.
 *
 * Bewusst hier statt in `vendor/css/core.css` - die Vendor-Datei bleibt
 * unangetastet, damit der Update-Pfad des Templates offen bleibt.
 */
#layout-navbar .navbar-nav-right {
  flex: 0 0 auto;
}

#layout-navbar .suche-bereich {
  flex: 1 1 auto;
  min-width: 0;
}

/* Auf kleinen Bildschirmen bräuchte die Suche mehr Platz, als da ist -
   dort tritt sie in die zweite Reihe zurück statt alles zu quetschen. */
@media (max-width: 767.98px) {
  #layout-navbar .suche-bereich {
    display: none;
  }
}

/*
 * Aussehen der globalen Suche (Nutzer-Rückmeldung 29.08.2026: "mach die
 * search bitte wd hell also nicht so mit dunkel grau, etwas leichtes").
 *
 * Vorher lag das Feld als grauer Block (`bg-body-tertiary`, #dfdfe3) auf
 * der weissen Kopfleiste - bei der neuen Breite ein grosser dunkler
 * Balken quer über den Kopf. Jetzt nimmt es dieselbe Fläche wie die
 * Kopfleiste und wird nur durch eine zarte Kontur abgesetzt.
 *
 * `--bs-paper-bg` und `--bs-border-color` sind die Flächen-Token des
 * Templates und kippen im dunklen Theme von selbst mit - deshalb kein
 * fest eingetragenes Weiss und keine eigene Dark-Regel.
 */
#globaleSuche {
  background-color: var(--bs-paper-bg);
  /* Einzelwerte statt der `border`-Kurzschreibweise, damit die
     Fokus-Regel weiter unten nur `border-color` überschreibt und die
     Breite unangetastet lässt. */
  border-width: 1px;
  border-style: solid;
  border-color: var(--bs-border-color);
  box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#globaleSuche:hover {
  border-color: var(--bs-secondary-bg);
}

/* Beim Tippen darf es ruhig sichtbar sein - aber nur über die Kontur,
   nicht über eine Füllung. */
#globaleSuche:focus {
  background-color: var(--bs-paper-bg);
  border-color: rgba(var(--bs-primary-rgb), .5);
  box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .1);
}

/* Der Platzhalter trägt den längsten Text der Kopfleiste - er soll
   lesbar bleiben, aber nicht mit den Menüpunkten konkurrieren. */
#globaleSuche::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

/*
 * Aktenkopf für Personendetailseiten (Nutzer-Vorgabe 29.08.2026:
 * "Personal bitte neu überdenken eher so bauen wie bei webe").
 *
 * Die dunkle Leiste hebt die Aktionen vom Inhalt ab, statt sie irgendwo
 * rechts neben der Überschrift zu parken. Farbe aus dem Menü-Token, damit
 * Kopf und Seitenleiste dieselbe Sprache sprechen.
 */
.akte-aktionsleiste {
  background-color: #0b264e;
}

.akte-bild {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.akte-bild-initialen {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 1.5rem;
  font-weight: 500;
}

/* Funktionstest 05.09.2026: Reiterleisten und Abzeichen auf schmalen Bildschirmen.
   Vuexy setzt .nav-pills/.nav-tabs auf flex-wrap: nowrap; mit vier Reitern
   („Aktuelles Jahr", „Vergleich und Ausreißer", …) lief die BWA auf dem Handy
   auf 806 px Breite und die ganze Seite scrollte seitlich. Leisten, die
   bewusst scrollen (.flex-nowrap im overflow-Container, Statistik), bleiben. */
@media (max-width: 991.98px) {
  .nav-pills:not(.flex-nowrap),
  .nav-tabs:not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}
@media (max-width: 575.98px) {
  .badge {
    white-space: normal;
  }
}

/* Reiterbeschriftungen sind deutsche Wörter, keine Titel: „Vergleich und Ausreißer",
   nicht „Vergleich Und Ausreißer". Vuexy setzt auf .nav-link text-transform:
   capitalize (Funktionstest 05.09.2026). */
.nav-pills .nav-link,
.nav-tabs .nav-link {
  text-transform: none;
}
/* Lange Code-Schnipsel (Pfade, Schlüssel) dürfen auf dem Handy umbrechen. */
@media (max-width: 575.98px) {
  code {
    overflow-wrap: anywhere;
  }
}

/* Kennzeichen „VP" vor dem Saldo: Der Fahrschüler hat einmal über VogelPay
   abgerechnet (Nutzer-Vorgabe 07.09.2026: „Ich möchte nur einen kleinen
   Hinweis (VP) in blau vor dem Saldo, damit ich weiß, dass die mal VogelPay
   waren").

   Eigene Klasse statt `bg-label-info`: Vuexys „info" ist #00bad1, also
   Türkis, nicht Blau. Und die Primärfarbe ist unser Rot - die steht schon
   für offene Forderungen und darf hier nicht mitreden. */
.badge-vp {
  background-color: rgba(30, 95, 191, 0.12);
  color: #1e5fbf;
  font-weight: 600;
}
html[data-bs-theme="dark"] .badge-vp {
  background-color: rgba(122, 168, 245, 0.16);
  color: #7aa8f5;
}
