/* FORT.SCHRITT – Gemeinsame UI-Komponenten (Tabellen, Kacheln/Cards,
   Formularfelder, Badges/Alerts, erweiterte Buttons)
   Laden nach brand.css und layout.css.

   Phase 1 von Anforderungsbeschreibungen/Anforderung_Zentrales_UI-Stylesheet.txt.
   Zusammengeführt aus den drei bislang parallel gewachsenen Bestands-Dialekten:
   fuhrpark/css/app.css (umfangreichstes System, Basis für Kacheln/Tabellen),
   backoffice/genussrechte Inline-<style> (Card/Badge-Grundmuster) und den
   vier management-Modulen (Alert-Vokabular, dort bereits identisch). Ersetzt
   keine App-Datei automatisch – Migration erfolgt je App in Phase 3. */

/* ── Buttons (Ergänzung zu brand.css) ─────────────────────────────────── */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: #e05a00;
}

.btn-secondary {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-secondary:hover {
  background: #4f524e;
}

.btn-danger {
  /* Kräftiger Rotton statt der hellen --color-danger-bg (die ist für
     Badge-/Alert-Flächen gedacht, nicht für Buttontext-Kontrast). */
  background: #c0392b;
  color: var(--color-white);
}
.btn-danger:hover {
  background: #a93226;
}

.btn-ghost {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid #e2e2e0;
  box-shadow: none;
}
.btn-ghost:hover {
  border-color: var(--color-dark);
  transform: none;
  box-shadow: none;
}

/* ── Icon-Buttons (Tabellenzeilen-Aktionen) ─────────────────────────────
   UI/UX-Interaktionsstandard Phase 2 (21.08.2026): Buttons INNERHALB von
   Tabellenzeilen (Aktionen-Spalte) sind grundsätzlich Icon-only, nie Text -
   Buttons in Dialogen/Formularen behalten Text (.btn-primary/-secondary/
   -danger/-ghost). Icons kommen aus dem zentralen Set (icons.js,
   FortschrittIcons.icon(id, size)), z.B.
   `<button class="btn-icon" title="Bearbeiten">${FortschrittIcons.icon('bearbeiten')}</button>`.
   Ruhezustand neutral (Anthrazit), Hover orange - deckt sich mit dem
   Hover-Vokabular des übrigen Systems (Nav-Items, Kacheln). Löschen ist
   bewusst PERMANENT in der Gefahrenfarbe (nicht erst bei Hover), damit eine
   destruktive Aktion in einer Zeile mit mehreren Icon-Buttons sofort auffällt -
   .btn-icon-danger nutzt denselben Rotton wie .btn-danger (#c0392b). Immer mit
   `title`-Attribut (Tooltip + Screenreader), da kein sichtbarer Text da ist. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-dark);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.btn-icon:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  transform: none;
  box-shadow: none;
}
.btn-icon-danger {
  color: #c0392b;
}
.btn-icon-danger:hover {
  background: var(--color-danger-bg);
  color: #a93226;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}

/* ── Cards ─────────────────────────────────────────────────────────────
   Generischer Inhaltscontainer. Standard-Kopf ist hell mit orangem Titel
   (fuhrpark-Optik, per Auftraggeber-Entscheid 19.07.2026 als Standard
   festgelegt). Variante .card-header--dark für den dunklen Anthrazit-Balken
   (Bestandsoptik backoffice/genussrechte, bleibt als Modifier verfügbar). */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
}

.card-header {
  background: var(--color-light);
  color: var(--color-primary);
  padding: 14px 18px;
  border-bottom: 1px solid #e2e2e0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header--dark {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 12px 18px;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.card-title {
  font-size: inherit;
  font-weight: 700;
}

.card-body {
  padding: 18px;
}

