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

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

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

.embedded-body {
    height: 100%;
    overflow: auto;
    padding-bottom: 1rem;
}

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

/* DevExpress Blazor DxDateEdit / calendar dropdown: swap prev/next control positions for RTL (chevrons stay correct). */
html[dir="rtl"] .dxbl-popup .dxbl-calendar .dxbl-calendar-header,
html[lang^="ar"] .dxbl-popup .dxbl-calendar .dxbl-calendar-header,
[dir="rtl"] .dxbl-popup .dxbl-calendar .dxbl-calendar-header,
.vb-popup-rtl .dxbl-calendar .dxbl-calendar-header,
html[dir="rtl"] .dxbl-dropdown .dxbl-calendar .dxbl-calendar-header,
html[lang^="ar"] .dxbl-dropdown .dxbl-calendar .dxbl-calendar-header,
[dir="rtl"] .dxbl-dropdown .dxbl-calendar .dxbl-calendar-header,
.dynamic-grid-container.vb-rtl .dxbl-calendar .dxbl-calendar-header,
[dir="rtl"] .dxbl-calendar .dxbl-calendar-header {
    flex-direction: row-reverse !important;
}

/* Class name fallback (some builds): first calendar row that hosts nav buttons */
html[dir="rtl"] .dxbl-popup .dxbl-calendar > div:first-child:has(.dxbl-btn),
html[lang^="ar"] .dxbl-popup .dxbl-calendar > div:first-child:has(.dxbl-btn),
[dir="rtl"] .dxbl-popup .dxbl-calendar > div:first-child:has(.dxbl-btn),
.vb-popup-rtl .dxbl-calendar > div:first-child:has(.dxbl-btn),
html[dir="rtl"] .dxbl-dropdown .dxbl-calendar > div:first-child:has(.dxbl-btn),
.dynamic-grid-container.vb-rtl .dxbl-calendar > div:first-child:has(.dxbl-btn),
[dir="rtl"] .dxbl-calendar > div:first-child:has(.dxbl-btn) {
    flex-direction: row-reverse !important;
}
/*dynamic grid component styles*/
 
.pw-800 {
    max-width: 800px !important;
    width: 800px !important;
    position: relative;
    z-index: 10000;
}

