/*
 * Mobile Menu Fix
 * ----------------
 * Fixes the hamburger menu not opening on mobile/tablet screens.
 *
 * ROOT CAUSE:
 *   style.bundle.css has: @media (max-width:991.98px) { .aside { display:none } }
 *   This completely removes the aside from rendering, so when KTDrawer JS tries
 *   to slide it in via transform, there's nothing to show.
 *
 * SOLUTION:
 *   - On mobile: Override display:none, use transform to hide off-screen instead.
 *     KTDrawer's .drawer-on class then slides it in with transform:none.
 *   - On desktop: Add a safety net so .drawer class (if JS briefly adds it)
 *     doesn't break the normal fixed sidebar layout.
 */

/* ========================================
   MOBILE / TABLET (< 992px)
   ======================================== */
@media (max-width: 991.98px) {

    /*
     * Override display:none from style.bundle.css.
     * Position the aside fixed and off-screen via transform.
     * KTDrawer will manage showing/hiding via .drawer-on class.
     */
    .aside {
        display: flex !important;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 110;
        overflow: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    /*
     * When hamburger is clicked, KTDrawer adds .drawer-on.
     * The .drawer.drawer-on rule in style.bundle.css has transform:none
     * which has higher specificity (0,0,2,0) than our .aside (0,0,1,0),
     * so it naturally overrides our translateX(-100%). No !important needed.
     *
     * But as a safety net, explicitly ensure drawer-on shows the sidebar:
     */
    .aside.drawer-on {
        transform: translateX(0) !important;
        box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.25);
    }

    /* Ensure the overlay is positioned correctly behind the aside */
    .drawer-overlay {
        z-index: 109;
    }
}

/* ========================================
   DESKTOP (>= 992px) — Safety net
   ======================================== */
@media (min-width: 992px) {

    /*
     * If KTDrawer briefly adds .drawer class on desktop during init,
     * prevent it from overriding the normal sidebar layout.
     * .drawer sets top:0 and z-index:110 which would break the desktop aside.
     */
    .aside.drawer,
    .aside.drawer.drawer-start {
        position: fixed;
        top: 74px;
        z-index: 101;
        transform: none;
        width: 265px;
        overflow: hidden;
        transition: left 0.3s ease;
    }
}


/* ========================================
   DESKTOP (>= 992px) — Safety net
   ======================================== */
@media (min-width: 992px) {

    /*
     * If KTDrawer briefly adds .drawer class on desktop during init,
     * prevent it from overriding the normal sidebar layout.
     * .drawer sets top:0 and z-index:110 which would break the desktop aside.
     */
    .aside.drawer,
    .aside.drawer.drawer-start {
        position: fixed;
        top: 74px;
        z-index: 101;
        transform: none;
        width: 265px;
        overflow: hidden;
        transition: left 0.3s ease;
    }
}