/* ── Stat-Kacheln (Dashboard-Kennzahlen) ───────────────────────────────
   Große Zahl + Label, optional mit Akzentfarbe am linken Rand. Namen
   1:1 aus backoffice übernommen (dort bereits so im Einsatz) - bewusst
   NICHT ".kachel-*" genannt, siehe Hinweis unten. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-primary);
}

.stat-card--dark   { border-left-color: var(--color-dark); background: var(--color-white); }
.stat-card--ok     { border-left-color: var(--color-ok); background: var(--color-ok-bg); }
.stat-card--warn   { border-left-color: var(--color-warn); background: var(--color-warn-bg); }
.stat-card--danger { border-left-color: var(--color-danger); background: var(--color-danger-bg); }

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
}

.stat-label {
  font-size: 11px;
  color: #777;
  margin-top: 3px;
}

/* Kompakte Variante (seit Backoffice-Dashboard Phase 4.1, 22.09.2026): mehrere Kennzahlen-Kacheln
   dicht nebeneinander in einer Zeile, ohne die normale .stat-card-Groesse fuer alle bisherigen
   Nutzungen (z.B. Modul-Startseiten) zu veraendern - rein additive Modifier-Klassen, .stat-card
   selbst bleibt unveraendert. Auf Desktop-Breite passen 5 Kacheln nebeneinander, darunter bricht
   das Grid um. */
.stats-grid--kompakt {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .stats-grid--kompakt { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.stat-card--kompakt {
  padding: 10px 12px;
}

.stat-card--kompakt .stat-value { font-size: 18px; }
.stat-card--kompakt .stat-label { font-size: 10.5px; margin-top: 2px; }

/* ── Kacheln (Modul-/Navigationskarten) ─────────────────────────────────
   Klickbare Karte mit Icon + Titel + Kurzbeschreibung, z.B. Kachel-
   Startseite/Kachel-Launcher (siehe backoffice/CLAUDE.md, "Zweck").
   ACHTUNG Begriffsklärung: "Kachel" meint im Bestand diese
   Navigationskarte, NICHT die Kennzahl-Kachel oben (die heißt
   .stat-card, s.o.) - beim Migrieren weiterer Apps in Phase 3 prüfen,
   welches der beiden Muster tatsächlich gemeint ist, bevor Klassen
   umbenannt werden. */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.kachel {
  border: 1px solid #e2e2e0;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  cursor: pointer;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.15s ease, transform 0.15s ease;
}

.kachel:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.kachel-icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.kachel-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.kachel-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}

/* Aktiv-Zustand einer Kachel (seit Backoffice-Dokumentenerstellung Phase 4.3, 23.09.2026) -
   z.B. gewaehlte Kategorie in einer schrittweise aufgebauten Auswahl. Bewusst NICHT identisch
   zum :hover-Zustand (dezente Kontur statt Anheben/Schatten) und NICHT die gesamte Kachel
   aggressiv einfaerben - beide Zustaende sollen unterscheidbar bleiben. */
.kachel--aktiv {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-bg);
}

/* ── Auswahlliste (kompakte klickbare Liste, seit Backoffice-Dokumentenerstellung
   Phase 4.3, 23.09.2026) - fuer eine Auswahl aus einer ueberschaubaren Menge
   benannter Optionen (z.B. Dokumentvorlagen einer Kategorie), wenn eine volle
   Kachel pro Eintrag zu groß und eine Tabelle zu schwer waere. Icon + Titel +
   optionale Kurzbeschreibung + Pfeil, ein deutlich sichtbarer Aktiv-Zustand
   getrennt vom Hover (siehe .kachel--aktiv oben, gleiches Prinzip). */
.auswahl-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auswahl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid #e2e2e0;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.auswahl-item:hover {
  border-color: var(--color-primary);
}

.auswahl-item--aktiv {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-bg);
}

.auswahl-item-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.auswahl-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.auswahl-item-titel {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-dark);
}

