:root {
    --rw-layer-sidebar: 1040;
    --rw-layer-sidebar-flyout: 1041;
    --rw-layer-topbar: 1060;
    --rw-layer-navigation-panel: 1100;
    --rw-layer-offcanvas-backdrop: 1200;
    --rw-layer-offcanvas: 1210;
    --rw-layer-modal-backdrop: 101000;
    --rw-layer-modal: 101100;
    --rw-layer-confirm-modal: 101200;
    --rw-layer-modal-dropdown: 102000;
    --rw-layer-toast: 103000;
}

/* Application navigation */
.sidebar {
    z-index: var(--rw-layer-sidebar) !important;
}

.submenu-flyout {
    z-index: var(--rw-layer-sidebar-flyout) !important;
}

.topbar {
    z-index: var(--rw-layer-topbar) !important;
}

.notification-panel-backdrop {
    z-index: var(--rw-layer-navigation-panel) !important;
}

/* Bootstrap/Blazor Bootstrap side panels are separate from modal layers. */
.offcanvas-backdrop {
    z-index: var(--rw-layer-offcanvas-backdrop) !important;
}

.offcanvas,
.offcanvas.show,
.offcanvas.showing {
    z-index: var(--rw-layer-offcanvas) !important;
}

/* Blazor Bootstrap modal variants */
.modal-backdrop {
    z-index: var(--rw-layer-modal-backdrop) !important;
}

.modal,
.big-modal {
    position: fixed !important;
    inset: 0;
    z-index: var(--rw-layer-modal) !important;
}

.confirm-modal {
    z-index: var(--rw-layer-confirm-modal) !important;
}

/* RwModal2 contains its window inside the backdrop element. */
.modal-backdrop:has(> .modal-wrapper) {
    z-index: var(--rw-layer-modal) !important;
}

/* Editors opened from a modal must remain above the modal window. */
.dxbl-dropdown,
.dxbl-itemlist-dropdown,
.dxbl-popup-cell {
    z-index: var(--rw-layer-modal-dropdown) !important;
}

/* Notifications should remain visible while an operation modal is open. */
.realtime-toast-region,
.toast-custom {
    z-index: var(--rw-layer-toast) !important;
}