/* Regeln, die nur die Vz-Bausteine dieser Bibliothek brauchen (18.10.2026 aus MsBackend/wwwroot/app.css hierher gezogen).
   Wird direkt nach app.css geladen, damit die Kaskade bleibt: in der App über layered.css (Schicht app) und über den
   <link> in Components/App.razor. Das Farbset (--vz-*) und die App-Klassen bleiben in app.css. */

/* VzTable: Spaltenbreite ziehen (Eugen 15.10.2026, velzon-table.js). Griff am rechten Rand jedes Spaltenkopfs; nach dem ersten Ziehen
   feste Breiten, Zellen kürzen mit Auslassungspunkten. */
.vz-table thead th { position: relative; }
/* Velzon setzt den Sortierpfeil absolut an den rechten Rand, ohne Platz zu reservieren; bei schmalen Spalten lag er auf dem Text (Eugen 16.10.2026, Erkennungen, Schwachstellen, ZTA). Rechts Platz für Pfeil und Abstand. */
.vz-table thead th.sort { padding-right: 1.75rem; }
/* Zeilenmenü in der ersten Spalte rechts, genau unter den Sortierpfeilen (Eugen 16.10.2026); Text davor endet mit „…“ statt unter die Punkte zu laufen */
.vz-table td.vz-has-menu { position: relative; padding-right: 2rem; }
.vz-table td.vz-has-menu .vz-cell-text { overflow: hidden; text-overflow: ellipsis; }
.vz-table td.vz-has-menu .vz-row-menu { position: absolute; top: 0; bottom: 0; right: calc(.5rem - 2px); display: flex; align-items: center; gap: .25rem; }
.vz-table td.vz-has-menu.vz-has-open { padding-right: 3.25rem; }
.vz-table td.vz-has-menu .vz-row-menu .btn { padding: 0 .125rem; line-height: 1; }
/* Häkchenspalte wie Views/Ecommerce/Customers.cshtml (dort style="width: 50px", hier ohne Inline-Style) */
.vz-table th.vz-check-col { width: 50px; }
.vz-table.vz-fixed td.vz-has-menu { overflow: visible; }
.vz-table td.vz-has-menu .vz-row-menu:has(.dropdown-menu.show) { z-index: 1000; }
.vz-table .vz-resizer { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.vz-table .vz-resizer::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 1px; background: var(--vz-border-color); }
.vz-table thead th:hover .vz-resizer::after, .vz-resizing .vz-resizer::after { background: var(--vz-primary); width: 2px; }
.vz-table.vz-fixed th, .vz-table.vz-fixed td { overflow: hidden; text-overflow: ellipsis; }
.vz-table.vz-fixed td:has(.dropdown) { overflow: visible; }
.vz-table.vz-fixed th:has(.dropdown) { overflow: visible; }
body.vz-resizing { cursor: col-resize; user-select: none; }

/* VzTable: Seitengröße und Spaltenfilter, eigene Ergänzung ohne Velzon-Vorbild (Eugen 18.10.2026, W-de94b8 ui_table_filter_pagesize).
   Platz für das Filtersymbol links von den Sortierpfeilen (Views/Tables/ListJs.cshtml setzt diese bei right:.5rem); ist die Spalte auch
   sortierbar, braucht der Kopf Platz für beide Symbole, sonst liegen sie übereinander (Eugen 18.10.2026, Lücke aus der ersten Fassung
   geschlossen). Das zählt auch in die Mindestbreite der Spalte (velzon-table.js, headWidth liest die Innenabstände aus). */
.vz-table thead th.vz-filterable { padding-right: 2.5rem; }
.vz-table thead th.sort.vz-filterable { padding-right: 4rem; }
.vz-table .vz-th-filter { position: absolute; top: 0; bottom: 0; right: .5rem; display: flex; align-items: center; }
.vz-table thead th.sort .vz-th-filter { right: 1.75rem; }
/* Auswahlfeld „Zeilen je Seite“ in der Blätterleiste soll nicht die ganze Zeilenbreite einnehmen (Bootstrap form-select ist sonst 100 % breit). */
.vz-page-size-select { width: auto; min-width: 4.5rem; flex: 0 0 auto; }

/* VzTable: Blätterleiste klein wie btn-sm (Eugen 16.10.2026, alle Vz-Knöpfe klein). Velzon hat für listjs-pagination keine kleine Form, Werte aus .btn-sm in bootstrap.min.css. */
.pagination-wrap-sm .pagination-prev, .pagination-wrap-sm .pagination-next, .pagination-wrap-sm .listjs-pagination li .page { padding: .25rem .5rem; font-size: .7109375rem; border-radius: var(--vz-border-radius-sm); }
.pagination-wrap-sm .listjs-pagination { gap: 4px; }

/* VzAlert mit vollem Farbgrund (Label Icon Alerts, Eugen 16.10.2026): Links im Text in Textfarbe statt Linkblau, sonst blau auf blau bzw. gelb. */
.alert.text-white a:not(.btn), .alert.text-dark a:not(.btn) { color: inherit; }