.auswahl-item-desc {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.auswahl-item-arrow {
  flex: 0 0 auto;
  color: #999;
  font-size: 16px;
}

/* ── Tabellen ──────────────────────────────────────────────────────────
   Dunkler Kopf, helle Beschriftung, Zeilen mit Hover – Basisvariante ohne
   Wrapper. .table-wrap fügt optional Card-Optik (Rand, Schatten) hinzu. */
.table-wrap {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

thead {
  background: var(--color-dark);
}

thead th,
table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  background: var(--color-dark);
}

table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-light);
  vertical-align: middle;
  transition: background-color 0.12s ease;
}

table tbody tr:last-child td {
  border-bottom: none;
}

table tbody tr:hover td {
  background: rgba(255, 105, 0, 0.12); /* deckt sich mit .nav-item.active/.sidebar-btn.active in layout.css */
}

/* Zeilen mit eigenem dunklem Hintergrund (weiße Schrift, z.B. aufklappbare Gruppen-Kopfzeilen)
   behalten beim Hover einen dunklen Hintergrund - der helle Standard-Hover würde die weiße
   Schrift sonst unlesbar machen (Fund 21.07.2026, budgetcockpit "Mitarbeiterzeiten"). Deckt
   aktuell nur budgetcockpits Konvention (.ic-bg-v-an auf <tr>) ab; andere Apps mit einem
   eigenen Dunkel-Zeilen-Muster brauchen ggf. eine analoge Ergänzung hier. */
table tbody tr.ic-bg-v-an:hover td {
  background: #474a45;
}

/* Klickbare Tabellenzeile (Fund 31.07.2026, Auftraggeber-Vorgabe: Zeilenklick statt separatem
   "Bearbeiten"/"Ansehen"-Button ist der projektweite Standard zum Öffnen eines Detaileintrags).
   Andere Buttons innerhalb einer .row-clickable-Zeile (z.B. Löschen) müssen ihr onclick mit
   event.stopPropagation() beginnen, sonst löst ein Klick auf den Button zusätzlich das
   Zeilen-onclick aus. */
.row-clickable {
  cursor: pointer;
}

table tr.sum-row td {
  font-weight: 700;
  color: var(--color-dark);
  background: var(--color-light) !important;
  border-top: 2px solid #e2e2e0;
}

/* ── Filterleiste (Tabellen-Toolbar) ─────────────────────────────────────
   Phase 4 UI/UX-Interaktionsstandard (21.08.2026, Entscheidung C1: "analog
   Budgetcockpit Seite Beauftragungen" statt der bisher uneinheitlichen
   "Label über Feld"-Filterzeilen in genussrechte/management). Budgetcockpits
   Beauftragungen-Tabelle war im Bestand bereits die reichhaltigste Ausprägung:
   Status-Filter + Gruppierungs-Tabs + Suche + Sortierung + Live-Zähler in
   einer gemeinsamen Leiste oberhalb der Tabelle. Klassennamen 1:1 aus
   budgetcockpit übernommen (.tbl-toolbar etc. war dort bereits lokale
   Bestandskonvention, css/app.css) - budgetcockpit selbst braucht dadurch
   keine Migration, andere Apps übernehmen exakt dieselben Klassen. Sitzt
   üblicherweise als erstes Kind in .table-wrap, direkt vor <table>. Selects
   (Status-/Sortierfilter) nutzen die bereits bestehende Formularfeld-Optik
   weiter unten in dieser Datei, keine eigene Select-Klasse nötig. */
.tbl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e2e0;
  flex-wrap: wrap;
}

.tbl-search {
  flex: 1;
  max-width: 300px;
  padding: 7px 12px;
  border: 1px solid #e2e2e0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--color-dark);
  outline: none;
}
.tbl-search:focus {
  border-color: var(--color-primary);
}

