/* Shared framed tiles. Themes can override this class without component-specific selectors. */
.z-tile {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    background: transparent;
    color: inherit;
}

/* Gray pills and badges: "rz-background-color-base-N" combined with "rz-color-black" or "rz-color-white".
   Some themes run the gray scale the other way round (Zerocode Light, Stark Light, customer themes built
   on a dark bundle), so a fixed black or white can end up dark on dark. The text color therefore follows
   the lightness of the background token and is whichever of white and black contrasts more: both
   contrast equally at CIE lightness 49.4, darker grays get white, lighter ones black. Browsers without
   relative colors keep the fixed color. */
.rz-background-color-base-50:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-50) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-100:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-100) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-200:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-200) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-300:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-300) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-400:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-400) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-500:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-500) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-600:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-600) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-700:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-700) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-800:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-800) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }
.rz-background-color-base-900:is(.rz-color-black, .rz-color-white) { color: lab(from var(--rz-base-900) clamp(0, (49.4 - l) * 1000, 100) 0 0) !important; }

/* Main menu: long labels must not wrap when a scrollbar reduces the available width.
   Applies to host and app entries at every nesting level, independently of the theme. */
#main-menu-panel .rz-navigation-item-link {
    min-width: 0;
}

#main-menu-panel .rz-navigation-item-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main-menu-panel .rz-navigation-item-icon,
#main-menu-panel .rz-navigation-item-icon-children {
    flex-shrink: 0;
}

/* Logo */
.headerLogo {
    background-image: url('img/zerocode_trans.png') !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 32px !important;
    width: 122px !important;
}

/* Home-Symbol statt Logo: Themes ohne Logo blenden es in ihrem _ext.css ein (display: inline-block) */
.rz-header .headerHomeButton {
    display: none;
}

/* Where Am I Text in the header*/
.whereAmI {
    display: block;
    font-size: 1.2em;
    margin: 0;
    font-weight: 400;
    unicode-bidi: isolate;
    margin-left: 25px;
}

/* Where Am I, wenn es auf Mobile unter den Header rutscht */
.whereAmI-mobile {
    display: block;
    font-size: 1.1em;
    font-weight: 400;
    padding: 4px 15px 6px;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
    unicode-bidi: isolate;
}

/* Container in der rechten Sidebar fuer die auf Mobile ausgelagerten Header-Actions */
.sidebar-actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rz-border, #e0e0e0);
}

/* Radzen setzt bei einer frisch gemounteten Sidebar mit Expanded=false keine
   .rz-sidebar-collapsed-Klasse. Die Sidebar hat also nur .rz-sidebar (Basis = volle
   Breite) und erscheint initial offen. Wir erzwingen fuer die rechte Settings-Sidebar
   den eingeklappten Zustand, solange .rz-sidebar-expanded nicht gesetzt ist. Sobald
   der User das Zahnrad klickt, bekommt die Sidebar die Expanded-Klasse und die Regel
   greift nicht mehr.

   Je nach Radzen-/Theme-Kombination taucht die Positionsklasse als .rz-sidebar-end
   oder .rz-sidebar-right auf, deshalb decken wir beide Varianten ab. */
.rz-layout > .rz-sidebar.rz-sidebar-end:not(.rz-sidebar-expanded),
.rz-layout > .rz-sidebar.rz-sidebar-right:not(.rz-sidebar-expanded) {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Radzen drueckt bei <=768px Header/Footer nach rechts, wenn die linke Sidebar
   kollabiert und die rechte expanded ist (Default-Regel in Radzen.Blazor default.css).
   Das erzeugt die leere Spalte links neben Header und Footer. Wir wollen den gewohnten
   Layout-Flow behalten. */
@media (max-width: 768px) {
    .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) {
        justify-content: normal !important;
    }

    .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header,
    .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer {
        margin-inline-start: 0 !important;
    }
}

/* Mobile-Layout — Sidebars legen sich ueber den Content, statt ihn zu verschieben.
   Im Radzen-Layout-Grid sitzt die Sidebar normal in einer `auto`-Spalte und draengt
   `.rz-body` zur Seite. Sobald der Mobile-Modus aktiv ist — schmaler Viewport ODER der
   erzwungene "Mobile Device Mode" — setzt MainLayout per JS die Klasse `z-mobile-layout`
   auf <body>. Dann nehmen wir beide Sidebars aus dem Grid-Fluss (position: fixed),
   reduzieren das Layout auf eine Spalte und schieben die Sidebars per transform ueber
   den Content — aufloesungsunabhaengig. */
body.z-mobile-layout .rz-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "rz-header" "rz-body" "rz-footer" !important;
}

body.z-mobile-layout .rz-layout > .rz-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    width: var(--rz-sidebar-width, 250px) !important;
    max-width: 86vw;
    opacity: 1 !important;
    z-index: 900;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.22s ease;
}

/* Linkes Hauptmenue: faehrt von links ein. */
body.z-mobile-layout .rz-layout > .rz-sidebar.rz-sidebar-start,
body.z-mobile-layout .rz-layout > .rz-sidebar.rz-sidebar-left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

/* Rechtes Settings-Menue: faehrt von rechts ein. */
body.z-mobile-layout .rz-layout > .rz-sidebar.rz-sidebar-end,
body.z-mobile-layout .rz-layout > .rz-sidebar.rz-sidebar-right {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

/* Expanded -> vollstaendig eingefahren. */
body.z-mobile-layout .rz-layout > .rz-sidebar.rz-sidebar-expanded {
    transform: translateX(0);
}

/* Geschlossene Sidebars duerfen ausserhalb des Sichtbereichs keine Taps abfangen. */
body.z-mobile-layout .rz-layout > .rz-sidebar:not(.rz-sidebar-expanded) {
    pointer-events: none;
}

/* Die 1fr-Spalte des Radzen-Layout-Grids hat ein auto-Minimum (= min-content der
   Grid-Items). Ein einziges nicht umbrechbares Element in Header, Body oder Footer
   (z.B. die nowrap-Lizenzzaehler im Footer der Benutzer-Maske) macht sonst die ganze
   Spalte — und damit die Seite — breiter als den Viewport: horizontales Scrollen,
   rechte Bedienelemente abgeschnitten. min-width:0 laesst die Spalte auf Viewport-
   Breite schrumpfen; Header/Footer clippen ueberlaufenden Inhalt statt ihn
   ueberzustehen (Body clippt nicht, damit Seitenprobleme sichtbar bleiben). */
body.z-mobile-layout .rz-layout > .rz-header,
body.z-mobile-layout .rz-layout > .rz-body,
body.z-mobile-layout .rz-layout > .rz-footer {
    min-width: 0;
}

body.z-mobile-layout .rz-layout > .rz-header,
body.z-mobile-layout .rz-layout > .rz-footer {
    overflow-x: clip;
}

/* Abdunkelnder Backdrop hinter dem offenen Menue — von MainLayout gerendert (nur wenn
   _isMobile), daher kein Klassen-Gate noetig. */
.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 899;
    background: rgba(0, 0, 0, 0.45);
}

/* Rote Farbe beim mouseover eines menuitems */
.menu-item-hover-danger:hover .rz-navigation-item-icon,
.menu-item-hover-danger:hover .rz-navigation-item-text {
    color: var(--rz-danger) !important;
}

/* Konfig-Modus: flache Liste der Top-Level-Hauptmenues mit Sichtbarkeits-Switch */
.main-menu-config-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 4px;
    width: 100%;
    box-sizing: border-box;
}

.main-menu-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.main-menu-config-row:hover {
    background-color: var(--rz-base-200, rgba(0, 0, 0, 0.04));
}

.main-menu-config-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--rz-text-color, inherit);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-menu-config-row > .rz-switch {
    flex-shrink: 0;
    margin-left: auto;
}


.menu-item-hover-frozen:hover .rz-navigation-item-icon,
.menu-item-hover-frozen:hover .rz-navigation-item-text {
    color: #00bcd4 !important;
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.6), 0 0 16px rgba(0, 188, 212, 0.4), 0 0 24px rgba(0, 188, 212, 0.2) !important;
    filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.8));
    position: relative;
}



.frozen-button {
    background: linear-gradient(135deg, #00bcd4, #26c6da, #4dd0e1) !important;
    border: 2px solid #00acc1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

    .frozen-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }

    .frozen-button:hover {
        background: linear-gradient(135deg, #0097a7, #00acc1, #26c6da) !important;
        box-shadow: 0 0 30px rgba(0, 188, 212, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-1px) !important;
    }

        .frozen-button:hover::before {
            left: 100%;
        }

    .frozen-button:active {
        transform: translateY(0) !important;
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    /* Frost-Effekt */
    .frozen-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 2px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 1px, transparent 1px), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
        pointer-events: none;
    }



/* Sucking Animation */
.sucking {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.particle {
    position: fixed;
    pointer-events: none;
    opacity: 0.8;
    z-index: 9999;
}


.rz-datatable td,
.rz-datatable th,
.rz-grid-table td,
.rz-grid-table th {
    user-select: text !important;
}


.dnone{
    display:none;
}

/* Icon-only links are never underlined: Bootstrap underlines every link and in flex links the underline reaches the icon glyph. */
a:has(> .rzi:only-child) {
    text-decoration: none;
}


html, body, .rz-layout-main, .rz-root {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}


.rz-body-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
}


.rz-grid-grow {
    flex: 1 1 auto;
    min-height: 0;
}

.rz-body-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}



/* Standard: Text ist sichtbar */
.responsive-menu .rz-navigation-item-text {
    display: inline;
    transition: opacity 0.2s;
}

/* Kleine Displays: Nur noch das Icon! */
@media (max-width: 1350px) {
    .responsive-menu .rz-navigation-item-text {
        display: none !important;
    }
}







/* SITE LOADER */
/* ZERPLite Connecting Overlay */
.zerplite-connecting {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #0b0f1a;
    color: #e5e7eb;
    z-index: 9999;
    transition: opacity .25s ease;
    /* Erst nach kurzer Verzögerung einblenden: bei schnellem Verbindungsaufbau bleibt der Splash unsichtbar */
    animation: zl-splash-in .25s ease .6s both;
}

    .zerplite-connecting.hidden {
        animation: none;
        opacity: 0;
        pointer-events: none;
    }

    /* Kiosk: Farben aus den Variablen des Kiosk-Stylesheets (Storefront-Templates: --ks-*, InternalKioskNoTheme: --app-*).
       Die Fläche deckt sofort ab, damit vor dem ersten Render kein weißer Body durchscheint; nur die Karte erscheint verzögert. */
    .zerplite-connecting.zerplite-connecting-kiosk {
        background: var(--ks-color-bg, var(--app-bg, transparent));
        color: var(--ks-color-text, var(--app-text, inherit));
        animation: none;
    }

        .zerplite-connecting-kiosk .zerplite-connecting-card {
            background: transparent;
            box-shadow: none;
            animation: zl-splash-in .25s ease .6s both;
        }

        .zerplite-connecting-kiosk .zerplite-dot {
            background: currentColor;
        }

@keyframes zl-splash-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.zerplite-connecting-card {
    min-width: 260px;
    max-width: 90vw;
    padding: 24px 20px;
    border-radius: 16px;
    background: #111827;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    display: grid;
    gap: 10px;
    justify-items: center;
}

.zerplite-title {
    font-size: 18px;
    font-weight: 600;
}

.zerplite-sub {
    font-size: 13px;
    opacity: .85;
}

/* Keine Sitzung möglich (js/blazor-start.js): Meldung statt Punkt und Status. Farben erben vom Splash (Host/Kiosk). */
.zerplite-connecting-failed .zerplite-dot,
.zerplite-connecting-failed .zerplite-connecting-card > .zerplite-title,
.zerplite-connecting-failed #connecting-status {
    display: none;
}

.zerplite-connecting-error {
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 420px;
    text-align: center;
}

    .zerplite-connecting-error[hidden] {
        display: none;
    }

.zerplite-retry {
    margin-top: 6px;
    padding: 8px 18px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .zerplite-retry:hover,
    .zerplite-retry:focus-visible {
        background: color-mix(in srgb, currentColor 14%, transparent);
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

/* animierter Punkt */
.zerplite-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #60a5fa;
    animation: zl-pulse 1.2s infinite ease-in-out;
}

@keyframes zl-pulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.6);
        opacity: .3;
    }

    100% {
        transform: scale(1);
        opacity: .8;
    }
}
/* ===========================
   Item Group Tree – Komplett
   =========================== */

.tree-shell{
    max-height: 30vh;
    overflow-y: auto;
}

.generic-group-tree .rz-treenode-content-selected .rz-treenode-label {
    border-radius: var(--rz-tree-node-selected-border-radius);
    color: var(--rz-tree-node-selected-color);
    background-color: var(--rz-tree-node-selected-background-color);
}

