/*
 * HEADER MOBILE OPTIMIZATION - Solution Radicale
 * Optimisation complète de l'en-tête dashboard pour mobile
 * Masquage des logos et compactage des informations
 */

/* Variables pour l'en-tête mobile */
:root {
    --header-mobile-height: 60px;
    --header-mobile-padding: 8px;
    --logo-mobile-size: 80px;
    --mobile-breakpoint: 991.98px;
    --tablet-breakpoint: 768px;
    --phone-breakpoint: 480px;
}

/* === OPTIMISATION EN-TÊTE MOBILE === */

/* Réduction globale de l'en-tête sur mobile */
@media (max-width: 991.98px) {
    
    /* ÉTAPE 1: Réduire la hauteur de l'en-tête */
    .app-header,
    .main-header-container {
        height: var(--header-mobile-height) !important;
        min-height: var(--header-mobile-height) !important;
        max-height: var(--header-mobile-height) !important;
        padding: var(--header-mobile-padding) 12px !important;
        overflow: hidden !important;
    }
    
    /* ÉTAPE 2: Masquer les logos multiples sur mobile */
    .header-element .horizontal-logo,
    .header-logo img.desktop-logo,
    .header-logo img.toggle-logo,
    .header-logo img.desktop-dark,
    .header-logo img.toggle-dark,
    .header-logo img.desktop-white,
    .header-logo img.toggle-white {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ÉTAPE 3: Réduire drastiquement la zone logo */
    .header-element:first-child {
        width: auto !important;
        max-width: var(--logo-mobile-size) !important;
        flex: 0 0 auto !important;
        margin-right: 8px !important;
    }
    
    /* ÉTAPE 4: Optimiser le bouton hamburger */
    .sidemenu-toggle {
        padding: 6px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ÉTAPE 5: Compacter les informations de page */
    .header-element .page-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
    }
    
    /* ÉTAPE 6: Masquer ou réduire le breadcrumb */
    .breadcrumb-container,
    .breadcrumb,
    .breadcrumb-item {
        display: none !important;
    }
    
    /* ÉTAPE 7: Réduire l'icône de page */
    .header-element .bx {
        font-size: 16px !important;
        margin-right: 6px !important;
    }
    
    /* ÉTAPE 8: Compacter la partie droite de l'en-tête */
    .header-content-right {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    
    .header-content-right .header-element {
        margin: 0 2px !important;
    }
    
    /* ÉTAPE 9: Optimiser les boutons d'action */
    .header-content-right .btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }
    
    .header-content-right .btn .bx {
        font-size: 12px !important;
        margin-right: 2px !important;
    }
    
    /* ÉTAPE 10: Masquer les textes des boutons, garder les icônes */
    .header-content-right .btn span:not(.bx):not(.badge) {
        display: none !important;
    }
    
    /* ÉTAPE 11: Compacter les icônes d'action */
    .header-link-icon {
        font-size: 16px !important;
    }
    
    .header-link {
        padding: 6px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ÉTAPE 12: Optimiser les notifications */
    .notification-badge,
    .badge {
        font-size: 9px !important;
        padding: 2px 4px !important;
        min-width: 16px !important;
        height: 16px !important;
    }
}

/* === OPTIMISATION POUR TABLETTES === */
@media (max-width: 768px) {
    
    /* Encore plus compact pour tablettes */
    .main-header-container {
        padding: var(--header-mobile-padding) 8px !important;
    }
    
    .header-element .page-title {
        max-width: 120px !important;
        font-size: 13px !important;
    }
    
    /* Masquer encore plus d'éléments */
    .header-element.header-search {
        display: none !important;
    }
    
    /* Réduire les boutons d'action */
    .header-content-right .btn {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
}

/* === OPTIMISATION POUR PHONES === */
@media (max-width: 480px) {
    
    /* Ultra-compact pour petits écrans */
    .main-header-container {
        padding: 4px 6px !important;
    }
    
    .header-element .page-title {
        max-width: 100px !important;
        font-size: 12px !important;
    }
    
    /* Masquer quasiment tout sauf l'essentiel */
    .header-content-right .header-element:not(:last-child):not(.header-element:nth-last-child(1)):not(.header-element:nth-last-child(2)) {
        display: none !important;
    }
    
    /* Garder seulement le menu utilisateur et 1-2 actions critiques */
    .header-content-right .btn:not(.btn-primary) {
        display: none !important;
    }
}

/* === OPTION : MASQUER COMPLÈTEMENT LE LOGO SUR MOBILE === */
@media (max-width: 991.98px) {
    
    /* Version radicale - Pas de logo du tout */
    .mobile-no-logo .header-element:first-child {
        display: none !important;
    }
    
    .mobile-no-logo .header-content-left {
        gap: 8px !important;
    }
    
    /* Plus d'espace pour le titre */
    .mobile-no-logo .header-element .page-title {
        max-width: 200px !important;
    }
}

/* === CLASSES UTILITAIRES POUR CONTRÔLE GRANULAIRE === */

/* Forcer l'affichage d'un élément sur mobile */
.force-show-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Forcer le masquage d'un élément sur mobile */
.force-hide-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Compacter un élément */
.mobile-compact {
    padding: 2px 4px !important;
    margin: 1px !important;
    font-size: 10px !important;
}

/* Version icône seulement */
.mobile-icon-only span:not(.bx) {
    display: none !important;
}

/* === AMÉLIORATIONS POUR L'EXPÉRIENCE UTILISATEUR === */

/* Smooth transitions */
@media (max-width: 991.98px) {
    .app-header *,
    .header-element *,
    .header-link,
    .btn {
        transition: all 0.2s ease !important;
    }
}

/* Meilleur contraste pour les petites tailles */
@media (max-width: 768px) {
    .header-link-icon,
    .page-title {
        color: #333 !important;
        font-weight: 600 !important;
    }
}

/* === ÉTAT ACTIF/HOVER OPTIMISÉ === */
@media (max-width: 991.98px) {
    
    .header-link:hover,
    .header-link:focus {
        background: rgba(0,0,0,0.05) !important;
        border-radius: 6px !important;
    }
    
    .btn:hover {
        transform: scale(0.98) !important;
    }
}

/* === DEBUG ET TEST === */
.debug-header-mobile {
    border: 2px solid red !important;
    background: rgba(255,0,0,0.1) !important;
}

.debug-header-mobile::after {
    content: "MOBILE HEADER" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: red !important;
    color: white !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    z-index: 9999 !important;
}

/* === COMPATIBILITÉ AVEC LE THÈME EXISTANT === */
@media (max-width: 991.98px) {
    
    /* Respecter les couleurs du thème */
    .app-header[data-header-styles="light"] {
        background: #fff !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .app-header[data-header-styles="dark"] .page-title,
    .app-header[data-header-styles="dark"] .header-link-icon {
        color: #fff !important;
    }
    
    /* Respecter les variables CSS du thème */
    .header-element .page-title {
        color: var(--role-primary, #333) !important;
    }
}