/* Mobile Sidebar Fix - Using Bootstrap utilities where possible */

/* Ensure sidebar backdrop is properly styled */
.sidebar-backdrop,
.sidebar-backdrop-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1040 !important;
    display: block !important;
}

/* Fix viewport height issues on mobile Safari/Chrome */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fix */
    .sidebar {
        height: -webkit-fill-available !important;
        max-height: -webkit-fill-available !important;
    }
}

/* Ensure smooth transitions only for transform, not for position */
@media (max-width: 991.98px) {
    .sidebar {
        transition: transform 0.3s ease-in-out !important;
        /* Use viewport height instead of percentage */
        height: 100vh !important;
        height: -webkit-fill-available !important;
        /* Ensure it stays on top */
        z-index: 1045 !important;
    }

    /* Prevent any position jumping */
    .sidebar.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
    }
}

/* Ensure body doesn't jump when overflow-hidden is applied */
body.overflow-hidden {
    /* Save scrollbar width to prevent layout shift */
    padding-right: var(--scrollbar-width, 0px) !important;
}

/* Calculate scrollbar width */
@media (max-width: 991.98px) {
    :root {
        --scrollbar-width: calc(100vw - 100%);
    }
}

/* Sticky header fix for mobile */
.sidebar-header {
    /* Use Bootstrap's sticky-top behavior but ensure it works in the sidebar context */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    /* Ensure background is solid on mobile */
    background-color: rgba(0, 0, 0, 0.3) !important;
}