@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* =================================================================
   .vb-space-bg — shared "Pixel Space" backdrop, opt-in.
   Same recipe as Workflow Designer .vb-canvas and Login .login-left-section:
   navy gradient base + pulsing nebula radials (::before) + drifting
   tri-color star grid (::after). Apply by adding the class to any
   element that wants the backdrop; ensure that element is positioned
   (the rule sets position:relative) and that direct children that
   should sit ABOVE the stars use position:relative; z-index:1.
   ================================================================= */
.vb-space-bg {
    position: relative;
    background: linear-gradient(135deg, #0b1220 0%, #13294b 45%, #0b3a6d 100%);
    color: #fff;
    overflow: hidden;
}
.vb-space-bg::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(0, 196, 180, .22) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(14, 165, 233, .18) 0%, transparent 50%),
        radial-gradient(circle at 60% 15%, rgba(212, 175, 55, .10) 0%, transparent 45%);
    animation: vb-space-pulse 6s ease-in-out infinite;
}
.vb-space-bg::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1px),
        radial-gradient(circle, rgba(0, 196, 180, .50) 1px, transparent 1px),
        radial-gradient(circle, rgba(212, 175, 55, .45) 1px, transparent 1px);
    background-size: 60px 60px, 90px 90px, 130px 130px;
    background-position: 0 0, 30px 50px, 70px 20px;
    animation: vb-space-drift 24s linear infinite;
    opacity: .55;
}
.vb-space-bg > * { position: relative; z-index: 1; }