.tbl-count {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  margin-left: auto;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 5px 12px;
  border: 1px solid #e2e2e0;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #777;
  font-family: inherit;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.filter-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Inhalts-Tabs (Seitenbereich wechseln) ───────────────────────────────
   Phase 5 UI/UX-Interaktionsstandard (21.08.2026, Entscheidung D1: Variante
   B) - visuell identisch zum Kastenstil von `.filter-tabs`/`.filter-tab`
   oben (gleicher Radius/gleiche Füllung bei aktiv), aber bewusst eine
   EIGENE Klasse: `.tabs`/`.tab-btn` wechselt einen ganzen Seitenbereich
   (Navigation, z.B. ein Mitarbeiter-Profil mit mehreren Unterseiten),
   `.filter-tabs`/`.filter-tab` grenzt nur eine Tabellenliste ein und lebt
   fest innerhalb einer `.tbl-toolbar`. Getrennt gehalten, damit der Code
   eindeutig bleibt (kein `role="tablist"`-Risiko für Filter-Tabs, keine
   spätere Verwässerung von `.filter-tabs`' Bedeutung) - Mehraufwand ist nur
   ein paar Zeilen CSS-Duplikat mit denselben Tokens. Basis war der bereits
   im Bestand mehrfach identisch vorkommende Kastenstil (Hub
   `admin_dokumente.php` `.dv-tabs`, `admin_angebote.php` `.ak-tabs`,
   `ticketsystem.php` `.tk-filter-bar` - alle drei CSS-identisch, nur mit
   alten rohen Werten statt der zentralen Tokens hier). */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 9px 18px;
  background: var(--color-white);
  color: var(--color-dark);
  border: 1.5px solid #e2e2e0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tab-btn:hover {
  background: var(--color-light);
}
.tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Akkordeon / Auf-Zuklapp ──────────────────────────────────────────────
   Phase 6 UI/UX-Interaktionsstandard (21.08.2026, Entscheidung E1
   bestätigt): Pfeil-Symbol/Rotation exakt wie die zentrale Sidebar-
   Komponente (`header-menu.css` `.fs-nav-arrow`/`.fs-nav-section-hdr.open`)
   - Zeichen "▸", 90° im Uhrzeigersinn beim Öffnen. Der Pfeil sitzt IMMER
   links vom Titel/Label (Auftraggeber-Vorgabe), auch bei Tabellenzeilen-
   Toggles - dort reicht `.accordion-arrow` allein (in der ersten Spalte),
   `.accordion-item`/`.accordion-body` sind für eigenständige Klapp-Karten
   außerhalb von Tabellen gedacht (z.B. eine Liste aufklappbarer Abschnitte). */
.accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.accordion-arrow {
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
  display: inline-block;
  transition: transform .2s;
  transform: rotate(0deg);
}
.accordion-header.open .accordion-arrow {
  transform: rotate(90deg);
}
.accordion-body {
  display: none;
}
.accordion-body.open {
  display: block;
}

.accordion-item {
  border: 1px solid #e2e2e0;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-item .accordion-header {
  padding: 10px 14px;
}
.accordion-item .accordion-body {
  padding: 14px;
  border-top: 1px solid #e2e2e0;
}

/* ── Grid.js-Tabellenkopf ──────────────────────────────────────────────
   Das Vendor-Theme (gridjs-*.theme-mermaid.min.css) bringt einen hellen,
   unscheinbaren Kopf (#f9fafb/#6b7280) mit – hier auf denselben dunklen
   Stil wie normale Tabellen (siehe oben) angeglichen (Fund 31.07.2026,
   Auftraggeber-Feedback: Grid.js-Köpfe wirkten zu unauffällig gegenüber
   den übrigen, dunklen Tabellenköpfen im Bestand). Selektoren bewusst mit
   höherer Spezifität als das Vendor-Theme (nur .gridjs-th dort), damit die
   Überschreibung unabhängig von der Ladereihenfolge der beiden Stylesheets
   im jeweiligen <head> greift – keine !important nötig. */
.gridjs-container th.gridjs-th {
  background-color: var(--color-dark);
  color: white;
}
.gridjs-container th.gridjs-th-sort:focus,
.gridjs-container th.gridjs-th-sort:hover {
  background-color: #474a45; /* deckt sich mit dem dunklen Zeilen-Hover in components.css (.ic-bg-v-an) */
}
.gridjs-container button.gridjs-sort {
  filter: invert(1); /* Vendor-Icons sind dunkle SVGs, auf dunklem Grund sonst unsichtbar */
}
/* Zeigefinger-Cursor nur für Grid.js-Tabellen, die tatsächlich Zeilenklick zum Öffnen eines
   Detaileintrags haben (Container bekommt die Klasse .gridjs-row-clickable beim Binden, siehe
   bindGridRowClick()) - NICHT blanket auf jede Grid.js-Tabelle, sonst würden auch rein
   lesende/anders bediente Tabellen (z.B. SuSa-Kostenradar, Vertrieb-Mitarbeiterdaten) fälschlich
   klickbar wirken. */
.gridjs-row-clickable td.gridjs-td {
  cursor: pointer;
}

/* ── Grid.js-Pagination ───────────────────────────────────────────────
   Fund (Praxisoptimierung, 22.09.2026): der globale Button-Reset oben
   (button { color: var(--color-white); ... }) trifft ungefiltert auch die
   von Grid.js selbst gerenderten Pagination-<button>-Elemente. Das
   Vendor-Theme setzt für sie zwar eine eigene background-color, aber KEINE
   eigene color - eine geerbte Textfarbe (.gridjs-pagination{color:#3d4044})
   verliert dabei IMMER gegen eine direkt am Element greifende Deklaration,
   unabhängig von deren Spezifität. Ergebnis: nahezu weiße Schrift sowohl
   bei der aktiven Seite als auch bei den übrigen Seitenzahlen und Pfeilen
   auf weißem/hellgrauem Button-Hintergrund - appübergreifend, überall dort,
   wo keine lokale Pagination-Einfärbung existiert (z.B. Gehalt & Entwicklung,
   Backoffice, Fuhrpark, Management-Dashboards). Selektoren bewusst mit
   höherer Spezifität als das Vendor-Theme (Muster wie beim Grid.js-Tabellen-
   kopf oben, über den echten Grid.js-Wurzelselektor .gridjs), damit die
   Überschreibung unabhängig von der Ladereihenfolge der Stylesheets greift.
   Live geprüft (22.09.2026): dieselbe .gridjs-Präfix-Spezifität überschreibt
   damit AUCH die bisherigen, lokal je App gepflegten Pagination-Einfärbungen
   (Hub-Root, Ticketsystem, SuSa, Kompetenzmatrix - dort bislang orange statt
   dunkelgrau für die aktive Seite), da .gridjs .gridjs-pagination .gridjs-pages
   button.gridjs-currentPage (4 Klassen) höher spezifisch ist als deren
   .gridjs-pagination .gridjs-pages button.gridjs-currentPage (3 Klassen) -
   unabhängig von der Ladereihenfolge. Das ist hier bewusst gewollt: ein
   einziges, projektweit einheitliches Erscheinungsbild statt vier
   abweichender App-Lösungen. Die vier lokalen Regelblöcke selbst wurden
   NICHT entfernt (bleiben als nun wirkungsloser, toter Code stehen) - ein
   Aufräumen wäre ein eigener, hier nicht beauftragter Folgeschritt. */
.gridjs .gridjs-pagination .gridjs-pages button {
  color: var(--color-dark);
  border-color: var(--color-border, #d2d6dc);
}
.gridjs .gridjs-pagination .gridjs-pages button:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.gridjs .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.gridjs .gridjs-pagination .gridjs-pages button:disabled,
.gridjs .gridjs-pagination .gridjs-pages button[disabled] {
  background-color: var(--color-white);
  color: var(--color-text-muted, #6b7280);
  border-color: var(--color-border, #d2d6dc);
}

/* ── Modal / Dialog ────────────────────────────────────────────────────
   Bislang app-lokal ca. 10x nahezu wortgleich dupliziert (siehe UI/UX-
   Interaktionsstandard-Analyse, Anforderungsbeschreibungen/Analyse_UI-
   Interaktionsstandard.txt, 21.08.2026) - jetzt hier zentral. Lokale
   App-Definitionen laden nach components.css und überschreiben diese
   Basis weiterhin dort, wo sie (noch) vorhanden sind - rein additiv, kein
   Bestandsverhalten ändert sich automatisch. Für neue Dialoge (u.a. den
   zentralen Bestätigungs-Dialog, siehe confirm-dialog.js) reicht dieses
   Grundgerüst ohne App-lokale Ergänzung. */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
}
.modal h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #777;
  line-height: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ── Formularfelder ────────────────────────────────────────────────────
   Feldbeschriftung und Feldinhalt. .form-row gruppiert mehrere Felder
   nebeneinander (Grid), .form-field ist ein einzelner Label+Input-Block. */
label {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-dark);
  display: block;
  margin-bottom: 4px;
}

input,
select,
textarea {
  padding: 6px 10px;
  border: 1px solid #e2e2e0;
  border-radius: var(--radius-sm);
  font-size: inherit;
  font-family: inherit;
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.15);
}

textarea {
  resize: vertical;
  min-height: 52px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-row--1 { grid-template-columns: 1fr; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Badges ────────────────────────────────────────────────────────────
   Einheitliches Vokabular: -ok/-warn/-danger/-info. App-spezifische
   Zusatzzustände (z.B. Liquiditätsvorschau: geblockt, Wertpapier) werden
   als eigene Modifier-Klasse ergänzt, nicht als neues Grundvokabular. */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-ok      { background: var(--color-ok-bg);     color: var(--color-ok); }
.badge-warn    { background: var(--color-warn-bg);   color: var(--color-warn); }
.badge-danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);   color: var(--color-info); }
/* Neutraler (grauer) Badge – u.a. für ausgeschiedene Mitarbeiter. */
.badge-neutral { background: var(--color-light);     color: var(--color-dark); }

/* Mitarbeiter-Status – einheitliche Kennzeichnung gekündigter / ausgeschiedener /
   noch nicht eingetretener Mitarbeiter (zentrale Statuslogik, siehe
   Anforderungsbeschreibungen/Analyse_Mitarbeiterstatus_Anzeige.txt Abschnitt 9).
   Badge-Klassen liefert maStatusBadge() (shared/mitarbeiter_status.php):
     gekündigt      -> .badge.badge-warn     ("gekündigt zum TT.MM.JJJJ")
     ausgeschieden  -> .badge.badge-neutral  ("ausgeschieden am TT.MM.JJJJ")
     Eintritt künftig-> .badge.badge-info    ("Eintritt ab TT.MM.JJJJ")
   Zeile eines ausgeschiedenen Mitarbeiters dezent abblenden (bisher nur lokal
   als .row-ausgeschieden in management/deckungsbeitrag): */
tr.row-ausgeschieden td { opacity: .55; }

/* ── Alerts / Hinweisboxen ─────────────────────────────────────────────
   Bereits vor Phase 1 identisch in allen vier management-Modulen –
   unverändert übernommen. */
.alert {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13px;
}

.alert-ok     { background: var(--color-ok-bg);     color: var(--color-ok); }
.alert-warn   { background: var(--color-warn-bg);   color: var(--color-warn); }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-info   { background: var(--color-info-bg);   color: var(--color-info); }

/* Kompaktere Variante (seit Backoffice-Dokumentenerstellung Phase 4.3, 23.09.2026) - fuer einen
   dauerhaft sichtbaren, aber bewusst nicht dominanten Hinweis (z.B. "wird zentral verwaltet"),
   der neben der eigentlichen Seite nicht mehr Gewicht haben soll als noetig. Gleiches Prinzip wie
   .stat-card--kompakt (Phase 4.1): rein additiver Modifier, .alert selbst bleibt unveraendert. */
.alert-compact {
  padding: 5px 12px;
  font-size: 11.5px;
  margin-bottom: 10px;
}