/* =============================================================================
   Z-INDEX SYSTEM - Hệ thống phân cấp z-index cho tất cả components
   =============================================================================
   
   NGUYÊN TẮC: Con luôn nằm trên Parent
   
   - Dropdown/ComboBox: z-index 2147483647 (max int32 - CAO NHẤT CÓ THỂ)
   - Tất cả popup/modal mới mở sẽ nằm trên cái cũ
   
   ============================================================================= */

/* ========== CSS VARIABLES ========== */
:root {
    /* Sử dụng giá trị max int32 để đảm bảo luôn cao nhất */
    --zindex-dropdown: 2147483647;
    --zindex-tooltip: 2147483646;
    --zindex-context-menu: 2147483645;
}

/* =============================================================================
   DROPDOWN/COMBOBOX - LUÔN HIỂN THỊ TRÊN CÙNG 
   Sử dụng z-index: 2147483647 (max int32) để đảm bảo CAO NHẤT
   CSS !important CÓ THỂ override inline style
   ============================================================================= */

/* FORCE override - specificity cao nhất với nhiều selectors */
html body .dxbl-popup-cell,
html body .dxbl-popup-cell[style],
html body .dxbl-popup-cell[style*="z-index"],
html body div.dxbl-popup-cell,
html body div.dxbl-popup-cell[style] {
    z-index: 2147483647 !important;
}

/* DevExpress Blazor Dropdown - TẤT CẢ các loại */
.dxbl-dropdown,
.dxbl-dropdown-dialog,
.dxbl-listbox-dropdown,
.dxbl-calendar-dropdown,
.dxbl-date-time-edit-dropdown,
.dxbl-tag-box-dropdown,
.dxbl-time-edit-dropdown,
.dxbl-spin-edit-dropdown,
.dxbl-combobox-dropdown,
.dxbl-popup-cell,
.dxbl-dropdown[data-popup-id],
div[class*="dxbl-dropdown"],
div[class*="dxbl-popup-cell"] {
    z-index: var(--zindex-dropdown) !important;
}

/* DevExpress Blazor Dropdown body */
.dxbl-dropdown-body,
.dxbl-listbox-dropdown-body,
div[class*="dxbl-dropdown-body"] {
    z-index: var(--zindex-dropdown) !important;
}

/* DevExpress Portal Container - nơi dropdown được render */
.dxbl-popup-portal,
.dx-overlay-content,
.dx-popup-content,
div[data-dx-popup-portal],
#dxbl-popup-portal {
    /* Không set z-index cố định cho portal, để từng element tự quản lý */
}

/* DevExpress JS Dropdown (nếu có) */
.dx-dropdowneditor-overlay,
.dx-dropdownlist-popup-wrapper,
.dx-overlay-wrapper.dx-dropdowneditor-overlay,
.dxbs-dropdown-menu,
.dx-overlay-wrapper[style*="z-index"] {
    z-index: var(--zindex-dropdown) !important;
}

/* =============================================================================
   MODAL/POPUP Z-INDEX - ĐƯỢC QUẢN LÝ BỞI JAVASCRIPT (zindex-manager.js)
   
   NGUYÊN TẮC: Cái nào mở SAU nằm TRÊN cái mở TRƯỚC
   JavaScript sẽ tự động set z-index động cho tất cả modal/popup
   
   KHÔNG SET Z-INDEX CỐ ĐỊNH CHO MODAL/POPUP Ở ĐÂY!
   ============================================================================= */

/* =============================================================================
   CONTEXT MENU VÀ TOOLTIP - CAO GẦN BẰNG DROPDOWN
   ============================================================================= */

.dx-context-menu.dx-overlay-wrapper,
.dxbl-context-menu {
    z-index: var(--zindex-context-menu) !important;
}

.dx-tooltip-wrapper,
.dxbl-tooltip {
    z-index: var(--zindex-tooltip) !important;
}

/* =============================================================================
   DEVEXPRESS MODAL STYLING
   ============================================================================= */

