/* Ergänzungen, die es nur im Inventar Manager gibt.
 *
 * app.css und bootstrap.min.css kommen 1:1 aus dem Fuhrpark und werden nicht
 * angefasst — sonst ließe sich von dort nichts mehr nachziehen (CLAUDE.md).
 * Alles Eigene steht deshalb hier.
 */

/* --- Offene Muss- und Sollte-Felder (INV-101) -----------------------------
 *
 * Beim Öffnen eines gespeicherten Inventars sieht man sonst nicht, welche
 * Felder noch fehlen — man müsste jedes einzeln durchgehen. Der farbige Rahmen
 * zeigt es auf einen Blick.
 *
 * Die Farben folgen der Bedeutung, die in der ganzen Anwendung gilt: Rot für
 * „muss", Gelb für „sollte". Der Schein liegt außen (box-shadow), damit die
 * Feldgröße gleich bleibt — ein dickerer Rahmen würde die Zeilen verschieben,
 * sobald ein Feld gefüllt wird.
 *
 * Bewusst nur auf leeren Feldern: Ein dauerhaft rot umrandetes Pflichtfeld
 * wäre nach kurzer Zeit unsichtbar.
 */
.feld-offen-muss .form-control,
.feld-offen-muss .form-select,
.feld-offen-muss > .border {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.feld-offen-sollte .form-control,
.feld-offen-sollte .form-select,
.feld-offen-sollte > .border {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.3);
}

/* Beim Hineinklicken tritt der Hinweis zurück: Wer das Feld gerade ausfüllt,
 * weiß, dass es leer war — dann stört der Schein nur. Bootstrap setzt hier
 * seinen eigenen Fokusrahmen. */
.feld-offen-muss .form-control:focus,
.feld-offen-muss .form-select:focus,
.feld-offen-sollte .form-control:focus,
.feld-offen-sollte .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Die Beschriftung mitfärben — auf einem langen Formular findet man die
 * Fundstelle sonst nur über den Rahmen, der beim Scrollen aus dem Bild ist. */
.feld-offen-muss > .form-label {
  color: #b02a37;
}

.feld-offen-sollte > .form-label {
  color: #997404;
}


/* --- Aktionsleiste über dem Formular (INV-104) ----------------------------
 *
 * Sie steht zwischen Überschrift und Maske und bleibt beim Scrollen oben
 * kleben. Bei einem Formular mit zwanzig Spezialfeldern ist das der Gewinn:
 * Speichern und Abbrechen sind immer erreichbar.
 *
 * `.main` ist der Scrollbereich (overflow-y: auto), also klebt die Leiste an
 * dessen oberer Kante — nicht am Fenster.
 *
 * `background: inherit` statt einer festen Farbe: `.main` trägt je Bereich
 * eine andere Hintergrundfarbe (blau für Inventar, beige für Standorte, grün
 * für Einstellungen). Eine feste Farbe wäre in drei von vier Bereichen falsch,
 * und durchscheinender Text unter der Leiste wäre schlimmer als keine Leiste.
 */
.aktionsleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Deckend, nicht durchscheinend. `background: inherit` war hier falsch:
   * `.main` traegt eine **halbtransparente** Bereichsfarbe (rgba mit 0.09 bis
   * 0.18 Deckung). Geerbt hat die Leiste damit ebenfalls nur einen Hauch
   * Farbe -- und der Text, der beim Scrollen darunter durchlief, war durch
   * sie hindurch zu lesen. Das sah aus, als schoebe sich die Leiste in das
   * Formular hinein.
   *
   * Grundlage ist `--bg` -- der Seitenhintergrund, ueber dem auch `.main`
   * seine Bereichsfarbe mischt. **Nicht Weiss**: `--bg` ist ein leichtes Grau,
   * und mit Weiss darunter waere die Leiste heller als ihre Umgebung. Die
   * Bereichsfarbe kommt unten je Bereich als Verlauf darueber. Ergebnis:
   * exakt dieselbe Farbe wie ringsum, nur undurchsichtig. */
  background: var(--bg);
  /* Links so eingerueckt, dass der erste Knopf mit dem Text in den Karten
   * darunter fluchtet (Bootstrap gibt der Karte 1rem Innenabstand). Vorher
   * begann er 16 Pixel weiter links und klebte am Seitenmenue. */
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Die Bereichsfarbe deckend nachbilden: dieselbe rgba-Farbe wie `.main`,
 * aber ueber weissem Grund statt ueber dem, was gerade darunter liegt. */
.area-uebersicht .aktionsleiste {
  background-image: linear-gradient(var(--area-uebersicht), var(--area-uebersicht));
}
.area-fahrzeug .aktionsleiste {
  background-image: linear-gradient(var(--area-fahrzeug), var(--area-fahrzeug));
}
.area-vertrag .aktionsleiste {
  background-image: linear-gradient(var(--area-vertrag), var(--area-vertrag));
}
.area-mitarbeiter .aktionsleiste {
  background-image: linear-gradient(var(--area-mitarbeiter), var(--area-mitarbeiter));
}
.area-einstellungen .aktionsleiste {
  background-image: linear-gradient(var(--area-einstellungen), var(--area-einstellungen));
}
.area-auswertung .aktionsleiste {
  background-image: linear-gradient(var(--area-auswertung), var(--area-auswertung));
}
.area-hilfsprogramme .aktionsleiste {
  background-image: linear-gradient(var(--area-hilfsprogramme), var(--area-hilfsprogramme));
}


/* --- Hauptfarbe des Mandanten (INV-107) ----------------------------------
 *
 * base.html setzt --accent auf die gewählte Farbe. Das allein reicht in dieser
 * Anwendung aber nicht: Die Knöpfe sind Bootstrap-Knöpfe, und Bootstrap 5.3
 * legt für `.btn-primary` eigene Variablen (`--bs-btn-bg` …) mit fest
 * eingebauten Werten an. Ohne die folgende Brücke bliebe der „Speichern"-Knopf
 * blau, egal was der Mandant einstellt — die Einstellung sähe aus, als täte
 * sie nichts.
 *
 * Bewusst nur unter `.eigene-farbe`: Das Kennzeichen setzt base.html nur, wenn
 * tatsächlich eine Farbe hinterlegt ist. Wer keine wählt, sieht die Anwendung
 * unverändert — ein Update soll niemandem ungefragt die Knöpfe umfärben.
 *
 * Die Abstufungen entstehen über `color-mix` aus der einen gewählten Farbe.
 * Sonst müsste jeder Mandant fünf Farbwerte pflegen, um einen Knopf zu haben,
 * der beim Überfahren nachdunkelt.
 */
.eigene-farbe .btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 70%, black);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

.eigene-farbe .btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
}

/* Der Rahmen um das gerade bearbeitete Feld gehört zur selben Handschrift. */
.eigene-farbe .form-control:focus,
.eigene-farbe .form-select:focus,
.eigene-farbe .form-check-input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 25%, transparent);
}

.eigene-farbe .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.eigene-farbe .border-primary {
  border-color: var(--accent) !important;
}