.generic-group-tree .rz-treenode-content-selected:hover .rz-treenode-label:hover {
    border-radius: var(--rz-tree-node-selected-border-radius);
    color: var(--rz-tree-node-selected-color);
    background-color: var(--rz-tree-node-selected-background-color);
}

/* ----- Scope-Basis ----- */
.generic-group-tree .root-node {
    font-weight: 600;
}

.generic-group-tree .rz-treenode {
    width: 100% !important;
}

.generic-group-tree .rz-tree .rz-treenode-content {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.generic-group-tree .rz-tree .rz-treenode-label {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
/* ----- Node Row Layout ----- */
.generic-group-tree .node-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
    width: 100%;
    min-width: 0;
}

    .generic-group-tree .node-row > span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
/* ----- Actions (grundsätzlich versteckt) ----- */
.generic-group-tree .rz-treenode .node-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}
/* ----- Sichtbarkeit NUR für direkt gehoverten/gefocussten Label ----- */
.generic-group-tree .rz-treenode-label:hover > .node-row > .node-actions,
.generic-group-tree .rz-treenode-label:focus-within > .node-row > .node-actions {
    opacity: 1;
    visibility: visible;
}
/* ----- Editing sperrt globale Hover-Buttons (aber NICHT beim editierten Knoten) ----- */
.generic-group-tree.tree-has-editing .rz-treenode-label:hover > .node-row:not(.editing) > .node-actions,
.generic-group-tree.tree-has-editing .rz-treenode-label:focus-within > .node-row:not(.editing) > .node-actions {
    opacity: 0;
    visibility: hidden;
}
/* ... beim aktuell editierten Knoten immer anzeigen (auch bei Hover/Fokus) */
.generic-group-tree .node-row.editing > .node-actions,
.generic-group-tree .node-row.editing:hover > .node-actions,
.generic-group-tree .node-row.editing:focus-within > .node-actions {
    opacity: 1;
    visibility: visible;
}
/* ----- Editing Visual ----- */
.generic-group-tree .node-row.editing {
    background: rgba(0,0,0,0.06);
    border-radius: .4rem;
    padding: .1rem .25rem;
    outline: 1px solid rgba(0,0,0,0.08);
}
/* ----- Moving (optimistic update) ----- */
.generic-group-tree .node-row.moving {
    opacity: .55;
    outline: 1px dashed #9e9e9e;
    border-radius: .4rem;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.00) 6px, rgba(0,0,0,0.00) 12px);
    transition: opacity .25s ease;
}
/* ----- Hover-Highlights bei Drag & Drop (optional) ----- */
.generic-group-tree .node-row.drop-hover-allowed {
    background: rgba(76, 175, 80, 0.08);
    outline: 2px dashed #4CAF50;
    border-radius: .4rem;
}

.generic-group-tree .node-row.drop-hover-forbidden {
    background: rgba(229, 57, 53, 0.08);
    outline: 2px dashed #E53935;
    border-radius: .4rem;
}
/* ----- Suche Highlight ----- */
.generic-group-tree .search-highlight {
    background-color: #ffeb3b;
    padding: 0 2px;
    border-radius: 2px;
    text-decoration: none;
}
/* Während Drag keine Klicks auf Aktionen zulassen */
.dragging-subnode .node-actions {
    pointer-events: none;
}

.generic-group-tree .node-row.selected {
    background: rgba(63, 81, 181, 0.10);
    outline: 2px solid rgba(63, 81, 181, 0.35);
    border-radius: .4rem;
}
/* Optional: Hover background for entire node label */
.generic-group-tree .rz-treenode-label:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: .4rem;
}
/* Search box sticky in Select mode */
.generic-group-tree.tree-select .rz-form-field {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--rz-input-background-color, #fff);
    padding: .5rem;
    margin-bottom: 0;
}

.generic-group-tree.tree-select .rz-tree {
    max-height: calc(50vh - 2.5rem); /* Adjust for search box and actions */
    overflow-y: auto;
}



/* ===== GenericDropDownTree (DropDown-Tree) ===== */
/* ===== Base ===== */
.ggt-picker {
    position: relative;
    display: block;
    width: 100%;
    /* Schriftfarbe passend zum Eingabefeld, sonst erben Text und Löschen-Icon z. B. die Farbe der ausgewählten Grid-Zeile */
    color: var(--rz-input-value-color);
}

    /* Radzen-Message unter dem Feld */
    .ggt-picker + .rz-message {
        display: block;
        margin-top: 4px;
    }

/* ===== Trigger (Kopf des Dropdowns) ===== */
.ggt-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    height: var(--rz-input-height, 2.5rem);
    padding: 0 var(--rz-input-padding-x, .75rem);
    cursor: pointer;
    /* neutrale Defaults (außerhalb Radzen-FormField) */
    background: var(--rz-input-background-color, #fff);
    border: 1px solid var(--rz-input-border-color, rgba(0,0,0,.23));
    border-radius: var(--rz-border-radius, 4px);
}

/* Text im Trigger */
.ggt-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    margin-right: 0.5rem; /* Platz für Caret-Gruppe */
}

.ggt-placeholder {
    color: var(--rz-input-placeholder-color);
}

/* Caret rechts */
.ggt-caret,
.rz-dropdown-trigger {
    display: flex;
    align-items: center;
    margin-left: .25rem;
}

/* ===== Radzen FormField – Varianten und States ===== */

/* FILLED-Variante: Hintergrund + Unterkante statt voller Rahmen */
.rz-form-field.rz-variant-filled .ggt-trigger {
    background: var(--rz-form-field-filled-bg, var(--rz-input-bg, rgba(0,0,0,.04)));
    border: 1px solid transparent;
    border-bottom: 1px solid var(--rz-form-field-border, rgba(0,0,0,.42));
    border-radius: var(--rz-border-radius, 4px) var(--rz-border-radius, 4px) 0 0;
    box-shadow: none;
}


/* Gilt nur, wenn das Control in einem RadzenFormField steckt */
.rz-form-field .ggt-trigger {
    /* Höhe bleibt gleich, Inhalt rutscht minimal nach unten */
    height: var(--rz-input-height, 2.5rem);
    padding-top: 15px;
}

    /* Chevron / Caret leicht mit verschieben, damit mittig bleibt */
    .rz-form-field .ggt-trigger .rz-dropdown-trigger,
    .rz-form-field .ggt-trigger .ggt-caret {
        transform: translateY(1.5px);
    }

