/* ============================================================================
   MOBILE MENU STYLING - RESPONSIVE FIXES
   ============================================================================
   This file fixes responsive issues and adds proper scrolling to the mobile menu
   ============================================================================ */

/* Mobile Menu Container */
@media (max-width: 991.98px) {
    /* DON'T hide the main nav items - Bootstrap needs them for mobile menu */
    /* Instead, we'll style them to be invisible on desktop but visible in mobile menu */
    
    /* Show only hamburger button on mobile */
    .navbar-toggler {
        display: block !important;
    }
    
    /* Let Bootstrap handle mobile menu naturally - don't interfere */
    /* The mobile menu will automatically show all items in navbar-collapse */
    
    /* Hide desktop navbar items when mobile menu is closed */
    .navbar-collapse:not(.show) .navbar-nav.me-auto {
        display: none !important;
    }
    
    .navbar-collapse:not(.show) .navbar-nav.ms-auto {
        display: none !important;
    }
    
    /* Show navbar items when mobile menu is open */
    .navbar-collapse.show .navbar-nav.me-auto {
        display: block !important;
    }
    
    .navbar-collapse.show .navbar-nav.ms-auto {
        display: block !important;
    }
    
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
    
    /* Mobile Menu Panel - Single Unified Panel */
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #ffffff !important; /* White background for black text */
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10000 !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Ensure all navbar-nav sections are unified in mobile */
    .navbar-collapse .navbar-nav {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        display: block !important;
    }
    
    .navbar-collapse.show {
        transform: translateX(0) !important;
    }
    
    /* Mobile Menu Items - Black Text - Ensure Visibility */
    .navbar-collapse .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 !important;
        border-bottom: 1px solid #e5e7eb !important; /* Light gray border */
        background: transparent !important;
        color: #000000 !important; /* Black text - FORCE visibility */
        text-decoration: none !important;
        font-size: 0.8rem !important;
        transition: background-color 0.2s ease !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        opacity: 1 !important; /* Ensure text is visible */
        visibility: visible !important; /* Ensure text is visible */
    }
    
    /* Override inline styles for Super Admin dropdowns */
    .navbar-collapse .nav-link.text-warning {
        color: #000000 !important; /* Force black text */
        background-color: transparent !important; /* Remove blue background */
    }
    
    .navbar-collapse .nav-link[style*="color: #ffc107"] {
        color: #000000 !important; /* Override yellow text */
    }
    
    .navbar-collapse .nav-link[style*="background-color: #0d6efd"] {
        background-color: transparent !important; /* Remove blue background */
    }
    
    /* Specific targeting for System Admin dropdown */
    .navbar-collapse #globalAdminDropdown {
        color: #000000 !important; /* Force black text */
        background-color: transparent !important; /* Remove blue background */
    }
    
    .navbar-collapse #orgSuperadminDropdown {
        color: #000000 !important; /* Force black text */
        background-color: transparent !important; /* Remove blue background */
    }
    
    /* Override any remaining inline styles with maximum specificity */
    .navbar-collapse .nav-link[style] {
        color: #000000 !important; /* Force black text for any nav-link with inline styles */
        background-color: transparent !important; /* Remove any background */
    }
    
    /* Maximum specificity override for System Admin - Multiple approaches */
    .navbar-collapse.show .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle.text-warning.fw-bold#globalAdminDropdown {
        color: #000000 !important !important; /* Double important to override inline */
        background-color: transparent !important !important; /* Double important to override inline */
    }
    
    /* Alternative approach - target by ID only */
    #globalAdminDropdown {
        color: #000000 !important;
        background-color: transparent !important;
    }
    
    /* Target by class combination */
    .navbar-collapse .text-warning.fw-bold {
        color: #000000 !important;
        background-color: transparent !important;
    }
    
    /* Nuclear option - target any element with yellow text */
    .navbar-collapse *[style*="color: #ffc107"] {
        color: #000000 !important;
        background-color: transparent !important;
    }
    
    /* Target any element with blue background */
    .navbar-collapse *[style*="background-color: #0d6efd"] {
        background-color: transparent !important;
    }
    
    /* Maximum specificity override for Organization Admin */
    .navbar-collapse.show .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle.text-warning.fw-bold#orgSuperadminDropdown {
        color: #000000 !important !important; /* Double important to override inline */
        background-color: transparent !important !important; /* Double important to override inline */
    }
    
    /* Nuclear option - target any element with the problematic inline styles */
    .navbar-collapse *[style*="color: #ffc107"] {
        color: #000000 !important !important !important; /* Triple important */
    }
    
    .navbar-collapse *[style*="background-color: #0d6efd"] {
        background-color: transparent !important !important !important; /* Triple important */
    }
    
    /* Style the language select element */
    .navbar-collapse .custom-language-selector {
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 0.8rem !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .navbar-collapse .custom-translate-widget {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .navbar-collapse .nav-link:hover {
        background: #f3f4f6 !important; /* Light gray hover */
        color: #000000 !important; /* Keep black text on hover */
    }
    
    /* Mobile Menu Icons - Dark Colors */
    .navbar-collapse .nav-link i {
        margin-right: 0.5rem !important;
        width: 14px !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        color: #6b7280 !important; /* Gray icons */
        flex-shrink: 0 !important;
    }
    
    /* Mobile Dropdown Menus - Light Background */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: #f8f9fa !important; /* Light gray background */
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .navbar-collapse .dropdown-menu.show {
        display: block !important;
    }
    
    .navbar-collapse .dropdown-item {
        padding: 0.4rem 0.75rem 0.4rem 1.5rem !important;
        font-size: 0.75rem !important;
        color: #374151 !important; /* Dark gray text - FORCE visibility */
        border-bottom: 1px solid #e5e7eb !important; /* Light gray border */
        background: transparent !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        opacity: 1 !important; /* Ensure text is visible */
        visibility: visible !important; /* Ensure text is visible */
    }
    
    .navbar-collapse .dropdown-item:hover {
        background: #e9ecef !important; /* Light gray hover */
        color: #000000 !important; /* Black text on hover */
    }
    
    .navbar-collapse .dropdown-item.active {
        background: #e3f2fd !important; /* Light blue active */
        color: #1976d2 !important; /* Blue text for active */
    }
    
    /* Mobile Dropdown Headers - Dark Text - Ensure Visibility */
    .navbar-collapse .dropdown-header {
        padding: 0.5rem 0.75rem 0.25rem 0.75rem !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #6b7280 !important; /* Gray text - FORCE visibility */
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        background: #f1f5f9 !important; /* Light blue-gray background */
        border-bottom: 1px solid #e5e7eb !important; /* Light gray border */
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        opacity: 1 !important; /* Ensure text is visible */
        visibility: visible !important; /* Ensure text is visible */
    }
    
    /* Mobile Menu Close Button - Dark */
    .navbar-collapse::before {
        content: "✕" !important;
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        background: none !important;
        border: none !important;
        font-size: 1.2rem !important;
        color: #6b7280 !important; /* Gray close button */
        cursor: pointer !important;
        z-index: 10001 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .navbar-collapse::before:hover {
        color: #374151 !important; /* Darker gray on hover */
    }
    
    /* Mobile Menu Brand - Black Text */
    .navbar-collapse .navbar-brand {
        display: block !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #000000 !important; /* Black brand text */
        border-bottom: 2px solid #e5e7eb !important; /* Light gray border */
        background: #f9fafb !important; /* Light gray background */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Mobile Menu Dividers */
    .navbar-collapse .dropdown-divider {
        margin: 0.25rem 0 !important;
        border-top: 1px solid #e5e7eb !important; /* Light gray divider */
    }
    
    /* Mobile Menu Active States */
    .navbar-collapse .nav-link.active {
        background: #e3f2fd !important; /* Light blue active */
        color: #1976d2 !important; /* Blue text for active */
        border-left: 3px solid #1976d2 !important; /* Blue left border */
    }
    
    /* Mobile Menu Hover Effects */
    .navbar-collapse .nav-link:focus {
        background: #f3f4f6 !important; /* Light gray focus */
        color: #000000 !important; /* Black text on focus */
        outline: none !important;
    }
    
    /* Mobile Menu Scrollbar - Dark Theme */
    .navbar-collapse .navbar-nav::-webkit-scrollbar {
        width: 6px !important;
    }
    
    .navbar-collapse .navbar-nav::-webkit-scrollbar-track {
        background: #f1f5f9 !important; /* Light gray track */
        border-radius: 3px !important;
    }
    
    .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important; /* Gray thumb */
        border-radius: 3px !important;
    }
    
    .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb:hover {
        background: #94a3b8 !important; /* Darker gray on hover */
    }
    
    /* Fix dropdown toggle buttons */
    .navbar-collapse .nav-link.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .navbar-collapse .nav-link.dropdown-toggle::after {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        font-size: 0.7rem !important;
    }
    
    /* Ensure no horizontal overflow */
    .navbar-collapse * {
        box-sizing: border-box !important;
    }
    
    /* Fix for long text */
    .navbar-collapse .nav-link,
    .navbar-collapse .dropdown-item,
    .navbar-collapse .dropdown-header {
        max-width: 100% !important;
    }
}

/* Desktop Menu - Keep Original Styling */
@media (min-width: 992px) {
    .navbar-collapse {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .navbar-collapse .navbar-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        transform: none !important;
        flex-direction: row !important;
        box-shadow: none !important;
    }
    
    .navbar-collapse .nav-link {
        display: inline-block !important;
        width: auto !important;
        padding: 0.5rem 1rem !important;
        border-bottom: none !important;
        color: #ffffff !important;
    }
    
    .navbar-collapse .nav-link:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
    
    .navbar-collapse .dropdown-menu {
        position: absolute !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        color: #374151 !important;
        border-bottom: none !important;
    }
    
    .navbar-collapse .dropdown-item:hover {
        background: #f3f4f6 !important;
        color: #000000 !important;
    }
    
    .navbar-collapse .dropdown-header {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        color: #6b7280 !important;
        background: transparent !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .navbar-collapse::before {
        display: none !important;
    }
    
    .navbar-collapse .navbar-brand {
        display: none !important;
    }
}

/* ============================================================================
   END OF MOBILE MENU STYLING
   ============================================================================ */