/* wwwroot/css/aksa-overlays.css
   Aksa: Global overlay hardening + portal root.
   Goals:
   - All overlays (Bootstrap modal/offcanvas, custom drawers, Radzen popups) stay above sticky/frozen grids.
   - Works inside Metronic/KT transformed containers by using a body-level portal root (#aksa-overlays).
   - Drawer side is logical: LTR -> right, RTL -> left (end side).
*/

:root {
    --aksa-z-overlays-root: 2147483000;
    --aksa-z-backdrop: 2147483000;
    --aksa-z-surface: 2147483005;
    --aksa-z-popup: 2147483010; /* dropdown/date panels */
}

/* ================================
   Portal root (body-level)
================================ */
#aksa-overlays {
    position: fixed;
    inset: 0;
    z-index: var(--aksa-z-overlays-root) !important;
    pointer-events: none;
}

    #aksa-overlays > * {
        pointer-events: auto;
    }

/* Lock page scroll when overlay guard active (optional, JS toggles this class) */
body.aksa-overlay-open {
    overflow: hidden !important;
}

/* ================================
   Bootstrap Modal (scoped)
================================ */
#aksa-overlays .modal-backdrop {
    z-index: var(--aksa-z-backdrop) !important;
}

#aksa-overlays .modal {
    z-index: var(--aksa-z-surface) !important;
}

#aksa-overlays .modal-dialog,
#aksa-overlays .modal-content {
    position: relative;
    z-index: calc(var(--aksa-z-surface) + 1) !important;
}

/* ================================
   Bootstrap Offcanvas (scoped)
================================ */
#aksa-overlays .offcanvas-backdrop {
    z-index: var(--aksa-z-backdrop) !important;
}

#aksa-overlays .offcanvas {
    z-index: var(--aksa-z-surface) !important;
}

/* ================================
   Custom Drawer Backdrop + Panel
   IMPORTANT: Do NOT use .modal-backdrop for drawers
================================ */

/* Your drawer backdrop (use this class in markup) */
#aksa-overlays .aksa-offcanvas-backdrop,
#aksa-overlays .aksa-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: var(--aksa-z-backdrop) !important;
}

/* Your drawer panel root */
#aksa-overlays .aksa-offcanvas {
    position: fixed;
    top: 0;
    height: 100dvh;
    width: 100%;
    max-width: 720px; /* matches your inline style */
    z-index: var(--aksa-z-surface) !important;
    /* logical end positioning:
     LTR -> right, RTL -> left
  */
    inset-inline-end: 0;
    inset-inline-start: auto;
}

/* If you want slide animation via CSS instead of Bootstrap JS:
   - Hidden: translateX(100%) in LTR, translateX(-100%) in RTL
   - Shown: no transform
   Use only if you remove Bootstrap offcanvas transforms or you render `.show` directly.
*/
#aksa-overlays .aksa-offcanvas {
    transform: translateX(100%);
}

[dir="rtl"] #aksa-overlays .aksa-offcanvas {
    transform: translateX(-100%);
}

#aksa-overlays .aksa-offcanvas.show {
    transform: none;
}

/* ================================
   Radzen popup z-index hardening
   (dropdown/date/etc appended to body)
================================ */
.rz-dropdown-panel,
.rz-datepicker-panel,
.rz-overlaypanel,
.rz-popup,
.rz-calendar,
.rz-context-menu {
    z-index: var(--aksa-z-popup) !important;
}

/* Radzen dialogs/masks (names vary by version; cover common) */
.rz-dialog-wrapper,
.rz-dialog-mask,
.rz-dialog {
    z-index: var(--aksa-z-surface) !important;
}

/* ================================
   Defensive: prevent app content from overlaying root
   (helps in some sticky/frozen grid scenarios)
================================ */
#kt_app_root,
#kt_app_body,
#kt_app_main {
    isolation: auto; /* don't force isolate unless you know why */
}
/* ---- Force offcanvas logical END inside portal root ---- */
#aksa-overlays[dir="ltr"] .offcanvas.offcanvas-end {
    right: 0 !important;
    left: auto !important;
}

#aksa-overlays[dir="rtl"] .offcanvas.offcanvas-end {
    left: 0 !important;
    right: auto !important;
}

/* Logical START as well (optional, but makes behavior consistent) */
#aksa-overlays[dir="ltr"] .offcanvas.offcanvas-start {
    left: 0 !important;
    right: auto !important;
}

#aksa-overlays[dir="rtl"] .offcanvas.offcanvas-start {
    right: 0 !important;
    left: auto !important;
}

/* If you show offcanvas by adding .show manually (no bootstrap JS), ensure it’s visible */
#aksa-overlays .offcanvas.show {
    visibility: visible !important;
    transform: none !important;
}
/* =========================================================
   FIX: Offcanvas side inside #aksa-overlays (RTL: left, LTR: right)
   Bootstrap/Metronic may set physical right/left; override them here.
========================================================= */

/* LTR => right */
#aksa-overlays[dir="ltr"] .offcanvas.offcanvas-end,
#aksa-overlays[dir="ltr"] .aksa-offcanvas.offcanvas-end,
#aksa-overlays[dir="ltr"] .aksa-offcanvas {
    right: 0 !important;
    left: auto !important;
}

/* RTL => left */
#aksa-overlays[dir="rtl"] .offcanvas.offcanvas-end,
#aksa-overlays[dir="rtl"] .aksa-offcanvas.offcanvas-end,
#aksa-overlays[dir="rtl"] .aksa-offcanvas {
    left: 0 !important;
    right: auto !important;
}
#aksa-overlays {
    pointer-events: none;
}

    #aksa-overlays > * {
        pointer-events: auto;
    }

    /* Radzen Dialog - correct layering + clickable */
    #aksa-overlays .rz-dialog-wrapper {
        position: fixed !important;
        inset: 0 !important;
        z-index: var(--aksa-z-surface) !important;
    }

    /* mask must be BELOW dialog, and must be clickable to block background */
    #aksa-overlays .rz-dialog-mask {
        position: fixed !important;
        inset: 0 !important;
        z-index: var(--aksa-z-backdrop) !important;
        pointer-events: auto !important; /* overrides inline pointer-events:none */
        background: rgba(0,0,0,.35) !important; /* dim level */
    }

    /* dialog must be ABOVE mask */
    #aksa-overlays .rz-dialog {
        position: relative !important;
        z-index: var(--aksa-z-surface) !important;
        pointer-events: auto !important;
    }