/**
 * Mobile Sidebar Dropdown Fix
 * Ensures user dropdown works correctly in mobile hamburger menu sidebar
 * ULTRA HIGH SPECIFICITY to override all conflicting CSS
 */

/* ULTRA HIGH SPECIFICITY override for mobile sidebar dropdown */
@media (max-width: 768px) {
    /* Ensure dropdown shows when active in mobile sidebar - Maximum specificity */
    ul.nav-menu#nav-menu.active li.nav-item.dropdown.dropdown-open .dropdown-menu.dropdown-menu-right,
    ul.nav-menu#nav-menu.active li.nav-item.dropdown.active .dropdown-menu.dropdown-menu-right,
    ul.nav-menu#nav-menu li.nav-item.dropdown.dropdown-open .dropdown-menu.dropdown-menu-right,
    ul.nav-menu#nav-menu li.nav-item.dropdown.active .dropdown-menu.dropdown-menu-right,
    .nav-menu.active .nav-item.dropdown.dropdown-open .dropdown-menu,
    .nav-menu.active .nav-item.dropdown.active .dropdown-menu,
    .nav-menu .nav-item.dropdown.dropdown-open .dropdown-menu,
    .nav-menu .nav-item.dropdown.active .dropdown-menu,
    ul.nav-menu#nav-menu .dropdown.dropdown-open .dropdown-menu,
    ul.nav-menu#nav-menu .dropdown.active .dropdown-menu,
    .nav-menu.active .dropdown.dropdown-open .dropdown-menu,
    .nav-menu.active .dropdown.active .dropdown-menu,
    .nav-menu .dropdown.dropdown-open .dropdown-menu,
    .nav-menu .dropdown.active .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 10002 !important;
        background: rgba(24, 32, 54, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Ensure dropdown items are visible and clickable */
    .nav-menu .dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
        color: #e0f7fa !important;
        text-decoration: none !important;
        width: 100% !important;
    }
    
    .nav-menu .dropdown-menu .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
    
    .nav-menu .dropdown-menu .dropdown-item[href*="profile"] i {
        color: #1fd47b !important;
    }
    
    .nav-menu .dropdown-menu .dropdown-item[href*="logout"] {
        color: #ff6b6b !important;
    }
}