/**
 * NAVBAR DESKTOP CSS - Styles spécifiques desktop
 * Chargé uniquement sur desktop pour optimiser PageSpeed
 * Media query: (min-width: 769px)
 * 
 * IMPORTANT: Ce fichier est chargé avec media="(min-width: 769px)"
 * donc les styles ne s'appliquent QUE sur desktop
 */

/* ============================================
   MENU DE CATÉGORIES DESKTOP (2 colonnes)
   ============================================ */
@media (min-width: 769px) {
    .categories-dropdown-menu {
        display: none; /* Caché par défaut */
        min-width: 800px !important;
        max-width: 1200px !important;
    }
    
    /* Quand le menu est ouvert (via style inline ou classe) */
    .categories-dropdown-menu[style*="display: block"],
    .categories-dropdown-menu.menu-open {
        display: block !important;
    }
    
    /* Le conteneur interne gère le grid 2 colonnes */
    .categories-dropdown-menu #categoriesDropdownContent,
    #categoriesDropdownContent {
        display: grid !important;
        grid-template-columns: 250px 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .categories-main-list {
        border-right: 2px solid rgba(255,255,255,0.2) !important;
        padding-right: 20px !important;
        max-height: 500px !important;
        overflow-y: auto !important;
    }
    
    .categories-sub-list {
        display: block !important;
        visibility: visible !important;
        padding-left: 20px !important;
        max-height: 500px !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 400px !important;
    }
    
    /* S'assurer que la colonne droite est toujours visible quand le menu est ouvert */
    .categories-dropdown-menu[style*="display: grid"] .categories-sub-list,
    .categories-dropdown-menu.menu-open .categories-sub-list {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Masquer sous-catégories mobile en desktop */
    .category-sub-items {
        display: none !important;
    }
}

/* ============================================
   SCROLLBARS PERSONNALISÉES DESKTOP
   ============================================ */
@media (min-width: 769px) {
    /* Scrollbar menu catégories - WebKit uniquement (Chrome, Safari, Edge) */
    @supports (-webkit-appearance: none) {
        .categories-main-list::-webkit-scrollbar,
        .categories-sub-list::-webkit-scrollbar {
            width: 10px;
        }

        .categories-main-list::-webkit-scrollbar-track,
        .categories-sub-list::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
            margin: 5px 0;
        }

        .categories-main-list::-webkit-scrollbar-thumb,
        .categories-sub-list::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            border: 2px solid #f1f5f9;
            transition: all 0.3s ease;
        }
    }

    /* Pour Firefox */
    .categories-main-list,
    .categories-sub-list {
        scrollbar-width: thin;
        scrollbar-color: #667eea #f1f5f9;
    }
}

/* ============================================
   ICÔNES D'ACTION DESKTOP - HOVER EFFECTS
   ============================================ */
@media (min-width: 769px) {
    .navbar-action-icon.language {
        background: white;
        border: 2px solid rgba(255, 255, 255, 0.8);
        color: #5a6b8a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .navbar-action-icon.language i {
        background: linear-gradient(135deg, #228b22 0%, #4169e1 50%, #ffd700 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .navbar-action-icon.language:hover {
        background: #f8fafc;
        border-color: white;
        transform: scale(1.15) translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }
    
    .navbar-action-icon.language:hover i {
        transform: rotate(-5deg);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    .navbar-action-icon.user.user-connected {
        background: rgba(34, 197, 94, 0.1);
        border-color: rgba(34, 197, 94, 0.3);
        color: #22c55e;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }
    
    .navbar-action-icon.user.user-connected:hover {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border-color: #16a34a;
        transform: scale(1.2) rotate(360deg);
        box-shadow: 0 6px 25px rgba(34, 197, 94, 0.6);
    }
    
    .navbar-action-icon.user.user-connected:hover i {
        transform: scale(1.1);
        color: white;
    }
    
    .navbar-action-icon.user.user-disconnected {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
    
    .navbar-action-icon.user.user-disconnected:hover {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border-color: #dc2626;
        transform: scale(1.2) rotate(360deg);
        box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5);
    }
    
    .navbar-action-icon.user.user-disconnected:hover i {
        transform: scale(1.1);
        color: white;
    }
}

/* ============================================
   BARRE DE RECHERCHE DESKTOP
   ============================================ */
@media (min-width: 769px) {
    .desktop-search-wrapper {
        display: block !important;
    }
    
    .mobile-search-wrapper {
        display: none !important;
    }
}

/* ============================================
   RESPONSIVE DESKTOP (tablettes grandes)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .categories-dropdown-menu {
        min-width: 600px !important;
        max-width: 90vw !important;
    }
}