.subgrid-inline.pw-800,
.subgrid-inline .pw-800,
.vb-related-records-body .pw-800,
.subgrid-panel .pw-800 {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* Data rows */
.dxbs-grid .dxbs-data-row {
    height: 20px;
}

/* Header row */
.dxbs-grid .dxbs-header-row {
    height: 60px;
}

/* modal resize */
.vb-modal-container {
    resize: both;
    overflow: auto;
    width: 400px; /* Initial width */
    height: 300px; /* Initial height */
    min-width: 200px; /* Minimum width */
    min-height: 150px; /* Minimum height */
    max-width: 800px; /* Maximum width */
    max-height: 600px; /* Maximum height */
}

/* Expand/Collapse button styles */
.expand-collapse-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    outline: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .expand-collapse-btn:focus {
        outline: 1px dotted #000;
    }

.edit-form-fieldset {
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    padding: 12px 12px 4px;
    margin-bottom: 16px;
    background: #fff;
}

    .edit-form-fieldset legend {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0 8px;
        color: #495057;
    }

    .edit-form-fieldset .fieldset-content {
        padding-top: 4px;
    }

/* Subgrid container styles */
.subgrid-container {
    border-top: 1px solid #dee2e6;
    padding-top: 10px;
}

.subgrid-header {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #495057;
}

.subgrid {
    border: 1px solid #dee2e6;
    border-radius: 4px;
}


/* Visual Base Form Modal Styles - Clean Professional Design */
.vb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.vb-modal-container {
    background: #f5f5f5;
    border: 2px solid #7a9cc6;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1000px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

/* Top Bar with Actions */
.vb-modal-topbar {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #ccc;
    padding: 6px 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 32px;
}

.vb-modal-actions {
    display: flex;
    gap: 20px;
}

.vb-action-link {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .vb-action-link:hover {
        text-decoration: underline;
    }

    .vb-action-link.text-primary {
        color: #0066cc;
    }

    .vb-action-link.text-danger {
        color: #cc0000;
    }

/* Tabs Container */
.vb-tabs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* Tab Header - Classic Windows Style */
.vb-tabs-header {
    display: flex;
    background: #e8e8e8;
    padding: 4px 8px 0 8px;
    gap: 2px;
    border-bottom: 1px solid #999;
}

.vb-tab-btn {
    padding: 6px 16px;
    border: 1px solid #999;
    border-bottom: 1px solid #999;
    background: linear-gradient(to bottom, #f0f0f0 0%, #d8d8d8 100%);
    color: #333;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: -1px;
    border-radius: 3px 3px 0 0;
    transition: all 0.15s;
    font-family: Segoe UI, Tahoma, sans-serif;
}

    .vb-tab-btn:hover:not(.active) {
        background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    }

    .vb-tab-btn.active {
        background: #fff;
        border-bottom-color: #fff;
        font-weight: 600;
        color: #1a5276;
        position: relative;
        z-index: 1;
    }

/* Tab Content Area */
.vb-tab-content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    margin: 0 8px 8px 8px;
}

.vb-tab-pane {
    padding: 12px 16px;
}

/* Edit form tab content - constrain width so form uses two columns, no horizontal scroll */
.vb-edit-form-tab-content {
    max-width: 100%;
    min-width: 0;
}

/* Form Container - prevent single-row horizontal scroll */
.vb-form-container {
    padding: 12px 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Edit form tabs: no caption overflow, full tab text visible */
.edit-form-tabs .nav-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
}

.edit-form-tabs .nav-item {
    flex: 0 1 auto;
}

/* Field Row - Table-like Layout */
.vb-field-row {
    display: table;
    width: 100%;
    margin-bottom: 6px;
    table-layout: fixed;
}

/* Caption: matches input font-size for modern consistency. Width unchanged (legacy spec).
   !important on font-size + line-height because DevExpress's `.dxbl-grid-edit-form *` style
   bundle would otherwise win specificity inside the DxGrid inline edit row (the popup
   escapes that wrapper, which is why popup looked correct first while inline lagged). */
.vb-field-label,
.dxbl-grid-edit-form .vb-field-label,
.dxbl-popup-edit-form .vb-field-label,
.vb-edit-popup .vb-field-label {
    display: table-cell;
    width: 160px;
    min-width: 160px;
    max-width: 240px;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--bs-body-color, #212529) !important;
    padding: 6px 12px 6px 0;
    text-align: left;
    vertical-align: middle;
    font-family: Segoe UI, Tahoma, sans-serif;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

[dir="rtl"] .vb-field-label {
    text-align: right;
}

.vb-field-input {
    display: table-cell;
    vertical-align: middle;
}

/* Legacy: red ! sits between label column and control (flex respects dir=rtl so icon stays at label/input boundary). */
.vb-field-input-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

    .vb-field-input-inner > .vb-field-input-wrapper,
    .vb-field-input-inner > .vb-attachmentbox-host {
        flex: 1 1 auto;
        min-width: 0;
    }

.vb-field-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
}

    /* Single field container so + and clear sit inside the field */
    .vb-field-input-wrapper.vb-lookup-inline {
        display: block;
        position: relative;
        width: 100%;
    }

/* Every DevExpress edit wrapper rendered inside this form matches the .vb-input height +
   radius + border so TextBox === ComboBox === DateEdit === SpinEdit pixel-for-pixel. */
.vb-field-input-wrapper .dxbl-text-edit,
.vb-field-input-wrapper .dxbl-combobox,
.vb-field-input-wrapper .dxbl-date-edit,
.vb-field-input-wrapper .dxbl-spin-edit,
.vb-field-input-wrapper .dxbl-masked-input,
.vb-field-input-wrapper .dxbl-time-edit,
.vb-field-input-wrapper .dxbl-edit,
.vb-field-input-inner > .dxbl-text-edit,
.vb-field-input-inner > .dxbl-combobox,
.vb-field-input-inner > .dxbl-date-edit,
.vb-field-input-inner > .dxbl-spin-edit,
.vb-field-input-inner > .dxbl-masked-input,
.vb-field-input-inner > .dxbl-time-edit,
.vb-field-input-inner > .dxbl-edit {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
}

/* Inner inputs inside DevExpress wrappers: NO own border (wrapper provides it),
   font matches caption + textbox so all three are visually unified. */
.vb-field-input-wrapper .dxbl-edit-input,
.vb-field-input-wrapper .dxbl-text-edit-input,
.vb-field-input-wrapper .dxbl-combobox-input,
.vb-field-input-inner .dxbl-edit-input,
.vb-field-input-inner .dxbl-text-edit-input,
.vb-field-input-inner .dxbl-combobox-input,
.vb-edit-form-tab-content .dxbl-edit-input,
.vb-edit-form-tab-content .dxbl-text-edit-input,
.vb-edit-form-tab-content .dxbl-combobox-input {
    height: 34px !important;
    line-height: 1.35 !important;
    font-size: 0.92rem !important;
    padding: 6px 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Inline ✕ + ⌄ buttons inside combo/date/spin — proportional to the 36px wrapper. */
.vb-field-input-wrapper .dxbl-combobox .dxbl-btn,
.vb-field-input-wrapper .dxbl-date-edit .dxbl-btn,
.vb-field-input-wrapper .dxbl-spin-edit .dxbl-btn,
.vb-field-input-wrapper .dxbl-text-edit .dxbl-btn,
.vb-field-input-inner .dxbl-combobox .dxbl-btn,
.vb-field-input-inner .dxbl-date-edit .dxbl-btn,
.vb-field-input-inner .dxbl-spin-edit .dxbl-btn,
.vb-field-input-inner .dxbl-text-edit .dxbl-btn {
    height: 30px !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    align-self: center !important;
}

.vb-field-input-wrapper .dxbl-combobox .dxbl-btn:hover,
.vb-field-input-inner .dxbl-combobox .dxbl-btn:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Focus ring on DevExpress wrappers — same primary halo as .vb-input:focus */
.vb-field-input-wrapper .dxbl-text-edit:focus-within,
.vb-field-input-wrapper .dxbl-combobox:focus-within,
.vb-field-input-wrapper .dxbl-date-edit:focus-within,
.vb-field-input-wrapper .dxbl-spin-edit:focus-within,
.vb-field-input-inner .dxbl-text-edit:focus-within,
.vb-field-input-inner .dxbl-combobox:focus-within,
.vb-field-input-inner .dxbl-date-edit:focus-within,
.vb-field-input-inner .dxbl-spin-edit:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* One form row per distinct LineNo; fields sharing LineNo sit on the same row (up to 2 columns). */
.vb-form-field-lines {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vb-field-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    align-content: start;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vb-field-line--stack {
    grid-template-columns: 1fr;
    gap: 0;
}

.vb-field-line > .vb-field-row {
    min-width: 0;
    box-sizing: border-box;
}

    .vb-field-line > .vb-field-row.vb-line-span-full {
        grid-column: 1 / -1;
    }

/* Two Column Layout (legacy / other hosts) */
.vb-two-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 0 20px;
    align-content: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .vb-two-column > .vb-field-row {
        min-width: 0;
        box-sizing: border-box;
    }

    .vb-two-column > .vb-column {
        /* columns used when rendering into left/right column divs */
    }

    .vb-two-column > .vb-field-row.vb-full-width {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

        .vb-two-column > .vb-field-row.vb-full-width .vb-field-input,
        .vb-two-column > .vb-field-row.vb-full-width .vb-field-input-wrapper {
            max-width: 100%;
        }

        .vb-two-column > .vb-field-row.vb-full-width input.vb-input,
        .vb-two-column > .vb-field-row.vb-full-width .vb-input {
            width: 100%;
            max-width: 100%;
        }

.vb-field-row-inline {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

.vb-field-label-inline {
    font-size: 9pt;
    font-weight: 500;
    line-height: 1.35;
    color: #212529;
    white-space: nowrap;
    min-width: 72px;
    text-align: left;
    padding-right: 8px;
}

[dir="rtl"] .vb-field-label-inline {
    text-align: right;
}

/* Bootstrap row layout — same 9pt caption scale as WebPortal drilldown */
.dynamic-grid-container .row .form-label.fw-bold {
    font-size: 9pt;
    font-weight: 500;
    color: #212529;
}

.vb-field-input-sm {
    width: 160px;
}

/* Modern input: matches DevExpress ComboBox/DateEdit/SpinEdit dimensions exactly.
   Listed for all three contexts (grid inline edit row, popup edit form, popup wrapper)
   so the DxGrid edit-form wrapper can't override our height/font with its own bundle. */
.vb-input,
.dxbl-grid-edit-form .vb-input,
.dxbl-popup-edit-form .vb-input,
.vb-edit-popup .vb-input,
input.vb-input,
.dxbl-grid-edit-form input.vb-input,
.dxbl-popup-edit-form input.vb-input,
.vb-edit-popup input.vb-input {
    width: 100% !important;
    font-size: 0.92rem !important;
    padding: 6px 10px !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    font-family: Segoe UI, Tahoma, sans-serif;
    background: var(--bs-body-bg, #fff);
    height: 36px !important;
    min-height: 36px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-input:focus,
.dxbl-grid-edit-form .vb-input:focus,
.dxbl-popup-edit-form .vb-input:focus,
.vb-edit-popup .vb-input:focus,
input.vb-input:focus {
    border-color: var(--bs-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* Mandatory fields only (Mandatory=true): green background like legacy */
/* Non-mandatory fields: background #FFFFE6 (cream). */
.vb-edit-form-tab-content input.vb-input,
.vb-edit-form-tab-content .vb-input,
.vb-edit-form-tab-content .dxbl-edit-input,
.vb-edit-form-tab-content .dxbl-memo,
.vb-edit-form-tab-content textarea.vb-input,
.vb-edit-form-tab-content .dxbl-combobox .dxbl-edit-input,
.vb-edit-form-tab-content .dxbl-combobox-input,
.vb-field-row input.vb-input,
.vb-field-row .vb-input,
.vb-field-row .dxbl-edit-input,
.vb-field-row .dxbl-memo,
.vb-field-row textarea.vb-input,
.vb-field-row .dxbl-combobox .dxbl-edit-input,
.vb-field-row .dxbl-combobox-input {
    background-color: #FFFFE6 !important;
}

/* Mandatory fields only: override to green */
.vb-field-required input.vb-input,
.vb-field-required .vb-input,
.vb-field-required .dxbl-edit-input,
.vb-field-required .dxbl-memo,
.vb-field-required textarea.vb-input {
    background-color: #E1FBE1 !important;
}

.vb-field-required .dxbl-combobox .dxbl-edit-input,
.vb-field-required .dxbl-combobox-input {
    background-color: #E1FBE1 !important;
}
/* Lookup: target input by InputCssClass (vb-combo-input) so background applies regardless of DOM/theme */
.vb-field-required .vb-combo-input,
.vb-field-required .dxbl-combobox input {
    background-color: #E1FBE1 !important;
}
/* Lookup/combobox: ensure input and edit wrapper get mandatory green (tab content and edit form layout) */
.vb-field-input-wrapper.vb-lookup-inline.vb-field-required .dxbl-combobox .dxbl-edit,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-required .dxbl-combobox .dxbl-edit-input,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-required .dxbl-combobox input,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-required .dxbl-combobox-input,
.vb-edit-form-tab-content .vb-field-required .dxbl-combobox .dxbl-edit,
.vb-edit-form-tab-content .vb-field-required .dxbl-combobox .dxbl-edit-input,
.vb-edit-form-tab-content .vb-field-required .dxbl-combobox input,
.vb-edit-form-tab-content .vb-field-required .dxbl-combobox-input,
.edit-form-layout .vb-field-required .dxbl-combobox .dxbl-edit,
.edit-form-layout .vb-field-required .dxbl-combobox .dxbl-edit-input,
.edit-form-layout .vb-field-required .dxbl-combobox input,
.edit-form-layout .vb-field-required .dxbl-combobox-input {
    background-color: #E1FBE1 !important;
}

/* Optional / non-mandatory (explicit): #FFFFE6 */
.vb-field-optional input.vb-input,
.vb-field-optional .vb-input,
.vb-field-optional .dxbl-edit-input,
.vb-field-optional .dxbl-memo,
.vb-field-optional textarea.vb-input {
    background-color: #FFFFE6 !important;
}

.vb-field-optional .dxbl-combobox .dxbl-edit-input,
.vb-field-optional .dxbl-combobox-input {
    background-color: #FFFFE6 !important;
}
/* Lookup: target input by InputCssClass (vb-combo-input) so background applies regardless of DOM/theme */
.vb-field-optional .vb-combo-input,
.vb-field-optional .dxbl-combobox input {
    background-color: #FFFFE6 !important;
}
/* Lookup/combobox: ensure input and edit wrapper get optional cream (tab content and edit form layout) */
.vb-field-input-wrapper.vb-lookup-inline.vb-field-optional .dxbl-combobox .dxbl-edit,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-optional .dxbl-combobox .dxbl-edit-input,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-optional .dxbl-combobox input,
.vb-field-input-wrapper.vb-lookup-inline.vb-field-optional .dxbl-combobox-input,
.vb-edit-form-tab-content .vb-field-optional .dxbl-combobox .dxbl-edit,
.vb-edit-form-tab-content .vb-field-optional .dxbl-combobox .dxbl-edit-input,
.vb-edit-form-tab-content .vb-field-optional .dxbl-combobox input,
.vb-edit-form-tab-content .vb-field-optional .dxbl-combobox-input,
.edit-form-layout .vb-field-optional .dxbl-combobox .dxbl-edit,
.edit-form-layout .vb-field-optional .dxbl-combobox .dxbl-edit-input,
.edit-form-layout .vb-field-optional .dxbl-combobox input,
.edit-form-layout .vb-field-optional .dxbl-combobox-input {
    background-color: #FFFFE6 !important;
}

/* Validation: mandatory invalid = red exclamation icon next to label, no border (pale green background only) */
.vb-field-required.vb-field-invalid {
    /* no border - use icon instead */
}

.vb-field-invalid-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    min-width: 1.15em;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 0.72em;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}

.vb-rtl .vb-field-invalid-icon {
    margin-left: 0;
    margin-right: 0;
}
/* DevExpress layout: red ! icon next to caption when invalid */
.vb-field-invalid-caption::after {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    min-width: 1.1em;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: middle;
}

/* DevExpress text edit: #FFFFE6 (non-mandatory) instead of transparent */
.dxbl-text-edit > .dxbl-text-edit-input,
.dxbl-text-edit > .dxbl-text-edit-template,
.dxbl-text-edit > .dxbl-text-edit-template .dxbl-text-edit-input,
.dxbl-text-edit > textarea {
    <!-- background-color: #FFFFE6 !important; -->
}

.vb-input-required {
    background-color: #E1FBE1 !important;
    border-color: #8aa9c8;
}

/* Read-only / disabled (Enabled = 0): light grey background, grey border - overrides mandatory/optional colors */
.vb-input-readonly {
    background-color: #e9ecef !important;
    color: #495057;
    border: 1px solid #ced4da !important;
    cursor: default;
}

.vb-field-readonly input,
.vb-field-readonly .vb-input,
.vb-field-readonly .dxbl-edit-input,
.vb-field-readonly .dxbl-text-edit-input,
.vb-field-readonly .dxbl-memo,
.vb-field-readonly textarea,
.vb-field-readonly .dxbl-combobox .dxbl-edit-input,
.vb-field-readonly .dxbl-combobox-input {
    background-color: #e9ecef !important;
    color: #495057;
    border: 1px solid #ced4da !important;
    cursor: default;
}
/* Lookup read-only: target input by InputCssClass so Enabled=0 shows grey */
.vb-field-readonly .vb-combo-input,
.vb-field-readonly .dxbl-combobox input {
    background-color: #e9ecef !important;
    color: #495057;
    border: 1px solid #ced4da !important;
    cursor: default;
}

.vb-input-green {
    background-color: #fff !important;
}

select.vb-input {
    padding: 6px 10px;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* Memo: starts at 2.5x row height, grows on resize. Inherits .vb-input font/border/radius. */
textarea.vb-input {
    height: auto;
    min-height: 90px;
    line-height: 1.45;
    resize: vertical;
}

/* LineNo >= 2: memo field – same as legacy CreateTextBox (Case Else → GridViewDataMemoColumn, full-width, Color_NotMandatory cream, light grey border, Height = LineNo*20) */
.vb-field-row.vb-memo-row,
.vb-field-row.vb-lineno-3 {
    width: 100%;
}

    .vb-field-row.vb-memo-row .vb-field-input,
    .vb-field-row.vb-memo-row .vb-field-input-wrapper,
    .vb-field-row.vb-lineno-3 .vb-field-input,
    .vb-field-row.vb-lineno-3 .vb-field-input-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .vb-field-row.vb-memo-row textarea.vb-input,
    .vb-field-row.vb-memo-row .vb-input.vb-textarea,
    .vb-field-row.vb-memo-row .vb-field-row textarea,
    .vb-field-row.vb-memo-row .dxbl-memo,
    .vb-field-row.vb-lineno-3 textarea.vb-input,
    .vb-field-row.vb-lineno-3 .vb-input.vb-textarea,
    .vb-field-row.vb-lineno-3 .vb-field-row textarea,
    .vb-field-row.vb-lineno-3 .dxbl-memo {
        width: 100% !important;
        min-height: var(--vb-memo-min, 80px); /* drilldownobjects: PropertiesMemoEdit.Height = LineNo * 20 */
        max-height: 280px;
        resize: vertical;
        border: 1px solid #d1d5db;
        padding: 8px 10px;
        box-sizing: border-box;
    }
    /* Required/optional colors override memo default; see .vb-field-required / .vb-field-optional above */
    .vb-field-row.vb-memo-row input.vb-input,
    .vb-field-row.vb-lineno-3 input.vb-input {
        min-height: 36px;
        max-height: none;
        resize: none;
        background-color: #FFFFE6 !important; /* non-mandatory / no-required: #FFFFE6 */
        border: 1px solid #d1d5db;
    }

.vb-field-required .vb-field-row.vb-memo-row input.vb-input,
.vb-field-required .vb-field-row.vb-lineno-3 input.vb-input {
    background-color: #E1FBE1 !important; /* required stays green */
}

/* Lookup (+) button – same visual style as dropdown icon (minimal, no box) */
.vb-lookup-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    border-radius: 2px;
    box-shadow: none;
    transition: color 0.12s ease, background-color 0.12s ease;
}

    .vb-lookup-btn:hover {
        color: #374151;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .vb-lookup-btn:active {
        color: #111827;
        background-color: rgba(0, 0, 0, 0.08);
    }

/* + and clear icons inside the field: overlay on the combo, padding on input so text doesn't overlap */
.vb-lookup-inline {
    position: relative;
    width: 100%;
}

    .vb-lookup-inline::before,
    .vb-lookup-inline::after {
        content: none;
        display: none;
    }

    /* Combo/date fill the wrapper so icons sit inside the same border */
    .vb-lookup-inline .dxbl-combobox,
    .vb-lookup-inline .dxbl-dateedit,
    .vb-lookup-inline .dxbl-date-edit {
        width: 100%;
    }

    /* LTR: three icons (clear, +, dropdown) at the end of the field on the right */
    .vb-lookup-inline .vb-clear-btn {
        position: absolute;
        right: 56px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .vb-lookup-inline .vb-lookup-btn {
        position: absolute;
        right: 28px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    /* Input padding so value text doesn't go under our custom x and + buttons */
    .vb-lookup-inline .dxbl-combobox .dxbl-edit,
    .vb-lookup-inline .dxbl-combobox input.dxbl-edit-input,
    .vb-lookup-inline .dxbl-dateedit .dxbl-edit,
    .vb-lookup-inline .dxbl-date-edit .dxbl-edit {
        padding-right: 56px !important;
        padding-left: 8px !important;
    }

[dir="rtl"] .vb-lookup-inline .dxbl-combobox .dxbl-edit,
[dir="rtl"] .vb-lookup-inline .dxbl-combobox input.dxbl-edit-input {
    padding-left: 56px !important;
    padding-right: 8px !important;
}
/* RTL: x and + on same side as dropdown (left) so all actions are grouped */
[dir="rtl"] .vb-lookup-inline .vb-clear-btn {
    left: 56px;
    right: auto;
}

[dir="rtl"] .vb-lookup-inline .vb-lookup-btn {
    left: 28px;
    right: auto;
}
/* RTL: combo input text right-to-left and right-aligned for Arabic */
[dir="rtl"] .vb-lookup-inline .dxbl-combobox input.dxbl-edit-input,
html[dir="rtl"] .vb-combo-input {
    direction: rtl;
    text-align: right;
}
    /* Optional: LTR only for code/GUID fields - add class vb-combo-input-ltr when needed */
    html[dir="rtl"] .vb-combo-input.vb-combo-input-ltr {
        direction: ltr;
        text-align: left;
    }

.vb-lookup-inline .vb-input {
    padding-right: 96px;
}

[dir="rtl"] .vb-lookup-inline .vb-input {
    padding-left: 96px;
    padding-right: 8px;
}

.vb-lookup-inline select.vb-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.vb-clear-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    color: #9aa3af;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

    .vb-clear-btn:hover {
        color: #6b7280;
        border-color: #c4c9d0;
        background: #dfe3e8;
    }

/* Status Badge */
.vb-status-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

/* Toggle Switch Styling */
.vb-toggle {
    display: flex;
    align-items: center;
}

    .vb-toggle .form-check-input {
        width: 36px;
        height: 18px;
        cursor: pointer;
    }
/* Reduce data row height */
.dynamic-grid .dx-grid-data-row td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.2;
}

/* Reduce header row height */
.dynamic-grid .dx-grid-header-row th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1;
}

/* Reduce command/action buttons row height */
.dynamic-grid .dx-button {
    min-height: 26px;
    padding: 2px 6px;
}

/* Responsive */
@@media (max-width: 768px) {
    .vb-modal-container {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
    }

    .vb-field-label {
        width: 110px;
        min-width: 110px;
        font-size: 8.5pt;
    }

    .vb-two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vb-field-line:not(.vb-field-line--stack) {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vb-field-line > .vb-field-row.vb-line-span-full {
        grid-column: auto;
    }
}
 
/*
    last css
*/ 

@@media (min-width: 899.98px) {
    .pw-800 {
        max-width: 900px !important;
        width: 900px !important;
    }
}
/* Calendar date-picker nav: see wwwroot/css/site.css (.dxbl-calendar RTL header). */

.dxbs-popup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .dxbs-popup-header .dxbs-popup-header-button {
        color: white;
    }

/* Pagination Control Styles */
.pagination-control {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

    .pagination-control .page-input {
        text-align: center;
        font-weight: 600;
    }

    .pagination-control .page-size-select {
        min-width: 70px;
    }

    .pagination-control .badge {
        font-size: 0.75rem;
    }

    .pagination-control .dxbl-btn {
        min-width: 32px;
    }

.subgrid-toggle-btn {
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
}

    .subgrid-toggle-btn .dxbl-btn-content {
        gap: 0;
    }

    .subgrid-toggle-btn .dxbl-btn-icon {
        font-size: 12px;
    }

.action-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

    .action-cell .dxbl-btn {
        min-width: 30px;
        height: 28px;
        padding: 0 7px;
        border-radius: 5px !important;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        box-shadow: none !important;
        background: var(--bs-body-bg) !important;
        color: var(--bs-body-secondary-color, #6c757d);
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

        .action-cell .dxbl-btn .dxbl-btn-icon {
            font-size: 12px;
        }

        .action-cell .dxbl-btn:hover {
            background: rgba(var(--bs-primary-rgb), 0.1) !important;
            border-color: var(--bs-primary) !important;
            box-shadow: none !important;
            color: var(--bs-primary) !important;
        }

.vb-action-ellipsis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #495057;
    cursor: pointer;
    line-height: 1;
}

    .vb-action-ellipsis-btn:hover {
        background: #f8f9fa;
        color: #212529;
    }

/* WebPortal-style drill: thin gray ring + arrow; toggles tabbed subgrid */
.vb-drill-circle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
    vertical-align: middle;
}

    .vb-drill-circle-btn .vb-drill-circle-ring {
        position: absolute;
        inset: 0;
        border: 1.5px solid #9ca3af;
        border-radius: 50%;
        pointer-events: none;
    }

    .vb-drill-circle-btn .vb-drill-circle-arrow {
        position: relative;
        z-index: 1;
        font-size: 10px;
        line-height: 1;
    }

    .vb-drill-circle-btn:hover {
        color: #374151;
    }

        .vb-drill-circle-btn:hover .vb-drill-circle-ring {
            border-color: #6b7280;
        }

    .vb-drill-circle-btn.vb-drill-circle-btn--active {
        color: #2563eb;
    }

        .vb-drill-circle-btn.vb-drill-circle-btn--active .vb-drill-circle-ring {
            border-color: #3b82f6;
            border-width: 2px;
        }

.dynamic-grid-container.vb-rtl .vb-drill-circle-btn .vb-drill-circle-arrow {
    transform: scaleX(-1);
}

/* SubGrid Toolbar - matches legacy ERP */
.subgrid-toolbar {
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    border-bottom: 1px solid #c0c0c0;
    font-size: 12px;
}

    .subgrid-toolbar a,
    .subgrid-toolbar .subgrid-toolbar-btn {
        text-decoration: none;
        color: #0d6efd !important;
    }

        .subgrid-toolbar a:hover,
        .subgrid-toolbar .subgrid-toolbar-btn:hover {
            text-decoration: underline;
            color: #0a58ca !important;
        }

    .subgrid-toolbar .btn-link.subgrid-toolbar-btn {
        color: #495057 !important;
    }

        .subgrid-toolbar .btn-link.subgrid-toolbar-btn:hover {
            color: #212529 !important;
        }

/* SubGrid panel: ERP-style dark tab rail + lighter active tab + child grid (RTL/LTR). */
.subgrid-panel {
    --vb-subgrid-rail: var(--bs-primary);
    --vb-subgrid-active: var(--bs-primary);
    background: var(--bs-body-bg);
    border: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    display: block;
}

    /* Tabbed drill-down: dark horizontal bar; inactive tabs sit on rail, active tab is lighter blue (reference UI). */
    .subgrid-panel .dxbl-tabs.subgrid-tabs {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid var(--vb-subgrid-rail);
        border-radius: 0 0 4px 4px;
        box-shadow: none;
        background: var(--vb-subgrid-rail);
        /* Chevrons disabled via TabsScrollMode.NoScroll + rules below */
        overflow: visible;
    }

        /* Hide tab header chevrons if DevExpress still renders scroll nav controls */
        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-start-scroll-button,
        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-end-scroll-button,
        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-header-scroll-button {
            display: none !important;
        }

        /* Keep tab strip visible even for a single tab (avoids “no tabs” look above nested grid) */
        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-header {
            display: flex !important;
            align-items: flex-end !important;
            width: 100% !important;
            min-height: 40px !important;
        }

        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-tab-list {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: flex-end !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
            visibility: visible !important;
            opacity: 1 !important;
            min-height: 40px !important;
            background: var(--vb-subgrid-rail) !important;
            border: none !important;
            border-bottom: none !important;
            padding: 6px 8px 0 8px !important;
            margin: 0 !important;
            gap: 4px !important;
            box-shadow: none !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-tab {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            border-bottom: none !important;
            border-radius: 6px 6px 0 0 !important;
            margin: 0 !important;
            padding: 9px 20px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: rgba(255, 255, 255, 0.88) !important;
            box-shadow: none !important;
        }

            .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-tab.dxbl-active {
                background: var(--vb-subgrid-active) !important;
                color: #fff !important;
                border-color: rgba(255, 255, 255, 0.35) !important;
                border-bottom: none !important;
                margin-bottom: 0 !important;
                z-index: 2 !important;
                position: relative !important;
            }

            .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-tab:hover:not(.dxbl-active) {
                background: rgba(255, 255, 255, 0.14) !important;
                color: #fff !important;
            }

        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-content,
        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-content-container {
            padding: 0 !important;
            margin: 0 !important;
            margin-top: 0 !important;
            background: var(--bs-body-bg) !important;
            border: none !important;
            border-top: none !important;
            box-shadow: none !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tab-panel {
            padding: 0 !important;
            margin: 0 !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

    /* Bootstrap drill strip: DxTabs in nested grid detail rows can render every tab body visible (stacked). One panel only. */
    .subgrid-panel .vb-drill-tabstrip {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid var(--vb-subgrid-rail);
        border-radius: 0 0 4px 4px;
        box-shadow: none;
        background: var(--vb-subgrid-rail);
        overflow: visible;
    }

    .subgrid-panel .vb-drill-tabstrip-nav {
        display: flex !important;
        align-items: flex-end !important;
        width: 100% !important;
        min-height: 40px !important;
    }

    .subgrid-panel .vb-drill-tabstrip-ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 6px 8px 0 8px !important;
        gap: 4px !important;
        background: var(--vb-subgrid-rail) !important;
        border: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .subgrid-panel .vb-drill-tabstrip-btn {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-bottom: none !important;
        border-radius: 6px 6px 0 0 !important;
        margin: 0 !important;
        padding: 9px 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        line-height: 1.25 !important;
    }

        .subgrid-panel .vb-drill-tabstrip-btn.active {
            background: var(--vb-subgrid-active) !important;
            color: #fff !important;
            border-color: rgba(255, 255, 255, 0.35) !important;
            border-bottom: none !important;
            z-index: 2 !important;
            position: relative !important;
        }

        .subgrid-panel .vb-drill-tabstrip-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.14) !important;
            color: #fff !important;
        }

    .subgrid-panel .vb-drill-tabstrip-body {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--bs-body-bg) !important;
        border: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

/* RTL: pack tabs from the right (inline-start). row-reverse fought dir=rtl and left-aligned the strip. */
[dir="rtl"] .subgrid-panel .vb-drill-tabstrip-nav {
    direction: rtl;
}

[dir="rtl"] .subgrid-panel .vb-drill-tabstrip-ul {
    direction: rtl;
    flex-direction: row;
    justify-content: flex-start;
}

[dir="rtl"] .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-header {
    direction: rtl;
}

[dir="rtl"] .subgrid-panel .dxbl-tabs.subgrid-tabs .dxbl-tabs-tab-list {
    flex-direction: row;
    justify-content: flex-start;
}

/* Let nested DxGrid own horizontal scroll; shrink-to-fit in flex/tab layouts (min-width:0). */
.subgrid-panel .vb-drill-tab-grids {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.subgrid-panel .dxbl-tabs-content {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bs-body-bg);
    border: none !important;
}

.subgrid-panel .dxbl-grid {
    border: none !important;
    margin: 0 !important;
}

/* Flush nested grid host inside tabs (removes stray vertical gap) */
.subgrid-panel .vb-grid-dom-host {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Child grid header: theme-aware (matches master grid visual language). */
.subgrid-panel .dxbl-grid .dxbl-grid-header-row {
    background: var(--bs-tertiary-bg, #f2f2f2) !important;
    color: var(--bs-body-color, #1a1a1a) !important;
    border-top: 2px solid var(--bs-primary) !important;
    border-bottom: 1px solid var(--bs-border-color, #c5c9ce) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .subgrid-panel .dxbl-grid .dxbl-grid-header-row th {
        font-weight: 700;
        padding: 0.55rem 0.65rem !important;
        line-height: 1.2 !important;
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        color: var(--bs-body-color, #1a1a1a) !important;
        background: var(--bs-tertiary-bg, #f2f2f2) !important;
        border-color: var(--bs-border-color, #d8d8d8) !important;
        vertical-align: middle !important;
        text-align: center !important;
    }

        .subgrid-panel .dxbl-grid .dxbl-grid-header-row th:not(:last-child) {
            border-inline-end: 1px solid var(--bs-border-color, #d8d8d8) !important;
        }

        .subgrid-panel .dxbl-grid .dxbl-grid-header-row th:hover {
            background: var(--bs-secondary-bg, #e8eaed) !important;
        }

        .subgrid-panel .dxbl-grid .dxbl-grid-header-row th .dxbl-btn,
        .subgrid-panel .dxbl-grid .dxbl-grid-header-row th button:not(.vb-grid-header-new-link) {
            color: var(--bs-body-color, #2c3e50) !important;
        }

        .subgrid-panel .dxbl-grid .dxbl-grid-header-row th .vb-grid-header-new-link {
            color: var(--bs-primary) !important;
            font-size: 1rem !important;
        }

            .subgrid-panel .dxbl-grid .dxbl-grid-header-row th .vb-grid-header-new-link:hover {
                color: var(--bs-primary-text-emphasis, #0f2d52) !important;
            }

.subgrid-panel .dxbl-grid .dxbl-grid-table td {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.5rem !important;
    vertical-align: middle;
    line-height: 1.4 !important;
}

/* Nested grid focused / selected row — matches master grid strong highlight */
.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-focused-row > td,
.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-focused-row .vb-drill-circle-btn,
.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-focused-row .dxbl-btn,
.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row .vb-drill-circle-btn,
.subgrid-panel .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row .dxbl-btn {
    color: #fff !important;
}

/* Export strip above nested grid body — theme-aware band under tabs */
.subgrid-panel .subgrid-toolbar {
    background: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Related Records - Empty state when no records */
.subgrid-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 1.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px dashed var(--bs-border-color, #d0d5dd);
    border-radius: 8px;
    margin: 0;
}

    .subgrid-empty-state .subgrid-empty-icon {
        font-size: 2.75rem;
        color: var(--bs-primary);
        opacity: 0.35;
        margin-bottom: 0.75rem;
    }

    .subgrid-empty-state .subgrid-empty-text {
        color: #64748b;
        font-size: 0.9rem;
        margin: 0;
    }

    .subgrid-empty-state .subgrid-empty-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 1rem;
        padding: 0.4rem 0.9rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--bs-primary) !important;
        background: var(--bs-body-bg) !important;
        border: 1px solid var(--bs-primary) !important;
        border-radius: 6px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

        .subgrid-empty-state .subgrid-empty-add-btn:hover {
            background: var(--bs-primary) !important;
            color: #fff !important;
            border-color: var(--bs-primary) !important;
        }

    .subgrid-empty-state.subgrid-empty-state--master {
        min-height: 220px;
    }

/* Detail Row Content - Subgrid directly under parent row */
.detail-row-content {
    background: linear-gradient(to bottom, #fafbfc 0%, #f5f6f8 100%);
    border: 1px solid #e0e4e8;
    border-top: 3px solid #4a90d9;
    border-radius: 0 0 4px 4px;
    padding: 9px;
    margin: 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

    .detail-row-content .subgrid-header {
        color: #4a90d9;
        font-weight: 600;
        font-size: 13px;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px solid #e0e4e8;
    }

.detail-row-tabs {
    background: transparent;
}

    .detail-row-tabs .dxbl-tabs-tab-list {
        background: #f0f0f0;
        border: none;
        padding: 0;
        gap: 1px;
    }

    .detail-row-tabs .dxbl-tabs-tab {
        background: linear-gradient(to bottom, #e8e8e8 0%, #d8d8d8 100%);
        border: 1px solid #b0b0b0;
        border-bottom: none;
        border-radius: 3px 3px 0 0;
        margin-right: 1px;
        padding: 5px 14px;
        font-size: 12px;
        font-weight: 500;
        color: #333;
    }

        .detail-row-tabs .dxbl-tabs-tab.dxbl-active {
            background: #4a90d9;
            color: #fff;
            border-color: #3a7bc8;
        }

        .detail-row-tabs .dxbl-tabs-tab:hover:not(.dxbl-active) {
            background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
        }

    .detail-row-tabs .dxbl-tabs-content {
        padding: 8px;
        background: #fff;
        border: 1px solid #c0c0c0;
        border-top: none;
    }

.subgrid-inline {
    width: 100%;
}

    /* DevExpress edit form shell: stretch for inline/detail — not nested PopupEditForm (subgrid-popup-edit) */
    .subgrid-inline:not(.subgrid-popup-edit) .dxbl-grid-edit-form,
    .subgrid-inline:not(.subgrid-popup-edit) .dxbl-popup-edit-form,
    .vb-nested-grid-host .dynamic-grid:not(.subgrid-popup-edit) .dxbl-grid-edit-form,
    .vb-nested-grid-host .dynamic-grid:not(.subgrid-popup-edit) .dxbl-popup-edit-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

.vb-nested-grid-host .dynamic-grid.subgrid-popup-edit .dxbl-popup-edit-form {
    max-width: 100% !important;
}

/* Grid Detail Row Styling */
.dxbl-grid .dxbl-grid-detail-cell {
    padding: 0 !important;
    background: transparent !important;
}

.dxbl-grid .dxbl-grid-detail-content-container {
    padding: 0;
}

/* Expanded master-detail row: use full grid width (remove side gutters next to arrows) */
.dynamic-grid:not(.subgrid-inline) tr.dxbl-grid-detail-row > td,
.dynamic-grid:not(.subgrid-inline) .dxbl-grid-detail-row > td,
.dynamic-grid:not(.subgrid-inline) td.dxbl-grid-detail-cell {
    padding: 0 !important;
    vertical-align: top !important;
}

.dynamic-grid:not(.subgrid-inline) .dxbl-grid-detail-content-container,
.dynamic-grid:not(.subgrid-inline) .dxbl-grid-detail-cell > .dxbl-grid-detail-content-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.subgrid-panel--expand {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.vb-detail-under-parent.subgrid-panel {
    margin-top: 0 !important;
    border-top: none !important;
}

.subgrid-panel--expand .dxbl-tabs.subgrid-tabs,
.subgrid-panel--expand .vb-drill-tabstrip {
    width: 100% !important;
    max-width: 100% !important;
}

/* System Tabs Panel - Hidden for cleaner legacy look */
.system-tabs-panel {
    display: none;
}

/* Fullscreen Mode */
.dynamic-grid-container.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: white !important;
    padding: 15px !important;
    overflow: auto !important;
    margin: 0 !important;
}

    .dynamic-grid-container.fullscreen-mode .grid-toolbar {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }

    .dynamic-grid-container.fullscreen-mode .dxbl-grid {
        height: calc(100vh - 200px) !important;
    }

.fullscreen-btn-active {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Edit Form Layout Styles */
/* ===== DropDownButton popup items (rendered at <body> root, escape scoped CSS) =====
   Apply both LTR and RTL spacing here so View/Actions dropdowns render correctly in either direction. */
.dxbl-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
}

.dxbl-dropdown-item .dxbl-btn-icon,
.dxbl-dropdown-item .dxbl-image,
.dxbl-dropdown-item > i.fa-solid,
.dxbl-dropdown-item > i.fa-regular,
.dxbl-dropdown-item > i.fa-brands {
    color: #6c757d;
    width: 1.1em;
    text-align: center;
    flex-shrink: 0;
    margin: 0 !important; /* gap handles spacing in both directions */
}

[dir="rtl"] .dxbl-dropdown-item,
.dxbl-dropdown[dir="rtl"] .dxbl-dropdown-item {
    direction: rtl;
    text-align: right;
}

.dxbl-dropdown-item:hover,
.dxbl-dropdown-item:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}

.dxbl-dropdown-item:hover .dxbl-btn-icon,
.dxbl-dropdown-item:hover .dxbl-image,
.dxbl-dropdown-item:hover > i {
    color: var(--bs-primary) !important;
}

.edit-form-layout {
    width: 100%;
}

    .edit-form-layout .dxbl-fl-cpt {
        min-width: 150px !important;
        max-width: 230px !important;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        overflow: visible;
        font-size: var(--vb-cap-fs) !important;
        font-weight: 500 !important;
        color: var(--bs-body-color) !important;
        line-height: 1.35 !important;
        padding-inline-end: 0.6rem !important;
        align-self: center !important;
    }

    .edit-form-layout .dxbl-fl-ctrl {
        min-width: 150px !important;
        flex: 1 1 auto !important;
    }

    .edit-form-layout .dxbl-text-edit,
    .edit-form-layout .dxbl-combobox,
    .edit-form-layout .dxbl-date-edit,
    .edit-form-layout .dxbl-spin-edit {
        width: 100% !important;
        min-width: 120px !important;
    }

    .edit-form-layout input.dxbl-edit-input {
        min-width: 100px !important;
    }

/* ===== Modern, uniform edit-form controls (ERP standard) =====
   --vb-ctrl-h is the single height token; --vb-cap-fs the caption font-size. Change here
   to rescale the entire form. 36px matches DevExpress ComboBox natural height (its inline
   ✕ + ⌄ buttons would otherwise force the combo taller than a plain text-edit). */
.edit-form-layout,
.vb-edit-form-tab-content {
    --vb-ctrl-h: 36px;
    --vb-cap-fs: 0.9rem;
}

.edit-form-layout .dxbl-text-edit,
.edit-form-layout .dxbl-combobox,
.edit-form-layout .dxbl-date-edit,
.edit-form-layout .dxbl-spin-edit,
.edit-form-layout .dxbl-masked-input,
.edit-form-layout .dxbl-memo,
.vb-edit-form-tab-content .dxbl-text-edit,
.vb-edit-form-tab-content .dxbl-combobox,
.vb-edit-form-tab-content .dxbl-date-edit,
.vb-edit-form-tab-content .dxbl-spin-edit,
.vb-edit-form-tab-content .dxbl-masked-input,
.vb-edit-form-tab-content .dxbl-memo {
    min-height: var(--vb-ctrl-h) !important;
    height: var(--vb-ctrl-h) !important;
    border-radius: 6px !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    background: var(--bs-body-bg);
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

/* Bare <input>/<select> rendered without a DevExpress wrapper (some legacy code paths) — the
   reason "Vendor" and "Tel" looked shorter than "Vendor group" combobox in Screenshot 172003. */
.edit-form-layout .dxbl-fl-ctrl > input[type="text"],
.edit-form-layout .dxbl-fl-ctrl > input[type="number"],
.edit-form-layout .dxbl-fl-ctrl > input[type="email"],
.edit-form-layout .dxbl-fl-ctrl > input[type="tel"],
.edit-form-layout .dxbl-fl-ctrl > input[type="url"],
.edit-form-layout .dxbl-fl-ctrl > input[type="search"],
.edit-form-layout .dxbl-fl-ctrl > input[type="password"],
.edit-form-layout .dxbl-fl-ctrl > input[type="date"],
.edit-form-layout .dxbl-fl-ctrl > select,
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="text"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="number"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="email"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="tel"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="url"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="search"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="password"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > input[type="date"],
.vb-edit-form-tab-content .dxbl-fl-ctrl > select {
    width: 100% !important;
    height: var(--vb-ctrl-h) !important;
    line-height: 1.35 !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    background: var(--bs-body-bg);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-form-layout .dxbl-fl-ctrl > input:focus,
.edit-form-layout .dxbl-fl-ctrl > select:focus,
.vb-edit-form-tab-content .dxbl-fl-ctrl > input:focus,
.vb-edit-form-tab-content .dxbl-fl-ctrl > select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15) !important;
    outline: none !important;
}

/* Checkbox / switch wrappers occupy the same row height as text inputs so rows align */
.edit-form-layout .form-check,
.edit-form-layout .form-switch,
.edit-form-layout .vb-toggle,
.edit-form-layout .dxbl-checkbox,
.vb-edit-form-tab-content .form-check,
.vb-edit-form-tab-content .form-switch,
.vb-edit-form-tab-content .vb-toggle,
.vb-edit-form-tab-content .dxbl-checkbox {
    min-height: var(--vb-ctrl-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-inline-start: 0 !important;
}

/* textarea / memo: starts at 3 rows tall but inherits the same border + radius. The wrapper
   .dxbl-text-edit gets its explicit height ONLY when it doesn't contain a textarea. */
.edit-form-layout .dxbl-text-edit:has(textarea),
.vb-edit-form-tab-content .dxbl-text-edit:has(textarea) {
    height: auto !important;
    min-height: calc(var(--vb-ctrl-h) * 2.5) !important;
}

.edit-form-layout .dxbl-text-edit textarea,
.vb-edit-form-tab-content .dxbl-text-edit textarea {
    height: auto !important;
    min-height: calc(var(--vb-ctrl-h) * 2.5) !important;
    line-height: 1.4 !important;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.875rem !important;
    resize: vertical;
    border: none !important;
}

.edit-form-layout .dxbl-edit-input,
.edit-form-layout .dxbl-text-edit-input,
.edit-form-layout .dxbl-combobox-input,
.vb-edit-form-tab-content .dxbl-edit-input,
.vb-edit-form-tab-content .dxbl-text-edit-input,
.vb-edit-form-tab-content .dxbl-combobox-input {
    height: calc(var(--vb-ctrl-h) - 2px) !important;
    line-height: 1.35 !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.9rem !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== Modern checkbox / DevExpress DxCheckBox =====
   Larger, square, primary-colored when checked; smooth transition; white check on solid bg. */
.dxbl-checkbox,
.edit-form-layout .dxbl-checkbox,
.vb-edit-form-tab-content .dxbl-checkbox {
    --dxbl-checkbox-size: 1.1rem;
}

/* Native checkbox (Bootstrap form-check) — used for inline-edit row checkboxes */
.edit-form-layout .form-check-input,
.vb-edit-form-tab-content .form-check-input {
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin-top: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0.5rem !important;
    border: 1.5px solid var(--bs-border-color, #adb5bd) !important;
    border-radius: 4px !important;
    background-color: var(--bs-body-bg) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.edit-form-layout .form-check-input:hover,
.vb-edit-form-tab-content .form-check-input:hover {
    border-color: var(--bs-primary) !important;
}

.edit-form-layout .form-check-input:focus,
.vb-edit-form-tab-content .form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
    outline: none !important;
}

.edit-form-layout .form-check-input:checked,
.vb-edit-form-tab-content .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.edit-form-layout .form-check-input:disabled,
.vb-edit-form-tab-content .form-check-input:disabled {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    opacity: 0.65;
    cursor: not-allowed;
}

/* form-switch (toggle switch) — wider track, primary color when on */
.edit-form-layout .form-switch .form-check-input,
.vb-edit-form-tab-content .form-switch .form-check-input {
    width: 2.25rem !important;
    height: 1.15rem !important;
    border-radius: 999px !important;
    background-position: left center !important;
}

.edit-form-layout .form-switch .form-check-input:checked,
.vb-edit-form-tab-content .form-switch .form-check-input:checked {
    background-position: right center !important;
}

/* DevExpress DxCheckBox component — match the native look */
.dxbl-checkbox .dxbl-image,
.dxbl-checkbox .dxbl-checkbox-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 4px !important;
    border: 1.5px solid var(--bs-border-color, #adb5bd) !important;
    background-color: var(--bs-body-bg) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dxbl-checkbox:hover .dxbl-image,
.dxbl-checkbox:hover .dxbl-checkbox-icon {
    border-color: var(--bs-primary) !important;
}

.dxbl-checkbox.dxbl-checked .dxbl-image,
.dxbl-checkbox.dxbl-checkbox-checked .dxbl-image,
.dxbl-checkbox.dxbl-checked .dxbl-checkbox-icon,
.dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-icon {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.dxbl-checkbox:focus-within .dxbl-image,
.dxbl-checkbox:focus-within .dxbl-checkbox-icon {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* Checkbox label spacing — both LTR and RTL */
.edit-form-layout .form-check-label,
.vb-edit-form-tab-content .form-check-label,
.dxbl-checkbox .dxbl-checkbox-label {
    margin-inline-start: 0.4rem;
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}

/* Modern focus state: primary-tint ring (replaces default browser/devexpress outline) */
.edit-form-layout .dxbl-text-edit:focus-within,
.edit-form-layout .dxbl-combobox:focus-within,
.edit-form-layout .dxbl-date-edit:focus-within,
.edit-form-layout .dxbl-spin-edit:focus-within,
.vb-edit-form-tab-content .dxbl-text-edit:focus-within,
.vb-edit-form-tab-content .dxbl-combobox:focus-within,
.vb-edit-form-tab-content .dxbl-date-edit:focus-within,
.vb-edit-form-tab-content .dxbl-spin-edit:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15) !important;
    outline: none !important;
}

/* Comfortable, menu-like vertical rhythm — every row gets the same breathing room.
   The DevExpress form layout uses dxbl-fl-cnt for the row, dxbl-fl-itm for each cell. */
.edit-form-layout .dxbl-fl-cnt,
.edit-form-layout .dxbl-fl-itm,
.vb-edit-form-tab-content .dxbl-fl-cnt,
.vb-edit-form-tab-content .dxbl-fl-itm {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    align-items: center !important;
}

/* Make sure the control cell stretches to row min-height so caption + control stay
   vertically centered together (was the cause of the floating tiny checkbox). */
.edit-form-layout .dxbl-fl-ctrl,
.vb-edit-form-tab-content .dxbl-fl-ctrl {
    min-height: var(--vb-ctrl-h) !important;
    display: flex !important;
    align-items: center !important;
}

/* Inline action buttons inside lookup/combobox (clear ✕, dropdown ⌄, +) — uniform height
   that hugs the combo's inner padding. Sized off the var so any future height change
   keeps the inline buttons proportional. */
.edit-form-layout .dxbl-combobox .dxbl-btn,
.edit-form-layout .dxbl-text-edit .dxbl-btn,
.edit-form-layout .dxbl-date-edit .dxbl-btn,
.edit-form-layout .dxbl-spin-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-combobox .dxbl-btn,
.vb-edit-form-tab-content .dxbl-text-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-date-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-spin-edit .dxbl-btn {
    height: calc(var(--vb-ctrl-h) - 4px) !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    align-self: center;
}

.edit-form-layout .dxbl-combobox .dxbl-btn:hover,
.vb-edit-form-tab-content .dxbl-combobox .dxbl-btn:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Mandatory/optional cells: keep colored bg but inherit consistent border so heights match */
.edit-form-layout .vb-field-required .dxbl-text-edit,
.edit-form-layout .vb-field-required .dxbl-combobox,
.edit-form-layout .vb-field-optional .dxbl-text-edit,
.edit-form-layout .vb-field-optional .dxbl-combobox,
.vb-edit-form-tab-content .vb-field-required .dxbl-text-edit,
.vb-edit-form-tab-content .vb-field-required .dxbl-combobox,
.vb-edit-form-tab-content .vb-field-optional .dxbl-text-edit,
.vb-edit-form-tab-content .vb-field-optional .dxbl-combobox {
    border-color: var(--bs-border-color, #ced4da) !important;
}

/* Read-only fields: show non-interactive cue without breaking sizing */
.edit-form-layout .vb-field-readonly .dxbl-text-edit,
.edit-form-layout .vb-field-readonly .dxbl-combobox,
.vb-edit-form-tab-content .vb-field-readonly .dxbl-text-edit,
.vb-edit-form-tab-content .vb-field-readonly .dxbl-combobox {
    background: #e9ecef !important;
    border-color: #ced4da !important;
}

/* vb-toggle (inline-edit checkbox renderer at line 7874 of code-behind) — same look as DxCheckBox */
.edit-form-layout .vb-toggle,
.vb-edit-form-tab-content .vb-toggle {
    gap: 0.5rem;
    padding: 0 !important;
}

.edit-form-layout .vb-toggle input[type="checkbox"],
.vb-edit-form-tab-content .vb-toggle input[type="checkbox"] {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 4px !important;
    border: 1.5px solid var(--bs-border-color, #adb5bd) !important;
    accent-color: var(--bs-primary);
    cursor: pointer;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Layout cell that hosts a checkbox: vertically center the control inside the row.
   Without this, a 1.15rem checkbox inside a 34px row floats top-left and looks like the
   tiny lonely square in Screenshot 164104. */
.edit-form-layout .dxbl-fl-ctrl:has(.form-check),
.edit-form-layout .dxbl-fl-ctrl:has(.dxbl-checkbox),
.edit-form-layout .dxbl-fl-ctrl:has(.vb-toggle),
.vb-edit-form-tab-content .dxbl-fl-ctrl:has(.form-check),
.vb-edit-form-tab-content .dxbl-fl-ctrl:has(.dxbl-checkbox),
.vb-edit-form-tab-content .dxbl-fl-ctrl:has(.vb-toggle) {
    display: flex !important;
    align-items: center !important;
    min-height: var(--vb-ctrl-h) !important;
}

/* Custom Alert Modal Styles */
#custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #custom-alert-overlay.show {
        opacity: 1;
    }

.custom-alert-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
}

.custom-alert-dialog {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    min-width: 340px;
    max-width: 450px;
    overflow: hidden;
    transform: scale(0.9) translateY(-20px);
    transition: transform 0.2s ease;
    animation: alertSlideIn 0.3s ease forwards;
}

@@keyframes alertSlideIn {
    from {
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }

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

.custom-alert-header {
    padding: 1.25rem 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.custom-alert-drag-handle {
    cursor: move;
}

.custom-alert-header i {
    font-size: 1.5rem;
}

.custom-alert-body {
    padding: 1.5rem;
    color: #2d3748;
    font-size: 1rem;
    line-height: 1.6;
}

    .custom-alert-body p {
        margin: 0;
    }

.custom-alert-footer {
    padding: 1rem 1.5rem;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.custom-alert-btn {
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .custom-alert-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        filter: brightness(1.05);
    }

    .custom-alert-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
    }

.custom-alert-btn-cancel {
    background: #a0aec0;
    color: white;
}

    .custom-alert-btn-cancel:hover {
        background: #718096;
    }

/* Actions Popup Modern Styles */
.actions-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.actions-popup-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
    min-width: 320px;
    max-width: 400px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@@keyframes slideUp {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

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

.actions-popup-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actions-popup-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

    .actions-popup-title i {
        font-size: 1.2rem;
        color: #fbbf24;
    }

.actions-popup-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .actions-popup-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(90deg);
    }

.actions-popup-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.actions-popup-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

    .actions-popup-item:hover {
        background: white;
        border-color: var(--action-color, #3b82f6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateX(4px);
    }

.action-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.action-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.action-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.action-description {
    font-size: 0.8rem;
    color: #64748b;
}

.action-arrow {
    color: #94a3b8;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.actions-popup-item:hover .action-arrow {
    color: var(--action-color, #3b82f6);
    transform: translateX(4px);
}

.actions-popup-empty {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

    .actions-popup-empty i {
        font-size: 2rem;
        color: #cbd5e1;
    }

.grid-toolbar .toolbar-search {
    max-width: 400px;
    min-width: 260px;
}

.grid-toolbar .toolbar-right {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.vb-actions-group {
    gap: 0.5rem;
}

.grid-toolbar {
    margin-bottom: 0 !important;
}

/* Pin: keep edit form open after Save (toolbar + popup header) */
.vb-pin-keep-open {
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1;
    border: 1px solid #c5d7eb;
    background: #f8f9fa;
    color: #212529;
}

    .vb-pin-keep-open:hover {
        background: #eef2f6;
        border-color: #9ec5fe;
    }

    .vb-pin-keep-open.vb-pin-keep-open--active {
        background: #e7f1ff;
        border-color: #6ea8fe;
        color: #0a58ca;
    }

/* Toolbar button: consistent size, hover tint, no hard shadow */
.grid-toolbar .dxbl-btn {
    padding-inline: 8px 10px;
    padding-block: 5px 7px;
    min-height: 32px;
    border-radius: 6px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.grid-toolbar .dxbl-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.25) !important;
}

.grid-toolbar .dxbl-btn .dxbl-btn-icon {
    font-size: 0.875rem;
}

    .grid-toolbar .dxbl-btn:has(.dxbl-btn-text) .dxbl-btn-icon {
        margin-inline-end: 6px;
    }

.subgrid-toolbar .dxbl-btn {
    padding-inline: 8px 10px;
    padding-block: 4px 6px;
}

    .subgrid-toolbar .dxbl-btn:has(.dxbl-btn-text) .dxbl-btn-icon {
        margin-inline-end: 5px;
    }

.grid-toolbar + .dxbl-grid {
    margin-top: 0 !important;
}

    .grid-toolbar + .dxbl-grid,
    .grid-toolbar + .dxbl-grid .dxbl-grid-header,
    .grid-toolbar + .dxbl-grid .dxbl-grid-header-row {
        margin-top: 0 !important;
    }

        .grid-toolbar + .dxbl-grid .dxbl-grid-header,
        .grid-toolbar + .dxbl-grid .dxbl-grid-header-row {
            padding-top: 0 !important;
        }

/* Breathing room between last data row and horizontal scrollbar, then before pager */
.vb-grid-dom-host .dxbl-grid-content {
    padding-bottom: 0.75rem;
}

.vb-grid-dom-host .dxbl-grid-rows {
    padding-bottom: 0.45rem;
    box-sizing: border-box;
}

/* RTL wide grid: LTR scroll viewport + RTL table (stable horizontal scroll; column order / Arabic cells stay RTL). */
.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-grid-content,
.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-grid-rows,
.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-scroll-view,
.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-grid-layout-root {
    direction: ltr !important;
}

.dynamic-grid-container.vb-rtl .vb-grid-dom-host table.dxbl-grid-table {
    direction: rtl !important;
}

/* Same scrollbar normalization when nested grid is not under .subgrid-panel (e.g. some hosts). */
.dynamic-grid-container.vb-subgrid-root .vb-grid-dom-host .dxbl-scroll-view {
    scrollbar-width: auto;
    scrollbar-color: #9aa5b5 #e8ecf2;
}

    .dynamic-grid-container.vb-subgrid-root .vb-grid-dom-host .dxbl-scroll-view::-webkit-scrollbar {
        width: 10px;
        height: 14px;
    }

    .dynamic-grid-container.vb-subgrid-root .vb-grid-dom-host .dxbl-scroll-view::-webkit-scrollbar-track {
        background: #e8ecf2;
        border-radius: 7px;
    }

    .dynamic-grid-container.vb-subgrid-root .vb-grid-dom-host .dxbl-scroll-view::-webkit-scrollbar-thumb {
        background: #8b98ab;
        border-radius: 7px;
        border: 3px solid #e8ecf2;
    }

        .dynamic-grid-container.vb-subgrid-root .vb-grid-dom-host .dxbl-scroll-view::-webkit-scrollbar-thumb:hover {
            background: #6b7a90;
        }

.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-grid-edit-form,
.dynamic-grid-container.vb-rtl .vb-grid-dom-host .dxbl-popup-edit-form {
    direction: rtl !important;
}

.vb-grid-dom-host .dxbl-grid-pager {
    margin-top: 0.5rem;
}

.dxbl-grid-toolbar-container {
    min-height: 0 !important;
}

.dynamic-grid-container .dxbl-grid-toolbar-container {
    display: none !important;
}

/* Subgrid: master uses custom .grid-toolbar; nested delete/add live in command column header only. */
.dynamic-grid-container .vb-nested-grid-host .dxbl-grid-toolbar-container {
    display: flex !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

    /* No export strip → hide toolbar row entirely (removes empty band above grid) */
    .dynamic-grid-container .vb-nested-grid-host .dxbl-grid-toolbar-container:not(:has(.subgrid-toolbar)) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

.vb-nested-grid-host .subgrid-toolbar {
    margin: 0 !important;
    border-bottom: 1px solid #c0c0c0;
}

/* Nested grid component: no outer box gap inside parent form/detail */
.dynamic-grid-container.vb-subgrid-root {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

    .dynamic-grid-container.vb-subgrid-root .loading-overlay,
    .dynamic-grid-container.vb-subgrid-root .alert {
        margin-bottom: 0.5rem;
    }

.dxbl-grid .dxbl-grid-header {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* DxPopup RTL support – popup may render in portal; force direction on container and body */
.vb-popup-rtl,
.vb-popup-rtl.dxbl-popup,
.dxbl-popup.vb-popup-rtl,
[class*='popup'].vb-popup-rtl {
    direction: rtl !important;
    text-align: right !important;
}

.vb-popup-body-rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* Edit popup: actions in header (legacy-style toolbar above tabs) */
.vb-edit-popup .dxbl-popup-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.vb-edit-popup .vb-edit-popup-header-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

    .vb-edit-popup .vb-edit-popup-header-actions .dxbl-btn {
        white-space: nowrap;
    }

/* RTL dropdown list alignment. DevExpress 25+ uses .dxbl-list-box; older uses .dxbl-listbox. */
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-listbox,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-list-box,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-listbox-content,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-list-box-content,
.vb-popup-rtl .dxbl-dropdown .dxbl-listbox,
.vb-popup-rtl .dxbl-dropdown .dxbl-list-box,
.vb-popup-rtl .dxbl-dropdown .dxbl-listbox-content,
.vb-popup-rtl .dxbl-dropdown .dxbl-list-box-content,
[dir="rtl"] .dxbl-dropdown .dxbl-listbox,
[dir="rtl"] .dxbl-dropdown .dxbl-list-box,
[dir="rtl"] .dxbl-dropdown .dxbl-listbox-content,
[dir="rtl"] .dxbl-dropdown .dxbl-list-box-content,
html[dir="rtl"] .dxbl-popup .dxbl-listbox,
html[dir="rtl"] .dxbl-popup .dxbl-list-box,
html[dir="rtl"] .dxbl-popup .dxbl-listbox-content,
html[dir="rtl"] .dxbl-popup .dxbl-list-box-content,
html[lang^="ar"] .dxbl-popup .dxbl-listbox,
html[lang^="ar"] .dxbl-popup .dxbl-list-box,
html[lang^="ar"] .dxbl-popup .dxbl-listbox-content,
html[lang^="ar"] .dxbl-popup .dxbl-list-box-content {
    direction: rtl !important;
    text-align: right !important;
}

.vb-combo-dropdown-rtl,
.vb-combo-dropdown-rtl .dxbl-listbox,
.vb-combo-dropdown-rtl .dxbl-list-box {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL combobox dropdown scrollbar — DevExpress 24+ uses a CUSTOM div-based scrollbar
   `.dxbl-scroll-viewer-vert-scroll-bar` positioned absolute right:0; bottom:0 inside
   `.dxbl-scroll-viewer`. Native `direction: rtl` on a parent doesn't move it because
   the position is hardcoded to `right: 0`. Override with `left: 0; right: auto` to
   anchor it to the LEFT edge instead — this is what users perceive as the "end" in
   an RTL dropdown. The horizontal scrollbar stays at the bottom unchanged. */
.vb-combo-dropdown-rtl .dxbl-scroll-viewer-vert-scroll-bar,
[dir="rtl"] .dxbl-popup .dxbl-scroll-viewer-vert-scroll-bar,
[dir="rtl"] .dxbl-dropdown .dxbl-scroll-viewer-vert-scroll-bar,
html[dir="rtl"] .dxbl-popup .dxbl-scroll-viewer-vert-scroll-bar,
html[lang^="ar"] .dxbl-popup .dxbl-scroll-viewer-vert-scroll-bar,
.vb-popup-rtl .dxbl-popup .dxbl-scroll-viewer-vert-scroll-bar {
    right: auto !important;
    left: 0 !important;
}

/* Same handling for the older `.dxbl-scroll-view` class name (kept for compat with any
   older DevExpress release still in this codebase). */
.vb-combo-dropdown-rtl .dxbl-scroll-view-vert-scroll-bar,
[dir="rtl"] .dxbl-popup .dxbl-scroll-view-vert-scroll-bar,
html[dir="rtl"] .dxbl-popup .dxbl-scroll-view-vert-scroll-bar,
html[lang^="ar"] .dxbl-popup .dxbl-scroll-view-vert-scroll-bar {
    right: auto !important;
    left: 0 !important;
}

/* Pad item content on the LEFT so list text doesn't sit under the (now left-edge) scrollbar.
   Mirrors the default right-side padding the theme uses for the vertical bar gutter. */
.vb-combo-dropdown-rtl .dxbl-scroll-viewer-content,
.vb-combo-dropdown-rtl .dxbl-listbox,
.vb-combo-dropdown-rtl .dxbl-list-box,
[dir="rtl"] .dxbl-popup .dxbl-scroll-viewer-content,
html[dir="rtl"] .dxbl-popup .dxbl-scroll-viewer-content,
html[lang^="ar"] .dxbl-popup .dxbl-scroll-viewer-content {
    padding-left: var(--dxbl-scroll-viewer-vert-scroll-bar-width, 0.625rem);
    padding-right: 0;
}

/* Slightly thicker scrollbar inside DevExpress dropdowns (combobox / lookup popups).
   The default theme width is 0.2rem (~3.2px) and the hover width 0.5rem (~8px) — a bit
   thin to grab. Bumping the rest-state width to 0.5rem and hover/active to 0.75rem
   makes it more visible without becoming chunky. The horizontal bar gets the same
   treatment so it stays proportional. Scope: any DxComboBox-driven popup (`.dxbl-popup`)
   plus the marker class — leaves grid/page-level scrollers alone. */
.dxbl-popup .dxbl-scroll-viewer,
.dxbl-dropdown .dxbl-scroll-viewer,
.vb-combo-dropdown-rtl .dxbl-scroll-viewer {
    --dxbl-scroll-viewer-vert-scroll-bar-width: 0.5rem;
    --dxbl-scroll-viewer-vert-scroll-bar-hover-width: 0.75rem;
    --dxbl-scroll-viewer-hor-scroll-bar-height: 0.5rem;
    --dxbl-scroll-viewer-hor-scroll-bar-hover-height: 0.75rem;
}

/* Make the thumb itself a touch more opaque so the wider track is visually anchored
   (default is opacity:0.5, which can look washed out on light backgrounds). */
.dxbl-popup .dxbl-scroll-viewer-scroll-thumb,
.dxbl-dropdown .dxbl-scroll-viewer-scroll-thumb,
.vb-combo-dropdown-rtl .dxbl-scroll-viewer-scroll-thumb {
    opacity: 0.7 !important;
    border-radius: 0.25rem !important;
}

/* JS-tagged scaleX flip is no longer needed but kept here as no-op fallback in case
   a future DX release hides the standalone bar div and reverts to a native scrollbar. */
.vb-rtl-scroll-flip { /* intentionally empty */ }

/* Existing class-name-based selectors below still set direction:rtl + text-align:right
   on the listbox content for proper text alignment. */
html[dir="rtl"] .dxbl-popup .dxbl-list-box .dxbl-scroll-view,
html[dir="rtl"] .dxbl-popup .dxbl-listbox .dxbl-scroll-view,
html[lang^="ar"] .dxbl-popup .dxbl-list-box .dxbl-scroll-view,
html[lang^="ar"] .dxbl-popup .dxbl-listbox .dxbl-scroll-view,
[dir="rtl"] .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view,
[dir="rtl"] .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view,
.vb-popup-rtl .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view,
.vb-popup-rtl .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view,
.vb-combo-dropdown-rtl .dxbl-list-box .dxbl-scroll-view,
.vb-combo-dropdown-rtl .dxbl-listbox .dxbl-scroll-view {
    transform: scaleX(-1) !important;
}

/* Mirror the children back so item text reads correctly inside the flipped container. */
html[dir="rtl"] .dxbl-popup .dxbl-list-box .dxbl-scroll-view > *,
html[dir="rtl"] .dxbl-popup .dxbl-listbox .dxbl-scroll-view > *,
html[lang^="ar"] .dxbl-popup .dxbl-list-box .dxbl-scroll-view > *,
html[lang^="ar"] .dxbl-popup .dxbl-listbox .dxbl-scroll-view > *,
[dir="rtl"] .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view > *,
[dir="rtl"] .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view > *,
.vb-popup-rtl .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view > *,
.vb-popup-rtl .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view > *,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-list-box .dxbl-scroll-view > *,
.dynamic-grid-container.vb-rtl .dxbl-dropdown .dxbl-listbox .dxbl-scroll-view > *,
.vb-combo-dropdown-rtl .dxbl-list-box .dxbl-scroll-view > *,
.vb-combo-dropdown-rtl .dxbl-listbox .dxbl-scroll-view > * {
    transform: scaleX(-1) !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Fallback: when DevExpress renders the listbox without a .dxbl-scroll-view wrapper
   (some versions skip it for short lists), flip the listbox itself and mirror its
   immediate children. The :has() guards skip this branch when .dxbl-scroll-view IS
   present so we don't double-flip. */
.vb-combo-dropdown-rtl .dxbl-listbox:not(:has(.dxbl-scroll-view)),
.vb-combo-dropdown-rtl .dxbl-list-box:not(:has(.dxbl-scroll-view)) {
    transform: scaleX(-1) !important;
}

.vb-combo-dropdown-rtl .dxbl-listbox-content,
.vb-combo-dropdown-rtl .dxbl-list-box-content {
    transform: scaleX(-1) !important;
    direction: rtl !important;
    text-align: right !important;
}

.vb-combo-dropdown-rtl .dxbl-listbox:not(:has(.dxbl-listbox-content)):not(:has(.dxbl-list-box-content)):not(:has(.dxbl-scroll-view)) > *,
.vb-combo-dropdown-rtl .dxbl-list-box:not(:has(.dxbl-listbox-content)):not(:has(.dxbl-list-box-content)):not(:has(.dxbl-scroll-view)) > * {
    transform: scaleX(-1) !important;
    direction: rtl !important;
    text-align: right !important;
}

    [dir="rtl"] .dxbl-dropdown .dxbl-listbox-item,
    [dir="rtl"] .dxbl-dropdown .dxbl-list-box-item,
    .vb-popup-rtl .dxbl-dropdown .dxbl-listbox-item,
    .vb-popup-rtl .dxbl-dropdown .dxbl-list-box-item,
    html[dir="rtl"] .dxbl-popup .dxbl-listbox-item,
    html[dir="rtl"] .dxbl-popup .dxbl-list-box-item,
    html[lang^="ar"] .dxbl-popup .dxbl-listbox-item,
    html[lang^="ar"] .dxbl-popup .dxbl-list-box-item,
    .vb-combo-dropdown-rtl .dxbl-listbox-item,
    .vb-combo-dropdown-rtl .dxbl-list-box-item {
        direction: rtl !important;
        text-align: right !important;
    }

/* Command column "+ New" — flat modern link: filled plus icon + bold label, no underline */
.vb-grid-header-new-link {
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: inherit;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .vb-grid-header-new-link:hover,
    .vb-grid-header-new-link:focus-visible {
        text-decoration: none !important;
        background: rgba(var(--bs-primary-rgb), 0.08);
        color: var(--bs-primary);
        outline: none;
    }

.vb-grid-header-new-icon {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--bs-border-color, #cfd4db);
    color: var(--bs-primary);
    line-height: 0;
    overflow: hidden;
}

/* Isolate + from font metrics so it sits on the visual center of the disc */
.vb-grid-header-new-plus {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1;
    transform: translate(-0.04em, -0.06em);
}

.vb-grid-header-new-label {
    font-weight: 700;
}

/* Nested grid: delete (selected row) + New in command-column header */
.vb-grid-header-new-cell.vb-grid-header-nested-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.dxbl-grid .dxbl-grid-header-row th .vb-grid-header-delete-btn {
    flex-shrink: 0;
}

.dxbl-grid .dxbl-grid-header-row th .vb-grid-header-new-link {
    color: var(--bs-primary);
    font-size: 1rem;
}

    .dxbl-grid .dxbl-grid-header-row th .vb-grid-header-new-link:hover {
        color: var(--bs-primary-text-emphasis, #0f2d52);
    }

.dynamic-grid-container.vb-rtl .vb-grid-header-new-link,
.vb-grid-header-new-link--rtl {
    flex-direction: row-reverse;
}

/* Empty-state Add: match header — label then + in RTL (icon on trailing side). */
.dynamic-grid-container.vb-rtl .subgrid-empty-add-btn,
.subgrid-empty-add-btn--rtl {
    flex-direction: row-reverse;
}

/* RTL/LTR data alignment — direction on cells so Arabic/bidi stays correct inside LTR scrollport */
.dynamic-grid-container.vb-rtl .dxbl-grid .dxbl-grid-table td,
.dynamic-grid-container.vb-rtl .dxbl-grid .dxbl-grid-filter-row th {
    text-align: right;
    direction: rtl;
}

/* ERP-style headers: centered labels (matches reference); body cells stay RTL above */
.dynamic-grid-container.vb-rtl .dxbl-grid .dxbl-grid-header-row th {
    text-align: center;
    direction: rtl;
}

.dynamic-grid-container.vb-rtl .dxbl-grid .dxbl-grid-command-cell {
    direction: ltr;
    text-align: center;
}

/* RTL: "+ New" anchored to the start of the header cell (left), not centered toward the visual right. */
.vb-grid-header-new-cell--rtl {
    display: block;
    width: 100%;
    text-align: left;
    direction: ltr;
}

.dynamic-grid-container.vb-ltr .dxbl-grid .dxbl-grid-table td,
.dynamic-grid-container.vb-ltr .dxbl-grid .dxbl-grid-header-row th,
.dynamic-grid-container.vb-ltr .dxbl-grid .dxbl-grid-filter-row th {
    text-align: left;
}

/* Hide headers in EditForm / EditFormPopup edit modes ONLY — InlineEdit (EditRow) keeps
   headers visible because the editors live inside the column cells under their own headers. */
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .dxbl-grid-header,
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .dxbl-grid-header-row {
    display: none;
}
/* Restore subgrid headers in inline edit - subgrid is inside .subgrid-panel.
   But ONLY when the subgrid itself is NOT in its own EditForm/EditFormPopup edit mode. */
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .subgrid-panel .dynamic-grid-container:not(.editing-mode):not(.editing-mode-inline) .dxbl-grid-header,
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .subgrid-panel .dynamic-grid-container:not(.editing-mode):not(.editing-mode-inline) .dxbl-grid-header-row {
    display: revert !important;
}

/* Nested grid inside parent edit popup: keep headers visible unless the nested grid itself
   is in EditForm/EditFormPopup edit mode (InlineEdit always keeps headers). */
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .vb-nested-grid-host .dynamic-grid-container:not(.editing-mode):not(.editing-mode-inline) .dxbl-grid-header,
.dynamic-grid-container.editing-mode:not(.editing-mode-inline) .vb-nested-grid-host .dynamic-grid-container:not(.editing-mode):not(.editing-mode-inline) .dxbl-grid-header-row {
    display: revert !important;
}

/* Sub-grid width containment: keep the nested grid (and its edit row controls) inside the
   parent grid's width so editors stay reachable instead of overflowing horizontally. */
.vb-nested-grid-host,
.vb-nested-grid-host .dynamic-grid-container,
.vb-nested-grid-host .dxbl-grid,
.vb-nested-grid-host .dxbl-grid-table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.vb-nested-grid-host .dxbl-scroll-view,
.vb-nested-grid-host .dxbl-grid > .dxbl-scroll-viewer {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.vb-nested-grid-host .dxbl-grid-edit-form-row,
.vb-nested-grid-host .dxbl-grid-edit-row,
.vb-nested-grid-host .dxbl-grid-edit-form,
.vb-nested-grid-host .dxbl-grid-edit-form td,
.vb-nested-grid-host .dxbl-grid-edit-row td {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.vb-nested-grid-host .dxbl-grid-edit-form .dxbl-textbox,
.vb-nested-grid-host .dxbl-grid-edit-form .dxbl-combobox,
.vb-nested-grid-host .dxbl-grid-edit-form .dxbl-spin-edit,
.vb-nested-grid-host .dxbl-grid-edit-form .dxbl-date-edit,
.vb-nested-grid-host .dxbl-grid-edit-row .dxbl-textbox,
.vb-nested-grid-host .dxbl-grid-edit-row .dxbl-combobox,
.vb-nested-grid-host .dxbl-grid-edit-row .dxbl-spin-edit,
.vb-nested-grid-host .dxbl-grid-edit-row .dxbl-date-edit {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Inline edit-form body inside a sub-grid: clamp to the visible scroll area so the
   form is responsive (2-column grid, no horizontal scroll) like the master grid's
   edit form — the previous "inherit table width" behaviour pushed every field to a
   single column 1000px+ wide because the colspan'd TR matched the wide table.
   `position: sticky; left: 0` anchors the form to the visible left edge while the
   grid header still scrolls behind. */
.vb-nested-grid-host .vb-edit-form-shell--inline,
.vb-nested-grid-host .vb-edit-form-tab-content {
    box-sizing: border-box !important;
    position: sticky;
    left: 0;
    width: 100%;
    max-width: 100%;
    /* Cap to the host width so wide-table TDs don't stretch the form. */
    inline-size: min(100%, var(--vb-subgrid-form-max, 100vw));
    overflow-x: hidden;
}

/* Subgrid edit form fields: responsive 2-column grid (parity with master).
   Override the inline edit form path so single-field lines split evenly and full-width
   fields (memo / textarea / LineNo>=2) span both columns — matching popup/master layout. */
.vb-nested-grid-host .vb-edit-form-shell--inline .vb-form-field-lines {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    width: 100%;
    min-width: 0;
}

.vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line.vb-field-line--stack {
    grid-template-columns: 1fr;
}

.vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line > .vb-field-row {
    min-width: 0;
    box-sizing: border-box;
}

.vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line > .vb-field-row.vb-full-width,
.vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line > .vb-field-row.vb-line-span-full {
    grid-column: 1 / -1;
}

/* Collapse to single column on narrow viewports (parity with master responsive rule). */
@@media (max-width: 768px) {
    .vb-nested-grid-host .vb-edit-form-shell--inline .vb-field-line:not(.vb-field-line--stack) {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* Edit-form button bar is anchored to the TOP of the form (round-1 UX consistency).
   Make it sticky so Save/Close stay visible while the user scrolls long forms. */
.vb-edit-form-toolbar-top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.vb-rtl .vb-edit-form-toolbar-top {
    direction: rtl;
}

/* Nested grid host: shrink in flex/tab layouts */
.vb-nested-grid-host {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

    .vb-nested-grid-host .dxbl-grid-header-row th,
    .vb-nested-grid-host .dxbl-grid-header-cell {
        white-space: nowrap;
    }

.dynamic-grid-container.vb-rtl .vb-nested-grid-host .action-cell {
    flex-direction: row-reverse;
}
/*
        icon classes for toolbar actions (delete, refresh, filter, grouping, layout options) and command column buttons (new, delete) are defined in shared CSS with "vb-" prefix to avoid DevExpress conflicts; see _HostSharedStyles.css.
    */
.grid-toolbar-column-chooser {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    background-image: var(--dxbl-toolbar-column-chooser);
    opacity: var(--dxbl-icon-opacity);
}

.grid-toolbar-export {
    -webkit-mask-image: var(--dxbl-grid-toolbar-export);
    mask-image: var(--dxbl-grid-toolbar-export);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    background-color: currentColor;
}

.grid-toolbar-delete {
    background-image: var(--dxbl-grid-toolbar-delete);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}

.grid-toolbar-edit {
    background-image: var(--dxbl-grid-toolbar-edit);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}

.grid-toolbar-new {
    -webkit-mask-image: var(--dxbl-grid-toolbar-new);
    mask-image: var(--dxbl-grid-toolbar-new);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    background-color: currentColor;
}

.grid-toolbar-document-csv {
    background-image: var(--dxbl-grid-toolbar-document-csv);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}

.grid-toolbar-document-xlsx {
    background-image: var(--dxbl-grid-toolbar-document-xlsx);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}

.grid-toolbar-document-xls {
    background-image: var(--dxbl-grid-toolbar-document-xls);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}

.grid-toolbar-document-pdf {
    background-image: var(--dxbl-grid-toolbar-document-pdf);
    opacity: var(--dxbl-icon-opacity);
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
}



/* ============================================================================
   FINAL EDIT-FORM CONSISTENCY OVERRIDE — keep at the bottom of the file.
   Forces caption + every control type to identical font-size, identical height,
   identical border in both inline AND popup edit forms. Uses high-specificity
   selectors that defeat the DevExpress theme defaults without needing more
   !important spam in earlier rules.
   ============================================================================ */

.edit-form-layout,
.vb-edit-form-tab-content,
.dxbl-popup-edit-form,
.dxbl-grid-edit-form {
    --vb-ctrl-h: 36px;
    --vb-ctrl-fs: 0.92rem;
}

/* CAPTIONS — every form caption renders at the same font-size as the controls.
   Three selectors cover inline form layout, popup form layout, and tabbed-content wrapper. */
.edit-form-layout .dxbl-fl-cpt,
.edit-form-layout .dxbl-fl-cpt span,
.vb-edit-form-tab-content .dxbl-fl-cpt,
.vb-edit-form-tab-content .dxbl-fl-cpt span,
.dxbl-popup-edit-form .dxbl-fl-cpt,
.dxbl-popup-edit-form .dxbl-fl-cpt span,
.dxbl-grid-edit-form .dxbl-fl-cpt,
.dxbl-grid-edit-form .dxbl-fl-cpt span {
    font-size: var(--vb-ctrl-fs) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--bs-body-color, #1a1a1a) !important;
}

/* CONTROL WRAPPERS — every DevExpress edit wrapper gets identical height + border.
   Descendant selectors (no `>`) so wrapped/double-wrapped controls match too. */
.edit-form-layout .dxbl-text-edit,
.edit-form-layout .dxbl-combobox,
.edit-form-layout .dxbl-date-edit,
.edit-form-layout .dxbl-spin-edit,
.edit-form-layout .dxbl-masked-input,
.edit-form-layout .dxbl-time-edit,
.edit-form-layout .dxbl-edit,
.vb-edit-form-tab-content .dxbl-text-edit,
.vb-edit-form-tab-content .dxbl-combobox,
.vb-edit-form-tab-content .dxbl-date-edit,
.vb-edit-form-tab-content .dxbl-spin-edit,
.vb-edit-form-tab-content .dxbl-masked-input,
.vb-edit-form-tab-content .dxbl-time-edit,
.vb-edit-form-tab-content .dxbl-edit,
.dxbl-popup-edit-form .dxbl-text-edit,
.dxbl-popup-edit-form .dxbl-combobox,
.dxbl-popup-edit-form .dxbl-date-edit,
.dxbl-popup-edit-form .dxbl-spin-edit,
.dxbl-popup-edit-form .dxbl-masked-input,
.dxbl-popup-edit-form .dxbl-time-edit,
.dxbl-popup-edit-form .dxbl-edit,
.dxbl-grid-edit-form .dxbl-text-edit,
.dxbl-grid-edit-form .dxbl-combobox,
.dxbl-grid-edit-form .dxbl-date-edit,
.dxbl-grid-edit-form .dxbl-spin-edit,
.dxbl-grid-edit-form .dxbl-masked-input,
.dxbl-grid-edit-form .dxbl-time-edit,
.dxbl-grid-edit-form .dxbl-edit {
    height: var(--vb-ctrl-h) !important;
    min-height: var(--vb-ctrl-h) !important;
    max-height: var(--vb-ctrl-h) !important;
    box-sizing: border-box !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    font-size: var(--vb-ctrl-fs) !important;
    line-height: 1.35 !important;
}

/* Allow textareas/memos to grow vertically — exception to the height clamp above. */
.edit-form-layout .dxbl-text-edit:has(textarea),
.vb-edit-form-tab-content .dxbl-text-edit:has(textarea),
.dxbl-popup-edit-form .dxbl-text-edit:has(textarea),
.dxbl-grid-edit-form .dxbl-text-edit:has(textarea) {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--vb-ctrl-h) * 2.5) !important;
}

/* INNER INPUTS — match wrapper minus border, same font-size as caption. */
.edit-form-layout .dxbl-fl-ctrl input,
.edit-form-layout .dxbl-fl-ctrl select,
.vb-edit-form-tab-content .dxbl-fl-ctrl input,
.vb-edit-form-tab-content .dxbl-fl-ctrl select,
.dxbl-popup-edit-form .dxbl-fl-ctrl input,
.dxbl-popup-edit-form .dxbl-fl-ctrl select,
.dxbl-grid-edit-form .dxbl-fl-ctrl input,
.dxbl-grid-edit-form .dxbl-fl-ctrl select {
    height: calc(var(--vb-ctrl-h) - 2px) !important;
    line-height: 1.35 !important;
    font-size: var(--vb-ctrl-fs) !important;
    padding: 0.4rem 0.65rem !important;
    box-sizing: border-box;
}

/* Bare <input>/<select> rendered without a DevExpress wrapper need their own border. */
.edit-form-layout .dxbl-fl-ctrl > input:not(.dxbl-edit-input),
.edit-form-layout .dxbl-fl-ctrl > select,
.vb-edit-form-tab-content .dxbl-fl-ctrl > input:not(.dxbl-edit-input),
.vb-edit-form-tab-content .dxbl-fl-ctrl > select,
.dxbl-popup-edit-form .dxbl-fl-ctrl > input:not(.dxbl-edit-input),
.dxbl-popup-edit-form .dxbl-fl-ctrl > select,
.dxbl-grid-edit-form .dxbl-fl-ctrl > input:not(.dxbl-edit-input),
.dxbl-grid-edit-form .dxbl-fl-ctrl > select {
    width: 100% !important;
    height: var(--vb-ctrl-h) !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    background: var(--bs-body-bg) !important;
}

/* Inner inputs inside DevExpress wrappers must NOT add their own border (the wrapper has one). */
.edit-form-layout .dxbl-text-edit > input,
.edit-form-layout .dxbl-combobox input,
.edit-form-layout .dxbl-date-edit input,
.edit-form-layout .dxbl-spin-edit input,
.vb-edit-form-tab-content .dxbl-text-edit > input,
.vb-edit-form-tab-content .dxbl-combobox input,
.vb-edit-form-tab-content .dxbl-date-edit input,
.vb-edit-form-tab-content .dxbl-spin-edit input,
.dxbl-popup-edit-form .dxbl-text-edit > input,
.dxbl-popup-edit-form .dxbl-combobox input,
.dxbl-popup-edit-form .dxbl-date-edit input,
.dxbl-popup-edit-form .dxbl-spin-edit input,
.dxbl-grid-edit-form .dxbl-text-edit > input,
.dxbl-grid-edit-form .dxbl-combobox input,
.dxbl-grid-edit-form .dxbl-date-edit input,
.dxbl-grid-edit-form .dxbl-spin-edit input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Textarea matches font/padding but keeps native vertical resize. */
.edit-form-layout textarea,
.vb-edit-form-tab-content textarea,
.dxbl-popup-edit-form textarea,
.dxbl-grid-edit-form textarea {
    font-size: var(--vb-ctrl-fs) !important;
    line-height: 1.45 !important;
    padding: 0.5rem 0.65rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: vertical;
}

/* Focus ring — single source. */
.edit-form-layout .dxbl-text-edit:focus-within,
.edit-form-layout .dxbl-combobox:focus-within,
.edit-form-layout .dxbl-date-edit:focus-within,
.edit-form-layout .dxbl-spin-edit:focus-within,
.edit-form-layout .dxbl-fl-ctrl > input:focus,
.edit-form-layout .dxbl-fl-ctrl > select:focus,
.vb-edit-form-tab-content .dxbl-text-edit:focus-within,
.vb-edit-form-tab-content .dxbl-combobox:focus-within,
.vb-edit-form-tab-content .dxbl-date-edit:focus-within,
.vb-edit-form-tab-content .dxbl-spin-edit:focus-within,
.vb-edit-form-tab-content .dxbl-fl-ctrl > input:focus,
.vb-edit-form-tab-content .dxbl-fl-ctrl > select:focus,
.dxbl-popup-edit-form .dxbl-text-edit:focus-within,
.dxbl-popup-edit-form .dxbl-combobox:focus-within,
.dxbl-popup-edit-form .dxbl-date-edit:focus-within,
.dxbl-popup-edit-form .dxbl-spin-edit:focus-within,
.dxbl-popup-edit-form .dxbl-fl-ctrl > input:focus,
.dxbl-popup-edit-form .dxbl-fl-ctrl > select:focus,
.dxbl-grid-edit-form .dxbl-text-edit:focus-within,
.dxbl-grid-edit-form .dxbl-combobox:focus-within,
.dxbl-grid-edit-form .dxbl-date-edit:focus-within,
.dxbl-grid-edit-form .dxbl-spin-edit:focus-within,
.dxbl-grid-edit-form .dxbl-fl-ctrl > input:focus,
.dxbl-grid-edit-form .dxbl-fl-ctrl > select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
    outline: none !important;
}

/* Row rhythm: caption + control cells share the same vertical center. */
.edit-form-layout .dxbl-fl-cnt,
.edit-form-layout .dxbl-fl-itm,
.vb-edit-form-tab-content .dxbl-fl-cnt,
.vb-edit-form-tab-content .dxbl-fl-itm,
.dxbl-popup-edit-form .dxbl-fl-cnt,
.dxbl-popup-edit-form .dxbl-fl-itm,
.dxbl-grid-edit-form .dxbl-fl-cnt,
.dxbl-grid-edit-form .dxbl-fl-itm {
    align-items: center !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

.edit-form-layout .dxbl-fl-ctrl,
.vb-edit-form-tab-content .dxbl-fl-ctrl,
.dxbl-popup-edit-form .dxbl-fl-ctrl,
.dxbl-grid-edit-form .dxbl-fl-ctrl {
    min-height: var(--vb-ctrl-h) !important;
    display: flex !important;
    align-items: center !important;
}

/* Inline buttons inside combo/date/spin (✕ + ⌄) — proportional to control height. */
.edit-form-layout .dxbl-combobox .dxbl-btn,
.edit-form-layout .dxbl-date-edit .dxbl-btn,
.edit-form-layout .dxbl-spin-edit .dxbl-btn,
.edit-form-layout .dxbl-text-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-combobox .dxbl-btn,
.vb-edit-form-tab-content .dxbl-date-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-spin-edit .dxbl-btn,
.vb-edit-form-tab-content .dxbl-text-edit .dxbl-btn,
.dxbl-popup-edit-form .dxbl-combobox .dxbl-btn,
.dxbl-popup-edit-form .dxbl-date-edit .dxbl-btn,
.dxbl-popup-edit-form .dxbl-spin-edit .dxbl-btn,
.dxbl-popup-edit-form .dxbl-text-edit .dxbl-btn,
.dxbl-grid-edit-form .dxbl-combobox .dxbl-btn,
.dxbl-grid-edit-form .dxbl-date-edit .dxbl-btn,
.dxbl-grid-edit-form .dxbl-spin-edit .dxbl-btn,
.dxbl-grid-edit-form .dxbl-text-edit .dxbl-btn {
    height: calc(var(--vb-ctrl-h) - 6px) !important;
    width: 26px !important;
    min-width: 26px !important;
    align-self: center;
}


/* ============================================================================
   UNIFIED EDIT-FORM SHELL — single source of truth for BOTH inline grid edit
   AND popup edit. Both contexts now wrap their body in `.vb-edit-form-shell`
   so one selector chain covers both, and DevExpress's `.dxbl-grid-edit-form *`
   theme bundle no longer wins specificity over our typography + sizing.
   The popup looked correct first because it lives outside the DxGrid wrapper;
   the inline edit lives inside `.dxbl-grid-edit-form` and was being out-specificity'd.
   ============================================================================ */

.vb-edit-form-shell {
    --vb-ctrl-h: 36px;
    --vb-ctrl-fs: 0.92rem;
}

/* Caption */
.vb-edit-form-shell .vb-field-label {
    font-size: var(--vb-ctrl-fs) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--bs-body-color, #212529) !important;
    padding: 6px 12px 6px 0;
    width: 160px;
    min-width: 160px;
    max-width: 240px;
}

/* Native textbox / numeric / select */
.vb-edit-form-shell .vb-input,
.vb-edit-form-shell input.vb-input,
.vb-edit-form-shell select.vb-input,
.vb-edit-form-shell .vb-combo-input {
    width: 100% !important;
    height: var(--vb-ctrl-h) !important;
    min-height: var(--vb-ctrl-h) !important;
    font-size: var(--vb-ctrl-fs) !important;
    line-height: 1.35 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-family: Segoe UI, Tahoma, sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-edit-form-shell textarea.vb-input {
    height: auto !important;
    min-height: 90px !important;
    line-height: 1.45 !important;
    padding: 8px 10px !important;
}

.vb-edit-form-shell .vb-input:focus,
.vb-edit-form-shell input.vb-input:focus,
.vb-edit-form-shell select.vb-input:focus,
.vb-edit-form-shell textarea.vb-input:focus,
.vb-edit-form-shell .vb-combo-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
    outline: none !important;
}

/* DevExpress wrappers — combobox, date-edit, spin-edit, masked-input, time-edit */
.vb-edit-form-shell .dxbl-text-edit,
.vb-edit-form-shell .dxbl-combobox,
.vb-edit-form-shell .dxbl-date-edit,
.vb-edit-form-shell .dxbl-spin-edit,
.vb-edit-form-shell .dxbl-masked-input,
.vb-edit-form-shell .dxbl-time-edit,
.vb-edit-form-shell .dxbl-edit {
    width: 100% !important;
    height: var(--vb-ctrl-h) !important;
    min-height: var(--vb-ctrl-h) !important;
    max-height: var(--vb-ctrl-h) !important;
    font-size: var(--vb-ctrl-fs) !important;
    line-height: 1.35 !important;
    border: 1px solid var(--bs-border-color, #ced4da) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Allow textareas inside dxbl-text-edit to grow */
.vb-edit-form-shell .dxbl-text-edit:has(textarea) {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--vb-ctrl-h) * 2.5) !important;
}

/* DevExpress inner inputs match the wrapper, no own border */
.vb-edit-form-shell .dxbl-edit-input,
.vb-edit-form-shell .dxbl-text-edit-input,
.vb-edit-form-shell .dxbl-combobox-input {
    height: calc(var(--vb-ctrl-h) - 2px) !important;
    font-size: var(--vb-ctrl-fs) !important;
    line-height: 1.35 !important;
    padding: 6px 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Inline ✕ + ⌄ buttons in combobox/date/spin */
.vb-edit-form-shell .dxbl-combobox .dxbl-btn,
.vb-edit-form-shell .dxbl-date-edit .dxbl-btn,
.vb-edit-form-shell .dxbl-spin-edit .dxbl-btn,
.vb-edit-form-shell .dxbl-text-edit .dxbl-btn {
    height: calc(var(--vb-ctrl-h) - 6px) !important;
    width: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    align-self: center !important;
}

.vb-edit-form-shell .dxbl-combobox .dxbl-btn:hover,
.vb-edit-form-shell .dxbl-date-edit .dxbl-btn:hover,
.vb-edit-form-shell .dxbl-spin-edit .dxbl-btn:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Focus ring on DevExpress wrappers — same primary halo as .vb-input:focus */
.vb-edit-form-shell .dxbl-text-edit:focus-within,
.vb-edit-form-shell .dxbl-combobox:focus-within,
.vb-edit-form-shell .dxbl-date-edit:focus-within,
.vb-edit-form-shell .dxbl-spin-edit:focus-within,
.vb-edit-form-shell .dxbl-masked-input:focus-within,
.vb-edit-form-shell .dxbl-time-edit:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* Field row vertical rhythm */
.vb-edit-form-shell .vb-field-row {
    margin-bottom: 8px;
}

.vb-edit-form-shell .vb-field-input,
.vb-edit-form-shell .vb-field-input-inner,
.vb-edit-form-shell .vb-field-input-wrapper {
    min-height: var(--vb-ctrl-h);
}


/* ============================================================================
   Caption-wrap relief + Caption-on-Top layout (Layout Options → Caption above field)
   ============================================================================ */

/* Issue 2 fix: long captions were wrapping to 2 lines because max-width was 240px
   with white-space: normal. Bump max-width and ellipsize anything beyond it; the
   tooltip on hover (browser default) still shows the full caption. */
.vb-edit-form-shell .vb-field-label {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 280px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Issue 3: Caption above the control. Toggled via CaptionAbove in Layout Options.
   Stacks each field row vertically: caption on top, control below. The container class
   `vb-form-container--caption-top` is applied by RenderFieldsForTabStyled when the
   CaptionAbove flag is true. Works for both inline grid edit + popup edit (same render). */
.vb-form-container--caption-top .vb-field-row {
    display: block !important;
    margin-bottom: 14px !important;
}

.vb-form-container--caption-top .vb-field-label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0 4px 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: start !important;
    font-size: 0.85rem !important;
    color: #6c757d !important;
    text-transform: none;
}

.vb-form-container--caption-top .vb-field-input {
    display: block !important;
    width: 100% !important;
}

.vb-form-container--caption-top .vb-field-input-inner,
.vb-form-container--caption-top .vb-field-input-wrapper {
    width: 100% !important;
}

/* When stacked, both columns of the 2-column grid still flow normally — but each row
   internally stacks its own caption-on-top. The grid columns still place rows side-by-side. */
.vb-form-container--caption-top .vb-field-line {
    align-items: start;
}

/* RTL: text-align start already handles direction; nothing extra needed. */

/* ColorDialog control: native <input type="color"> swatch alongside the hex text box. */
.vb-color-edit { width: 100%; }
.vb-color-edit .vb-color-swatch {
    width: 36px;
    height: var(--vb-ctrl-h, 32px);
    padding: 2px;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.vb-color-edit .vb-color-swatch:disabled { cursor: not-allowed; opacity: 0.6; }
.vb-color-edit .vb-color-text { flex: 1 1 auto; min-width: 90px; }