/* 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;
}   

/* 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;
}

/* 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;
}


.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;
}


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;
}

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

.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;
}

/* 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%;
}

    /* 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: rgb(135, 164, 196);
}

/* 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-bg, #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;
}


/* 1) Unterlinie des FormField-Containers abschalten */
.rz-form-field.rz-variant-filled .rz-form-field-content {
    border-bottom: none !important;
}

/* 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);
    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);
    overflow: auto;
    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));
}

/* (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-rows: auto 1fr auto; /* Header / Body / Composer */
}

/* ---------- 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);
}

    .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;
    gap: 10px;
    align-items: flex-end;
}

    .erpchat-composer textarea {
        flex: 1 1 auto;
        resize: none;
        max-height: 30vh;
        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;
    }

        .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;
}











/* ---------- 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);
    overflow: auto; /* falls Inhalt länger */
    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 */
/* Minimal, eigenständig, ohne Radzen */

/* Grundfarben */
:root {
    --bg: #ffffff;
    --fg: #0b1220;
    --muted: #4b5563;
    --ok: #16a34a; /* grün */
    --err: #ef4444; /* rot  */
    --warn: #f59e0b; /* gelb */
    --accent: #2563eb;
    --track: #e5e7eb;
    --shadow: 0 10px 24px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
}

/* Container (stack) */
.zlc {
    position: fixed;
    background-color: transparent !important;
    top: 12px;
    right: 12px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Karte */
.zlc-card {
    pointer-events: auto;
    width: clamp(260px, 30vw, 360px);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 14px 16px 16px 16px;
    position: relative;
    animation: slide-in .15s ease-out;
}

/* Titel + Sub */
.zlc-title {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
}

.zlc-sub {
    margin-top: 6px;
    font-size: .82rem;
    color: var(--muted);
}


.zlc-x-btn, .zlc-stop-btn {
    min-width: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.zlc-x-btn {
    color: #6b7280 !important;
}

    .zlc-x-btn:hover {
        background: #f3f4f6 !important;
        color: #111827 !important;
    }

.zlc-stop-btn {
    color: #991b1b !important;
}

    .zlc-stop-btn:hover {
        background: #fee2e2 !important;
        color: #7f1d1d !important;
    }

/* Progress (nur Running sichtbar) */
.zlc-bar {
    margin-top: 8px;
    height: 10px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}

    .zlc-bar .fill {
        height: 100%;
        background: var(--accent);
        transition: width .2s ease;
    }

    /* Indeterminate Balken */
    .zlc-bar.indet {
        position: relative;
    }

    .zlc-bar .indet-run {
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.18) 55%, transparent 100%);
        animation: indet 1.1s linear infinite;
    }

/* Sofortige Status-Hintergründe nach Abschluss */
.zlc-card.ok {
    background: #ecfdf5; /* grünlicher Hintergrund */
    border-color: #86efac;
}

    .zlc-card.ok .zlc-title {
        color: #065f46;
    }

    .zlc-card.ok .zlc-sub {
        color: #0f5132;
    }

.zlc-card.err {
    background: #fef2f2; /* rötlicher Hintergrund */
    border-color: #fca5a5;
}

    .zlc-card.err .zlc-title {
        color: #7f1d1d;
    }

    .zlc-card.err .zlc-sub {
        color: #842029;
    }

.zlc-card.can {
    background: #fffbeb; /* gelblicher Hintergrund */
    border-color: #fcd34d;
}

    .zlc-card.can .zlc-title {
        color: #713f12;
    }

    .zlc-card.can .zlc-sub {
        color: #7c5800;
    }

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

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

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

@keyframes indet {
    to {
        transform: translateX(100%)
    }
}

/* Dark Mode (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --fg: #e5e7eb;
        --muted: #9ca3af;
        --track: #1f2937;
        --shadow: 0 10px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    }

    .zlc-x:hover {
        background: #111827;
        color: #fff;
    }
}

/* Kleine Screens */
@media (max-width: 420px) {
    .zlc {
        right: 8px;
        left: 8px;
    }

    .zlc-card {
        width: 100%;
    }
}



/* 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 */
/* Login Page Styles */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    padding-top: 10vh;
}

/* Animated Background */
.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
}

.login-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s infinite ease-in-out;
}

    .login-shape:nth-child(1) {
        width: 500px;
        height: 500px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        top: -250px;
        left: -250px;
        animation-delay: 0s;
    }

    .login-shape:nth-child(2) {
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        bottom: -200px;
        right: -200px;
        animation-delay: -10s;
    }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, 50px) scale(1.1);
    }

    50% {
        transform: translate(30px, -30px) scale(0.9);
    }

    75% {
        transform: translate(-50px, 30px) scale(1.05);
    }
}

/* Login Card */
.login-card {
    background: rgba(45, 45, 68, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Header */
.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

    .login-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .login-header p {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.95rem;
        margin: 0;
    }

/* Form Styles */
.login-content {
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        font-weight: 500;
    }

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 1;
}

.form-control-modern {
    width: 100%;
    padding: 0.9rem 1rem 0.9rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

    .form-control-modern::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    .form-control-modern:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.08);
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* Form Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0;
}

.checkbox-modern {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.forgot-password {
    color: #667eea;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

    .forgot-password:hover {
        color: #764ba2;
    }

/* Login Button */
.btn-login {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }

    .btn-login:active {
        transform: translateY(0);
    }

    .btn-login .arrow {
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .btn-login:hover .arrow {
        transform: translateX(4px);
    }

/* Footer Links */
.login-footer {
    margin-top: 2rem;
    text-align: center;
}

    .login-footer p {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }

.link-register {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .link-register:hover {
        color: #764ba2;
    }

.link-secondary {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

    .link-secondary:hover {
        color: rgba(255, 255, 255, 0.8);
    }

/* External Login Section */
.external-login-section {
    margin-top: 2rem;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0 1.5rem 0;
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .divider span {
        padding: 0 1rem;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.85rem;
    }

/* Validation Messages */
.validation-summary {
    background: rgba(245, 87, 108, 0.1);
    border: 1px solid rgba(245, 87, 108, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.text-danger {
    color: #f5576c !important;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* Responsive Design */
@media (max-width: 640px) {
    .login-card {
        padding: 2rem 1.5rem;
    }

    .login-header h1 {
        font-size: 1.75rem;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Dark Theme Adjustments */
@media (prefers-color-scheme: dark) {
    .login-background {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
}



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

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

.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;
}




/* 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);
}


/* 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;
}

/* 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;
}



.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: #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;
}



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;
}

    /* 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
}



/* 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.75rem;
    color: var(--rz-text-secondary-color, #888);
    margin-top: 2px;
}



/* 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;
    }