/* Vz-Slider (VzSidePanel): 40 % der Fensterbreite, zentral für alle Slider (Eugen 19.10.2026) */
.offcanvas.vz-side-panel { --vz-offcanvas-width: 45vw; }
@media (max-width: 991.98px) { .offcanvas.vz-side-panel { --vz-offcanvas-width: 100vw; } }
.vz-side-panel .min-w-0 { min-width: 0; }
.offcanvas.vz-side-panel-wide { --vz-offcanvas-width: 75vw; }
@media (max-width: 991.98px) { .offcanvas.vz-side-panel-wide { --vz-offcanvas-width: 100vw; } }
.vz-side-panel .min-h-0 { min-height: 0; }
/* Velzon setzt z-index 2 auf den Kreis der Zeitleiste, aber ohne Position wirkt er nicht: die gestrichelte Linie lag über dem Kreis (Eugen 20.10.2026) */
.acitivity-timeline .acitivity-item .flex-shrink-0 { position: relative; }
/* Gleiches bei „Progress Nav Steps“: die Linie (.progress, absolut) lag über den runden Schrittknöpfen, weil die Knopfreihe keine Position hat (Eugen 20.10.2026) */
.progress-nav .nav { position: relative; }

/* Vz-Toast „Bordered“: Velzon setzt feste Farben, wir nehmen das Farbset (Eugen 17.10.2026) */
.toast-border-primary .toast-body { color: var(--vz-primary); border-bottom-color: var(--vz-primary); }
.toast-border-secondary .toast-body { color: var(--vz-secondary); border-bottom-color: var(--vz-secondary); }
.toast-border-success .toast-body { color: var(--vz-success); border-bottom-color: var(--vz-success); }
.toast-border-info .toast-body { color: var(--vz-info); border-bottom-color: var(--vz-info); }
.toast-border-warning .toast-body { color: var(--vz-warning-text-emphasis); border-bottom-color: var(--vz-warning); }
.toast-border-danger .toast-body { color: var(--vz-danger); border-bottom-color: var(--vz-danger); }
.toast-border-dark .toast-body { color: var(--vz-dark); border-bottom-color: var(--vz-dark); }

/* VzDropdown mit End (Eugen Rieker, 17.10.2026): ohne Popper richtet nur diese Regel das Menü am rechten Rand des Auslösers aus, sonst läuft es rechts aus dem Fenster.
   Die Hülle der App braucht sie ebenfalls (Kopfmenüs, Glocke); sie kommt aus dieser Datei (18.10.2026, Q-d13e0f). */
.dropdown > .dropdown-menu.dropdown-menu-end { right: 0; left: auto; }

/* Klickbare Fläche (Zeilen, Karten) */
.cursor-pointer { cursor: pointer; }

/* VzTaskStat als Filter: Kontur statt Rand, damit die Kachel so groß bleibt wie die Link-Kachel (Eugen 17.10.2026) */
.card-filter { cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; }
.card-filter-active { outline-color: var(--vz-primary); }

/* VzSchedule: Das Eingabefeld von flatpickr bleibt unsichtbar wie in Velzon (Dashboard/Projects.cshtml), sonst liegt der Kopf mit Monat und Jahr über dem Feld. */
.upcoming-scheduled > input.flatpickr-input { display: none; }

/* VzDropdown in Tabellen (Eugen 19.10.2026): das Menü liegt von Anfang an außerhalb des Tabellenflusses (fixed ohne Koordinaten = an der Stelle unter dem Auslöser),
   velzon-dropdown.js richtet es danach am Fenster aus. Ein absolutes Menü vergrößerte beim Öffnen den scrollbaren Bereich, die Kartenbreite sprang
   (Scrollbalken) und velzon-table.js verteilte die Spaltenbreiten neu. */
.table-responsive .dropdown > .dropdown-menu, .table-responsive .dropdown > .dropdown-menu.dropdown-menu-end { position: fixed; inset: auto; margin: 0; }

/* VzCopy: Kopiersymbol hinter einem Wert, so flach wie das Zeilenmenü, damit die Tabellenzeile nicht wächst (19.10.2026) */
.vz-copy { padding: 0 .25rem; line-height: 1; }

/* Kennzahlenkacheln gleich hoch (Eugen 21.10.2026): h-100 plus der untere Kartenabstand (1.5rem) würde über die Spalte hinausragen; die Höhe zieht den Abstand ab. */
.card.card-animate.h-100 { height: calc(100% - 1.5rem) !important; }

/* Kachelreihe mit festem Platz für zwei Zeilen Beschriftung und Hinweis (Eugen 21.10.2026): Zahlen stehen auf einer Linie, auch wenn ein Text umbricht. */
.vz-stat-row .card-body p.fw-medium, .vz-stat-row .card-body p.mb-0.text-muted { min-height: 3em; }

/* Karte füllt die Höhe ihrer Spalte, abzüglich des Karten-Außenabstands, damit Karten einer Reihe bündig enden */
.card-stretch { height: calc(100% - 1.5rem); }

/* VzSchedule: heutiger und gewählter Tag in der App-Farbe statt im Türkis des Templates; heute ist umrandet, der gewählte Tag gefüllt */
.upcoming-scheduled .flatpickr-calendar .flatpickr-day.today { color: var(--vz-body-color) !important; background-color: transparent !important; border-color: var(--vz-primary) !important; }
.upcoming-scheduled .flatpickr-calendar .flatpickr-day.today:hover { color: var(--vz-body-color) !important; background-color: var(--vz-light) !important; }
.upcoming-scheduled .flatpickr-calendar .flatpickr-day.selected, .upcoming-scheduled .flatpickr-calendar .flatpickr-day.selected.today { color: #fff !important; background-color: var(--vz-primary) !important; border-color: var(--vz-primary) !important; }