/* =============================================================================
   FWS UI Layer System
   Single stacking order for sidebar/backdrops, modals, date picker and feedback.
   Keep these values coordinated with Bootstrap 5.3.3.
   ============================================================================= */
:root {
    --z-header: 1020;
    --z-sidebar-desktop: 1030;
    --z-offcanvas-backdrop: 1040;
    --z-sidebar-mobile: 1045;
    --z-modal-backdrop: 1050;
    --z-modal: 1055;
    --z-popover: 1070;
    --z-tooltip: 1080;
    --z-date-picker: 1085;
    --z-feedback: 1100;
}

/* Desktop navigation sits above page content, never above dialogs or feedback. */
.app-sidebar {
    z-index: var(--z-sidebar-desktop) !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s ease-in-out !important;
    will-change: transform;
}
.app-header { z-index: var(--z-header) !important; }

@media (min-width: 992px) {
    /* Prevent a stale mobile backdrop from covering the permanent desktop layout. */
    .offcanvas-backdrop { display: none !important; }
    .app-sidebar {
        right: 0;
        left: auto;
    }
    .app-sidebar.collapsed {
        transform: translateX(100%) !important;
        margin-right: 0 !important;
        pointer-events: none;
    }
    .app-main { transition: margin-right .3s cubic-bezier(.4, 0, .2, 1); }
    .app-main.expanded { margin-right: 0 !important; }
}

/* On touch devices the Bootstrap offcanvas and its backdrop must be adjacent layers. */
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg {
        z-index: var(--z-sidebar-mobile) !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(var(--sidebar-width, 280px), calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        max-height: 100vh;
        max-height: 100dvh;
        direction: rtl;
        border-right: 0 !important;
        border-left: 1px solid var(--border-glass, #e2e8f0) !important;
        transform: translateX(100%) !important;
        transition: transform .3s ease-in-out, visibility .3s ease-in-out !important;
        box-shadow: 0 1rem 3rem rgba(15, 23, 42, .18);
    }
    .app-sidebar.offcanvas-lg.show,
    .app-sidebar.offcanvas-lg.showing {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    .app-sidebar.offcanvas-lg.hiding {
        transform: translateX(100%) !important;
    }
    .offcanvas-backdrop { z-index: var(--z-offcanvas-backdrop) !important; }
}

.modal-backdrop { z-index: var(--z-modal-backdrop) !important; }
.modal { z-index: var(--z-modal) !important; }
.popover { z-index: var(--z-popover); }
.tooltip { z-index: var(--z-tooltip); }
.jalali-popup { z-index: var(--z-date-picker) !important; }
.app-ajax-feedback { z-index: var(--z-feedback) !important; }

/* Feedback remains readable on short screens and devices with display cutouts. */
.app-ajax-feedback {
    max-width: calc(100vw - 1rem);
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .app-ajax-feedback {
        right: max(.5rem, env(safe-area-inset-right, 0px));
        width: calc(100vw - 1rem);
    }
}