/* Optional: Fokuslinie dezenter, wirkt optisch mittiger */
.rz-form-field.rz-variant-filled.rz-state-focused .ggt-trigger {
    box-shadow: 0 1px 0 0 var(--rz-primary, #3f51b5);
}

/* OUTLINED-Variante: wie Radzen-Inputs mit vollem Rahmen */
.rz-form-field.rz-variant-outlined .ggt-trigger {
    background: var(--rz-input-background-color, #fff);
    border: 1px solid var(--rz-form-field-border, rgba(0,0,0,.23));
    border-radius: var(--rz-border-radius, 4px);
}

/* Hover (leicht betonen) */
.rz-form-field:hover .ggt-trigger {
    border-bottom-color: var(--rz-form-field-border-hover, rgba(0,0,0,.62));
}

/* Fokuszustand – Radzen-typische Akzentlinie unten (keine fette Box-Shadow) */
.rz-form-field.rz-state-focused .ggt-trigger {
    border-bottom-color: var(--rz-primary, #3f51b5) !important;
    box-shadow: 0 2px 0 0 var(--rz-primary, #3f51b5);
}

/* Disabled-Optik */
.rz-form-field .rz-state-disabled .ggt-trigger,
.ggt-trigger.rz-state-disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Leerer Zustand für Floating-Label (optional hilfreich) */
.rz-form-field .ggt-trigger.rz-state-empty .ggt-text {
    opacity: .8;
}


/* 2) Eigene Unterkante am Trigger ebenfalls neutralisieren */
.rz-form-field.rz-variant-filled .ggt-trigger {
    border-bottom: 1px solid transparent !important;
    box-shadow: none; /* falls du den Fokus-Schatten reduziert hast */
}

/* 3) Auch im Fokus keine Linie zeichnen */
.rz-form-field.rz-variant-filled.rz-state-focused .ggt-trigger {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* ===== Keyboard-Fokus außerhalb Radzen (z.B. Standalone-Nutzung) ===== */
.ggt-trigger:focus {
    outline: none;
}

/* ===== Outside-Click Overlay ===== */
.ggt-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 998;
}

/* ===== Panel (Popup) ===== */
.ggt-panel {
    position: absolute;
    z-index: 99999;
    top: calc(100% + 4px);
    left: 0;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 20rem;
    min-height: 20rem;
    max-width: calc(100vw - 24px);
    max-height: 45vh;
    /* Radzen-kompatible Optik */
    background: var(--rz-input-background-color, #fff);
    /* Textfarbe passend zur Karte mit dem Baum */
    color: var(--rz-text-color);
    border: 1px solid var(--rz-form-field-border, rgba(0,0,0,.23));
    border-radius: var(--rz-border-radius, 4px);
    box-shadow: var(--rz-elevation-8, 0 8px 16px rgba(0,0,0,.2));
}

    /* Inhalt im Panel füllt und ist scrollbar */
    .ggt-panel .generic-group-tree,
    .ggt-panel .rz-tree {
        width: auto;
        flex: 1 1 auto;
        overflow: auto;
    }

        /* In Panel-Ansicht: keine Ellipsen */
        .ggt-panel .generic-group-tree .node-row > span:first-child {
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
        }

/* Aktionen-Leiste unten */
.ggt-actions {
    position: sticky;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem;
    background: var(--rz-input-background-color, #fff);
    z-index: 1000;
    border-top: 1px solid var(--rz-form-field-border, rgba(0,0,0,.12));
}

/* Fixierte Panel-Variante (z.B. Viewport-basiert) */
.ggt-panel-fixed {
    position: fixed !important;
    max-height: 45vh;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100000;
    background: var(--rz-input-background-color, #fff);
    border: 1px solid var(--rz-form-field-border, rgba(0,0,0,.23));
    border-radius: var(--rz-border-radius, 4px);
    box-shadow: var(--rz-elevation-8, 0 8px 16px rgba(0,0,0,.2));
}

    .ggt-panel-fixed > .ggt-cell-unclip {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: auto;
    }

    .ggt-panel-fixed .rz-card {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

/* (Schreibfehler-Schutz, falls die Klasse mal ohne Punkt landet) */
ggt-panel.ggt-panel-fixed {
    position: fixed !important;
}







/* AI CHAT */
/* ---------- LAYOUT WRAPPER ---------- */
.erpchat-wrap {
    width: 100%;
    height: 100%;
    border-radius: var(--rz-border-radius, 20px);
    overflow: hidden;
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    background: var(--rz-body-background-color, transparent);
    box-shadow: var(--rz-shadow-2, 0 2px 10px rgba(0,0,0,.15));
}

/* ---------- CHAT SHELL ---------- */
.erpchat {
    /* "Body" Hintergrund über Radzen, aber mit dezenten Radzen-Akzenten */
    background: linear-gradient(180deg, color-mix(in srgb, var(--rz-primary, #3b82f6) 12%, transparent), transparent 30%), radial-gradient(1200px 600px at 80% -20%, color-mix(in srgb, var(--rz-secondary, #22c55e) 12%, transparent), transparent 60%), var(--rz-body-background-color, #0b0d10);
    color: var(--rz-text-color, #e8ebf0);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar / Chat */
    grid-template-rows: auto 1fr auto; /* Header / Body / Composer */
}

/* ---------- SIDEBAR (conversations, ChatGPT-style) ---------- */
.erpchat-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px 10px;
    background: color-mix(in srgb, var(--rz-base-background-color, #111318) 94%, var(--rz-primary, #3b82f6) 6%);
    border-right: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
}

.erpchat-header,
.erpchat-body,
.erpchat-composer {
    grid-column: 2;
}

.erpchat-side-new {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    background: color-mix(in srgb, var(--rz-primary, #3b82f6) 22%, transparent);
    color: var(--rz-text-color, #e8ebf0);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .erpchat-side-new:hover {
        background: color-mix(in srgb, var(--rz-primary, #3b82f6) 32%, transparent);
    }

.erpchat-side-sep {
    height: 1px;
    margin: 12px 2px;
    background: var(--rz-border-color, rgba(0,0,0,.18));
    flex: none;
}

.erpchat-side-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erpchat-side-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--rz-text-color, #e8ebf0);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .erpchat-side-item:hover {
        background: color-mix(in srgb, var(--rz-primary, #3b82f6) 12%, transparent);
    }

    .erpchat-side-item.is-active {
        background: color-mix(in srgb, var(--rz-primary, #3b82f6) 20%, transparent);
        border-color: color-mix(in srgb, var(--rz-primary, #3b82f6) 45%, transparent);
    }

.erpchat-side-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}

.erpchat-side-date {
    font-size: 11px;
    color: var(--rz-text-secondary-color, #9aa3b5);
}

/* Narrow dialogs: hide the sidebar, chat takes the full width. */
@media (max-width: 900px) {
    .erpchat {
        grid-template-columns: 1fr;
    }

    .erpchat-sidebar {
        display: none;
    }

    .erpchat-header,
    .erpchat-body,
    .erpchat-composer {
        grid-column: 1;
    }
}

/* ---------- HEADER ---------- */
.erpchat-header {
    padding: 14px 18px;
    /* Header: Radzen Primary/Secondary statt hardcoded */
    background: linear-gradient(135deg, color-mix(in srgb, var(--rz-primary, #3b82f6) 35%, transparent), color-mix(in srgb, var(--rz-secondary, #22c55e) 35%, transparent) );
    border-bottom: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Radzen Typography (wenn vorhanden) */
    font-family: var(--rz-text-font-family, inherit);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Badge stärker "Radzen-chip-like" */
.brand-badge {
    height: 32px;
    width: 32px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 80%, transparent);
    color: var(--rz-text-color, #111);
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    user-select: none;
    box-shadow: var(--rz-shadow-1, 0 1px 4px rgba(0,0,0,.12));
}

/* ---------- BODY ---------- */
.erpchat-body {
    overflow: auto;
    padding: 18px;
    /* Radzen "Card" / "Panel" Feeling: base bg + dezentes Pattern */
    background: radial-gradient(20px 20px at 25px 25px, color-mix(in srgb, var(--rz-text-color, #000) 7%, transparent) 20%, transparent 21%) 0 0/20px 20px, var(--rz-base-background-color, #111318);
}

    /* Scrollbar: optional, Radzen-like */
    .erpchat-body::-webkit-scrollbar {
        width: 10px;
    }

    .erpchat-body::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--rz-base-background-color, #111318) 85%, transparent);
    }

    .erpchat-body::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--rz-text-color, #e8ebf0) 16%, transparent);
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--rz-base-background-color, #111318) 85%, transparent);
    }

/* ---------- MESSAGE ROW ---------- */
.erpchat-msg {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    margin: 14px 0;
}

    .erpchat-msg.is-user {
        direction: rtl;
    }

        /* User bubble etwas "leichter" wie Radzen surface */
        .erpchat-msg.is-user .erpchat-bubble {
            background: color-mix(in srgb, var(--rz-base-background-color, #fff) 6%, transparent);
            border: 1px solid color-mix(in srgb, var(--rz-text-color, #000) 10%, transparent);
        }

        .erpchat-msg.is-user .erpchat-meta .name {
            color: color-mix(in srgb, var(--rz-text-color, #e8ebf0) 70%, transparent);
        }

        .erpchat-msg.is-user .erpchat-avatar {
            background: color-mix(in srgb, var(--rz-base-background-color, #fff) 6%, transparent);
            border: 1px solid color-mix(in srgb, var(--rz-border-color, rgba(0,0,0,.12)) 70%, transparent);
        }

/* ---------- AVATAR ---------- */
.erpchat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-base-background-color, #111318) 92%, var(--rz-primary, #3b82f6) 8%);
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
    box-shadow: var(--rz-shadow-1, 0 1px 4px rgba(0,0,0,.12));
}

/* ---------- BUBBLE ---------- */
.erpchat-bubble {
    direction: ltr;
    /* Assistant bubble: Radzen panel + minimal primary tint */
    background: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-background-color, #151922) 92%, var(--rz-primary, #3b82f6) 8%), var(--rz-base-background-color, #10131a) );
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    border-radius: calc(var(--rz-border-radius, 14px) * 0.9);
    padding: 12px 14px;
    box-shadow: var(--rz-shadow-2, 0 4px 16px rgba(0,0,0,.18));
}

/* ---------- META ---------- */
.erpchat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    opacity: .85;
    margin-bottom: 6px;
}

    .erpchat-meta .name {
        font-weight: 600;
        color: var(--rz-text-color, #e8ebf0);
    }

/* Copy Button: an Radzen Button/Chip anlehnen */
.copy-btn {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 8%, transparent);
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    color: var(--rz-text-color, #e8ebf0);
    cursor: pointer;
    transition: filter .15s ease, transform .04s ease;
}

    .copy-btn:hover {
        filter: brightness(1.05);
    }

    .copy-btn:active {
        transform: translateY(1px);
    }

/* ---------- CONTENT ---------- */
.erpchat-content {
    line-height: 1.6;
    font-size: 15px;
    white-space: pre-wrap;
    color: var(--rz-text-color, #e8ebf0);
}

    /* Assistant bubbles render Markdown → block elements manage their own spacing. */
    .erpchat-content.is-markdown {
        white-space: normal;
    }

        .erpchat-content.is-markdown p {
            margin: 0 0 0.55em;
        }

        .erpchat-content.is-markdown p:last-child {
            margin-bottom: 0;
        }

        .erpchat-content.is-markdown ul,
        .erpchat-content.is-markdown ol {
            margin: 0.25em 0 0.55em 1.4em;
            padding: 0;
        }

        .erpchat-content.is-markdown li {
            margin: 0.15em 0;
        }

        .erpchat-content.is-markdown h1,
        .erpchat-content.is-markdown h2,
        .erpchat-content.is-markdown h3,
        .erpchat-content.is-markdown h4 {
            font-size: 1.05em;
            margin: 0.6em 0 0.3em;
        }

        .erpchat-content.is-markdown table {
            border-collapse: collapse;
            margin: 0.5em 0;
            display: block;
            overflow-x: auto;
        }

        .erpchat-content.is-markdown th,
        .erpchat-content.is-markdown td {
            border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
            padding: 4px 10px;
        }

        .erpchat-content.is-markdown blockquote {
            margin: 0.5em 0;
            padding: 0.25em 0.75em;
            border-left: 3px solid var(--rz-border-color, rgba(0,0,0,.2));
            color: var(--rz-text-secondary-color, inherit);
        }

        .erpchat-content.is-markdown hr {
            border: none;
            border-top: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
            margin: 0.6em 0;
        }

    .erpchat-content code {
        background: color-mix(in srgb, var(--rz-base-background-color, #000) 18%, transparent);
        padding: 2px 6px;
        border-radius: 6px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        border: 1px solid color-mix(in srgb, var(--rz-border-color, rgba(0,0,0,.12)) 70%, transparent);
    }

    .erpchat-content pre {
        background: color-mix(in srgb, var(--rz-base-background-color, #0b0f16) 92%, transparent);
        border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
        border-radius: 12px;
        padding: 12px;
        overflow: auto;
        box-shadow: var(--rz-shadow-1, 0 1px 4px rgba(0,0,0,.12));
    }

/* ---------- TYPING ---------- */
.typing {
    display: flex;
    gap: 6px;
    padding: 4px 2px;
}

    .typing span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--rz-primary, #3b82f6) 55%, transparent);
        animation: erpchat-bounce 1.2s infinite ease-in-out;
    }

        .typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .typing span:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes erpchat-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .6;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ---------- COMPOSER ---------- */
.erpchat-composer {
    border-top: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    background: linear-gradient(0deg, color-mix(in srgb, var(--rz-base-background-color, #0f1115) 96%, transparent), var(--rz-base-background-color, #111318) );
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.erpchat-composer-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

    .erpchat-composer textarea {
        flex: 1 1 auto;
        resize: none;
        min-height: 44px;
        max-height: 30vh;
        overflow-y: auto;
        border-radius: var(--rz-border-radius, 12px);
        border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
        background: var(--rz-input-background-color, color-mix(in srgb, var(--rz-base-background-color, #0f1320) 92%, transparent));
        color: var(--rz-text-color, #e8ebf0);
        padding: 12px 14px;
        line-height: 1.5;
        outline: none;
        transition: box-shadow .15s ease, border-color .15s ease, height .1s ease;
    }

        .erpchat-composer textarea::placeholder {
            color: color-mix(in srgb, var(--rz-text-color, #9aa3b5) 55%, transparent);
        }

        .erpchat-composer textarea:focus {
            border-color: color-mix(in srgb, var(--rz-primary, #3b82f6) 65%, var(--rz-border-color, rgba(0,0,0,.12)));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary, #3b82f6) 22%, transparent);
        }

/* ---------- BUTTONS ---------- */
.composer-actions {
    display: flex;
    gap: 8px;
}

.btn {
    padding: 10px 14px;
    border-radius: var(--rz-border-radius, 12px);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--rz-text-font-family, inherit);
    transition: transform .04s ease, filter .15s ease, opacity .15s ease, box-shadow .15s ease;
    user-select: none;
    border: 1px solid transparent;
}

    .btn:active {
        transform: translateY(1px);
    }

/* Ghost an Radzen "Light"/"Base" Buttons */
.btn-ghost {
    border-color: var(--rz-border-color, rgba(0,0,0,.12));
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 8%, transparent);
    color: var(--rz-text-color, #e8ebf0);
}

    .btn-ghost:hover {
        filter: brightness(1.05);
    }

/* Primary an Radzen Primary */
.btn-primary {
    border: 1px solid color-mix(in srgb, var(--rz-primary, #3b82f6) 40%, var(--rz-border-color, rgba(0,0,0,.12)));
    background: linear-gradient(135deg, var(--rz-primary, #3b82f6), color-mix(in srgb, var(--rz-primary, #3b82f6) 45%, var(--rz-secondary, #22c55e)) );
    color: var(--rz-button-text-color, #0b0d10);
    box-shadow: var(--rz-shadow-1, 0 1px 4px rgba(0,0,0,.12));
}

    .btn-primary:hover {
        filter: brightness(1.03);
    }

.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- ATTACHMENTS ---------- */
.erpchat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    padding: 10px 12px;
}

.erpchat-attach-tray,
.erpchat-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.erpchat-attach-list {
    margin-top: 8px;
}

.erpchat-attach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .82rem;
    /* Theme-relative surface paired with theme text color (not a fixed grey) */
    background: var(--rz-base-background-color, #1a1d22);
    color: var(--rz-text-color, #e8ebf0);
    border: 1px solid var(--rz-border-color, rgba(0,0,0,.12));
    direction: ltr;
}

    .erpchat-attach.is-sent {
        background: color-mix(in srgb, var(--rz-text-color, #000) 8%, transparent);
    }

.erpchat-attach-icon {
    flex: 0 0 auto;
}

.erpchat-attach-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erpchat-attach-size {
    flex: 0 0 auto;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

.erpchat-attach-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: .7;
}

    .erpchat-attach-remove:hover {
        opacity: 1;
    }

.erpchat-attach-error {
    align-self: center;
    font-size: .82rem;
    color: var(--rz-danger, #ef4444);
}

/* Notice / error bubble inside the transcript (warning tint blended into the themed surface) */
.erpchat-bubble.erpchat-notice {
    background: color-mix(in srgb, var(--rz-warning, #f59e0b) 18%, var(--rz-base-background-color, #111318));
    border: 1px solid color-mix(in srgb, var(--rz-warning, #f59e0b) 45%, transparent);
    color: var(--rz-text-color, #e8ebf0);
}

/* Full-window drop overlay */
.erpchat-dropzone {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rz-primary, #3b82f6) 22%, transparent);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

    .erpchat-dropzone.is-visible {
        display: flex;
    }

.erpchat-dropzone-inner {
    padding: 24px 32px;
    border-radius: var(--rz-border-radius, 16px);
    border: 2px dashed var(--rz-on-primary, #fff);
    background: color-mix(in srgb, var(--rz-primary, #3b82f6) 75%, transparent);
    color: var(--rz-on-primary, #fff);
    font-weight: 600;
    text-align: center;
    box-shadow: var(--rz-shadow-3, 0 6px 24px rgba(0,0,0,.3));
}

.erpchat-dropzone-icon {
    font-size: 2rem;
    margin-bottom: 6px;
}











/* ---------- SMALL UTILITIES ---------- */
.flex-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subtle {
    font-size: 12px;
    opacity: .8;
}

.ggt-panel-fixed {
    position: fixed !important; /* statt absolute */
    max-height: 45vh;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100000;
    box-shadow: var(--rz-input-hover-shadow);
    background: var(--rz-input-background-color, #fff);
    border: var(--rz-input-hover-border);
}

ggt-panel.ggt-panel-fixed {
    position: fixed !important;
}

.ggt-picker + .rz-message {
    display: block; /* <-- Wichtig */
    margin-top: 4px;
}











/* STACKED LOADERS */
.zlc {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(360px, calc(100vw - 1rem));
    pointer-events: none;
}

.zlc-card {
    pointer-events: auto;
    position: relative;
    border-width: 1px;
    border-style: solid;
    animation: zlc-slide-in 0.15s ease-out;
}

.zlc-card.zlc-clickable {
    cursor: pointer;
}

.zlc-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.zlc-icon-btn {
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

.zlc-title {
    padding-right: 4.5rem;
}

.zlc-sub {
    opacity: 0.92;
    overflow-wrap: anywhere;
    padding-right: 0.25rem;
}

.zlc-progress-text {
    text-align: right;
    opacity: 0.9;
}

.zlc-fade-out {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes zlc-slide-in {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 420px) {
    .zlc {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* File: wwwroot/css/job-controls.css */
.job-controls {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

    .job-line.running {
        background: #f8fafc;
    }

    .job-line.ok {
        background: #ecfdf5;
        border-color: #86efac;
    }

    .job-line.failed {
        background: #fef2f2;
        border-color: #fca5a5;
    }

.job-msg {
    font-size: .9rem;
    color: #4b5563;
    margin-left: 4px;
}

.btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
}

    .btn:hover {
        background: #f9fafb;
    }

    .btn.danger {
        border-color: #fecaca;
        color: #991b1b;
    }

        .btn.danger:hover {
            background: #fee2e2;
        }









/* FONT VARIATIONS*/
.filled-icon {
    font-variation-settings: 'FILL' 1;
}

    .filled-icon .rzi {
        font-variation-settings: 'FILL' 1; /* 0 = outline, 1 = filled */
    }







/* LOGIN */

.account-security-page {
    max-width: 980px;
    margin: 0 auto;
}

.security-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.security-option-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.2rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.security-option-card h4 {
    margin: 0;
}

.security-option-card p {
    margin: 0.35rem 0 0 0;
    color: var(--rz-text-secondary-color);
}

.security-option-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.security-badge {
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.security-badge.enabled {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.security-badge.disabled {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.security-badge.coming-soon {
    background: rgba(107, 114, 128, 0.18);
    color: #4b5563;
}

.security-detail-list {
    margin: 1rem 0;
    padding-left: 1.2rem;
}

.security-detail-list li {
    margin-bottom: 0.4rem;
}

.security-option-button {
    width: 100%;
}

.security-option-card-disabled {
    opacity: 0.72;
}

.totp-qr-wrapper {
    margin-top: 0.75rem;
    padding: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
}

.totp-qr-image {
    width: 220px;
    height: 220px;
    display: block;
}

.account-form-card {
    max-width: 760px;
    margin-top: 1rem;
}

.account-form-input {
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

.account-form-actions {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}



/* ZImageUpload */
.zimageupload-container {
    position: relative;
}

.zimageupload-wrapper {
    position: relative;
    display: inline-block;
}

.zimageupload-preview-area {
    position: relative;
}

.zimageupload-upload-below {
    width: 100%;
    margin-top: 0.35rem;
}

.zimageupload-upload-below .rz-fileupload,
.zimageupload-upload-below .rz-fileupload-buttonbar,
.zimageupload-upload-below .rz-fileupload-buttonbar .rz-button {
    width: 100%;
}

.zimageupload-spinner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zimageupload-nav {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 11;
    display: flex;
    gap: 4px;
}

.zimageupload-delete-button {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--rz-danger, #d9534f) 60%, transparent);
    border-radius: 50%;
    background: var(--rz-danger, #d9534f);
    color: var(--rz-on-danger, #fff);
    box-shadow: var(--rz-shadow-2, 0 2px 8px rgba(0, 0, 0, 0.25));
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
}

.zimageupload-preview-area:hover .zimageupload-delete-button,
.zimageupload-delete-button:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.zimageupload-delete-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.zimageupload-delete-button:disabled {
    cursor: progress;
    opacity: 0.65;
}




/* DataFlowMappingEditor */
.mapping-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
}

.mapping-grid-header {
    font-weight: 600;
}

.mapping-grid-cell {
    /* optional: volle Breite für innere Controls */
    width: 100%;
}


/* DataFlowSourceFilter */

.filter-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr auto;
    gap: 1rem;
    align-items: start;
}

.filter-grid-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    padding: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-grid-cell {
    display: flex;
    align-items: center;
    min-height: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .filter-grid-header {
        display: none;
    }

    .filter-grid-cell {
        width: 100%;
    }
}

/* Invalid Field Styling */
.filter-grid-cell :deep(.invalid) {
    border-color: var(--rz-danger) !important;
}

.filter-grid-cell :deep(.invalid:focus) {
    box-shadow: 0 0 0 0.2rem rgba(var(--rz-danger-rgb), 0.25) !important;
}





/* Theme Change */
/* Overlay container */
.theme-fade-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    /* Standard: unsichtbar + klickt nicht im Weg */
    opacity: 0;
    pointer-events: none;
    background: #000;
    transition: opacity 280ms ease;
}

    /* Aktiv: sichtbar + blockt Eingaben */
    .theme-fade-overlay.is-visible {
        opacity: 1;
        pointer-events: all;
    }





/* FK EDITOR */
.fk-readonly {
    height: 52px;
    vertical-align: middle !important;
    line-height: 52px;
}

.fk-footertext {
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--rz-base-300);
}

/* fk-footertext ausblenden, wenn in der Helper-Zone eine Error-Message existiert */
.rz-form-field-helper:has(.rz-messages-error) .fk-footertext {
    display: none;
}




/* DATA FLOW MAPPER */
/* Erweiterung der DropDown im DataFlowFieldMapper */

.dataFlowMappingSourceFieldDropDownItem {
    padding-left: 0.5rem;
}

.dataFlowMappingSourceFieldDropDownItemName {
}

.dataFlowMappingSourceFieldDropDownDescription {
    font-size: 0.75rem;
    color: var(--rz-secondary);
}


/* Der Hover muss auf das Radzen-Element gehen */
.rz-dropdown-item:hover .dataFlowMappingSourceFieldDropDownDescription {
    color: navajowhite;
}

.dataFlowMappingSourceFieldDropDownHeaderItem {
    font-weight: bold;
    color: var(--rz-secondary);
    padding: 0.5rem 0 0.25rem 0;
    border-top: 1px solid var(--rz-border-color);
    margin-top: 0.25rem;
}

.rz-dropdown-item:hover .dataFlowMappingSourceFieldDropDownHeaderItem {
    color: white;
}





.menu-item-exportButton:hover > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-icon,
.menu-item-exportButton:hover > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-text,
.menu-item-exportButton:hover > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-icon-children {
    color: #33C481 !important;
}

.menu-item-exportButton-downloading .rz-navigation-item-icon,
.menu-item-exportButton-downloading .rz-navigation-item-text {
    color: #33C481 !important;
}

.menu-item-exportButton-downloading:hover .rz-navigation-item-icon,
.menu-item-exportButton-downloading:hover .rz-navigation-item-text {
    color: #33C481 !important;
}


/* Tab in einem Dialog muss sich abheben */
.rz-dialog .rz-tabview {
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), /* leichter „Einschnitt“ */
    0 4px 10px rgba(0, 0, 0, 0.25); /* dezenter Schatten */
    padding: 0.25rem;
}

/* Tabs selbst ohne weißen Hintergrund lassen */
.rz-dialog .rz-tabview-nav {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* Panels nicht extra einfärben, damit dein Feldset-Blau bleibt */
.rz-dialog .rz-tabview-panels,
.rz-dialog .rz-tabview-panel {
    background: transparent;
}

/* rz-dialog muss sich besser abheben */
.rz-dialog {
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    min-height: 150px;
    max-height: 100%;
    z-index: var(--rz-dialog-zindex);
    background-color: var(--rz-dialog-background-color);
    border-radius: var(--rz-dialog-border-radius);
    /* deutlichere Abhebung */
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35), /* tiefer Shadow */
    0 0 0 1px rgba(255, 255, 255, 0.06); /* feiner „Halo“-Rand nach außen */
    /* statt Border – wirkt weicher */
    outline: none;
}



.rz-dialog-wrapper {
    box-sizing: border-box;
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--rz-dialog-zindex);
    align-items: center;
    justify-content: center;
    /* ✨ Hintergrund abdunkeln */
    background-color: rgba(0, 0, 0, 0.35);
    /* ✨ leichtes „Entschärfen“ des Inhalts dahinter */
    backdrop-filter: blur(2px) saturate(0.9);
}

/* Mobile-Layout: ein Dialog darf nie breiter als der Viewport sein. Viele Host-Dialoge
   packen ihren Inhalt in ein <div> mit fixer, desktop-orientierter `min-width`
   (z. B. min-width: 640px) — auf dem Handy erzwingt das horizontalen Overflow
   bzw. einen horizontalen Scrollbalken. Wir deckeln den Dialog auf Viewport-Breite
   und lassen seinen Inhalt schrumpfen. Wie das Sidebar-Overlay an die `z-mobile-layout`-
   Body-Klasse gehaengt (schmaler Viewport ODER erzwungener "Mobile Device Mode"). */
body.z-mobile-layout .rz-dialog {
    max-width: 100vw !important;
    max-height: 100dvh !important;
}

body.z-mobile-layout .rz-dialog-content,
body.z-mobile-layout .rz-dialog-content * {
    min-width: 0 !important;
}


/* DropDowns müssen sich mehr abheben */
.rz-dropdown-panel {
    position: absolute;
    background-color: var(--rz-dropdown-open-background-color);
    border-radius: var(--rz-input-border-radius);
    /* klare, sichtbare Kante */
    border: 1px solid rgba(0, 0, 0, 0.28);
    /* starke, tief gestaffelte Schatten */
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    /* leichter Lift */
    transform: translateY(3px);
}




/* Grünen Rahmen bei der Validierung ausblenden */
.valid.modified:not([type=checkbox]) {
    outline: 0 !important;
}

/* Alle RadzenSwitch innerhalb von RadzenFormField auf 20px Höhe setzen */
.rz-form-field .rz-switch {
    height: 20px !important;
    min-height: 20px !important;
    margin-top: 0.5rem; /* entspricht rz-my-2 */
    margin-bottom: 0.5rem;
    margin-left: 0.25rem; /* entspricht rz-mx-1 */
    margin-right: 0.25rem;
}

/* Schalter in markierten Grid-Zeilen: Zeile und eingeschalteter Track haben sonst beide die Auswahlfarbe.
   Track in der Zeilen-Textfarbe, Knopf in der Zeilenfarbe; die Auswahlfarbe kann halbtransparent sein,
   daher wie bei Radzens fixierten Zellen über den Grid-Hintergrund gelegt. */
.rz-data-row.rz-state-highlight .rz-switch,
.zeg-row.zeg-selected .rz-switch,
.zeg-row.zeg-checked .rz-switch {
    --rz-switch-checked-background-color: var(--rz-grid-selected-color);
    --rz-switch-checked-circle-background-color: linear-gradient(var(--rz-grid-selected-background-color), var(--rz-grid-selected-background-color)), var(--rz-grid-background-color);
}

/* Multiselect-Dropdowns mit Chips: kompakte Pillen, damit das Feld
   die Standard-Feldhöhe der übrigen Formfelder behält */
.rz-dropdown-chips {
    --rz-chip-padding-block: 0.0625rem;
    --rz-chip-padding-inline: 0.5rem;
    --rz-chip-font-size: 0.8125rem;
}

/* Mit Chips bleibt die Content-Box exakt auf Standard-Feldhöhe (53px) */
.rz-dropdown-chips:has(.rz-chip) {
    padding-bottom: 5px;
}

.rz-dropdown-chips .rz-chip .rz-button {
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
}

.rz-dropdown-chips .rz-chip .rz-button .rzi {
    font-size: 0.875rem;
}

/* Fokusfarbe von Labels in Formfields deaktivieren */
.rz-form-field.rz-state-focused .rz-form-field-label {
    color: inherit !important;
}

/* Radzen FormField bei Fokus hervorheben */
.rz-form-field.rz-state-focused {
    box-shadow: 0 0 6px 1px rgba(205, 205, 205, 0.4);
}


/* Footer Anpassung Padding war im Original zu hoch */
:root {
    --rz-footer-padding: 0.5rem 1rem !important;
    --rz-fieldset-padding: 0.5rem !important;
    --rz-tabs-padding: 0rem !important;
    --rz-grid-header-filter-icon-active-color: #bae945 !important;
}


.main-component-progressbar {
    height: 5px;
}

/* Kommt ein Fieldset gleich nach einem Fieldset -> Abstand halten*/
.rz-fieldset + .rz-fieldset {
    margin-top: 20px;
}


/* Locked Icon - Hinweis, dass das Formfield nicht bearbeitet werden darf */
.lockedIcon {
    color: #FFFFFF55 !important;
    font-size: 1rem !important;
}




/* Rote Checkbox bei Tristate Checkbox false */
.rz-chkbox-redGreen .rz-chkbox-box .rzi-times {
    color: white !important;
    background-color: rgb(125, 48, 65) !important;
}

.rz-chkbox-redGreen .rz-chkbox-box:has(.rzi-times) {
    background-color: rgb(125, 48, 65) !important;
}

/* Grüne Checkbox bei Tristate Checkbox true */
.rz-chkbox-redGreen .rz-chkbox-box .rzi-check {
    color: white !important;
    background-color: rgb(48, 125, 65) !important;
}

.rz-chkbox-redGreen .rz-chkbox-box:has(.rzi-check) {
    background-color: rgb(48, 125, 65) !important;
}



/* Nur ungültige Textboxen innerhalb eines Radzen Data Grids */
.rz-datatable .rz-textbox.invalid,
.rz-datatable .rz-dropdown.invalid,
.rz-datatable .rz-numeric-input.invalid,
.rz-datatable .rz-masked.invalid,
.rz-datatable .rz-datepicker .invalid {
    border: 2px solid var(--rz-danger) !important;
    box-shadow: none !important;
    border-radius: 2px;
    outline: 0 !important;
}


.grid-goto-link {
    color: #fdd07a !important;
}

.goto-link {
    color: #fdd07a !important;
    text-decoration: underline !important;
}

/* Plain <a class="goto-link"> in the start slot of a form field (new/edit link): like .rz-link,
   otherwise the icon sits on the text baseline and ends up above the field text. Icon only, so no
   underline (.goto-link and some themes underline with !important, the higher specificity wins). */
.rz-form-field-start > a.goto-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}



.mark.highlight-match {
    background-color: #ffe08a;
    color: #000;
    border-radius: 3px;
    padding: 0 2px;
}


/* Download Link for File Download Dialog*/
.fileDownloadLink {
    color: white;
}

    .fileDownloadLink:hover {
        color: white;
    }


.rz-message-popup {
    z-index: 100;
}

.rz-form-field:has(.rz-dropdown.invalid) {
    border: 2px solid var(--rz-danger);
    border-radius: 4px;
    padding: 2px;
}

.rz-form-field:has(.rz-textbox.invalid) {
    border: 2px solid var(--rz-danger);
    border-radius: 4px;
    padding: 2px;
}

.rz-form-field:has(.ggt-picker.invalid) {
    border: 2px solid var(--rz-danger);
    border-radius: 4px;
    padding: 2px;
}

.rz-form-field-content > .rz-dropdown.invalid,
.rz-form-field-content > .rz-textbox.invalid,
.rz-form-field-content > .ggt-picker.invalid > .rz-inputtext {
    border: none !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* Right Sidebar */
.sidebar-stack {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-spacer {
    flex-grow: 1;
}










/* Form Field */
.rz-form-field {
    border-radius: 12px;
}

.rz-form-field-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    color: var(--rz-text-color, #fff);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-fileupload ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label,
.rz-form-field:not(.rz-variant-outlined).rz-state-focused .rz-form-field-label {
    background-color: transparent !important;
    color: var(--rz-base) !important;
}

/* Radzen 10 setzt auf gefloatete Labels "background-color: inherit !important" mit
   Selektoren bis Spezifität (0,6,0) — das schlägt die Regel oben und erscheint auf
   gesperrten Feldern als heller Chip (das Input dunkelt ab, der Content nicht). Die
   verdreifachten Klassen heben diese Regel auf (0,7,0), damit sie unabhängig von der
   Ladereihenfolge gewinnt. Outlined bleibt ausgenommen: dort maskiert das Label
   bewusst die Border. */
.rz-form-field.rz-form-field.rz-form-field:not(.rz-variant-outlined) .rz-form-field-label.rz-form-field-label.rz-form-field-label {
    background-color: transparent !important;
}

/* Radzen schiebt das Label einer TextArea im Filled/Flat-FormField per translate(0, 0.625rem)
   nach unten. Bei festem Label (AllowFloatingLabel=false) überlappt es dann die erste
   Textzeile bzw. den Placeholder. Ohne Versatz sitzt es wie bei einzeiligen Feldern. */
.rz-form-field.rz-variant-filled:not(.rz-floating-label) .rz-textarea ~ .rz-form-field-label,
.rz-form-field.rz-variant-flat:not(.rz-floating-label) .rz-textarea ~ .rz-form-field-label {
    transform: translate(0, 0);
}



span.rz-switch-circle.rz-readonly {
    background-color: var(--rz-input-disabled-color) !important;
}

.fk-readonly {
    padding: 0.75rem 2.5rem 0.75rem 0.75rem; /* Beispiel: links rein, rechts Platz für Icon */
    box-sizing: border-box;
    color: var(--rz-input-disabled-color);
    padding-left: 7px !important;
}





/* Tabs, welche die volle Seitenhöhe nutzen */
.tabview-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.zgrid-tab-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ZDataGrid im Tab: Menüzeile oben, Grid füllt die Resthöhe */
.zdatagrid-tab-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

    /* Container, der die Panels hält, muss Resthöhe bekommen */
    .tabview-fill .rz-tabview-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;

    }

    /* Panel selbst darf nicht den Body scrollen lassen */
    .tabview-fill .rz-tabview-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }


/* Linke Seiten Tab Buttons brauchen etwas Abstand zum Tab Content*/
.rz-tabview-left > .rz-tabview-nav {
    margin-right: 2px;
    margin-top: 35px
}

.rz-tabview-panel {
    padding: 1px;
}



/* Permission Spalte im Permission Selektor*/
.permission-cell {
    line-height: 1.2;
}

.permission-description {
    font-size: 0.95rem;
    font-weight: 500;
}

.permission-key {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    opacity: 0.8;
    margin-top: 2px;
}

.role-permission-picker {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.75rem;
}

.role-permission-help {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.role-permission-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.role-permission-bulk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-permission-undo {
    display: inline-flex;
    justify-content: center;
    flex: 0 0 2rem;
    inline-size: 2rem;
    min-height: 2rem;
}

.role-permission-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.role-permission-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background-color: transparent;
    color: inherit;
}

.role-permission-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.role-permission-list > [role="listitem"] {
    position: relative;
}

.role-permission-list > [role="listitem"] + [role="listitem"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0.75rem;
    border-block-start: 1px solid currentColor;
    opacity: 0.16;
    pointer-events: none;
}

.role-permission-row:hover {
    box-shadow: inset 0 0 0 1px var(--rz-primary);
}

.role-permission-row:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

.role-permission-row[aria-disabled="true"] {
    cursor: progress;
}

.role-permission-status {
    display: inline-flex;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
}

.role-permission-unset {
    color: inherit;
    opacity: 0.65;
}

.role-permission-copy .permission-key {
    color: inherit;
    opacity: 0.65;
}

.role-permission-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.role-permission-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.tenant-permission-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.tenant-permission-selection { min-width: 0; }
.tenant-permission-selection label { display: block; margin-bottom: 0.25rem; }
.tenant-permission-selection-controls { display: flex; align-items: center; gap: 0.5rem; }
.tenant-permission-selection-controls > .rz-button { flex-shrink: 0; }
.tenant-permission-summary { font-size: 0.8rem; opacity: 0.75; }
.tenant-permission-chevron { margin-left: auto; flex-shrink: 0; }
.tenant-permission-details { padding: 0.5rem 0.75rem 0.75rem; }
.tenant-permission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tenant-permission-cells { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tenant-permission-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    border: var(--rz-border-normal);
    border-radius: var(--rz-border-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.tenant-permission-cell:hover:not([aria-disabled="true"]) { border-color: var(--rz-primary); }
.tenant-permission-cell:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.tenant-permission-cell[aria-disabled="true"] { cursor: progress; }



/* Grid Dialog. Grid soll scrollen, nicht der Dialog */
.rz-dialog.dlg-grid {
    display: flex;
    flex-direction: column;
}

    /* Content muss Resthöhe bekommen, darf schrumpfen, aber NICHT selbst scrollen */
    .rz-dialog.dlg-grid > .rz-dialog-content {
        flex: 1 1 auto; /* statt 0 1 auto */
        min-height: 0; /* entscheidend */
        overflow: hidden; /* verhindert den 2. Scroller */
        display: flex;
        flex-direction: column;
    }

        /* Grid füllt dann die Content-Fläche und scrollt intern */
        .rz-dialog.dlg-grid > .rz-dialog-content > .rz-data-grid.rz-grid-grow {
            flex: 1 1 auto;
            min-height: 0;
        }

/* Grid-Scrollbar auch im Dialog wie im Theme */
.rz-dialog .rz-data-grid-data::-webkit-scrollbar {
    width: var(--rz-scrollbar-size);
    height: var(--rz-scrollbar-size);
}

.rz-dialog .rz-data-grid-data::-webkit-scrollbar-track {
    background: var(--rz-scrollbar-background);
}

.rz-dialog .rz-data-grid-data::-webkit-scrollbar-thumb {
    background: var(--rz-scrollbar-color);
    border-radius: var(--rz-scrollbar-border-radius);
    border: var(--rz-scrollbar-border);
}

/* Firefox (falls relevant) */
.rz-dialog .rz-data-grid-data {
    scrollbar-width: thin;
    scrollbar-color: var(--rz-scrollbar-color) var(--rz-scrollbar-background);
}



/* Grid Goto Link mit Edit Control*/
.fk-editor-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0; /* wichtig, damit der Editor schrumpfen darf */
}

    .fk-editor-row .goto-link {
        flex: 0 0 auto; /* Link bleibt “klein” */
    }

    /* Optional: wenn dein Renderer Radzen Inputs/Dropdowns rendert,
   sorgt das dafür, dass der Editor den restlichen Platz nimmt */
    .fk-editor-row :is(.rz-dropdown, .rz-autocomplete, .rz-textbox, .rz-numeric, .rz-datepicker, .rz-inputtext) {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ===== Homescreen ===== */

/* Container and grid fill the content area (.rz-body-container is a flex column),
   so the edit-mode dots reach the footer without guessing header and footer heights. */
.homescreen-container {
    position: relative;
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.homescreen-edit-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.homescreen-grid {
    position: relative;
    width: 100%;
    flex: 1 0 auto;
}

.homescreen-grid.edit-mode {
    background-image: radial-gradient(circle, var(--rz-text-disabled-color) 1px, transparent 1px);
    background-size: 32px 32px;
}

.homescreen-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
    user-select: none;
    gap: 2px;
}

.homescreen-tile:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Widgets without hover effect (text, image, ...) are no links: no highlight and no hand cursor outside edit mode */
.homescreen-tile.no-hover {
    cursor: default;
}

.homescreen-tile.no-hover:hover {
    background-color: transparent;
}

.homescreen-tile .tile-icon {
    font-size: 28px;
    line-height: 1;
}

.homescreen-tile .tile-title {
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 2px;
}

/* Folder tile: own home screen inside; back tile at the top left while a folder is open */
.homescreen-folder-tile .tile-icon {
    color: var(--rz-primary);
}

/* Folder names are free text: the title may wrap to two lines before it is clipped */
.homescreen-folder-tile .tile-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.homescreen-back-tile {
    opacity: 0.7;
}

.homescreen-back-tile:hover {
    opacity: 1;
}

/* Text widget (host:text): plain text, size and alignment from the tile options */
.text-widget {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2px 6px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--rz-text-color);
    line-height: 1.25;
}

.text-widget-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
}

.text-widget.is-row .text-widget-text {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-widget-placeholder {
    opacity: 0.4;
    font-style: italic;
}

.text-widget-left { text-align: left; justify-content: flex-start; }
.text-widget-center { text-align: center; justify-content: center; }
.text-widget-right { text-align: right; justify-content: flex-end; }
.text-widget-s { font-size: 11px; }
.text-widget-m { font-size: 14px; }
.text-widget-l { font-size: 20px; }
.text-widget-xl { font-size: 28px; }

/* Image widget (host:image): the uploaded image fills the tile */
.image-widget {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--rz-border-radius);
}

.image-widget.has-link {
    cursor: pointer;
}

.image-widget-img {
    width: 100%;
    height: 100%;
    display: block;
}

.image-widget-img.fit-contain { object-fit: contain; }
.image-widget-img.fit-cover { object-fit: cover; }

.image-widget-placeholder {
    font-size: 28px;
    opacity: 0.4;
}

.image-widget-options-preview {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.image-widget-options-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-widget-options-preview .rzi {
    font-size: 40px;
    opacity: 0.4;
}

/* Menu tile (whole sub-menu / main menu): small marker so it is distinguishable from a page link */
.homescreen-menu-tile .tile-menu-badge {
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: 12px;
    line-height: 1;
    opacity: 0.6;
}

/* Drag image for menu entries dragged onto the homescreen (homescreen.js _setMenuDragImage): looks like the
   resulting tile, rendered off-screen only for the browser's drag snapshot */
.homescreen-tile.homescreen-drag-image {
    position: fixed;
    top: -1000px;
    left: -1000px;
    width: 64px;
    height: 64px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    pointer-events: none;
}

.homescreen-grid.edit-mode .homescreen-tile {
    animation: tile-wobble 0.3s ease-in-out infinite alternate;
    cursor: grab;
}

@keyframes tile-wobble {
    0% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0.5deg); }
}

.homescreen-tile .tile-delete {
    display: none;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rz-danger);
    color: white;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 5;
}

.homescreen-grid.edit-mode .homescreen-tile .tile-delete {
    display: block;
}

.homescreen-drop-ghost {
    position: absolute;
    border: 2px dashed var(--rz-primary);
    border-radius: var(--rz-border-radius);
    background: rgba(59, 130, 246, 0.1);
    pointer-events: none;
    display: none;
    z-index: 4;
}

/* Widget tile */
.homescreen-widget {
    background: transparent;
    border: none;
    overflow: visible;
}

.homescreen-widget .widget-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Widget resize handle (edit mode): bottom-right grip on grid tiles,
   right-edge grip on footer items. touch-action none for pointer-resize on touch. */
.tile-resize-handle {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.6);
    border-radius: 50%;
    cursor: nwse-resize;
    z-index: 5;
    touch-action: none;
    user-select: none;
}

.tile-resize-handle .rzi {
    font-size: 12px;
    color: white;
    pointer-events: none;
}

.tile-resize-handle:hover {
    background: var(--rz-primary);
}

.homescreen-tile.resizing {
    outline: 2px dashed var(--rz-primary);
    outline-offset: 2px;
}

.footer-resize-handle {
    position: absolute;
    right: -3px;
    top: 2px;
    bottom: 2px;
    width: 7px;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.6);
    cursor: ew-resize;
    z-index: 5;
    touch-action: none;
    user-select: none;
}

.footer-resize-handle:hover {
    background: var(--rz-primary);
}

.footer-dock-item.resizing {
    outline: 2px dashed var(--rz-primary);
    outline-offset: 1px;
}

/* Widget options button */
.widget-options-btn {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.6);
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    transition: opacity 0.15s ease;
}

.homescreen-grid.edit-mode .widget-options-btn,
.footer-dock-item.edit-mode .widget-options-btn {
    display: flex;
}

.widget-options-btn .rzi {
    font-size: 12px;
    color: white;
}

/* Widget picker panel (edit mode) */
.homescreen-widget-picker {
    position: fixed;
    right: 16px;
    top: 80px;
    width: 230px;
    /* Radzen gives .rz-body a transform, so it (not the viewport) is the frame of this fixed panel:
       100% instead of 100vh, otherwise the panel reaches under the footer and the body scrolls. */
    max-height: calc(100% - 96px);
    display: flex;
    flex-direction: column;
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    padding: 8px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.homescreen-widget-picker h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Group separator (System / app name) */
.widget-picker-group {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-primary);
    margin: 8px 0 4px;
    padding-top: 6px;
    border-top: 1px solid var(--rz-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-picker-list > .widget-picker-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Only the widget list scrolls, settings and search stay in place */
.widget-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.widget-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    cursor: grab;
    border-radius: var(--rz-border-radius);
    margin-bottom: 4px;
    gap: 4px;
}

.widget-picker-item:hover {
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
}

.widget-picker-item .rzi {
    font-size: 24px;
}

.widget-picker-item span {
    font-size: 11px;
}

.widget-picker-item .worker-avatar-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.widget-picker-item small {
    font-size: 9px;
    opacity: 0.5;
}

/* Widget picker: own layout per tenant (above the scrolling list, unaffected by search) */
.widget-picker-settings {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rz-border-color);
    font-size: 11px;
}

/* Compact select bar (Global | Tenant), both buttons share the row width */
.widget-picker-settings .rz-selectbar {
    display: flex;
    min-width: 0;
}

.widget-picker-settings .rz-selectbar .rz-button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
}

/* Unselected buttons have the panel color by default and would vanish into the picker */
.widget-picker-settings .rz-selectbar .rz-button:not(.rz-state-active):not(:hover) {
    background-color: var(--rz-input-background-color);
}

/* Widget picker search */
.widget-picker-search {
    width: 100%;
    padding: 4px 8px;
    margin-bottom: 8px;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: var(--rz-input-background-color);
    color: var(--rz-text-color);
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
}

.widget-picker-search:focus {
    border-color: var(--rz-primary);
}

.widget-picker-search::placeholder {
    opacity: 0.5;
}

/* Widget picker loading spinner */
.widget-picker-loading {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    opacity: 0.5;
}

.widget-picker-spinner {
    font-size: 22px;
    animation: widget-spin 1s linear infinite;
}

@keyframes widget-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* AI Worker Widget */
.ai-worker-widget {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    align-items: center;
}

.worker-head {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity 0.5s;
    flex-shrink: 0;
}

.worker-head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-head .rzi {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.worker-head.worker-pulse {
    animation: worker-pulse-anim 1.5s ease-in-out infinite;
}

@keyframes worker-pulse-anim {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1.0; }
}

/* AI Worker card; .is-row = one row (SpanY 1, footer) */
.aiw-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    color: var(--rz-text-color);
}

.aiw-card.is-working {
    background: color-mix(in srgb, var(--rz-success) 10%, var(--rz-card-background-color, var(--rz-base-background-color)));
}

.aiw-card.is-error {
    border-left: 3px solid var(--rz-danger);
}

.aiw-card.is-inactive {
    opacity: 0.6;
}

.aiw-card .aiw-card-avatar {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: var(--rz-base-100);
}

.aiw-card .aiw-card-avatar.is-link {
    cursor: pointer;
}

.aiw-card-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aiw-card-desc {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--rz-text-secondary-color);
}

.aiw-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.aiw-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.aiw-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

button.aiw-card-meta.is-link,
.aiw-card-desc-link {
    margin-left: -4px;
    padding: 1px 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

button.aiw-card-meta.is-link:hover,
.aiw-card-desc-link:hover {
    background: color-mix(in srgb, var(--rz-text-color) 12%, transparent);
}

/* No focus ring: the focus returns here when the opened dialog closes. */
button.aiw-card-meta.is-link:focus,
.aiw-card-desc-link:focus {
    outline: none;
}

.aiw-card-desc-link {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

.aiw-card .aiw-card-meta .rzi {
    font-size: 14px;
    opacity: 1;
}

.aiw-card .aiw-card-meta .is-danger {
    font-weight: 600;
}

.aiw-card .aiw-card-meta .is-danger .rzi {
    color: var(--rz-danger);
}

.aiw-card-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.aiw-card-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiw-card-state {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.aiw-card-status {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
}

.aiw-card .aiw-card-status .rzi {
    font-size: 0.8rem;
    opacity: 1;
}

.aiw-card-status.is-working {
    background: var(--rz-success);
    color: var(--rz-on-success);
    animation: worker-pulse-anim 1.5s ease-in-out infinite;
}

.aiw-card-status.is-waiting {
    background: var(--rz-info);
    color: var(--rz-on-info);
}

.aiw-card-status.is-error {
    background: var(--rz-danger);
    color: var(--rz-on-danger);
}

.aiw-card-status.is-inactive {
    background: var(--rz-secondary);
    color: var(--rz-on-secondary);
}

/* Stopped schedule of an agent (userstory 230): only chip and dot, the card itself is not faded. */
.aiw-card-status.is-stopped {
    background: var(--rz-secondary);
    color: var(--rz-on-secondary);
}

.aiw-card-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.aiw-card-dot.is-working {
    background: var(--rz-success);
    animation: worker-pulse-anim 1.5s ease-in-out infinite;
}

.aiw-card-dot.is-waiting {
    background: var(--rz-info);
}

.aiw-card-dot.is-error {
    background: var(--rz-danger);
}

.aiw-card-dot.is-inactive {
    background: var(--rz-secondary);
}

.aiw-card-dot.is-stopped {
    background: var(--rz-secondary);
}

.aiw-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.aiw-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.aiw-card-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--rz-text-color) 12%, transparent);
}

.aiw-card .aiw-card-btn .rzi {
    font-size: 16px;
    opacity: 1;
}

/* Play/Stop of the schedule: green and red like start/stop of the generated apps. */
.aiw-card-btn.is-play {
    background: var(--rz-success);
    color: var(--rz-on-success);
}

.aiw-card-btn.is-play:hover:not(:disabled) {
    background: var(--rz-success-dark);
    color: var(--rz-on-success-dark);
}

.aiw-card-btn.is-stop {
    background: var(--rz-danger);
    color: var(--rz-on-danger);
}

.aiw-card-btn.is-stop:hover:not(:disabled) {
    background: var(--rz-danger-dark);
    color: var(--rz-on-danger-dark);
}

.aiw-card-btn.aiw-card-run {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
}

.aiw-card-btn.aiw-card-run:hover:not(:disabled) {
    background: var(--rz-primary-dark);
    color: var(--rz-on-primary-dark);
}

.aiw-card-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.aiw-card.is-row {
    gap: 6px;
    padding: 2px 4px;
}

.aiw-card.is-row .aiw-card-avatar {
    border-radius: 50%;
}

.aiw-card.is-row .aiw-card-main {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.aiw-card.is-row .aiw-card-head {
    flex: 1 1 auto;
    align-items: center;
}

.aiw-card.is-row .aiw-card-name {
    font-size: 0.8rem;
}

.aiw-card.is-row .aiw-card-actions {
    gap: 2px;
}

.aiw-card.is-row .aiw-card-btn {
    width: 20px;
    height: 20px;
}

/* In the footer bar the card blends into the bar */
.footer-dock-item .aiw-card {
    border: none;
    background: transparent;
    color: inherit;
}

/* Who is here today widget (WhoIsHereWidget.razor): card, bar (one row) and mini layout */
.wih-widget {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    color: var(--rz-text-color);
}

.footer-dock-item .wih-widget {
    border: none;
    background: transparent;
    color: inherit;
}

.wih-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    cursor: default;
}

.wih-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wih-header-icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.wih-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.wih-title:hover {
    text-decoration: underline;
}

.wih-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 40%;
    padding: 0 8px;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    flex: 0 1 auto;
    min-width: 0;
}

.wih-chip .rzi {
    font-size: 13px;
}

.wih-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wih-empty {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.wih-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 3px;
    overflow: hidden;
}

.wih-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.wih-columns {
    columns: 2 170px;
    column-gap: 10px;
}

.wih-group {
    break-inside: avoid;
    margin-bottom: 8px;
    padding: 5px 8px 6px;
    /* Follows the text colour, so it stays subtler than the card frame in light and dark themes. */
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 6px;
}

.wih-group-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.wih-group-head .rzi {
    font-size: 16px;
}

.wih-group-name {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wih-group-count {
    font-size: 0.75rem;
    font-weight: 700;
}

.wih-person {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    min-width: 0;
}

.wih-avatar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.wih-avatar .z-profile-image {
    display: block;
}

.wih-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.wih-more {
    display: inline-block;
    margin-left: 29px;
    font-size: 0.75rem;
    color: var(--rz-primary);
    cursor: pointer;
}

.wih-more:hover {
    text-decoration: underline;
}

.wih-row,
.wih-mini {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wih-row {
    gap: 10px;
    padding: 0 10px;
}

.wih-stack {
    display: inline-flex;
    flex: 0 0 auto;
}

.wih-stack .z-profile-image {
    display: block;
    border: 2px solid var(--rz-card-background-color, var(--rz-base-background-color));
    box-sizing: content-box;
}

.wih-stack .z-profile-image + .z-profile-image {
    margin-left: -7px;
}

.wih-counter {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    font-size: 0.85rem;
    white-space: nowrap;
}

.wih-counter .rzi {
    font-size: 17px;
}

.wih-mini {
    justify-content: center;
    gap: 4px;
}

.wih-mini .rzi {
    font-size: 20px;
}

.wih-mini-count {
    font-size: 1.1rem;
    font-weight: 700;
}

.wih-mini-total {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* AI subscription usage widget */
.aiu-widget {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    color: var(--rz-text-color);
    font-size: 0.8rem;
    cursor: pointer;
}

.aiu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.aiu-logo {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
}

.aiu-logo.claude {
    -webkit-mask: url('/img/claude_logo.svg') center / contain no-repeat;
    mask: url('/img/claude_logo.svg') center / contain no-repeat;
}

.aiu-logo.codex {
    -webkit-mask: url('/img/codex_logo.svg') center / contain no-repeat;
    mask: url('/img/codex_logo.svg') center / contain no-repeat;
}

.aiu-logo.grok {
    -webkit-mask: url('/img/provider_xai.svg') center / contain no-repeat;
    mask: url('/img/provider_xai.svg') center / contain no-repeat;
}

.aiu-header-icon {
    font-size: 18px;
}

.aiu-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.aiu-refresh {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

.aiu-refresh:hover:not(:disabled) {
    background: color-mix(in srgb, var(--rz-text-color) 12%, transparent);
    color: var(--rz-text-color);
}

.aiu-refresh:disabled {
    cursor: default;
}

.aiu-refresh .rzi {
    font-size: 18px;
}

.aiu-refresh.is-loading .rzi {
    animation: widget-spin 1s linear infinite;
}

.aiu-windows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.aiu-windows.is-stale {
    opacity: 0.55;
}

.aiu-label {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.aiu-label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Radzen's progress bar track: light in light themes, dark in dark themes, so a pale primary still shows. */
.aiu-track {
    height: 6px;
    margin: 3px 0 2px;
    background-color: var(--rz-progressbar-background-color);
    border-radius: var(--rz-border-radius, 4px);
    overflow: hidden;
}

.aiu-fill {
    display: block;
    height: 100%;
}

.aiu-window small,
.aiu-updated,
.aiu-empty {
    color: var(--rz-text-secondary-color);
    font-size: 0.7rem;
}

.aiu-updated {
    margin-top: auto;
}

/* LED Widgets */
.led-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.led-widget.led-widget--labeled {
    justify-content: flex-start;
    gap: 8px;
    padding: 0 8px;
}

.led-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--led-color, var(--rz-base-400));
    transition: opacity 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.led-dot.led-off {
    opacity: 0.25;
    box-shadow: none;
}

.led-dot.led-on {
    opacity: 1;
    box-shadow: 0 0 6px 1px var(--led-color, var(--rz-base-400));
}

.led-dot.led-blink {
    animation: led-blink var(--led-blink, 800ms) steps(1, end) infinite;
}

@keyframes led-blink {
    0%, 49% {
        opacity: 1;
        box-shadow: 0 0 6px 1px var(--led-color, var(--rz-base-400));
    }
    50%, 100% {
        opacity: 0.2;
        box-shadow: none;
    }
}

.led-widget__label {
    font-size: 0.8rem;
    line-height: 1;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clock Widget */
.clock-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
}

.clock-widget-icon {
    font-size: 18px;
    opacity: 0.6;
}

.clock-widget-time {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Online Users Widget */
.online-users-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
}

.online-users-widget-icon {
    font-size: 18px;
    opacity: 0.6;
}

.online-users-widget-count {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Footer Dock (inside ZERPLiteFooter) */
.footer-dock-zone {
    display: none;
}

.footer-dock-zone:has(.footer-dock-item),
.footer-dock-zone.edit-mode {
    display: flex;
    align-items: center;
    padding: 0 6px;
}

/* Footer-Dock ist ein Desktop-Feature: Widget-Kacheln haben feste Breiten (SpanX * 32px)
   und koennen weder schrumpfen noch umbrechen — auf schmalen Geraeten wuerden sie
   abgeschnitten. Im Mobile-Modus komplett aus (gewinnt per Spezifitaet gegen die
   :has()-Anzeige-Regel oben). */
body.z-mobile-layout .footer-dock-zone {
    display: none;
}

.footer-dock-zone.edit-mode {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    min-height: 34px;
    min-width: 40px;
}

.footer-dock-items {
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-dock-item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.footer-dock-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.15);
}

.footer-dock-item.no-hover:hover {
    background: transparent;
    transform: none;
}

.footer-dock-item .rzi {
    font-size: 20px;
    opacity: 0.85;
}

.footer-dock-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.footer-dock-item .tile-delete {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    background: var(--rz-danger);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
}

.footer-dock-item .widget-options-btn {
    bottom: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
}

.footer-dock-item .widget-options-btn .rzi {
    font-size: 10px;
}

.footer-dock-item.edit-mode {
    animation: homescreen-wobble 0.3s ease-in-out infinite alternate;
}

.footer-dock-empty-slot {
    width: 30px;
    height: 30px;
    border: 2px dashed currentColor;
    opacity: 0.15;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-dock-empty-slot .rzi {
    font-size: 16px;
    opacity: 0.2;
}

.footer-dock-empty-slot.drag-over {
    border-color: var(--rz-primary);
    opacity: 0.7;
    background: rgba(var(--rz-primary-rgb, 51, 133, 255), 0.15);
    transition: all 0.15s ease;
}

.footer-dock-empty-slot.drag-over .rzi {
    opacity: 0.8;
}

.footer-drop-indicator {
    width: 3px;
    height: 32px;
    background: var(--rz-primary);
    border-radius: 2px;
    flex-shrink: 0;
    animation: footer-indicator-pulse 0.8s ease-in-out infinite;
}

@keyframes footer-indicator-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1.0; }
}

/* ============================================================================
   ZMarkDownViewer — structural / shared CSS
   ============================================================================ */
.host-howto-page {
    display: grid;
    gap: 3rem;
    width: 100%;
}

.host-howto-header {
    display: grid;
    gap: 1rem;
}

.host-howto-title {
    margin: 0;
    padding-top: 1rem;
}

.z-markdown-viewer {
    display: block;
}

.z-markdown-viewer__surface {
    position: relative;
    border: 1px solid var(--rz-base-300);
    padding: 1rem;
    padding-top: 2.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.z-markdown-viewer__surface--light {
    background-color: var(--z-md-surface-light-bg, #ffffff);
    color: var(--z-md-surface-light-color, #1a1a1a);
}

.z-markdown-viewer__surface--dark {
    background-color: var(--z-md-surface-dark-bg, #1a1a1a);
    color: var(--z-md-surface-dark-color, #e0e0e0);
}

/* Markierung: die Theme-Farben (.rz-layout ::selection) passen nur zur Theme-Fläche, nicht zur festen Hell/Dunkel-Fläche */
.z-markdown-viewer__surface.z-markdown-viewer__surface--light ::selection {
    background-color: var(--z-md-selection-light-bg, #b4d5fe);
    color: var(--z-md-selection-light-color, #1a1a1a);
}

.z-markdown-viewer__surface.z-markdown-viewer__surface--dark ::selection {
    background-color: var(--z-md-selection-dark-bg, #264f78);
    color: var(--z-md-selection-dark-color, #ffffff);
}

.z-markdown-viewer__toolbar {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    gap: 0.125rem;
    z-index: 1;
}

.z-markdown-viewer__btn {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.z-markdown-viewer__btn:hover {
    opacity: 1;
}

.z-markdown-viewer__surface--light .z-markdown-viewer__btn {
    color: var(--z-md-surface-light-color, #1a1a1a) !important;
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__btn {
    color: var(--z-md-surface-dark-color, #e0e0e0) !important;
}

.z-markdown-viewer__content {
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.z-markdown-viewer__content h1,
.z-markdown-viewer__content h2,
.z-markdown-viewer__content h3,
.z-markdown-viewer__content h4,
.z-markdown-viewer__content h5,
.z-markdown-viewer__content h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: inherit;
}

.z-markdown-viewer__content h1 {
    font-size: 1.75em;
    border-bottom: 1px solid var(--rz-base-300);
    padding-bottom: 0.3em;
}

.z-markdown-viewer__content h2 {
    font-size: 1.4em;
    border-bottom: 1px solid var(--rz-base-300);
    padding-bottom: 0.25em;
}

.z-markdown-viewer__content h3 {
    font-size: 1.2em;
}

.z-markdown-viewer__content p {
    margin: 0.5em 0;
}

.z-markdown-viewer__content code {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content code {
    background-color: var(--z-md-code-light-bg, #f1f3f5);
    color: var(--z-md-code-light-color, #be185d);
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__content code {
    background-color: var(--z-md-code-dark-bg, #2b313a);
    color: var(--z-md-code-dark-color, #f472b6);
}

.z-markdown-viewer__content pre {
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75em 0;
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content pre {
    background-color: var(--z-md-pre-light-bg, #eceff3);
    border: 1px solid var(--z-md-pre-light-border, #d7dbe0);
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__content pre {
    background-color: var(--z-md-pre-dark-bg, #2d2d2d);
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content pre code,
.z-markdown-viewer__surface--dark .z-markdown-viewer__content pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.z-markdown-viewer__content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75em 0;
}

.z-markdown-viewer__content th,
.z-markdown-viewer__content td {
    padding: 0.5em 0.75em;
    text-align: left;
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content th,
.z-markdown-viewer__surface--light .z-markdown-viewer__content td {
    border: 1px solid var(--z-md-table-light-border, #ddd);
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__content th,
.z-markdown-viewer__surface--dark .z-markdown-viewer__content td {
    border: 1px solid var(--z-md-table-dark-border, #444);
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content th {
    background-color: var(--z-md-th-light-bg, #f0f0f0);
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__content th {
    background-color: var(--z-md-th-dark-bg, #2d2d2d);
}

.z-markdown-viewer__content blockquote {
    margin: 0.75em 0;
    padding: 0.5em 1em;
    border-left: 4px solid var(--rz-primary);
}

.z-markdown-viewer__surface--light .z-markdown-viewer__content blockquote {
    background-color: var(--z-md-blockquote-light-bg, #f9f9f9);
}

.z-markdown-viewer__surface--dark .z-markdown-viewer__content blockquote {
    background-color: var(--z-md-blockquote-dark-bg, #2a2a2a);
}

.z-markdown-viewer__content ul,
.z-markdown-viewer__content ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

.z-markdown-viewer__content hr {
    border: none;
    border-top: 1px solid var(--rz-base-300);
    margin: 1em 0;
}

.z-markdown-viewer__content a {
    color: var(--rz-primary);
    text-decoration: none;
}

.z-markdown-viewer__content a:hover {
    text-decoration: underline;
}

.z-markdown-viewer__content img {
    max-width: 100%;
    height: auto;
}

.z-markdown-viewer__empty {
    opacity: 0.5;
    font-style: italic;
    padding: 0.5em 0;
}

/* ============================================================================
   ZJsonViewer — structural / shared CSS
   ============================================================================ */
.z-json-viewer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.z-json-viewer__error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

.z-json-viewer__surface {
    overflow: visible;
}

.z-json-viewer__empty {
    padding: 0.9rem 1rem;
    opacity: 0.78;
    font-size: 0.9rem;
}

/* /Sys/AiToolLog double-click dialog: the JSON viewer fills the whole dialog body. */
.rz-dialog:has(.ai-toollog-json) {
    display: flex;
    flex-direction: column;
}

.rz-dialog-content:has(.ai-toollog-json) {
    flex: 1 1 auto;
    min-height: 0;
}

.ai-toollog-json {
    height: 100%;
}

    .ai-toollog-json .z-json-viewer,
    .ai-toollog-json .z-json-viewer__surface {
        height: 100%;
    }

    .ai-toollog-json .z-json-viewer__code-frame {
        height: 100%;
        min-height: 0;
    }

/* Fehler- bzw. Operation-Text im Detail-Reiter der Log-Masken (Farben via rz-*-Klassen) */
.ai-toollog-error,
.agent-apicall-operation {
    margin: 0;
    padding: 0.5rem;
    max-height: 40vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--rz-border-radius);
}

.z-json-viewer__code-frame {
    position: relative;
    min-height: var(--z-json-viewer-height, calc(12 * 1.55em + 1.8rem));
    height: var(--z-json-viewer-height, calc(12 * 1.55em + 1.8rem));
    overflow: auto;
    scrollbar-gutter: stable;
    color: var(--rz-input-value-color, var(--rz-text-color));
    background-color: var(--rz-input-background-color, var(--rz-base-50));
    border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)));
    border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))));
    border-radius: var(--rz-input-border-radius, 12px);
    box-shadow: var(--rz-input-shadow);
    transition: var(--rz-input-transition, all .15s ease);
    outline: none;
    cursor: text;
}

.z-json-viewer__code-frame--resizable {
    resize: vertical;
    max-height: var(--z-json-viewer-max-height, none);
}

.z-json-viewer__code-frame:hover {
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color, var(--rz-base-50));
    border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)));
    border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))));
}

.z-json-viewer__code-frame:focus,
.z-json-viewer__code-frame:focus-visible,
.z-json-viewer__code-frame:focus-within {
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color, var(--rz-base-50));
    border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)));
    border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))));
    outline: var(--rz-input-focus-outline, none);
    outline-offset: var(--rz-input-focus-outline-offset, 0);
}

.z-json-viewer__code {
    margin: 0;
    padding-top: var(--rz-input-padding-block, .625rem);
    padding-right: var(--rz-input-padding-inline, .75rem);
    padding-bottom: var(--rz-input-padding-block, .625rem);
    padding-left: var(--rz-input-padding-inline, .75rem);
    min-height: 100%;
    overflow: visible;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.87rem;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
}

.z-json-viewer__code--wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.z-json-viewer__copy-btn {
    position: absolute;
    top: calc(var(--rz-input-padding-block, .625rem) - 0.05rem);
    right: calc(var(--rz-input-padding-inline, .75rem) + 0.7rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-base-background-color, var(--rz-base)) 78%, transparent);
    backdrop-filter: blur(2px);
}

.z-json-viewer__copy-btn .rz-button-text {
    display: none;
}

.z-json-viewer__copy-btn .rzi {
    font-size: 1rem;
}

.z-json-viewer__token--punct {
    color: var(--rz-text-color);
}

.z-json-viewer__token--key {
    color: var(--rz-primary);
}

.z-json-viewer__token--string {
    color: var(--rz-success);
}

.z-json-viewer__token--number {
    color: var(--rz-info);
}

.z-json-viewer__token--bool {
    color: var(--rz-warning);
    font-weight: 600;
}

.z-json-viewer__token--null {
    color: var(--rz-danger);
    font-style: italic;
}



/* ===================================================================
 * ZGrid — generic mobile / accordion view
 * Active when ZGrid.UseMobileInlineView is true (mobile viewport or
 * forced Mobile Device Mode). Theme-safe: uses card-background-color
 * + text-color for adaptive surfaces; semantic colors paired with on-*.
 * =================================================================== */

.zgrid-desktop-hidden {
    display: none !important;
}

/* Desktop-Grid temporaer sichtbar wenn editiert wird (Inline-Edit-Row) */
.zgrid-desktop-shown-for-edit {
    display: block;
}

.zgrid-mob-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: var(--rz-card-background-color);
    border-bottom: 1px solid var(--rz-base-border-color);
}

.zgrid-mob-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-border-color);
}

.zgrid-mob-search-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.95rem;
}

.zgrid-mob-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.zgrid-mob-actions > .rz-button {
    min-width: 42px;
    min-height: 42px;
    padding: 0 0.8rem;
}

.zgrid-mob-hamburger {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-border-color);
    border-radius: 6px;
    overflow: hidden;
    background: var(--rz-card-background-color);
    margin-top: 0.25rem;
}

.zgrid-mob-hamburger-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rz-base-border-color);
    color: var(--rz-text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.zgrid-mob-hamburger-item:last-child {
    border-bottom: none;
}

.zgrid-mob-hamburger-item:hover:not([disabled]) {
    background: var(--rz-base-100);
    color: var(--rz-base-900);
}

.zgrid-mob-hamburger-item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.zgrid-mob-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 1.5rem 0.6rem;
}

.zgrid-mob-card {
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-base-border-color);
    border-radius: 6px;
    overflow: hidden;
    color: var(--rz-text-color);
}

.zgrid-mob-card.is-expanded {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.zgrid-mob-card.is-editing {
    border-color: var(--rz-primary);
}

.zgrid-mob-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    min-height: 56px;
}

.zgrid-mob-card-headmain {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.zgrid-mob-card-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

.zgrid-mob-card-line:first-child {
    font-weight: 600;
}

.zgrid-mob-card-chevron {
    flex: 0 0 auto;
    color: var(--rz-text-color);
    opacity: 0.7;
}

.zgrid-mob-card-body {
    padding: 0.6rem 0.7rem 0.8rem 0.7rem;
    border-top: 1px solid var(--rz-base-border-color);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.zgrid-mob-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.2rem 0;
    border-bottom: 1px dashed var(--rz-base-border-color);
}

.zgrid-mob-card-detail:last-of-type {
    border-bottom: none;
}

.zgrid-mob-card-detail-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.65;
}

.zgrid-mob-card-detail-value {
    font-size: 0.95rem;
    word-break: break-word;
}

.zgrid-mob-card-edit-hint {
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: var(--rz-info);
    color: var(--rz-on-info);
    font-size: 0.85rem;
}

.zgrid-mob-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.zgrid-mob-card-actions > .rz-button {
    flex: 1 1 calc(50% - 0.4rem);
    min-height: 42px;
}

.zgrid-mob-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--rz-text-color);
    opacity: 0.65;
}


/* ZGrid mobile auto-edit-form */
.zgrid-mob-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.zgrid-mob-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.zgrid-mob-edit-field-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.75;
    color: var(--rz-text-color);
}

.zgrid-mob-edit-field-required {
    color: var(--rz-danger);
    margin-left: 0.15rem;
}

.zgrid-mob-edit-field-readonly {
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    background: var(--rz-base-background-color);
    border: 1px dashed var(--rz-base-border-color);
    color: var(--rz-text-color);
    word-break: break-word;
}

/* Form-Controls bei schmaler Breite immer 100% */
.zgrid-mob-edit-field .rz-textbox,
.zgrid-mob-edit-field .rz-dropdown,
.zgrid-mob-edit-field .rz-datepicker,
.zgrid-mob-edit-field .rz-numeric,
.zgrid-mob-edit-field .rz-password {
    width: 100% !important;
}

/* Im Edit-Modus gibt es keinen Card-Head -> oberen Trenner weglassen */
.zgrid-mob-card.is-editing .zgrid-mob-card-body {
    border-top: none;
}

/* Secret-Eingabefelder (ZFormFieldText IsSecret): type="text" mit CSS-Maskierung,
   damit Browser-Passwortmanager sie ignorieren (kein Speichern-Dialog, kein Autofill). */
input.z-secret-mask,
.z-secret-mask input,
textarea.z-secret-mask,
.z-secret-mask textarea {
    -webkit-text-security: disc;
}

/* Persönliche KI-Logins (Claude, Codex, Grok): Schritte während der Anmeldung */
.ai-login-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-login-steps > li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem 0;
}

.ai-login-steps > li + li {
    border-top: var(--rz-border-normal);
}

.ai-login-step-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--rz-text-secondary-color);
}

.ai-login-steps > li.is-active .ai-login-step-number {
    color: var(--rz-primary);
}

.ai-login-steps > li.is-done .ai-login-step-number {
    border-color: var(--rz-success);
    background: var(--rz-success);
    color: var(--rz-on-success);
}

.ai-login-step-title {
    display: block;
    margin: .3rem 0 .6rem;
    color: var(--rz-text-secondary-color);
}

.ai-login-steps > li.is-active .ai-login-step-title {
    font-weight: 600;
    color: var(--rz-text-color);
}

/* Links als Knopf: zentriert wie ein <button>, auch bei voller Breite und 44px Höhe (mobil) */
.ai-login-steps a.rz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}

.ai-login-step-hint,
.ai-login-reopen {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
}

.ai-login-step-hint {
    color: var(--rz-text-secondary-color);
}

.ai-login-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: .5rem;
    padding-top: 1rem;
    border-top: var(--rz-border-normal);
}

/* Hauptmenü-Editor (Mandanten-Ordner) */
.mm-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

/* Dialog: feste Höhe (75vh, DialogOptions.Height), damit er beim Auf-/Zuklappen und Auswählen nicht springt; die Listen füllen den Rest */
.rz-dialog.mm-editor-dialog {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.rz-dialog.mm-editor-dialog .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rz-dialog.mm-editor-dialog .mm-editor {
    flex: 1 1 auto;
}

.mm-editor-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    opacity: 0.8;
}

.mm-editor-columns {
    display: flex;
    gap: 8px;
    flex: 1 1 0;
    min-height: 260px;
}

.mm-editor-pane {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.mm-editor-pane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-weight: 600;
    border-bottom: 1px solid var(--rz-base-300);
}

.mm-editor-toolbar {
    display: flex;
    gap: 2px;
}

/* Umschalter Mandanten-Ordner/Meine Ordner nie zweizeilig; wird es zu eng (Themes mit Großbuchstaben), rutschen die Buttons darunter */
.mm-editor-pane-title {
    flex-wrap: wrap;
}

.mm-editor-pane-title .rz-selectbar .rz-button {
    white-space: nowrap;
}

.mm-editor-list {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 4px;
    min-height: 160px;
}

/* Rechte Liste: freie Fläche unter den Ordnern als Ablageziel, auch bei voller Liste am Ende erreichbar */
.mm-editor-list-folders {
    display: flex;
    flex-direction: column;
}

.mm-editor-list-rest {
    flex: 1 0 32px;
    border: 1px dashed transparent;
    border-radius: 4px;
}

.mm-editor-list-rest-hint {
    border-color: var(--rz-primary);
    background-color: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.mm-editor-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.mm-editor-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    color: var(--rz-text-color);
    border: 1px dashed transparent;
}

.mm-editor-row:hover {
    /* Transparente Primary-Tönung: Schriftfarbe bleibt die des Themes, lesbar hell wie dunkel. */
    background-color: color-mix(in srgb, var(--rz-primary) 18%, transparent);
}

.mm-editor-droptarget {
    border-color: var(--rz-primary);
}

/* Rechts beim Ziehen: Ablagezonen über der Zeile, Markierung nur an der Zeile unter der Maus */
.mm-editor-row {
    position: relative;
}

.mm-editor-dropzone {
    position: absolute;
    left: 0;
    right: 0;
}

.mm-editor-drop-before {
    box-shadow: inset 0 2px 0 var(--rz-primary);
}

.mm-editor-drop-after {
    box-shadow: inset 0 -2px 0 var(--rz-primary);
}

.mm-editor-drop-into {
    border: 1px solid var(--rz-primary);
}

.mm-editor-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.mm-editor-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rechteprüfung: Link, den keiner der ausgewählten Rollen und Benutzer sieht */
.mm-editor-title-unreachable {
    opacity: 0.55;
}

.mm-editor-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Unterordner, Verschieben und Löschen an der markierten Zeile rechts; negativer Rand, damit die Zeile nicht höher wird */
.mm-editor-row-actions {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
    margin: -5px 0;
}

/* Schriftfarbe der markierten Zeile übernehmen, lesbar hell wie dunkel */
.mm-editor-row-actions .rz-button.rz-variant-text.rz-base {
    color: inherit;
}

.mm-editor-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.9rem;
}

.mm-editor-details-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mm-editor-details {
    padding: 8px 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
}

.mm-editor-details-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mm-editor-details-row > * {
    flex: 1 1 220px;
    min-width: 0;
}

.mm-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mm-editor-details-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.mm-editor-busy > :not(.mm-editor-footer) {
    pointer-events: none;
    opacity: 0.7;
}

/* "Was gibt's Neues?": Video- und Bild-Dialog über dem Seitenpanel (beide haben sonst --rz-dialog-zindex, das Panel steht im DOM später) */
.rz-dialog-wrapper.whats-new-media-dialog {
    z-index: calc(var(--rz-dialog-zindex) + 1);
}

/* Trainings-Markdown (TrainingDocumentDialog): nur die Markdown-Fläche scrollt, die Folien-Navigation bleibt sichtbar.
   Trainingsübersicht (TrainingVideosDialog): nur die Kacheln scrollen, Suche und Filter bleiben sichtbar. */
.rz-dialog-content.training-document-dialog,
.rz-dialog-content.training-videos-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Schiebe-Bestätigung (SlideConfirmDialog): js/zSlideConfirm.js setzt --z-slide (0..1) am Track, Farben über rz-Klassen im Markup */
.z-slide-confirm {
    --z-slide-thumb: 2.75rem;
    position: relative;
    height: calc(var(--z-slide-thumb) + 2 * var(--rz-border-width));
    border: var(--rz-border-normal);
    border-radius: calc(5 * var(--rz-border-radius));
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.z-slide-confirm__fill,
.z-slide-confirm__thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: left var(--z-slide-speed, 0.2s) ease, width var(--z-slide-speed, 0.2s) ease;
}

.z-slide-confirm__fill {
    left: 0;
    width: calc(var(--z-slide-thumb) + (100% - var(--z-slide-thumb)) * var(--z-slide, 0));
}

.z-slide-confirm__thumb {
    left: calc((100% - var(--z-slide-thumb)) * var(--z-slide, 0));
    width: var(--z-slide-thumb);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    cursor: grab;
}

.z-slide-confirm__thumb:active {
    cursor: grabbing;
}

/* Thumb ist primary: Fokusrahmen in on-primary, innen liegend (Track schneidet außen ab) */
.z-slide-confirm__thumb:focus-visible {
    outline: var(--rz-outline-width) solid var(--rz-on-primary);
    outline-offset: -0.25rem;
}

.z-slide-confirm--done .z-slide-confirm__thumb {
    cursor: default;
}

.z-slide-confirm__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--z-slide-thumb) + 0.5rem) 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    opacity: calc(1 - var(--z-slide, 0));
    pointer-events: none;
}