/**
 * Mobile sidebar fix for YBB Admin Panel 
 */

/* Ensure the hamburger menu is properly clickable on mobile */
@media (max-width: 767.98px) {
    .topnav-hamburger {
        z-index: 1050 !important;
        position: relative;
        padding: 0.50rem 0.75rem !important;
        cursor: pointer;
    }

    /* Ensure the sidebar is properly displayed when toggled */
    body.vertical-sidebar-enable .app-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        z-index: 1045;
    }

    /* Add some space around the hamburger icon */
    #topnav-hamburger-icon {
        margin-right: 5px;
    }
      /* Make the overlay cover the full screen */
    .vertical-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 1040 !important;
        opacity: 0;
        visibility: hidden;
        display: none;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* Show overlay when sidebar is enabled */
    body.vertical-sidebar-enable .vertical-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
      /* Ensure the sidebar is properly styled for mobile */
    .app-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 250px !important;
        max-width: 100% !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, visibility 0.3s ease !important;
        visibility: hidden;
        z-index: 1045 !important;
        -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        -o-transform: translateX(-100%) !important;
    }
    
    /* Show sidebar when enabled */
    body.vertical-sidebar-enable .app-menu {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: block !important;
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        -o-transform: translateX(0) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Make the hamburger icon more apparent */
    .hamburger-icon > span {
        width: 100%;
        height: 3px;
        margin-bottom: 4px;
    }
}