/* Final Mobile Navigation Fix */

/* Remove all debug borders */
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu.show,
    .navbar-nav .dropdown-item {
        border: none !important;
    }
}

/* Fix the navbar collapse container */
@media (max-width: 768px) {
    .navbar-collapse {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 56px) !important;
        background-color: #1a1a1a !important;
        overflow-y: scroll !important; /* Changed from auto to scroll */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important;
        padding-bottom: 50px !important; /* Add padding at bottom */
    }
    
    .navbar-collapse.show {
        transform: translateX(0) !important;
    }
    
    /* Fix navbar nav to ensure it's scrollable */
    .navbar-nav {
        height: auto !important;
        min-height: 100% !important;
        padding-bottom: 100px !important; /* Extra padding for scrolling */
    }
}

/* Fix dropdown menus */
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: rgba(0,0,0,0.3) !important;
        border: none !important;
        box-shadow: none !important;
        display: none !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    .navbar-nav .dropdown-menu.show {
        display: block !important;
    }
    
    /* Ensure dropdown items are clickable */
    .navbar-nav .dropdown-item {
        display: block !important;
        padding: 12px 30px !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        background-color: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:active,
    .navbar-nav .dropdown-item:focus {
        background-color: rgba(191, 132, 80, 0.2) !important;
        color: #BF8450 !important;
        text-decoration: none !important;
        outline: none !important;
    }
    
    /* Make sure links work */
    .navbar-nav a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Body scroll lock when menu is open */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure proper stacking */
@media (max-width: 768px) {
    .navbar {
        z-index: 1040 !important;
    }
    
    .navbar-collapse {
        z-index: 1050 !important;
    }
    
    .navbar-overlay {
        z-index: 1045 !important;
    }
}

/* Fix for very long menus */
@media (max-width: 768px) and (max-height: 600px) {
    .navbar-collapse {
        height: calc(100vh - 56px) !important;
        max-height: calc(100vh - 56px) !important;
    }
    
    .navbar-nav {
        padding-bottom: 20px !important;
    }
}

/* Ensure smooth scrolling */
@media (max-width: 768px) {
    .navbar-collapse {
        scroll-behavior: smooth;
    }
    
    /* Add scroll indicators if content is scrollable */
    .navbar-collapse::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
        pointer-events: none;
        z-index: 1;
    }
}

/* Fix Request Assistance Button and Notifications Icon */
@media (max-width: 768px) {
    /* Request Assistance Button */
    #requestAssistanceBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: calc(100% - 40px) !important;
        margin: 10px 20px !important;
        padding: 12px 20px !important;
        background-color: #dc3545 !important;
        background-image: none !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
    
    #requestAssistanceBtn:hover,
    #requestAssistanceBtn:active {
        background-color: #c82333 !important;
        transform: scale(0.98) !important;
    }
    
    #requestAssistanceBtn i {
        margin-right: 8px !important;
        font-size: 1.1rem !important;
    }
    
    /* Fix nav item containing the button */
    .navbar-nav .nav-item:has(#requestAssistanceBtn) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* Notifications Icon */
    .navbar-nav .notifications-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 15px 20px !important;
        color: #fff !important;
        text-decoration: none !important;
        width: 100% !important;
        position: relative !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-nav .notifications-link:hover {
        background-color: rgba(191, 132, 80, 0.1) !important;
        color: #BF8450 !important;
    }
    
    /* Notification bell icon */
    .navbar-nav .notifications-link .fa-bell {
        font-size: 1.2rem !important;
        margin-right: 10px !important;
    }
    
    /* Add text label for notifications on mobile */
    .navbar-nav .notifications-link::after {
        content: "Notifications";
        flex: 1;
        text-align: left;
    }
    
    /* Notification badge */
    .navbar-nav .notifications-link .badge {
        position: relative !important;
        top: -8px !important;
        left: -5px !important;
        background-color: #dc3545 !important;
        color: white !important;
        border-radius: 10px !important;
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
        min-width: 20px !important;
        text-align: center !important;
        font-weight: bold !important;
        display: inline-block !important;
    }
    
    /* Fix the nav item container for notifications */
    .navbar-nav .nav-item:has(a[href*="notifications"]) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* Remove default margin classes on mobile */
    .navbar-nav .nav-item.me-3 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Alternative selector for older browsers that don't support :has() */
@media (max-width: 768px) {
    .navbar-nav .nav-item:last-child,
    .navbar-nav .nav-item:nth-last-child(2) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Remove all Bootstrap button gradients and overlays */
#requestAssistanceBtn,
#requestAssistanceBtn:hover,
#requestAssistanceBtn:active,
#requestAssistanceBtn:focus,
#requestAssistanceBtn:focus-visible,
.btn-danger#requestAssistanceBtn {
    background-image: none !important;
    background: #dc3545 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#requestAssistanceBtn:hover {
    background: #c82333 !important;
}

#requestAssistanceBtn:active,
#requestAssistanceBtn:focus {
    background: #bd2130 !important;
}

/* Ensure the button content is visible */
#requestAssistanceBtn * {
    position: relative;
    z-index: 1;
}