#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    font-size: var(--rz-root-font-size);
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

.rz-form-field-label {
    margin-top: -3px;
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ═══════════════════════════════════════════════════════════════════
 * RESPONSIVE — iPad/Tablet-Optimierung (Sprint Fix #63)
 * Bricht ein bei: 991px (iPad-Tablet-Querformat),
 * komplett mobil: 767px (iPhone, iPad-Portrait minus etwas)
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Touch-Targets vergrößern (Apple HIG: min 44x44px) ── */
@media (max-width: 991px) {
    /* Buttons in normaler Größe leicht vergrößern */
    .rz-button:not(.rz-button-sm):not(.rz-button-xs) {
        min-height: 44px;
        min-width: 44px;
    }

    /* DataGrid Action-Icons leichter tappbar */
    .rz-grid-table .rz-button.rz-button-sm,
    .rz-grid-table .rz-button.rz-button-xs {
        min-width: 36px;
        min-height: 36px;
        padding: 0.4rem;
    }

    /* Form-Field-Inputs: bequemer tappbar */
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric input,
    .rz-datepicker input {
        min-height: 40px;
    }

    /* Checkbox/Radio: mehr Klickfläche */
    .rz-chkbox-box,
    .rz-radiobutton-box {
        width: 22px;
        height: 22px;
    }
}

/* ── Body Container: max-width auf Tablet aufheben ── */
@media (max-width: 1199px) {
    .rz-body .rz-row[style*="max-width: 1440px"] {
        max-width: 100% !important;
    }
}

/* ── Tablet Querformat (≤991px): Sidebar nimmt mehr Raum ── */
@media (max-width: 991px) {
    /* Sidebar-Schrift etwas kleiner damit mehr passt */
    .rz-panel-menu .rz-navigation-item-text {
        font-size: 0.875rem;
    }

    /* Body-Padding reduzieren — mehr Platz für Inhalt */
    .rz-body .rz-row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* DataGrids: Compact Mode automatisch */
    .rz-grid-table {
        font-size: 0.85rem;
    }

    .rz-grid-table th,
    .rz-grid-table td {
        padding: 0.4rem 0.5rem !important;
    }
}

/* ── Mobile (<768px): Sidebar als Overlay statt fix ── */
@media (max-width: 767px) {
    /* Sidebar wird zur Slide-In-Schublade */
    .rz-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        z-index: 999 !important;
        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    }

    /* Backdrop hinter der Slide-In-Sidebar — abdunkeln + Klick-zu-schließen
       wird via clickable Body-Bereich gelöst (siehe MainLayout) */
    .rz-sidebar.rz-sidebar-expanded::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
        pointer-events: none; /* damit der eigentliche Content unter Backdrop nicht blockiert ist */
    }

    /* Body voll breit, ohne Sidebar-Reservierung */
    .rz-layout {
        grid-template-columns: 0 1fr !important;
        grid-template-areas:
            'rz-header rz-header'
            'rz-body rz-body' !important;
    }

    /* Body-Padding noch kleiner auf Phone */
    .rz-body .rz-row {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    /* Header: weniger Padding, Logo-Bereich verstecken */
    .rz-header {
        padding: 0.25rem 0.5rem !important;
    }

    /* Modal-Dialoge: 95% statt fix px */
    .rz-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    /* DataGrid noch kompakter, Schrift kleiner */
    .rz-grid-table {
        font-size: 0.8rem;
    }

    .rz-grid-table th,
    .rz-grid-table td {
        padding: 0.3rem 0.4rem !important;
    }

    /* RadzenStack mit Horizontal-Direction: bricht um auf Mobile */
    .rz-stack-orientation-horizontal {
        flex-wrap: wrap !important;
    }
}

/* ── Modal-Dialoge auf Tablet: 90% statt fest ── */
@media (max-width: 991px) {
    .rz-dialog {
        max-width: 90vw !important;
    }
}

/* ── Headers/Sections kompakter auf Tablet ── */
@media (max-width: 991px) {
    /* Reduzierte Top-Padding bei Body-Container */
    .rz-pt-md-4,
    .rz-pt-lg-6,
    .rz-pt-xl-12 {
        padding-top: 0.75rem !important;
    }

    /* Cards mit weniger Padding */
    .rz-card {
        padding: 0.75rem !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════
 * DATAGRID CARD-LAYOUT (Sprint Fix #64)
 * ─────────────────────────────────────────────────────────────────
 * Tabellen werden zu Card-Stapeln transformiert wenn body.view-cards
 * gesetzt ist (durch viewmode-helper.js). Greift auf ALLE DataGrids
 * automatisch — keine Razor-Änderungen nötig.
 *
 * Body-Klassen (gesetzt durch viewmode-helper.js):
 *   - body.view-cards : Card-Modus aktiv (User-Wahl ODER auto+kleinerer Viewport)
 *   - body.view-table : Tabellen-Modus aktiv
 * ═══════════════════════════════════════════════════════════════════ */

body.view-cards .rz-data-grid .rz-grid-table,
body.view-cards .rz-data-grid .rz-grid-table tbody,
body.view-cards .rz-data-grid .rz-grid-table tr,
body.view-cards .rz-data-grid .rz-grid-table td {
    display: block !important;
}

/* Container-Hintergrund weiß damit kein grauer Halo um die Cards entsteht */
body.view-cards .rz-data-grid,
body.view-cards .rz-data-grid .rz-data-grid-data,
body.view-cards .rz-data-grid .rz-grid-table,
body.view-cards .rz-data-grid .rz-grid-table tbody {
    background: #fff !important;
}

/* Header-Zeile + Filter-Zeile + Spalten-Resize-Handles verstecken */
body.view-cards .rz-data-grid .rz-grid-table thead,
body.view-cards .rz-data-grid .rz-grid-table .rz-column-resizer,
body.view-cards .rz-data-grid .rz-grid-table .rz-cell-filter {
    display: none !important;
}

/* Jede Zeile = eine Card */
body.view-cards .rz-data-grid .rz-grid-table tr,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row-alt,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row-striped,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-default {
    margin-bottom: 0.5rem !important;
    border: 1px solid var(--rz-base-400, #d1d5db) !important;
    border-radius: 0 !important;
    padding: 0.875rem 1rem !important;
    box-shadow: none !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative;
}

/* Alternierende Zebrastreifen — komplett einheitlich gefärbt */
body.view-cards .rz-data-grid .rz-grid-table tbody tr:nth-of-type(odd) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.view-cards .rz-data-grid .rz-grid-table tbody tr:nth-of-type(even) {
    background: #f6f7fa !important;
    background-color: #f6f7fa !important;
}

/* Hover-Feedback (für Klick-Affordanz) — Border in CRM-Grün, dezenter Schatten */
body.view-cards .rz-data-grid .rz-grid-table tr:hover {
    border-color: var(--rz-primary, #4A7C59) !important;
    box-shadow: 0 0 0 1px var(--rz-primary, #4A7C59) inset !important;
}

/* ──────────────────────────────────────────────────────────────────
   AKTIVER/FOKUSSIERTER/SELECTED-STATE im Card-Modus
   Brute-Force-Override: Radzen kann hier viele Klassen setzen.
   Wir überschreiben sie alle mit einem dezenten hellen Grau.
   ────────────────────────────────────────────────────────────────── */
body.view-cards .rz-data-grid .rz-grid-table tr:active,
body.view-cards .rz-data-grid .rz-grid-table tr:focus,
body.view-cards .rz-data-grid .rz-grid-table tr:focus-within,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-focused,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-highlight,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-active,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-hover,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-selected,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row-selected,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-row-selected,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-selected,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-selectable.rz-state-focused,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-selectable:focus,
body.view-cards .rz-data-grid .rz-grid-table tr[aria-selected="true"] {
    background: #ededed !important;
    background-color: #ededed !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Auch alle Kinder-Elemente: keinen eigenen dunklen Background, kein weißer Text */
body.view-cards .rz-data-grid .rz-grid-table tr:active *,
body.view-cards .rz-data-grid .rz-grid-table tr:focus *,
body.view-cards .rz-data-grid .rz-grid-table tr:focus-within *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-focused *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-highlight *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-active *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-state-selected *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row-selected *,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-selected *,
body.view-cards .rz-data-grid .rz-grid-table tr[aria-selected="true"] * {
    background-color: transparent !important;
    color: inherit !important;
}

/* Zellen werden zu Label-Wert-Paaren */
body.view-cards .rz-data-grid .rz-grid-table td {
    padding: 0.25rem 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    position: relative;
    padding-left: 40% !important;
}

/* Label vor jeder Zelle: nutzt das Title-Attribut der Spalte
   (gesetzt durch viewmode-helper.js MutationObserver) */
body.view-cards .rz-data-grid .rz-grid-table td::before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    width: 35%;
    padding-right: 0.5rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Volle Beschriftung anzeigen, niemals abschneiden — bei langen Spaltennamen
       lieber umbrechen. Das vermeidet "Mo./Di./Mi." aus "Monat/Direkt/Mitarbeiter" */
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
}

/* Zellen ohne Title (z.B. Action-Icons) brauchen kein Label */
body.view-cards .rz-data-grid .rz-grid-table td:empty,
body.view-cards .rz-data-grid .rz-grid-table td[data-title=""] {
    display: none !important;
}

/* Action-Buttons (Delete-Icon etc.) im Card-Modus verstecken —
   die Funktionalität wird über Swipe-to-Delete (swipe-helper.js) abgebildet.
   Der Original-Button bleibt im DOM (für die Click-Logik), wird nur visuell
   ausgeblendet. */
body.view-cards .rz-data-grid .rz-grid-table td:has(.rz-button-md):has(.rz-icon),
body.view-cards .rz-data-grid .rz-grid-table td:has(.rz-button-sm):has(.rz-icon) {
    display: none !important;
}

/* Pagination + Footer bleiben sichtbar — sind außerhalb der tbody */
body.view-cards .rz-pager {
    /* Pager bleibt wie er ist */
}

/* Empty-State (keine Einträge) */
body.view-cards .rz-data-grid .rz-grid-empty-text {
    text-align: center !important;
    padding: 2rem !important;
}

/* ── Card-Modus auf Tablet erzwingen wenn Viewport <992px (auch wenn User
      nichts gesetzt hat — der JS-Helper macht's, hier ist nur Fallback) ── */
@media (max-width: 991px) {
    /* Falls JS noch nicht initialisiert hat: standardmäßig Card-Layout */
    body:not(.view-table) .rz-data-grid .rz-grid-table thead {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * SPALTEN-FILTER bei schmalen Viewports ausblenden
 * ─────────────────────────────────────────────────────────────────
 * Wenn der User im Tablet-Tabellen-Modus die Filter-Inputs sieht,
 * überschneiden sich diese bei schmalen Spalten. Lösung: bei <992px
 * im Tabellen-Modus die Filter-Zeile (zweite thead-Reihe) ausblenden.
 * Volltextsuche oberhalb des Grids reicht dann.
 *
 * Im Card-Modus sind sie sowieso schon weg (komplettes thead hidden).
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    body.view-table .rz-data-grid .rz-grid-table thead tr:nth-child(2),
    body.view-table .rz-data-grid .rz-grid-table thead .rz-cell-filter,
    body.view-table .rz-data-grid .rz-grid-table .rz-grid-filter-row {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * GROUP-HEADER im Card-Modus als Sektion-Trenner statt Card
 * ─────────────────────────────────────────────────────────────────
 * Wenn DataGrid-Gruppierung aktiv ist (z.B. Verkaufsanzeige), wird
 * der Group-Header im Tabellenmodus als spezielle <tr> gerendert.
 * Im Card-Modus stylen wir ihn nicht als Card, sondern als
 * Sektion-Überschrift mit Hintergrundfarbe + Trennlinie.
 *
 * Defensive Selektoren: Radzen-Konvention variiert je Version.
 * ═══════════════════════════════════════════════════════════════════ */
body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-row,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-row,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grouped-row,
body.view-cards .rz-data-grid .rz-grid-table tr[data-group],
body.view-cards .rz-data-grid .rz-grid-table tr.rz-data-row-group {
    /* Group-Header: kein Card-Styling, sondern Section-Header */
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
    border: none !important;
    border-bottom: 2px solid var(--rz-primary, #4A7C59) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.75rem !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
    color: var(--rz-primary, #4A7C59) !important;
}

/* Erste Group-Header oben: kein Margin-Top (sieht sonst lose aus) */
body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-row:first-child,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-row:first-child,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grouped-row:first-child,
body.view-cards .rz-data-grid .rz-grid-table tr[data-group]:first-child {
    margin-top: 0 !important;
}

/* Group-Zellen: kein Label-Prefix, ganze Breite ausnutzen */
body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-row td,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-row td,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grouped-row td,
body.view-cards .rz-data-grid .rz-grid-table tr[data-group] td {
    padding-left: 0 !important;
    display: inline-block !important;
    width: auto !important;
}

body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-row td::before,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-row td::before,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grouped-row td::before,
body.view-cards .rz-data-grid .rz-grid-table tr[data-group] td::before {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * SWIPE-TO-DELETE im Card-Modus (Sprint Fix #65)
 * ─────────────────────────────────────────────────────────────────
 * iOS-Mail-Style: Card nach links wischen → Lösch-Bereich erscheint.
 * Funktioniert nur bei Cards die einen Lösch-Button enthalten
 * (siehe swipe-helper.js).
 *
 * Farbe wird aus Radzen ButtonStyle.Danger übernommen → matcht das
 * "Look and Feel" der bestehenden Lösch-Buttons.
 * ═══════════════════════════════════════════════════════════════════ */

/* Roter Reveal-Hintergrund hinter der Card (sichtbar beim Wischen) */
body.view-cards .rz-data-grid .rz-grid-table tr {
    /* Position relative haben wir schon — der Hintergrund kommt via ::after */
    will-change: transform;
    touch-action: pan-y;  /* Vertikales Scrollen erlauben, horizontal von uns gesteuert */
}

/* Roter Reveal-Bereich rechts hinter der Card.
   - Initial unsichtbar (opacity 0 + width 0)
   - Bei .swipe-open: width 80px, opacity 1, zeigt rote Fläche mit Mülltonne
   - Container für Reveal ist die <tr> selbst (position relative)
   - Wir nutzen ::after weil ::before bei <td> für Labels reserviert ist
*/
body.view-cards .rz-data-grid .rz-grid-table tr::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;          /* Initial null Breite — kein Platz */
    height: 100%;
    background: var(--rz-danger, #dc3545);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    transition: width 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    z-index: -1;
}

/* Geöffnet: roter Bereich kommt aus dem Nichts */
body.view-cards .rz-data-grid .rz-grid-table tr.swipe-open::after {
    width: 80px;
    opacity: 1;
    right: -80px;       /* Der Bereich liegt RECHTS der Card.
                           Die Card selbst wird per JS um -80px nach links verschoben,
                           dadurch überlappt nichts und der rote Bereich wird sichtbar. */
    pointer-events: auto;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
 * BUTTON-BARS NICHT ABSCHNEIDEN (Sprint Fix #66)
 * ─────────────────────────────────────────────────────────────────
 * Auf Tablet werden Button-Reihen mit vielen Buttons (z.B. Edit-Dialog
 * Action-Bar mit Löschen/Antworten/Weiterleiten/Speichern) gequetscht
 * statt umgebrochen. Lösung: flex-wrap + minimale min-width für Buttons.
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* ── Action-Bar: strukturierte Button-Reihen statt Flex-Chaos ──
       Tablet (768-991px): Buttons in 3-4 pro Zeile, alle gleich breit
       Mobile (<768px):    2 pro Zeile, Speichern/Abbrechen in eigener Reihe
    */
    .action-bar {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
    }

    /* Buttons in der action-bar: volle Spaltenbreite, nicht quetschen */
    .action-bar .rz-button {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    /* Button-Text in der action-bar: nicht mehr abschneiden, sondern umbrechen wenn nötig */
    .action-bar .rz-button .rz-button-text {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
    }
}

@media (max-width: 767px) {
    /* Mobile: 2 Buttons pro Zeile */
    .action-bar {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Lösch-Button (erstes Element mit margin-right:auto) bekommt volle Breite oben */
    .action-bar > .rz-button:first-child[style*="margin-right"] {
        grid-column: 1 / -1 !important;
    }

    /* Allgemein: Buttons mit Danger-Style (rote Hintergrund) bekommen auch volle Breite */
    .action-bar > .rz-button.rz-danger {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 991px) {
    /* RadzenStack horizontal mit vielen Children: umbrechen erlauben.
       Radzen rendert je nach Version verschiedene Klassen — alle abdecken. */
    .rz-stack-orientation-horizontal,
    .rz-stack-row,
    .rz-stack[class*="horizontal"],
    [class*="rz-stack"][class*="horizontal"],
    [class*="rz-stack"][class*="row"] {
        flex-wrap: wrap !important;
    }

    /* Fallback per Inline-Style: jeder div mit display:flex + flex-direction:row
       und mehr als 3 Button-Children sollte umbrechen können. */
    div[style*="flex-direction: row"]:not(.action-bar),
    div[style*="flex-direction:row"]:not(.action-bar) {
        flex-wrap: wrap !important;
    }

    /* Buttons (außerhalb der action-bar): nicht unter sinnvolle Mindestbreite quetschen */
    .rz-button:not(.action-bar .rz-button) {
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    .rz-button:not(.action-bar .rz-button) .rz-button-text {
        overflow: visible !important;
        text-overflow: unset !important;
    }
}

/* Leere Zellen ausblenden (vom JS mit data-empty getaggt — fängt &nbsp;, "—", whitespace ab) */
body.view-cards .rz-data-grid .rz-grid-table td[data-empty="true"] {
    display: none !important;
}

/* Komplett leere Zeilen (Aggregation, Footer-Rows ohne Inhalt) verstecken */
body.view-cards .rz-data-grid .rz-grid-table tr[data-row-empty="true"],
body.view-cards .rz-data-grid .rz-grid-table tr:not(:has(td:not(:empty))) {
    display: none !important;
}

/* Footer-/Gruppen-Summen-Zeilen erkennen wir an .rz-column-footer-Span im td.
   Eigene leicht andere Farbe damit sie sich vom Daten-Zebra abhebt. */
/* Footer-/Gruppen-Summen-Zeilen: Zebra-Pattern wie alle anderen Cards.
   Gleicher Stil wie normale Datenzeilen, nur mit fettem Text. */
body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-footer,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-footer,
body.view-cards .rz-data-grid .rz-grid-table tfoot tr,
body.view-cards .rz-data-grid .rz-grid-table tbody tr:has(.rz-column-footer) {
    border: 1px solid var(--rz-base-400, #d1d5db) !important;
    font-weight: 600 !important;
}

/* Footer-Card im Zebra: gerade Zeile = #f6f7fa, ungerade = weiß */
body.view-cards .rz-data-grid .rz-grid-table tbody tr:has(.rz-column-footer):nth-of-type(odd) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.view-cards .rz-data-grid .rz-grid-table tbody tr:has(.rz-column-footer):nth-of-type(even) {
    background: #f6f7fa !important;
    background-color: #f6f7fa !important;
}

/* Footer-Zellen sollen ihr Label trotzdem haben (Σ Summe etc.) */
body.view-cards .rz-data-grid .rz-grid-table tr.rz-group-footer td::before,
body.view-cards .rz-data-grid .rz-grid-table tr.rz-grid-group-footer td::before,
body.view-cards .rz-data-grid .rz-grid-table tfoot tr td::before,
body.view-cards .rz-data-grid .rz-grid-table tr:has(.rz-column-footer) td::before {
    color: var(--rz-text-secondary-color, #6b7280) !important;
}

/* Kontext-Info im Group-Footer nur im Card-Modus sichtbar machen
   (im Tabellen-Modus würde sie über mehrere Spalten überlappen) */
body.view-cards .card-only-context {
    display: inline-block !important;
    margin-bottom: 0.4rem;
}

/* Footer-Spans (innen in den Footer-Cards): selbst keinen Hintergrund haben,
   damit die Card-Background sauber durchkommt — sonst entsteht ein Halo-Effekt */
body.view-cards .rz-data-grid .rz-grid-table .rz-column-footer {
    background: transparent !important;
    background-color: transparent !important;
}

/* ── Maximize-Dialog: Chart-Schrift groesser (ca. +6px) ──
   Betrifft nur die SVG-Charts im Chart-Dialog (Achsen, Legende, Datenlabels).
   HTML-Listen im Dialog sind davon nicht betroffen. */
/* ── Maximize-Dialog: Schrift groesser ──
   Gilt fuer alles im Chart-Dialog (Container traegt die Klasse chart-dialog-content).
   Charts sind SVG, Listen (Vertreter/PLZ/Laender/Top-Artikel) sind HTML mit inline
   font-size — letztere muessen per !important + Attribut-Selektor ueberschrieben werden,
   da Inline-Styles sonst gewinnen. */

/* SVG-Charts: Achsen, Datenlabels, Legende */
.chart-dialog-content .rz-chart text {
    font-size: 18px !important;
}
.chart-dialog-content .rz-chart .rz-legend-item-text {
    font-size: 19px !important;
}
.chart-dialog-content .rz-legend-item {
    margin-bottom: 6px !important;
}

/* HTML-Listen: kleine Inline-Groessen hochskalieren (Wert/VJ/Delta/Rang/Name).
   Selektoren greifen ueber die exakten Inline-Werte, die im Markup verwendet werden. */
.chart-dialog-content [style*="font-size:9px"]   { font-size: 14px !important; }
.chart-dialog-content [style*="font-size: 9px"]  { font-size: 14px !important; }
.chart-dialog-content [style*="font-size:10px"]  { font-size: 15px !important; }
.chart-dialog-content [style*="font-size: 10px"] { font-size: 15px !important; }
.chart-dialog-content [style*="font-size:11px"]  { font-size: 16px !important; }
.chart-dialog-content [style*="font-size: 11px"] { font-size: 16px !important; }
.chart-dialog-content [style*="font-size:12px"]  { font-size: 17px !important; }
.chart-dialog-content [style*="font-size: 12px"] { font-size: 17px !important; }
.chart-dialog-content [style*="font-size:13px"]  { font-size: 18px !important; }
.chart-dialog-content [style*="font-size: 13px"] { font-size: 18px !important; }
.chart-dialog-content [style*="font-size:14px"]  { font-size: 19px !important; }
.chart-dialog-content [style*="font-size: 14px"] { font-size: 19px !important; }
.chart-dialog-content [style*="font-size:16px"]  { font-size: 21px !important; }
.chart-dialog-content [style*="font-size: 16px"] { font-size: 21px !important; }

/* Laender-Flaggen etwas groesser (Standard 20x15) */
.chart-dialog-content img[alt][src*="flagcdn"] {
    width: 28px !important;
    height: 21px !important;
}

/* Leaflet-Karte im Dialog: Legende + Info-Box (Hover) groesser lesbar */
.chart-dialog-content .leaflet-container .leaflet-control {
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.chart-dialog-content .leaflet-container .leaflet-control i {
    width: 18px !important;
    height: 18px !important;
}

/* ── Persönliche Kacheln der Startseite (SQL 049) ── */
.kachel-kopf { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.kachel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.75rem; }
.kachel-card { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--rz-base-background-color, #fff);
               border:1px solid var(--rz-border-color, #e0e0e0); border-radius:var(--rz-border-radius, 4px); transition:box-shadow .2s, transform .2s; }
.kachel-klickbar { cursor:pointer; }
.kachel-klickbar:hover { box-shadow:0 2px 10px rgba(0,0,0,0.10); transform:translateY(-1px); }
.kachel-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0;
               border-radius:var(--rz-border-radius, 4px); background:var(--rz-primary-lighter); color:var(--rz-primary); }
.kachel-icon .rzi { font-size:24px; }
.kachel-wert { font-size:1.45rem; font-weight:700; line-height:1.15; color:var(--rz-text-color, #1a1a1a); }
.kachel-titel { font-size:0.8rem; color:var(--rz-text-secondary-color, #78909c); margin-top:2px; }
.kachel-warnung .kachel-icon { background:var(--rz-warning-lighter); color:var(--rz-warning-dark); }
.kachel-warnung .kachel-wert { color:var(--rz-warning-dark); }
.kachel-platzhalter { opacity:0.5; }
@media (max-width:767px) { .kachel-grid { grid-template-columns:1fr 1fr; } }