/* ABSOLUTE FINAL HEADER - Reset total et reconstruction */

/* Force le reset sur TOUS les éléments */
@media (max-width: 768px) {
    /* Reset global */
    .b2b-dashboard * {
        box-sizing: border-box !important;
    }

/* Fix du badge panier dans la sidebar - Position corrigée */
.sidebar-nav .nav-item[data-section="panier"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
}

/* Masquer le badge dans la sidebar car il doit être dans le header */
.sidebar-nav .nav-item[data-section="panier"] .cart-count,
.dashboard-sidebar .cart-count {
    display: none !important;
}

/* STYLES TABLETTE */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Header sur tablette - identique au desktop avec adaptations */
    .dashboard-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
        height: 60px !important;
        background: #fff !important;
        border-bottom: 1px solid #dee2e6 !important;
        position: relative !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    
    /* Container gauche tablette */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Afficher le burger sur tablette */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        cursor: pointer !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        transition: background 0.2s !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(0,0,0,0.05) !important;
    }
    
    .mobile-menu-toggle svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #666 !important;
    }
    
    /* Titre sur tablette */
    #page-title {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    /* Container droite tablette */
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Search bar adaptée tablette */
    .header-right .search-bar {
        display: flex !important;
        align-items: center !important;
        background: #f5f5f5 !important;
        border-radius: 50px !important;
        padding: 0 !important;
        width: 220px !important;
        height: 36px !important;
        position: relative !important;
    }
    
    .search-bar input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        flex: 1 !important;
        padding: 8px 12px !important;
        padding-right: 40px !important;
        font-size: 14px !important;
        color: #333 !important;
        height: 100% !important;
    }
    
    /* Boutons tablette harmonisés */
    .search-bar button,
    .header-cart .cart-icon-btn {
        background: #f5f5f5 !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        border-radius: 50% !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .search-bar button {
        position: absolute !important;
        right: 2px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }
    
    .search-bar button:hover,
    .header-cart .cart-icon-btn:hover {
        background: #e9ecef !important;
        transform: scale(1.05) !important;
    }
    
    .search-bar button:hover {
        transform: translateY(-50%) scale(1.05) !important;
    }
    
    /* Icônes tablette */
    .dashboard-header svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #666 !important;
    }
    
    /* Badge panier tablette */
    .header-cart .cart-count {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        background: #ff4444 !important;
        color: white !important;
        font-size: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        padding: 0 3px !important;
        border: 2px solid white !important;
    }
    
    /* Sidebar sur tablette - cachée par défaut et améliorée */
    .dashboard-sidebar {
        position: fixed !important;
        top: 60px !important;
        left: -280px !important;
        width: 280px !important;
        height: calc(100vh - 60px) !important;
        background: #2c5530 !important;
        z-index: 9998 !important;
        transition: left 0.3s ease !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    .dashboard-sidebar.open {
        left: 0 !important;
    }
    
    /* Contenu sidebar visible */
    .dashboard-sidebar .sidebar-header,
    .dashboard-sidebar .sidebar-nav,
    .dashboard-sidebar .user-section {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Styles du contenu sidebar sur tablette - couleurs pour fond vert */
    .sidebar-header {
        padding: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        color: white !important;
    }
    
    .sidebar-nav .nav-item {
        color: white !important;
    }
    
    .sidebar-nav .nav-item:hover {
        background: rgba(255,255,255,0.1) !important;
    }
    
    .sidebar-nav .nav-item.active {
        background: rgba(255,255,255,0.2) !important;
        color: white !important;
    }
    
    .user-section {
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        color: white !important;
    }
    
    /* Icônes blanches dans sidebar sur tablette */
    .dashboard-sidebar svg,
    .dashboard-sidebar i {
        stroke: white !important;
        color: white !important;
    }
    
    /* Main sans marge sur tablette */
    .dashboard-main {
        margin-left: 0 !important;
        margin-top: 60px !important;
        width: 100% !important;
    }
    
    /* Overlay sur tablette */
    .sidebar-overlay {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9997 !important;
    }
    
    .sidebar-overlay.active {
        display: block !important;
    }
    
    /* Masquer le bouton recherche mobile */
    .mobile-search-btn {
        display: none !important;
    }
}
    
    /* Body et HTML */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Container principal */
    .b2b-dashboard {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Structure de base du header */
    .dashboard-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        height: 56px !important;
        background: #2c5530 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Supprime le container header-left */
    .header-left {
        display: contents !important;
    }
    
    /* Burger menu - COMPLÈTEMENT CLIQUABLE */
    .mobile-menu-toggle {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: -5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Zone cliquable élargie pour le burger */
    .mobile-menu-toggle::before {
        content: '' !important;
        position: absolute !important;
        top: -5px !important;
        left: -5px !important;
        right: -5px !important;
        bottom: -5px !important;
        background: transparent !important;
    }
    
    /* Titre au centre - VRAIMENT CENTRÉ */
    #page-title {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        color: white !important;
        font-size: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 500 !important;
        line-height: 36px !important;
        max-width: 50% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Container droite - AVEC ICÔNE RECHERCHE */
    .header-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        position: static !important;
        transform: none !important;
        height: 36px !important;
    }
    
    /* Bouton recherche mobile */
    .mobile-search-btn {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255,255,255,0.15) !important;
        border: none !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-search-btn:hover {
        background: rgba(255,255,255,0.25) !important;
    }
    
    /* Cache la search-bar originale */
    .header-right .search-bar {
        display: none !important;
    }
    
    /* Header cart container */
    .header-cart {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Afficher UNIQUEMENT le bouton cart avec les bons styles */
    .header-cart .cart-icon-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: rgba(255,255,255,0.15) !important;
        border: none !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Hover effect */
    .cart-icon-btn:hover {
        background: rgba(255,255,255,0.25) !important;
    }
    
    /* Badge du panier */
    .cart-icon-btn .cart-count,
    .header-cart .cart-count {
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        background: #ff4444 !important;
        color: white !important;
        font-size: 10px !important;
        min-width: 14px !important;
        height: 14px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        padding: 0 3px !important;
        line-height: 1 !important;
        border: 1px solid #2c5530 !important;
    }
    
    /* SVG/Icons en blanc */
    .dashboard-header svg,
    .dashboard-header i {
        width: 20px !important;
        height: 20px !important;
        stroke: white !important;
        fill: none !important;
        color: white !important;
        pointer-events: none !important;
    }
    
    /* Icône burger spécifique */
    .mobile-menu-toggle svg,
    .mobile-menu-toggle i {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Sidebar - IMPORTANT: Override inline styles */
    .dashboard-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: -280px !important;
        width: 280px !important;
        height: calc(100vh - 56px) !important;
        background: #2c5530 !important;
        z-index: 9998 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Sidebar ouverte - Force override */
    .dashboard-sidebar.open,
    .dashboard-sidebar[style*="left: 0"] {
        left: 0 !important;
    }
    
    /* Sidebar content visible */
    .dashboard-sidebar .sidebar-header,
    .dashboard-sidebar .sidebar-nav,
    .dashboard-sidebar .user-section {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Sidebar header */
    .sidebar-header {
        padding: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Logo dans sidebar */
    .sidebar-header .logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: white !important;
    }
    
    /* Navigation items */
    .sidebar-nav {
        padding: 10px 0 !important;
    }
    
    .sidebar-nav .nav-item {
        display: flex !important;
        align-items: center !important;
        padding: 12px 20px !important;
        color: white !important;
        text-decoration: none !important;
        transition: background 0.2s !important;
    }
    
    .sidebar-nav .nav-item:hover {
        background: rgba(255,255,255,0.1) !important;
    }
    
    .sidebar-nav .nav-item.active {
        background: rgba(255,255,255,0.2) !important;
        color: white !important;
        font-weight: 600 !important;
    }
    
    /* User section */
    .user-section {
        padding: 20px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        margin-top: auto !important;
        color: white !important;
    }
    
    /* Icônes dans la sidebar - blanc sur fond vert */
    .dashboard-sidebar svg,
    .dashboard-sidebar i,
    .sidebar-nav svg,
    .sidebar-nav i {
        stroke: white !important;
        fill: none !important;
        color: white !important;
    }
    
    /* Main avec padding */
    .dashboard-main {
        margin-top: 56px !important;
        padding-top: 0 !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Overlay pour fermer le menu */
    .sidebar-overlay {
        display: none;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9997 !important;
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }
    
    .sidebar-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }
}

/* Styles pour très petit écran */
@media (max-width: 480px) {
    .dashboard-header {
        padding: 6px 8px !important;
        height: 48px !important;
    }
    
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        margin-left: -8px !important;
    }
    
    .header-cart .cart-icon-btn {
        width: 36px !important;
        height: 36px !important;
        margin: 0 2px !important;
    }
    
    #page-title {
        font-size: 16px !important;
        line-height: 32px !important;
        margin: 0 5px !important;
    }
    
    .dashboard-header svg,
    .dashboard-header i {
        width: 18px !important;
        height: 18px !important;
    }
    
    .dashboard-sidebar {
        top: 48px !important;
        height: calc(100vh - 48px) !important;
        width: 260px !important;
        left: -260px !important;
    }
    
    .dashboard-sidebar.open,
    .dashboard-sidebar[style*="left: 0"] {
        left: 0 !important;
    }
    
    .dashboard-main {
        margin-top: 48px !important;
    }
    
    .sidebar-overlay {
        top: 48px !important;
    }
    
    .header-right {
        gap: 0 !important;
        margin-right: -2px !important;
    }
}

/* STYLES DESKTOP */
@media (min-width: 769px) {
    /* Header sur desktop */
    .dashboard-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        height: 60px !important;
        background: #fff !important;
        border-bottom: 1px solid #dee2e6 !important;
        position: relative !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    
    /* Container gauche */
    .header-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }
    
    /* Masquer le burger sur desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Masquer le bouton recherche mobile sur desktop */
    .mobile-search-btn {
        display: none !important;
    }
    
    /* Titre sur desktop */
    #page-title {
        position: static !important;
        transform: none !important;
        left: auto !important;
        text-align: left !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
        margin-left: 20px !important;
        padding: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    
    /* Container droite desktop */
    .header-right {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        position: static !important;
        transform: none !important;
        height: auto !important;
    }
    
    /* Search bar visible sur desktop */
    .header-right .search-bar {
        display: flex !important;
        align-items: center !important;
        background: #f5f5f5 !important;
        border-radius: 50px !important;
        padding: 0 !important;
        width: 300px !important;
        height: 40px !important;
        position: relative !important;
    }
    
    /* Input de recherche desktop */
    .search-bar input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        flex: 1 !important;
        padding: 8px 15px !important;
        padding-right: 45px !important;
        font-size: 14px !important;
        color: #333 !important;
        height: 100% !important;
    }
    
    /* Icône search - même style que cart */
    .search-bar button {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        border-radius: 50% !important;
    }
    
    .search-bar button:hover {
        background: rgba(0,0,0,0.05) !important;
        transform: translateY(-50%) scale(1.05) !important;
    }
    
    /* Une seule icône loupe */
    .search-bar button svg {
        width: 18px !important;
        height: 18px !important;
        stroke: currentColor !important;
    }
    
    /* Cart sur desktop - harmonisé avec search */
    .header-cart {
        display: flex !important;
        align-items: center !important;
    }
    
    .header-cart .cart-icon-btn {
        background: #f5f5f5 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.2s !important;
    }
    
    .header-cart .cart-icon-btn:hover {
        background: #e9ecef !important;
        transform: scale(1.05) !important;
    }
    
    /* Icônes sur desktop */
    .dashboard-header svg,
    .dashboard-header i {
        width: 20px !important;
        height: 20px !important;
        stroke: #666 !important;
        fill: none !important;
        color: #666 !important;
    }
    
    /* Icône cart spécifique */
    .header-cart .cart-icon-btn svg {
        stroke: #666 !important;
    }
    
    /* Badge count desktop */
    .header-cart .cart-count {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        background: #ff4444 !important;
        color: white !important;
        font-size: 11px !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        padding: 0 4px !important;
        border: 2px solid white !important;
    }
    
    /* Sidebar sur desktop */
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #2c5530 !important;
        z-index: 100 !important;
        transition: none !important;
        display: block !important;
    }
    
    /* Main content avec marge pour sidebar */
    .dashboard-main {
        margin-left: 280px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: calc(100% - 280px) !important;
    }
    
    /* Pas d'overlay sur desktop */
    .sidebar-overlay {
        display: none !important;
    }
}