/* Mobile Navigation Styles - Shared across all pages */

/* Desktop-only elements werden auf mobilen Geräten versteckt */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    /* Mobile Auth Container - Server und Profile nebeneinander */
    .nav-menu .mobile-auth-container {
        width: 100%;
        margin: 0.5rem 0;
        padding: 0;
    }
    
    .nav-menu .mobile-auth-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .nav-menu .mobile-auth-buttons .server-section,
    .nav-menu .mobile-auth-buttons .profile-section {
        display: flex !important;
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        position: relative; /* Für Dropdown-Positionierung */
    }
    
    /* Mobile Dropdowns zentrieren - vollständig zentriert im Menü */
    .nav-menu .mobile-auth-buttons .server-dropdown,
    .nav-menu .mobile-auth-buttons .profile-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) translateY(-10px) !important;
        margin-top: 0 !important;
        z-index: 1020 !important; /* Sehr hoch für Überlagerung */
        pointer-events: auto;
        max-width: 90vw;
        width: 280px;
        background: rgba(15, 15, 15, 0.98) !important; /* Fast undurchsichtig */
        backdrop-filter: blur(50px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important; /* Stärkerer Schatten für bessere Abdeckung */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }
    
    /* Profile-Dropdown noch undurchsichtiger für bessere Abdeckung */
    .nav-menu .mobile-auth-buttons .profile-menu {
        background: rgba(15, 15, 15, 1.0) !important; /* Vollständig undurchsichtig */
        backdrop-filter: blur(60px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.95) !important; /* Noch stärkerer Schatten */
    }
    
    /* Schließen-Button für Mobile-Dropdowns */
    .nav-menu .mobile-auth-buttons .server-dropdown .dropdown-close-btn,
    .nav-menu .mobile-auth-buttons .profile-menu .dropdown-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1021;
        transition: all 0.2s ease;
        font-size: 14px;
    }
    
    .nav-menu .mobile-auth-buttons .server-dropdown .dropdown-close-btn:hover,
    .nav-menu .mobile-auth-buttons .profile-menu .dropdown-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        color: #ffffff;
        transform: scale(1.1);
    }
    
    .nav-menu .mobile-auth-buttons .server-dropdown .dropdown-close-btn:active,
    .nav-menu .mobile-auth-buttons .profile-menu .dropdown-close-btn:active {
        transform: scale(0.95);
    }
    
    /* Server-Button z-index reduzieren wenn Profile-Dropdown offen ist */
    .nav-menu .mobile-auth-buttons .profile-menu.active ~ .server-section .server-dropdown-btn,
    .nav-menu .mobile-auth-buttons .profile-menu.active ~ * .server-dropdown-btn {
        z-index: 1010 !important; /* Niedriger als Profile-Dropdown */
        position: relative;
    }
    
    /* Scrollbar im Mobile Server-Dropdown deaktivieren */
    .nav-menu .mobile-auth-buttons .server-dropdown {
        overflow-y: hidden !important;
        max-height: none !important;
    }
    
    .nav-menu .mobile-auth-buttons .server-dropdown .server-dropdown-list {
        overflow-y: hidden !important;
        max-height: none !important;
    }
    
    .nav-menu .mobile-auth-buttons .server-dropdown.active,
    .nav-menu .mobile-auth-buttons .profile-menu.active {
        transform: translate(-50%, -50%) translateY(0) !important;
        pointer-events: auto;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Base hidden state for mobile dropdowns */
    .nav-menu .mobile-auth-buttons .server-dropdown,
    .nav-menu .mobile-auth-buttons .profile-menu {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .nav-menu .mobile-auth-buttons .server-dropdown-btn {
        margin: 0;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
        pointer-events: auto !important;
        position: relative;
        z-index: 1005 !important; /* Niedriger als Dropdowns (1020) */
        cursor: pointer;
        background: rgba(114, 137, 218, 0.1);
        border: 2px solid #7289da;
        border-radius: 8px;
        color: #7289da;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .nav-menu .mobile-auth-buttons .profile-avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        margin: 0;
        pointer-events: auto !important;
        position: relative;
        z-index: 1009; /* Höher als Dropdown */
        cursor: pointer;
    }
    
    .nav-menu .mobile-auth-buttons .profile-avatar img {
        pointer-events: none; /* Bild selbst nicht klickbar, nur Container */
    }
    
    .nav-menu .mobile-auth-buttons .profile-avatar .avatar-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    /* Profile-Link Spacing */
    .nav-menu .mobile-auth-buttons .profile-menu .profile-link {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .nav-menu .mobile-auth-buttons .profile-menu .profile-link i {
        margin-right: 0;
        flex-shrink: 0;
        width: 20px;
        text-align: center;
    }
    
    .nav-menu .mobile-auth-buttons .profile-menu .profile-link span {
        flex: 1;
    }
}