@keyframes vb-space-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .75; transform: scale(1.04); }
}
@keyframes vb-space-drift {
    0%   { background-position:   0   0,  30px  50px,  70px  20px; }
    100% { background-position: 60px 60px, 120px 140px, 200px 150px; }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

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

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

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

    .title.title-secondary {
        padding-top: 0.313rem;
        padding-bottom: 0;
        color: var(--bs-secondary-color);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(to right, #4e54c8, #8f94fb);
    color: white;
}

.cta {
    background-color: #fff;
    color: #4e54c8;
    padding: 0.75rem 1.5rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

.features {
    padding: 2rem;
    background-color: #f9f9f9;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.card {
    background: var(--bs-body-bg, #fff);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}



footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}
/*testmonials*/
.testimonials {
    padding: 2rem;
    background-color: #f0f4ff;
    text-align: center;
}

blockquote {
    font-style: italic;
    font-size: 1.2rem;
    margin: 1rem auto;
    max-width: 600px;
}

footer {
    margin-top: 0.5rem;
    font-weight: bold;
    color: #555;
}

.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 88vh; /* Adjust 100px for header/footer */
    overflow: hidden; /* Prevent extra scrollbars */
}

    .iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Fill wrapper completely */
        border: none;
        background: transparent;
    }

/* Loading overlay: dead-centre of the iframe wrapper (covers full wrapper, flex-centres
   the spinner+text both axes). Faint backdrop tints the area while the iframe loads.
   !important guards against scoped CSS bundles (Blazor *.razor.css) and any cached
   `top:1rem; left:50%; transform: translateX(-50%)` rules that previously anchored the
   spinner to the top-left of the page. */
.iframe-wrapper > .loading-overlay,
.loading-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 10;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    pointer-events: none;
}

/*App Menu*/
.app-menu-container {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 95%, var(--bs-body-color, #212529) 5%);
    min-height: 100vh;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

.app-menu-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--bs-body-bg, #fff);
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

    .app-menu-header h1 {
        color: var(--bs-body-color, #333);
        font-weight: 700;
        margin-bottom: 0.5rem;
        font-size: 2.5rem;
    }




.app-menu-icon {
    color: var(--bs-primary);
    font-size: 1.75rem; /* slightly smaller than text */
    margin-inline-end: 0.5rem;
}


.app-menu-badge {
    background-color: var(--bs-primary); /* Bootstrap primary color */
    color: #fff; /* Ensure text stays readable */
}



.module-section {
    margin-bottom: 3rem;
}

.section-title {
    color: var(--bs-primary);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--bs-primary);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.module-grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.module-card {
    position: relative;
    background: var(--bs-body-bg, #fff);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
}

.module-newtab-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-secondary-color, #adb5bd);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

[dir="rtl"] .module-newtab-btn {
    right: auto;
    left: 10px;
}

.module-card:hover .module-newtab-btn {
    opacity: 1;
}

.module-newtab-btn:hover {
    background: var(--bs-primary);
    color: #fff;
    transform: scale(1.15);
}

    .module-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--bs-primary, #0d6efd) 30%, transparent);
        border-color: var(--bs-primary);
    }

.module-icon {
    width: 100px;
    height: 100px;
    /*background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-indigo) 100%);*/
    background: linear-gradient(135deg, var(--bs-primary) 0%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.module-card:hover .module-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--bs-primary, #0d6efd) 40%, transparent);
}

.module-icon i {
    font-size: 3rem;
    color: #fff;
}

.module-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color, #333);
    margin-bottom: 0.5rem;
}

.module-card p {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0;
}

.pin-option {
    background: var(--bs-body-bg, #fff);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

    .pin-option label {
        cursor: pointer;
        font-size: 1rem;
        margin-bottom: 0;
    }

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .app-menu-container {
        padding: 1rem;
    }

    .app-menu-header h1 {
        font-size: 2rem;
    }

    .module-grid,
    .module-grid-4 {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .module-card {
        padding: 1.5rem;
    }

    .module-icon {
        width: 80px;
        height: 80px;
    }

        .module-icon i {
            font-size: 2.5rem;
        }

    .section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .app-menu-container {
        padding: 0.75rem;
    }

    .module-grid,
    .module-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .module-card {
        padding: 1rem;
    }

    .module-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

        .module-icon i {
            font-size: 2rem;
        }

    .module-card h3 {
        font-size: 1rem;
        word-break: break-word;
    }

    .module-card p {
        font-size: 0.8rem;
    }
}

/*.dx-menu-item[aria-disabled="true"] {
    font-weight: bold;
    color: #fff;
    background-color: #004080;*/ /* Dark blue header */
/*cursor: default;
    pointer-events: none;*/ /* Prevent click */
/*}*/

.menu-group-title {
    font-weight: bold;
    color: #555;
    cursor: default;
    padding-left: 10px;
    background-color: #f0f0f0;
    border-top: 1px solid #ccc;
    pointer-events: none; /* Prevent click */
}

    .menu-group-title .dx-menu-item-text {
        text-transform: uppercase;
        font-weight: 600;
        opacity: .7;
        letter-spacing: .04em;
    }

.menu-group-collapsible {
    cursor: pointer;
    pointer-events: auto;
}

.menu-child-item .dx-menu-item-text {
    padding-left: 12px;
}

/*Overview.razor*/
.overview-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.overview-header {
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.user-info-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar {
    color: white;
}

.user-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

    .user-avatar-large .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .user-avatar-large .avatar-initials {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.stat-card {
    background: var(--bs-body-bg, #fff);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    font-size: 1.5rem;
}

.stat-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: #333;
}

.stat-content p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-header {
    background: var(--bs-body-bg, #fff);
    border-bottom: 2px solid var(--bs-border-color, #f0f0f0);
    padding: 1.25rem;
    border-radius: 12px 12px 0 0;
}

.btn-lg {
    padding: 1rem 1.5rem;
}

.token-claims-list {
    max-height: 300px;
    overflow-y: auto;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.claim-item {
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

    .claim-item:last-child {
        border-bottom: none;
    }

    .claim-item small {
        word-break: break-word;
    }

    .claim-item .text-muted {
        flex-shrink: 0;
        font-weight: 600;
    }

@media (max-width: 768px) {
    .overview-container {
        padding: 1rem;
    }

    .overview-header {
        padding: 1.5rem;
    }

    .user-info-card {
        margin-top: 1rem;
    }

    .claim-item {
        flex-direction: column;
    }
}



/*Index.razor*/
.index-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header styling similar to Overview */
.index-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Cards grid */
.welcome-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Gradient cards */
.gradient-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.25rem 1.25rem;
    border-radius: 16px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    overflow: hidden;
}

    .gradient-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

    .gradient-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);
        text-decoration: none;
        color: white;
    }

    .gradient-card:hover .card-icon {
        transform: scale(1.12);
    }

    .gradient-card:hover .card-newtab-btn {
        opacity: 1;
    }

.card-newtab-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

[dir="rtl"] .card-newtab-btn {
    right: auto;
    left: 10px;
}

.card-newtab-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: scale(1.15);
}

/* Card content */
.card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    z-index: 1;
}

    .card-content h3 {
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }

.card-icon {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
}

    .card-icon svg {
        width: 100%;
        height: 100%;
        fill: white;
        color: white;
    }


/* Responsive */
@media (max-width: 768px) {
    .index-container {
        padding: 1rem;
    }

    .gradient-card {
        padding: 1.5rem;
    }
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    display: inline-block;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Fluent Light custom */
:root[data-theme="fluent-custom"] {
    --bs-primary: var(--custom-primary, #0d6efd);
    --bs-link-color: var(--custom-primary, #0d6efd);
    --bs-focus-ring-color: color-mix(in oklab, var(--custom-primary, #0d6efd), transparent 70%);
}

    :root[data-theme="fluent-custom"] .btn-primary,
    :root[data-theme="fluent-custom"] .dxbs-btn-primary {
        --bs-btn-bg: var(--custom-primary, #0d6efd);
        --bs-btn-border-color: var(--custom-primary, #0d6efd);
        --bs-btn-hover-bg: color-mix(in oklab, var(--custom-primary, #0d6efd), black 10%);
        --bs-btn-hover-border-color: color-mix(in oklab, var(--custom-primary, #0d6efd), black 12%);
        --bs-btn-active-bg: color-mix(in oklab, var(--custom-primary, #0d6efd), black 14%);
        --bs-btn-active-border-color: color-mix(in oklab, var(--custom-primary, #0d6efd), black 16%);
    }

/* Fluent Dark custom (optional) */
:root[data-theme="fluent-dark-custom"] {
    --bs-primary: var(--custom-primary, #4f46e5);
    --bs-link-color: var(--custom-primary, #4f46e5);
    --bs-focus-ring-color: color-mix(in oklab, var(--custom-primary, #4f46e5), transparent 70%);
}

    :root[data-theme="fluent-dark-custom"] .btn-primary,
    :root[data-theme="fluent-dark-custom"] .dxbs-btn-primary {
        --bs-btn-bg: var(--custom-primary, #4f46e5);
        --bs-btn-border-color: var(--custom-primary, #4f46e5);
        --bs-btn-hover-bg: color-mix(in oklab, var(--custom-primary, #4f46e5), white 8%);
        --bs-btn-hover-border-color: color-mix(in oklab, var(--custom-primary, #4f46e5), white 8%);
        --bs-btn-active-bg: color-mix(in oklab, var(--custom-primary, #4f46e5), white 12%);
        --bs-btn-active-border-color: color-mix(in oklab, var(--custom-primary, #4f46e5), white 12%);
    }

/* --- Theme UI inside the sidebar menu --- */
#sidebar .theme-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 2px;
    /* Allow flex children to shrink without overflow */
    min-width: 0;
}

#sidebar .color-picker {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--dx-border-color, #d1d5db);
    border-radius: 6px;
    background: transparent;
    box-sizing: border-box;
    /* Remove default extra inner padding on some browsers */
    appearance: none;
}

/* Make DxTextBox stretch to available space */
#sidebar .hex-input,
#sidebar .hex-input .dxbs-text-editor,
#sidebar .hex-input .dxbs-text-editor input {
    width: 100%;
    min-width: 0; /* prevent overflow in flex container */
    box-sizing: border-box;
}

/* Action buttons in a row with safe wrapping */
#sidebar .theme-actions {
    display: flex;
    gap: 8px;
    padding: 4px 6px 6px;
    flex-wrap: wrap; /* wrap on narrow menus */
    min-width: 0;
}

    #sidebar .theme-actions .action-btn {
        flex: 1 1 0; /* make buttons share the row evenly */
        min-width: 120px; /* keep readable labels */
        white-space: nowrap; /* prevent label breaking */
    }

/* Optional: Compact the buttons slightly on very narrow sidebars */
@media (max-width: 480px) {
    #sidebar .theme-actions .action-btn {
        min-width: 100px;
    }
}

#sidebar .theme-actions {
    flex-direction: column;
}


/* DXAccordion Scope under #sidebar so styles don't leak */
#sidebar .menu .dx-accordion-item-header {
    padding: .5rem .75rem;
}

    #sidebar .menu .dx-accordion-item-header:hover,
    #sidebar .menu a.menu-item:hover,
    #sidebar .dxbl-menu-list-item .dxbl-btn:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

#sidebar .menu a.menu-item {
    color: var(--bs-body-color);
}

#sidebar .menu .menu-item.text-danger {
    color: var(--bs-danger) !important;
}

#sidebar .menu .menu-item.text-muted {
    color: var(--bs-secondary-color) !important;
}

#sidebar .menu i {
    width: 1.25rem; /* align icons */
    text-align: center;
}


/* site.css */
.app-root:not(.theme-ready) {
    visibility: hidden;
}

.app-root.theme-ready {
    visibility: visible;
}

/* Icon/caption spacing for every DevExpress button. DevExpress.Blazor 25.2.7 renders the
   icon (`.dxbl-btn-icon`) and caption (`.dxbl-btn-caption`) as plain sibling spans inside
   `.dxbl-btn` (display:inline-flex) with no built-in gap in this theme build. `gap` is
   direction-agnostic — same fix as Core/Rendering/wwwroot/css/site.css. */
.dxbl-btn {
    gap: 0.4rem;
}

/* Ensure the button lays out content in RTL as: icon | text | arrow (left) */
[dir="rtl"] .dxbl-menu .dxbl-btn {
    display: flex;
    align-items: center;
    /* Keep LTR row direction and control order explicitly */
    flex-direction: row;
    /* Unified spacing between icon and text */
    gap: var(--dxbl-menu-item-image-spacing, 0.5rem);
}

    /* 1) Icon first on the right */
    [dir="rtl"] .dxbl-menu .dxbl-btn .dxbl-btn-icon {
        order: 1;
        margin: 0 !important;
    }

    /* 2) Text second (middle) */
    [dir="rtl"] .dxbl-menu .dxbl-btn .dxbl-btn-caption {
        order: 2;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* 3) Arrow last on the far left */
    [dir="rtl"] .dxbl-menu .dxbl-btn .dxbl-btn-arrow,
    [dir="rtl"] .dxbl-menu .dxbl-menu-item .dxbl-menu-item-arrow,
    [dir="rtl"] .dxbl-menu .dxbl-btn [class*="chevron"],
    [dir="rtl"] .dxbl-menu .dxbl-btn [class*="arrow"] {
        order: 3;
        margin-inline-start: auto; /* push to far left in RTL */
        margin-inline-end: 0;
    }

    /* 4) Make the arrow point LEFT in RTL (flip right-chevron glyphs) */
    [dir="rtl"] .dxbl-menu .dxbl-btn .dxbl-btn-arrow,
    [dir="rtl"] .dxbl-menu .dxbl-menu-item .dxbl-menu-item-arrow,
    [dir="rtl"] .dxbl-menu .dxbl-btn [class*="chevron-right"],
    [dir="rtl"] .dxbl-menu .dxbl-btn [class*="arrow-right"] {
        transform: scaleX(-1);
    }

/* Optional: logical padding for nicer edges */
[dir="rtl"] .dxbl-menu .dxbl-menu-item {
    padding-inline: var(--dxbl-menu-item-padding-x, 0.75rem);
}

[dir="rtl"] .dxbl-menu .dxbl-btn {
    flex: none !important;
}

/* Make DxMenu fill the full drawer panel width and follow resize */
#sidebar {
    width: 100%;
}

#sidebar > .dxbl-menu,
#sidebar > dxbl-menu {
    display: block !important;
    min-width: 99.9% !important;
    max-width: none !important;
}

#sidebar .dxbl-menu-item-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    min-width: 99.9% !important;
    max-width: none !important;
}

#sidebar .dxbl-menu-list-item {
    display: block !important;
    min-width: 99.9% !important;
    max-width: none !important;
}

#sidebar dxbl-menu-item {
    display: block !important;
    min-width: 99.9% !important;
    max-width: none !important;
}

#sidebar .dxbl-menu-list-item .dxbl-btn {
    min-width: 99.9% !important;
    max-width: none !important;
    box-sizing: border-box;
}

#sidebar .dxbl-menu-item-text-container {
    flex: 1 1 auto;
    min-width: 0;
}

.dxbl-menu .dxbl-menu-item-list,
.dxbl-menu-scrollable {
    overflow-y: hidden;
}

    .dxbl-menu .dxbl-menu-item-list:hover,
    .dxbl-menu-scrollable:hover {
        overflow-y: auto;
    }

.nav-buttons-container {
    position: fixed; /* or sticky */
    top: 0px; /* adjust as needed */
    left: 0px; /* or right: 10px for right side */
    z-index: 99; /* keep it above other elements */
}

.modules-content {
    overflow: visible;
}

.gradient-overview {
    background: var(--gradient-overview);
}

.gradient-appmenu {
    background: var(--gradient-appmenu);
}

.gradient-dashboard {
    background: var(--gradient-dashboard);
}

.gradient-ai {
    background: var(--gradient-ai);
}

.gradient-decision {
    background: var(--gradient-decision);
}

.gradient-config {
    background: var(--gradient-config);
}
.rag-config {
    background: var(--gradient-rag-config);
}

.gradient-reports {
    background: var(--gradient-reports);
}

.gradient-approvals {
    background: var(--gradient-approvals);
}

.gradient-reminders {
    background: var(--gradient-reminders);
}

.card-count-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

[dir="rtl"] .card-count-badge {
    left: auto;
    right: 10px;
}

:root {
    --gradient-overview: linear-gradient(135deg, #0078D4, #005A9E);
    --gradient-appmenu: linear-gradient(135deg, #6B4EFF, #4B2EFF);
    --gradient-dashboard: linear-gradient(135deg, #FF8C00, #FFB900);
    --gradient-ai: linear-gradient(135deg, #28A745, #218838);
    --gradient-decision: linear-gradient(135deg, #17A2B8, #138496);
    --gradient-config: linear-gradient(135deg, #DC3545, #B02A37);
    --gradient-rag-config: linear-gradient(135deg, #C32AFF, #8A1FCC);
    --gradient-reports: linear-gradient(135deg, #06B6D4, #0E7490);
    --gradient-approvals: linear-gradient(135deg, #10B981, #047857);
    --gradient-reminders: linear-gradient(135deg, #F59E0B, #D97706);
    --gradient-dev-objects: linear-gradient(135deg, #F97316, #EA580C);
    --gradient-dev-defs: linear-gradient(135deg, #8B5CF6, #7C3AED);
    --gradient-dev-menu: linear-gradient(135deg, #EC4899, #DB2777);
    --gradient-dev-reports: linear-gradient(135deg, #14B8A6, #0D9488);
    --gradient-tenants: linear-gradient(135deg, #6366F1, #4338CA);
    --gradient-sql-studio: linear-gradient(135deg, #0EA5E9, #0369A1);
    --gradient-devops: linear-gradient(135deg, #6366F1, #8B5CF6);
    --gradient-barq: linear-gradient(135deg, #F59E0B, #EA580C);
    --gradient-templates: linear-gradient(135deg, #F59E0B, #EA580C);
    --gradient-broadcast: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

[data-bs-theme="dark"] {
    --gradient-overview: linear-gradient(135deg, #2B88D8, #103F91);
    --gradient-appmenu: linear-gradient(135deg, #8B6FFF, #5A3FFF);
    --gradient-dashboard: linear-gradient(135deg, #FFB900, #C27C00);
    --gradient-ai: linear-gradient(135deg, #34C759, #248A3D);
    --gradient-decision: linear-gradient(135deg, #00B7C3, #007A87);
    --gradient-config: linear-gradient(135deg, #FF5C5C, #B02A37);
    --gradient-rag-config: linear-gradient(135deg, #1DD6E0, #008A93);
    --gradient-reports: linear-gradient(135deg, #22D3EE, #0E7490);
    --gradient-approvals: linear-gradient(135deg, #34D399, #047857);
    --gradient-reminders: linear-gradient(135deg, #FBBF24, #B45309);
    --gradient-dev-objects: linear-gradient(135deg, #FB923C, #C2410C);
    --gradient-dev-defs: linear-gradient(135deg, #A78BFA, #6D28D9);
    --gradient-dev-menu: linear-gradient(135deg, #F472B6, #BE185D);
    --gradient-dev-reports: linear-gradient(135deg, #2DD4BF, #0F766E);
    --gradient-tenants: linear-gradient(135deg, #818CF8, #4F46E5);
    --gradient-sql-studio: linear-gradient(135deg, #38BDF8, #0284C7);
    --gradient-devops: linear-gradient(135deg, #818CF8, #6D28D9);
    --gradient-barq: linear-gradient(135deg, #FBBF24, #C2410C);
    --gradient-templates: linear-gradient(135deg, #FBBF24, #C2410C);
    --gradient-broadcast: linear-gradient(135deg, #A78BFA, #7C3AED);
}

.gradient-dev-objects { background: var(--gradient-dev-objects); }
.gradient-dev-defs { background: var(--gradient-dev-defs); }
.gradient-dev-menu { background: var(--gradient-dev-menu); }
.gradient-dev-reports { background: var(--gradient-dev-reports); }
.gradient-tenants { background: var(--gradient-tenants); }
.gradient-sql-studio { background: var(--gradient-sql-studio); }
.gradient-devops { background: var(--gradient-devops); }
.gradient-barq { background: var(--gradient-barq); }
.gradient-templates { background: var(--gradient-templates); }
.gradient-broadcast { background: var(--gradient-broadcast); }

/* Programming Mode — contextual dev icons (rendered inside .vb-action-overlay) */
.vb-dev-icon {
    font-size: 0.7rem;
    opacity: 0.7;
    color: #fff;
    padding: 2px 4px;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
}
.vb-dev-icon:hover { opacity: 1 !important; color: var(--bs-warning) !important; }

/* Open in New Tab icon — all users (rendered inside .vb-action-overlay) */
.vb-newtab-icon {
    font-size: 0.65rem;
    opacity: 0.6;
    color: rgba(255,255,255,0.8);
    padding: 2px 4px;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
}
.vb-newtab-icon:hover { opacity: 1 !important; color: #fff !important; }

/* Hover-reveal overlay — overlays text so icons don't steal flex space */
.vb-action-overlay {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding-inline: 1rem 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.7) 35%);
    z-index: 1;
}
.menu-modules-title > .vb-action-overlay {
    inset-inline-end: 1.5rem;
}
.menu-item:hover > .vb-action-overlay,
.menu-modules-title:hover > .vb-action-overlay {
    opacity: 1;
    pointer-events: auto;
}
.vb-dev-toolbar-btn { border: 1px dashed rgba(var(--bs-warning-rgb), 0.4) !important; }

/* Object Status Badges */
.vb-draggable-item > span:first-of-type {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vb-status-badge {
    font-size: 0.55rem !important;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 3px !important;
    border-radius: 2px;
    margin-inline-start: auto;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: fit-content;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.menu-item:hover .vb-status-badge { opacity: 1; }

.vb-status-dev {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}
.vb-status-qa {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.25);
}
.vb-status-rtr {
    background: rgba(46, 204, 113, 0.12);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

/* Studio Development Mode banner + badge (shown when JWT has vb:caps:program=1) */
.studio-dev-banner {
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    text-align: center;
    padding: 4px 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
}

.studio-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 8px;
}

.studio-nav-brand {
    display: inline-block;
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    user-select: none;
}


/* Files Viewer ===== TOOLBAR STYLES ===== */

/* ===== MAIN CONTAINER ===== */
.file-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 40px);
    padding: 20px;
    box-sizing: border-box;
}

/* ===== TOOLBAR STYLES ===== */
.file-toolbar {
    width: 210mm;
    max-width: 95vw;
    padding: 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    overflow: hidden;
    flex-shrink: 0;
}

/* Document Info Section */
.doc-info {
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.doc-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meta-badge {
    background: rgba(255,255,255,0.1);
    color: #a0aec0;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .meta-badge.zone {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        font-weight: 600;
    }

    .meta-badge.date {
        background: rgba(72, 187, 120, 0.2);
        color: #68d391;
    }

/* Actions Section */
.doc-actions {
    padding: 12px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.2);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #fff;
}

    .btn-action:hover {
        transform: translateY(-2px);
    }

.btn-icon {
    font-size: 16px;
}

.btn-print {
    background: linear-gradient(135deg, #4299e1, #3182ce);
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.4);
}

    .btn-print:hover {
        background: linear-gradient(135deg, #3182ce, #2b6cb0);
        box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5);
    }

.btn-download {
    background: linear-gradient(135deg, #48bb78, #38a169);
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.4);
}

    .btn-download:hover {
        background: linear-gradient(135deg, #38a169, #2f855a);
        box-shadow: 0 6px 20px rgba(72, 187, 120, 0.5);
    }

.btn-copy {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
    box-shadow: 0 4px 15px rgba(237, 137, 54, 0.4);
}

    .btn-copy:hover {
        background: linear-gradient(135deg, #dd6b20, #c05621);
        box-shadow: 0 6px 20px rgba(237, 137, 54, 0.5);
    }

.btn-new-tab {
    background: linear-gradient(135deg, #9f7aea, #805ad5);
    box-shadow: 0 4px 15px rgba(159, 122, 234, 0.4);
}

    .btn-new-tab:hover {
        background: linear-gradient(135deg, #805ad5, #6b46c1);
        box-shadow: 0 6px 20px rgba(159, 122, 234, 0.5);
    }

/* ===== IFRAME STYLES ===== */
.file-frame {
    width: 210mm;
    max-width: 95vw;
    height: calc(100vh - 200px);
    min-height: 500px;
    border: none;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 0 0 12px 12px;
    display: block;
    flex-shrink: 0;
}

/* ===== STATUS STYLES ===== */
.file-status {
    width: 210mm;
    max-width: 95vw;
    height: calc(100vh - 80px);
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    color: #a0aec0;
}

    .file-status.error {
        color: #fc8181;
    }

        .file-status.error h3 {
            color: #fff;
        }

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top: 4px solid #4299e1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .file-container {
        padding: 10px;
    }

    .doc-title {
        font-size: 14px;
    }

    .btn-text {
        display: none;
    }

    .btn-action {
        padding: 10px 14px;
    }

    .meta-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .file-frame {
        height: calc(100vh - 180px);
        min-height: 400px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .no-print {
        display: none !important;
    }
}


/* Kill DxDrawer open/close animation — the sidebar toggle is a URL-based
   layout swap (Overlap↔Shrink), not a smooth slide, so the built-in
   transition only causes a visible "width dance" on page load/navigation. */
.page .dxbl-drawer-panel,
.page .dxbl-drawer-content {
    transition: none !important;
}

body.vb-fullscreen #sidebar {
    display: none !important;
}
body.vb-fullscreen .dxbl-drawer-panel {
    display: none !important;
}
body.vb-fullscreen .dxbl-drawer-content {
    margin-inline-start: 0 !important;
    width: 100% !important;
}
body.vb-fullscreen .dxbl-drawer {
    width: 100% !important;
}
body.vb-fullscreen .nav-buttons-container,
body.vb-fullscreen .navigation-drawer-header,
body.vb-fullscreen .vb-fab {
    display: none !important;
}
body.vb-fullscreen .page,
body.vb-fullscreen .page > .dxbl-drawer,
body.vb-fullscreen .page .dxbl-drawer-target {
    width: 100% !important;
}
.navigation-drawer-header img.logo {
    max-width: 130px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =====================================================
   MENU-MODULES - Matches DxMenu (NavRoot) Exactly
   ===================================================== */

/* ===== Container ===== */
.nav-sidebar.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: inherit;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    padding-top: 0; /* Ensure no top padding */
}

#sidebar-webobjects,
#sidebar-dashboards,
#sidebar-reports {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#sidebar-webobjects .menu-modules-group,
#sidebar-webobjects .menu-modules-children,
#sidebar-dashboards .menu-modules-group,
#sidebar-dashboards .menu-modules-children,
#sidebar-reports .menu-modules-group,
#sidebar-reports .menu-modules-children {
    width: 100%;
    box-sizing: border-box;
}

/* ===== FIRST ITEM (Home) - Reduce top space ===== */
.nav-sidebar .menu-item:first-child {
    margin-top: 0;
    padding-top: 0.31rem; /* Reduce top padding */
}
/* ===== BASE STYLE ===== */
.nav-sidebar .menu-item,
.nav-sidebar .menu-modules-title {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.57rem 0.50rem;
    margin: 0;
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
    border: none;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    min-height: 1.75rem;
    box-sizing: border-box;
}

    /* ===== HOVER - Lighter overlay ===== */
    .nav-sidebar .menu-item:hover,
    .nav-sidebar .menu-modules-title:hover {
        background-color: rgba(255, 255, 255, 0.08);
        text-decoration: none;
        color: #fff;
    }

    /* ===== ACTIVE/FOCUS state ===== */
    .nav-sidebar .menu-item:active,
    .nav-sidebar .menu-modules-title:active {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* ===== Icons ===== */
    .nav-sidebar .menu-item i,
    .nav-sidebar .menu-modules-title i {
        width: 1rem;
        min-width: 1rem;
        text-align: center;
        color: #fff;
        flex-shrink: 0;
        font-size: 0.875rem;
        line-height: 1;
        margin-inline-end: 0.5rem;
    }
    .nav-sidebar .vb-action-overlay i {
        width: auto;
        min-width: auto;
        margin-inline-end: 0;
        flex-shrink: 0;
    }

    /* ===== Text ===== */
    .nav-sidebar .menu-item span,
    .nav-sidebar .menu-modules-title > span {
        flex: 1;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===== States ===== */
    .nav-sidebar .menu-item.text-danger {
        color: #ffcccc !important;
    }

        .nav-sidebar .menu-item.text-danger i {
            color: #ffcccc !important;
        }

    .nav-sidebar .menu-item.text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

        .nav-sidebar .menu-item.text-muted i {
            color: rgba(255, 255, 255, 0.6) !important;
        }

/* ===== Nav Search ===== */
.nav-search-row {
    display: flex;
    align-items: center;
}
.nav-search-row .menu-item {
    flex: 1;
    min-width: 0;
}

/* ===== NavRoot: Home + Application Menu (matches DxMenu item look) ===== */
#sidebar > .navroot-item,
#sidebar .nav-search-row .navroot-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: .5rem .75rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease;
}
#sidebar > .navroot-item:hover,
#sidebar .nav-search-row .navroot-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: #fff;
}
#sidebar > .navroot-item i,
#sidebar .nav-search-row .navroot-item i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
#sidebar .nav-search-row .navroot-item {
    flex: 1;
    min-width: 0;
}
.nav-sidebar .nav-search-icon-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    margin-inline-end: 0.35rem;
    flex-shrink: 0;
    transition: color 0.18s, background 0.18s, transform 0.18s;
}
.nav-sidebar .nav-search-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.08);
}
.nav-sidebar .nav-search-icon-btn.active {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.15);
}
#sidebar .nav-search-icon-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    margin-inline-end: 0.35rem;
    flex-shrink: 0;
    transition: color 0.18s, background 0.18s, transform 0.18s;
}
#sidebar .nav-search-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.08);
}
#sidebar .nav-search-icon-btn.active {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.15);
}

.nav-search-bar {
    padding: 0.1rem 0.5rem 0.35rem;
}
/* NavModules (dark sidebar) search bar */
.nav-sidebar .nav-search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 0.3rem 0.65rem;
    gap: 0.4rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.nav-sidebar .nav-search-input-wrap:focus-within {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.1);
}
.nav-sidebar .nav-search-icon-inside {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.nav-sidebar .nav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.8rem;
    width: 100%;
    min-width: 0;
}
.nav-sidebar .nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.nav-sidebar .nav-search-clear {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 2px;
    font-size: 0.68rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.nav-sidebar .nav-search-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
/* NavRoot search bar — same look as NavModules */
#sidebar .nav-search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 0.3rem 0.65rem;
    gap: 0.4rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
#sidebar .nav-search-input-wrap:focus-within {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.1);
}
.nav-search-input-wrap.nav-search-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#sidebar .nav-search-icon-inside {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    flex-shrink: 0;
}
#sidebar .nav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.8rem;
    width: 100%;
    min-width: 0;
}
#sidebar .nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.nav-search-input:disabled {
    cursor: not-allowed;
}
#sidebar .nav-search-clear {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 2px;
    font-size: 0.68rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
#sidebar .nav-search-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* ===== View Mode Toggle (Studio only) ===== */
.menu-view-toggle {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.menu-view-toggle .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 3px 6px;
}

/* ===== Sidebar Resize Handle ===== */
.vb-resize-handle {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}
.vb-resize-handle { right: 0; }
[dir="rtl"] .vb-resize-handle { right: auto; left: 0; }
.vb-resize-handle:hover {
    background: var(--bs-primary, #0d6efd);
    opacity: 0.5;
}

/* ===== Group Container ===== */
.menu-modules-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0px;
}

/* ===== Group Header ===== */
.menu-modules-title {
    font-weight: 400;
}

    .menu-modules-title.active {
        background-color: rgba(0, 0, 0, 0.05);
        border-inline-start: 3px solid #fff;
        padding-inline-start: calc(0.5rem - 3px);
    }

/* ===== Chevron ===== */
.menu-modules-chevron {
    margin-inline-start: auto;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
    width: auto;
    min-width: auto;
    margin-inline-end: 0;
}

.menu-modules-title:hover .menu-modules-chevron {
    color: #fff;
}

.menu-modules-title.active .menu-modules-chevron {
    transform: rotate(90deg);
    color: #fff;
}

/* ===== Children Container ===== */
.menu-modules-children {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.03);
    margin: 0;
    padding: 0;
}

/* ===== Child Items ===== */
.nav-sidebar .menu-modules-child {
    padding-inline-start: 1.5rem !important;
    border-top: none;
}

/* =====================================================
   RTL Support
   ===================================================== */
[dir="rtl"] .nav-sidebar.menu {
    direction: rtl;
}

[dir="rtl"] .menu-modules-chevron {
    transform: scaleX(-1);
}

[dir="rtl"] .menu-modules-title.active .menu-modules-chevron {
    transform: scaleX(-1) rotate(90deg);
}

[dir="rtl"] .vb-fab-btn .fa-arrow-left,
[dir="rtl"] .vb-fab-btn .fa-arrow-right,
[dir="rtl"] .vb-search-more .fa-arrow-right {
    transform: scaleX(-1);
}

/* =====================================================
   Theme Compatibility
   ===================================================== */
.dxbl-drawer-panel .nav-sidebar.menu,
#sidebar .nav-sidebar.menu,
.sidebar .nav-sidebar.menu {
    background-color: transparent;
}

[data-bs-theme="dark"] .menu-modules-children {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .nav-sidebar .menu-item:hover,
[data-bs-theme="dark"] .nav-sidebar .menu-modules-title:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .menu-modules-title.active {
    background-color: rgba(255, 255, 255, 0.08);
}

/* RTL — DxPopup centering.
   .dxbl-modal-root is display:grid with centering but needs inset:0 to fill
   viewport in RTL. .dxbl-popup (the dialog) needs place-self:center. */
[dir="rtl"] .dxbl-modal-root {
    inset: 0 !important;
}
[dir="rtl"] .dxbl-modal-root > .dxbl-popup {
    place-self: center !important;
}

/* RTL iframe popups — force LTR on the body div so iframe sizing/position is correct.
   The iframe content handles its own RTL internally. */
[dir="rtl"] .vb-details-popup .dxbl-popup-body > div,
[dir="rtl"] .vb-details-popup .dxbl-modal-body > div,
[dir="rtl"] .vb-workflow-popup .dxbl-popup-body > div,
[dir="rtl"] .vb-workflow-popup .dxbl-modal-body > div,
[dir="rtl"] .vb-attachments-popup .dxbl-popup-body > div,
[dir="rtl"] .vb-attachments-popup .dxbl-modal-body > div,
[dir="rtl"] .vb-report-popup .dxbl-popup-body > div,
[dir="rtl"] .vb-report-popup .dxbl-modal-body > div,
[dir="rtl"] .vb-dev-popup .dxbl-popup-body > div,
[dir="rtl"] .vb-dev-popup .dxbl-modal-body > div {
    direction: ltr;
}

/* Dev popup (iframe-based): suppress body/content overflow so only the iframe content scrolls.
   DxPopup 25.x renders body as .dxbl-modal-body (not .dxbl-popup-body). */
.dxbl-popup.vb-dev-popup {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.vb-dev-popup .dxbl-modal-body,
.vb-dev-popup .dxbl-popup-body,
.vb-dev-popup .dxbl-modal-content,
.vb-dev-popup .dxbl-popup-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =====================================================
   RTL — DevExpress grid column separators.
   DX draws every cell's column divider as a PHYSICAL border-left and
   zeroes it on :first-child (right for LTR, where col 1 is left-most).
   In RTL col 1 is right-most, so zeroing its left border drops the
   separator between the first two columns. DX doesn't flip it to
   border-right, so re-add the divider on the first column in RTL.
   ===================================================== */
[dir="rtl"] .dxbl-grid .dxbl-grid-table > thead > tr > th:first-child,
[dir="rtl"] .dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child,
[dir="rtl"] .dxbl-grid .dxbl-grid-table > tfoot > tr > td:first-child {
    border-left-width: var(--dxbl-grid-border-width) !important;
}

/* =====================================================
   RTL — Approvals inbox grid caption alignment.
   The global grid rule (rendering.css) forces every column header to
   text-align:center. In RTL that leaves each caption floating in the middle
   of its column while the data values sit on the right (leading) edge, so a
   header no longer lines up over its own data. Align the inbox captions to
   the start (right) edge to match the values. Scoped to .vb-inbox-grid so the
   other grids keep the centered-header house style.
   ===================================================== */
[dir="rtl"] .vb-inbox-grid .dxbl-grid-header-row th {
    text-align: right !important;
}

/* =====================================================
   RTL — Bootstrap 5 directional-utility flip.
   DevExpress bundles Bootstrap standard (LTR) build;
   me-*/ms-*/pe-*/ps-* use physical margin/padding and
   do NOT auto-flip with dir="rtl". Override here.
   ===================================================== */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }

/* =====================================================
   AI Chat Dockable Panel (Genesis)
   ===================================================== */
.vb-aichat-panel {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .3s, opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}
.vb-aichat-panel--open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}

/* Dock Right */
.vb-aichat-panel--right {
    top: 0; right: 0; bottom: 0; left: auto;
    width: var(--vb-aichat-size, 420px);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    transform: translateX(100%);
}
.vb-aichat-panel--right.vb-aichat-panel--open { transform: translateX(0); }

/* Dock Left */
.vb-aichat-panel--left {
    top: 0; left: 0; bottom: 0; right: auto;
    width: var(--vb-aichat-size, 420px);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transform: translateX(-100%);
}
.vb-aichat-panel--left.vb-aichat-panel--open { transform: translateX(0); }

/* Dock Bottom */
.vb-aichat-panel--bottom {
    bottom: 0; left: 0; right: 0; top: auto;
    height: var(--vb-aichat-size, 400px);
    width: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    transform: translateY(100%);
}
.vb-aichat-panel--bottom.vb-aichat-panel--open { transform: translateY(0); }

/* Header — matches NavRoot drawer gradient: var(--bs-primary) → var(--bs-black) */
.vb-aichat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-image: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-black) 150%);
    color: #fff;
    min-height: 40px;
    flex-shrink: 0;
    gap: 8px;
    user-select: none;
}
.vb-aichat-panel-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.vb-aichat-panel-brand > i {
    font-size: 16px;
    color: #00c4b4;
    flex-shrink: 0;
}
.vb-aichat-panel-title {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    white-space: nowrap;
}
.vb-aichat-panel-slogan {
    font-size: 11px;
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vb-aichat-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.vb-aichat-dock-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background .15s, color .15s, transform .1s;
    text-decoration: none;
    padding: 0;
}
.vb-aichat-dock-btn:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
    transform: scale(1.08);
}
.vb-aichat-close-btn:hover {
    background: rgba(239,68,68,.7);
    color: #fff;
}

/* Dock dropdown wrapper */
.vb-aichat-dock-wrapper {
    position: relative;
}
.vb-aichat-dock-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background-image: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-black) 150%);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.95);
    transition: opacity .15s, visibility 0s .15s, transform .15s cubic-bezier(.4,0,.2,1);
    z-index: 10;
}
.vb-aichat-dock-menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .15s, visibility 0s, transform .15s cubic-bezier(.4,0,.2,1);
}
.vb-aichat-dock-menu button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.vb-aichat-dock-menu button:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.vb-aichat-panel--right .vb-aichat-dock-menu button[data-dock="right"],
.vb-aichat-panel--left .vb-aichat-dock-menu button[data-dock="left"],
.vb-aichat-panel--bottom .vb-aichat-dock-menu button[data-dock="bottom"] {
    background: rgba(0, 196, 180, .2);
    color: #00c4b4;
}
.vb-aichat-overlay--active {
    background: rgba(0, 196, 180, .2) !important;
    color: #00c4b4 !important;
}

/* Resize handle */
.vb-aichat-panel-resize {
    position: absolute;
    z-index: 1;
}
.vb-aichat-panel--right .vb-aichat-panel-resize {
    left: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize;
}
.vb-aichat-panel--left .vb-aichat-panel-resize {
    right: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize;
}
.vb-aichat-panel--bottom .vb-aichat-panel-resize {
    top: -4px; left: 0; right: 0; height: 8px;
    cursor: row-resize;
}
.vb-aichat-panel-resize:hover {
    background: rgba(0, 196, 180, .4);
}

/* Push page content when AI panel is docked (like the sidebar drawer) */
body.vb-aichat-docked-right .page {
    margin-right: var(--vb-aichat-push, 420px);
    transition: margin .3s cubic-bezier(.4,0,.2,1);
}
body.vb-aichat-docked-left .page {
    margin-left: var(--vb-aichat-push, 420px);
    transition: margin .3s cubic-bezier(.4,0,.2,1);
}
body.vb-aichat-docked-bottom .page {
    margin-bottom: var(--vb-aichat-push, 400px);
    transition: margin .3s cubic-bezier(.4,0,.2,1);
}

/* Body + iframe */
.vb-aichat-panel-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.vb-aichat-panel-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Floating Genesis pill (FAB) */
.vb-aichat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    background-image: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-black) 150%);
    color: #fff;
    border: 1px solid rgba(0,196,180,.35);
    border-radius: 48px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 12px rgba(0,196,180,.15);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    user-select: none;
    touch-action: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(.7);
    transition: opacity .25s, visibility 0s .25s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.vb-aichat-fab--visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .25s, visibility 0s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.vb-aichat-fab:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 0 20px rgba(0,196,180,.3);
}
.vb-aichat-fab--visible:not(.vb-aichat-fab--dragging):hover {
    transform: scale(1.05);
}
.vb-aichat-fab--dragging {
    cursor: grabbing;
    transition: none !important;
    opacity: .85;
}
.vb-aichat-fab > i {
    font-size: 16px;
    color: #00c4b4;
}
.vb-aichat-fab > span {
    white-space: nowrap;
}

/* Mobile: full-width overlay (no push) */
@media (max-width: 768px) {
    .vb-aichat-panel--right,
    .vb-aichat-panel--left {
        width: 100% !important;
        --vb-aichat-size: 100% !important;
    }
    .vb-aichat-panel-slogan { display: none; }
    body.vb-aichat-docked-right .page,
    body.vb-aichat-docked-left .page,
    body.vb-aichat-docked-bottom .page {
        margin: 0 !important;
    }
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .vb-aichat-panel {
    border-color: rgba(255,255,255,.08);
}

/* ── VbFab Floating Navigation ──────────────────────────────────── */
/* NCGR Web UX Standards v2 — F13: the floating navigator must never cover
   toolbars, the Delete action, or widget/form titles (all live in the full-width
   top band). Dock it to the side edge, vertically centred, so it stays clear of
   that band. RTL mirrors to the opposite (non-sidebar) edge. Still draggable. */
.vb-fab {
    position: fixed;
    top: 50%;
    right: 16px;
    left: auto;
    transform: translateY(-50%);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    user-select: none;
    touch-action: none;
    cursor: grab;
}
html[dir="rtl"] .vb-fab {
    right: auto;
    left: 16px;
}

.vb-fab-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(var(--bs-primary-rgb, 13,110,253), .35);
    background: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb, 13,110,253), .85) 0%,
        rgba(var(--bs-primary-rgb, 13,110,253), .65) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(var(--bs-primary-rgb, 13,110,253), .3);
    transition: transform .2s, box-shadow .2s;
}
.vb-fab-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 3px rgba(var(--bs-primary-rgb, 13,110,253), .15);
}
.vb-fab-toggle:active {
    transform: scale(.95);
}

.vb-fab-drag-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    cursor: grab;
}
.vb-fab-drag-grip span {
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--bs-secondary-color, #6c757d);
    opacity: .35;
    transition: opacity .15s;
}
.vb-fab-drag-grip:hover span {
    opacity: .7;
}

.vb-fab-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-radius: 24px;
    background: rgba(var(--bs-body-bg-rgb, 255,255,255), .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), .5);
    box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
    animation: vbFabSlideIn .2s ease-out;
}
[data-bs-theme="dark"] .vb-fab-actions {
    background: rgba(30, 30, 40, .82);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.vb-fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bs-body-color, #212529);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.vb-fab-btn:hover {
    background: rgba(var(--bs-primary-rgb, 13,110,253), .12);
    color: var(--bs-primary, #0d6efd);
    transform: scale(1.1);
}
.vb-fab-btn:active {
    transform: scale(.92);
}
.vb-fab-btn--active {
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13,110,253), .1);
}

.vb-fab-divider {
    width: 26px;
    height: 1px;
    background: var(--bs-border-color, #dee2e6);
    opacity: .4;
    margin: 2px 0;
}

.vb-fab-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.vb-fab[data-expand-dir="up"] .vb-fab-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
.vb-fab[data-expand-dir="up"] .vb-fab-actions {
    animation-name: vbFabSlideInUp;
}

@keyframes vbFabSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vbFabSlideInUp {
    from { opacity: 0; transform: translateY(-8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── VbFab Search Panel ────────────────────────────────────────── */
.vb-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4999;
    cursor: default;
}
.vb-search-panel {
    position: absolute;
    bottom: 0;
    left: calc(100% + 12px);
    z-index: 5001;
    width: 380px;
    max-height: calc(100vh - 120px);
    border-radius: 16px;
    background: rgba(var(--bs-body-bg-rgb, 255,255,255), .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), .5);
    box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: vbFabSlideIn .2s ease-out;
}
[data-bs-theme="dark"] .vb-search-panel {
    background: rgba(24, 24, 32, .92);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[dir="rtl"] .vb-search-panel {
    left: auto;
    right: calc(100% + 12px);
}
[data-expand-dir="up"] .vb-search-panel {
    bottom: auto;
    top: -6px;
    transform: translateY(-100%);
}

.vb-search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), .4);
}
.vb-search-header > i {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 14px;
    flex-shrink: 0;
}
.vb-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--bs-body-color, #212529);
    min-width: 0;
}
.vb-search-input::placeholder {
    color: var(--bs-secondary-color, #6c757d);
    opacity: .6;
}
.vb-search-clear {
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
}

.vb-search-results {
    overflow-y: auto;
    max-height: 340px;
    padding: 4px 0;
}
.vb-search-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
}
.vb-search-item:hover {
    background: rgba(var(--bs-primary-rgb, 13,110,253), .06);
}
.vb-search-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13,110,253), .1);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vb-search-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--bs-body-color, #212529);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vb-search-more {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-primary, #0d6efd);
    cursor: pointer;
    text-align: center;
    border-top: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), .3);
    transition: background .12s;
}
.vb-search-more:hover {
    background: rgba(var(--bs-primary-rgb, 13,110,253), .06);
}
.vb-search-status {
    padding: 16px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 768px) {
    .vb-fab-toggle {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    .vb-fab-btn {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
    .vb-fab-actions {
        padding: 4px;
    }
    .vb-search-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 64px;
        width: auto;
    }
    [dir="rtl"] .vb-search-panel {
        left: 12px;
        right: 12px;
    }
}

/* ── Blazor Reconnect Modal ─────────────────────────────────────── */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.vb-reconnect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: vb-reconnect-fade 0.3s ease;
}

.vb-reconnect-card {
    position: relative;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.1));
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    min-width: 340px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    animation: vb-reconnect-slide 0.35s cubic-bezier(.21,1.02,.73,1);
}

.vb-reconnect-show-content,
.vb-reconnect-failed-content,
.vb-reconnect-rejected-content { display: none; }

#components-reconnect-modal.components-reconnect-show .vb-reconnect-show-content { display: block; }
#components-reconnect-modal.components-reconnect-failed .vb-reconnect-failed-content { display: block; }
#components-reconnect-modal.components-reconnect-rejected .vb-reconnect-rejected-content { display: block; }

.vb-reconnect-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--bs-border-color, #dee2e6);
    border-top-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
    animation: vb-reconnect-spin 0.75s linear infinite;
}

.vb-reconnect-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.5rem;
    display: block;
}

.vb-reconnect-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.vb-reconnect-card p {
    font-size: 0.875rem;
    margin: 0;
    opacity: 0.65;
    line-height: 1.5;
}

.vb-reconnect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.vb-reconnect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb, 13,110,253), 0.4);
}
.vb-reconnect-btn:active {
    transform: translateY(0);
}

.vb-reconnect-btn svg {
    width: 16px;
    height: 16px;
}

@keyframes vb-reconnect-spin {
    to { transform: rotate(360deg); }
}
@keyframes vb-reconnect-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes vb-reconnect-slide {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Genesis AI focus-field highlight — matches mandatory field style (border-bottom + glow) */
.vb-genesis-highlight .dxbl-text-edit,
.vb-genesis-highlight .dxbl-combobox,
.vb-genesis-highlight .dxbl-date-edit,
.vb-genesis-highlight .dxbl-spin-edit,
.vb-genesis-highlight .dxbl-time-edit,
.vb-genesis-highlight .dxbl-edit,
.vb-genesis-highlight .dxbl-memo,
.vb-genesis-highlight .dxbl-checkbox,
.vb-genesis-highlight input.vb-input,
.vb-genesis-highlight textarea.vb-input,
.vb-genesis-highlight select.vb-input,
.vb-genesis-highlight > [class*="dxbl-"] {
    border-bottom: 3px solid #4a6cf7 !important;
    box-shadow: 0 2px 6px rgba(74, 108, 247, 0.5) !important;
    animation: vb-genesis-pulse 0.6s ease-in-out 3;
}
@keyframes vb-genesis-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(74, 108, 247, 0.5); }
    50% { box-shadow: 0 2px 12px rgba(74, 108, 247, 0.8), 0 0 0 2px rgba(74, 108, 247, 0.3); }
}

/* Approvals mobile card view styles are in ApprovalsInbox.razor.css (scoped) */