/* ========== DEVEXPRESS MODAL (DXModal component) ========== */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary.dxbl-popup-verticalalignment-center {
    border-radius: 10px;
    overflow: auto;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary > .dxbl-modal-content {
    overflow: auto;
}


    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
        background-color: #FAFAFA;
        border-bottom: 1px solid rgb(109, 110, 112,16%);
    }


    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary > .dxbl-modal-content > .dxbl-modal-body {
        overflow: auto;
        padding: 0px;
    }


    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary > .dxbl-modal-content > .dxbl-modal-footer {
        padding: 0px;
        border-top: none;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-primary > .dxbl-modal-content > .dxbl-modal-footer > .dxbl-text {
            padding: 0px;
        }

/*.modal-primary .modal-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-primary);
    font-weight: 500;
    color: black;
}*/

/*.modal-primary {
    --bs-modal-footer-bg: background-color: rgb(237, 236, 237);
}*/



.modal-primary.center > .modal-dialog {
    align-items: center;
    justify-content: center;
}

.modal-primary > .modal-dialog > .modal-content, .modal-info > .modal-dialog > .modal-content {
    border-radius: 10px;
}

    .modal-primary > .modal-dialog > .modal-content > .modal-header, .modal-info > .modal-dialog > .modal-content > .modal-header {
        padding-left: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }


    .modal-primary > .modal-dialog > .modal-content > .modal-footer, .modal-info > .modal-dialog > .modal-content > .modal-footer {
        gap: 0px;
    }

/*.modal-primary .modal-body, .modal-info .modal-body {
    padding: 8px;
}*/


.modal-primary > .modal-dialog > .modal-content {
    background-color: white;
}


.modal-info > .modal-dialog > .modal-content {
    /*background-color: rgb(237, 236, 237);*/
    background-color: rgb(245,245,245);
}


    .modal-primary > .modal-dialog > .modal-content > .modal-header > .modal-title, .modal-info > .modal-dialog > .modal-content > .modal-header > .modal-title {
        font-family: var(--font-family-primary);
        font-size: var(--font-size-primary);
        font-weight: 500;
        color: black;
    }

    .modal-primary > .modal-dialog > .modal-content > .modal-footer > *, .modal-info > .modal-dialog > .modal-content > .modal-footer > * {
        margin: 0px;
    }


.modal-primary > .modal-dialog > .modal-content > .modal-body {
    overflow: auto;
}


/* ===================================================================
   BOOTSTRAP/BLAZOR MODAL - NESTED MODALS
   Z-index được set bằng inline style trong code
   =================================================================== */

/* Backdrop opacity */
.modal-backdrop {
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Đảm bảo modal-content có border - fix lỗi mất viền */
.modal-primary > .modal-dialog > .modal-content,
.modal-info > .modal-dialog > .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* ========== DROPDOWN TRONG MỌI TRƯỜNG HỢP ========== */
/* Đảm bảo dropdown từ grid, modal, popup đều hiển thị đúng */
.modal .dxbl-dropdown,
.dxbl-modal .dxbl-dropdown,
.dxbl-popup .dxbl-dropdown,
.dxbl-popup-wrapper .dxbl-dropdown,
.modal .dx-datagrid-edit-popup .dx-overlay-wrapper,
.modal .dx-datagrid-filter-panel .dx-overlay-wrapper,
.modal .dxbs-grid-edit-form .dxbl-dropdown {
    z-index: var(--zindex-dropdown) !important;
}

/* ========== FIX POINTER EVENTS ========== */
/* Đảm bảo có thể click vào dropdown khi modal/popup mở */
.dxbl-popup-wrapper > .dxbl-popup-backdrop {
    pointer-events: auto !important;
}

/* =============================================================================
   TÓM TẮT HỆ THỐNG Z-INDEX
   =============================================================================
   
   PHÂN CẤP (TỪ THẤP ĐẾN CAO):
   
   1. Bootstrap Modal base:         1050 - 1099
   2. Bootstrap Modal nested:       1050 + (level * 10)
   3. DxPopup base:                 2000 - 2099
   4. DxPopup từ Modal:             2500 - 2599
   5. Modal từ DxPopup:             3000 - 3099
   6. DxPopup level 2:              4000 - 4099
   7. Modal level 3:                5000 - 5099
   ...
   999998. Context Menu
   999999. Dropdown/ComboBox (CAO NHẤT)
   
   DROPDOWN LUÔN HIỂN THỊ TRÊN CÙNG - BẤT KỂ Ở TRONG MODAL/POPUP NÀO!
   
   ============================================================================= */