/* Fix for mobile burger menu button not clickable */
/* Updated: August 3, 2025 */

/* Ensure the menu toggle button is clickable on mobile */
.layout-menu-toggle {
    z-index: 1045 !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Move burger menu icon to the left by overriding Bootstrap spacing */
    margin-left: 1rem !important;
    margin-right: 0.5rem !important; /* Override me-2 class */
}

/* Make sure the toggle link is clickable with proper touch target */
.layout-menu-toggle > a,
.layout-menu-toggle .nav-link {
    display: block !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1046 !important;
    position: relative !important;
    /* Ensure minimum touch target size */
    min-width: 44px !important;
    min-height: 44px !important;
    /* Center the icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Add visual feedback on tap */
    transition: background-color 0.2s ease;
}

/* Visual feedback on hover/active */
.layout-menu-toggle > a:hover,
.layout-menu-toggle > a:active {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.375rem;
}

/* Ensure the icon inside is not blocking clicks */
.layout-menu-toggle i,
.layout-menu-toggle .ti {
    pointer-events: none !important;
    display: inline-block;
    font-size: 1.375rem !important; /* Make icon slightly larger on mobile */
}

/* Fix navbar container to not block menu toggle */
.navbar-nav.layout-menu-toggle {
    overflow: visible !important;
    z-index: 1045 !important;
}

/* COMPLETELY HIDE ALL OVERLAY ELEMENTS - NO BLACK TRANSPARENT BACKGROUND */
.layout-overlay,
div.layout-overlay,
.layout-overlay.layout-menu-toggle,
div.layout-overlay.layout-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1000 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    width: 0 !important;
    height: 0 !important;
}

.layout-overlay.layout-overlay-show,
div.layout-overlay.layout-overlay-show,
.layout-overlay.layout-menu-toggle.layout-overlay-show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force remove any backdrop/overlay background */
body.layout-menu-expanded::before,
body.layout-menu-expanded::after {
    display: none !important;
    content: none !important;
}

/* Fix for mobile menu sidebar */
@media (max-width: 1199px) {
    #layout-menu {
        z-index: 1080 !important; /* ABOVE navbar (1030) so logo is visible */
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    #layout-menu.menu-expanded,
    body.layout-menu-expanded #layout-menu {
        transform: translateX(0) !important;
    }

    .layout-menu {
        z-index: 1080 !important; /* ABOVE navbar (1030) so logo is visible */
    }
    
    /* Ensure the toggle button is above other navbar elements */
    .layout-menu-toggle {
        z-index: 1047 !important;
        /* Move burger menu icon to the left on mobile */
        margin-left: 1.5rem !important;
        margin-right: 0.25rem !important; /* Override Bootstrap me-2 me-xl-0 classes */
        padding-left: 0.5rem !important;
    }
    
    /* Specifically target the burger menu container with Bootstrap classes */
    .layout-menu-toggle.navbar-nav.me-2,
    .layout-menu-toggle.navbar-nav.me-3 {
        margin-left: 1.5rem !important;
        margin-right: 0.25rem !important; /* Override me-2/me-3 */
    }
    
    /* Make sure navbar doesn't block menu toggle */
    .layout-navbar {
        overflow: visible !important;
    }
    
    /* Fix navbar items that might interfere */
    .navbar-nav-right {
        z-index: 1020 !important;
    }
    
    /* Ensure proper spacing for the burger menu in navbar */
    .layout-navbar .layout-menu-toggle {
        margin-left: 1.5rem !important;
        margin-right: 0.25rem !important; /* Override Bootstrap me-2 me-xl-0 */
        padding-left: 0.5rem !important;
    }
    
    /* Force override Bootstrap margin classes */
    .navbar .layout-menu-toggle.me-2,
    .navbar .layout-menu-toggle.me-3,
    .layout-navbar .layout-menu-toggle.me-2,
    .layout-navbar .layout-menu-toggle.me-3 {
        margin-left: 1.5rem !important;
        margin-right: 0.25rem !important;
    }
}

/* Specific fix for custom_vertical_menu */
.menu-vertical .layout-menu-toggle {
    z-index: 1047 !important;
    pointer-events: auto !important;
}

/* Override the problematic rule from navbar-fix.css */
.layout-navbar .layout-menu-toggle,
#layout-navbar .layout-menu-toggle,
.navbar .layout-menu-toggle {
    z-index: 1047 !important;
}

/* Ensure touch events work on mobile */
@media (pointer: coarse) {
    .layout-menu-toggle {
        min-width: 48px;
        min-height: 48px;
    }
    
    .layout-menu-toggle a {
        min-width: 48px !important;
        min-height: 48px !important;
        /* Add more padding on touch devices */
        padding: 12px !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .layout-menu-toggle {
        -webkit-touch-callout: none;
    }
    
    .layout-menu-toggle a {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* Debug helper - visual indicator when button is tapped */
.layout-menu-toggle:active a {
    background-color: rgba(105, 108, 255, 0.1) !important;
    transform: scale(0.95);
}