/* =========================================
   FILTERS HORIZONTAL OVERRIDE - PRIORITÉ ABSOLUE
   Force le layout horizontal sur mobile
   ========================================= */

/* OVERRIDE ABSOLU - Écrase dashboard.css ligne 459 et toutes autres règles */
@media (max-width: 768px) {
    /* Force le container en flex horizontal */
    .filters-bar {
        display: flex !important;
        flex-direction: row !important; /* FORCE HORIZONTAL */
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
        padding: 12px !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        position: relative !important;
        flex-wrap: nowrap !important; /* EMPÊCHE LE WRAP */
        white-space: nowrap !important;
    }
    
    /* Force le label principal à rester en ligne */
    .filters-bar > .filter-label:first-child {
        display: inline-block !important;
        flex-shrink: 0 !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        white-space: nowrap !important;
        margin-right: 8px !important;
        padding-right: 8px !important;
        border-right: 2px solid #e0e0e0 !important;
        font-size: 0.9rem !important;
        /* Reset des styles verticaux */
        width: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background: none !important;
        text-align: left !important;
        border-bottom: none !important;
        letter-spacing: normal !important;
    }
    
    /* Force chaque groupe de filtre en ligne */
    .filter-group {
        display: inline-flex !important; /* FORCE INLINE-FLEX */
        flex-direction: row !important; /* FORCE HORIZONTAL */
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        /* Reset des styles verticaux */
        padding: 0 !important;
        border-bottom: none !important;
        background: none !important;
        margin: 0 !important;
    }
    
    /* Force les labels à être cachés ou en ligne */
    .filter-group label,
    .filter-group .filter-label {
        display: none !important; /* Cache les labels pour gagner de la place */
        /* Si on veut les garder, décommenter ces lignes : */
        /* display: inline-block !important;
        margin: 0 4px 0 0 !important;
        font-size: 0.8rem !important;
        color: #666 !important;
        white-space: nowrap !important; */
    }
    
    /* Force les selects en ligne avec taille fixe */
    .filter-group select {
        display: inline-block !important;
        min-width: 120px !important;
        max-width: 150px !important;
        width: auto !important;
        padding: 10px 35px 10px 12px !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        height: 40px !important;
        background: #fff !important;
        color: var(--text) !important;
        flex-shrink: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
    }
    
    /* ========== TEXTE COURT POUR LES PLACEHOLDERS ========== */
    /* Masque le texte original et affiche un texte plus court */
    
    /* Catégories */
    #category-filter option[value=""]:first-child {
        font-size: 0 !important; /* Cache le texte original */
    }
    #category-filter option[value=""]:first-child::after {
        content: "Catégories" !important;
        font-size: 0.9rem !important;
    }
    
    /* Marques */
    #brand-filter option[value=""]:first-child {
        font-size: 0 !important;
    }
    #brand-filter option[value=""]:first-child::after {
        content: "Marques" !important;
        font-size: 0.9rem !important;
    }
    
    /* Prix */
    #price-filter option[value=""]:first-child {
        font-size: 0 !important;
    }
    #price-filter option[value=""]:first-child::after {
        content: "Prix" !important;
        font-size: 0.9rem !important;
    }
    
    /* Annule le hover vertical */
    .filter-group:hover {
        background: transparent !important;
    }
    
    /* Supprime les icônes avant les labels */
    .filter-group label::before {
        display: none !important;
    }
    
    /* Focus amélioré */
    .filter-group select:focus {
        outline: none !important;
        border-color: #2c5530 !important;
        box-shadow: 0 0 0 3px rgba(44, 85, 48, 0.1) !important;
    }
    
    /* Style de la scrollbar */
    .filters-bar::-webkit-scrollbar {
        height: 4px !important;
    }
    
    .filters-bar::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 2px !important;
    }
    
    .filters-bar::-webkit-scrollbar-thumb {
        background: #c1c1c1 !important;
        border-radius: 2px !important;
    }
    
    .filters-bar::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1 !important;
    }
}

/* TRÈS PETIT MOBILE - Encore plus compact */
@media (max-width: 480px) {
    .filters-bar {
        padding: 10px !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }
    
    .filters-bar > .filter-label:first-child {
        font-size: 0.85rem !important;
        padding-right: 6px !important;
        margin-right: 6px !important;
    }
    
    .filter-group select {
        min-width: 100px !important;
        max-width: 130px !important;
        height: 38px !important;
        padding: 8px 30px 8px 10px !important;
        font-size: 0.85rem !important;
        background-size: 16px !important;
        background-position: right 6px center !important;
    }
}

/* OVERRIDE SPÉCIFIQUE pour dashboard.css */
@media (max-width: 768px) {
    /* Annule complètement les styles verticaux de dashboard.css */
    .dashboard-content .filters-bar {
        flex-direction: row !important;
    }
    
    .b2b-dashboard .filters-bar {
        flex-direction: row !important;
    }
    
    #passer-commande .filters-bar {
        flex-direction: row !important;
    }
    
    /* Force même avec des sélecteurs très spécifiques */
    body.page-template-page-dashboard .filters-bar {
        flex-direction: row !important;
    }
}

/* INDICATEUR DE SCROLL */
@media (max-width: 768px) {
    /* Gradient indicateur à droite */
    .filters-bar::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 30px !important;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9)) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* Flèche animée si scrollable */
    .filters-bar[data-scrollable="true"]::before {
        content: '→' !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: #2c5530 !important;
        color: white !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: bold !important;
        z-index: 10 !important;
        animation: pulseArrow 2s infinite !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    }
    
    @keyframes pulseArrow {
        0%, 100% { 
            transform: translateY(-50%) translateX(0);
            opacity: 1;
        }
        50% { 
            transform: translateY(-50%) translateX(3px);
            opacity: 0.7;
        }
    }
}

/* MODE PAYSAGE */
@media (max-width: 768px) and (orientation: landscape) {
    .filters-bar {
        padding: 8px !important;
    }
    
    .filter-group select {
        height: 36px !important;
        font-size: 0.85rem !important;
    }
}