/* ========================================
   FILTRES ET CONTRÔLES - STYLES SIMPLIFIÉS
   ======================================== */

/* Cacher les icônes des boutons de période (Hier/Aujourd'hui/Prochainement) */
.period-btn iconify-icon,
.individual-period-btn iconify-icon {
    display: none;
}

/* Variables spécifiques aux filtres */
:root {
    --filter-btn-height: 40px;
    --filter-border-radius: 6px;
    --menu-gap: 16px;
}

/* ========================================
   CONTENEUR PRINCIPAL DES CONTRÔLES
   ======================================== */
.controls-wrapper {
    margin-bottom: 0; /* l'écart sous le menu est géré par .main-runner-track */
}

.controls-wrapper .bg-card-light { 
    padding: 1.5rem 2rem;
    margin-bottom: 0; /* l'espacement externe est géré par .controls-wrapper */
    /* Permettre aux dropdowns de se déployer */
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) { 
    .controls-wrapper .bg-card-light { 
        padding: 1.75rem 2.5rem; 
    } 
}

/* ========================================
   LAYOUT PRINCIPAL - UNE SEULE LIGNE
   ======================================== */
.controls-wrapper .flex.flex-wrap.items-center.justify-start { 
    gap: var(--menu-gap);
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
    justify-content: flex-start;
    height: var(--filter-btn-height);
    /* Permettre aux dropdowns de se déployer */
    overflow: visible;
    position: relative;
}

/* ========================================
   GROUPES DE FILTRES - ALIGNEMENT SIMPLE
   ======================================== */

/* Groupe des plateformes */
.platform-group-prominent { 
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--filter-btn-height);
}

.platform-filter { 
    display: flex; 
    gap: 4px; 
    align-items: center;
}

/* Barre de recherche */
.discreet-search-wrapper { 
    min-width: 240px;
    max-width: 320px;
    height: var(--filter-btn-height);
    display: flex;
    align-items: center;
}

/* Groupe des filtres de période */
.period-filter-wrapper-main { 
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--filter-btn-height);
}

#periodFilterContainer { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

/* Groupe des actions (bouton plus de filtres) */
.controls-actions-group { 
    margin-left: auto;
    display: flex;
    align-items: center;
    height: var(--filter-btn-height);
}

/* ========================================
   ICÔNES ET LABELS
   ======================================== */

/* Icônes des groupes de filtres */
.filter-group-icon { 
    font-size: 1.2em;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

body.dark-mode .filter-group-icon { 
    color: white;
}

/* Labels des filtres avancés - UNIFORME */
.filter-label-advanced { 
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    white-space: nowrap;
}

body.dark-mode .filter-label-advanced { 
    color: white;
}

.filter-label-icon { 
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: white;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

body.dark-mode .filter-label-icon { 
    color: white;
}

/* Espacement horizontal cohérent entre les groupes (fallback utilitaire) */
.filter-group-spacing { gap: 8px; }

/* ========================================
   INPUTS, SELECTS, AUTOCOMPLETE - STYLE GLASS UNIFIÉ
   ======================================== */
.filter-input,
.sort-select,
.autocomplete-input {
    background: rgba(10, 14, 25, 0.20);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    border-radius: var(--filter-border-radius);
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    backdrop-filter: var(--glass-backdrop-medium);
    -webkit-backdrop-filter: var(--glass-backdrop-medium);
    box-shadow: var(--glass-shadow-light);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 0.875rem;
}

/* Unifier le rendu natif du menu select (liste déroulante) */
.sort-select {
    /* Force les contrôles natifs (liste/scrollbar) en thème sombre lorsque possible */
    color-scheme: dark;
    accent-color: var(--primary);
    background-image: none;
}

/* Couche dropdown native (select) */
.sort-select option {
    color: #111827; /* texte sombre dans la liste pour éviter le blanc sur blanc du user agent */
}

/* Menu déroulant harmonisé pour certains navigateurs (fallback) */
select.filter-input, select.sort-select {
    background-image: none;
}

/* Masquer le select natif tout en le conservant dans le DOM */
.visually-hidden-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Select personnalisé sombre (remplace la liste native trop claire) */
.custom-select { position: relative; width: 100%; }
.custom-select-trigger {
    width: 100%;
    height: var(--filter-btn-height);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    border-radius: var(--filter-border-radius);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    box-shadow: var(--glass-shadow-dark);
    cursor: pointer;
}
.custom-select-trigger::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.custom-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    display: none;
    max-height: 260px;
    overflow: auto;
    background: rgba(17, 24, 39, 0.88); /* Fallback opaque sombre si blur non supporté */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--filter-border-radius);
    backdrop-filter: var(--glass-backdrop-medium);
    -webkit-backdrop-filter: var(--glass-backdrop-medium);
    box-shadow: 0 16px 44px rgba(0,0,0,0.35);
    z-index: var(--dropdown-z-index);
}
.custom-select.open .custom-select-menu { display: block; }
.custom-select-option {
    padding: 10px 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.custom-select-option:hover,
.custom-select-option[aria-selected="true"] { background: rgba(255,255,255,0.12); }

.filter-input::placeholder,
.autocomplete-input::placeholder { color: rgba(255,255,255,0.6); }

body.dark-mode .filter-input,
body.dark-mode .sort-select,
body.dark-mode .autocomplete-input {
    background: rgba(10, 14, 25, 0.25);
    border-color: rgba(255,255,255,0.12);
    box-shadow: var(--glass-shadow-dark);
    color: #fff;
}

.filter-input:focus,
.sort-select:focus,
.autocomplete-input:focus {
    background: rgba(10, 14, 25, 0.32);
    border-color: var(--primary);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.35);
}

/* Container d'autocomplete */
.autocomplete-container { position: relative; }

.autocomplete-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: #fff;
    cursor: pointer;
    /* Doit passer au-dessus de l'input qui a un z-index élevé */
    z-index: var(--search-z-index);
}

.autocomplete-clear-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: var(--primary);
}

/* Liste des suggestions */
.autocomplete-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    background: rgba(17, 24, 39, 0.88); /* Fallback opaque sombre */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--filter-border-radius);
    backdrop-filter: var(--glass-backdrop-medium);
    -webkit-backdrop-filter: var(--glass-backdrop-medium);
    box-shadow: 0 16px 44px rgba(0,0,0,0.35);
    z-index: var(--dropdown-z-index);
    display: none;
}

.autocomplete-suggestions.active { display: block; }

.autocomplete-suggestions .suggestion-item {
    padding: 10px 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.autocomplete-suggestions .suggestion-item:hover,
.autocomplete-suggestions .suggestion-item[aria-selected="true"] {
    background: rgba(255,255,255,0.12);
}

.autocomplete-suggestions .suggestion-item-count {
    opacity: 0.8;
    font-size: 12px;
}

/* ========================================
   BOUTONS DE FILTRE
   ======================================== */
.filter-btn-base { 
    height: var(--filter-btn-height);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal) var(--transition-easing);
    border-radius: var(--filter-border-radius);
    font-size: 0.875rem;
    font-weight: 500;
}

/* État actif clairement visible pour les boutons de période (Hier/Aujourd'hui/Prochainement) */
.period-filter-wrapper-main .period-btn.period-btn-active,
#periodFilterContainer .period-btn.period-btn-active {
    background: linear-gradient(135deg, var(--primary), hsl(from var(--primary) h s calc(l + 15%)));
    border: 1px solid var(--primary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25), 0 8px 25px rgba(var(--primary-rgb), 0.35);
    transform: translateY(-1px);
}

/* ========================================
   PANEL DE FILTRES AVANCÉS
   ======================================== */
.advanced-filters-panel { 
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border-top: none;
    /* Permettre aux dropdowns de se déployer */
    overflow: visible;
    position: relative;
}

.advanced-filters-panel.hidden { 
    display: none;
}

/* Force 3 colonnes maximum pour layout 3+2 - STRUCTURÉ ET ALIGNÉ */
.advanced-filters-panel > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 100% !important;
    gap: 1.5rem 1rem !important;
    align-items: end !important;
}

/* Responsive: 2 colonnes sur tablette */
@media (max-width: 1023px) {
    .advanced-filters-panel > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive: 1 colonne sur mobile */
@media (max-width: 640px) {
    .advanced-filters-panel > div {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   CONTENEURS DE FILTRES AVANCÉS - UNIFORMITÉ
   ======================================== */
.sort-filter-group-advanced,
.genre-filter-wrapper,
.autocomplete-wrapper,
.filter-input-container,
.autocomplete-container,
.sort-select-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    position: relative;
    /* Permettre aux dropdowns de se déployer */
    overflow: visible;
    z-index: 1;
}

/* Premier et dernier élément */
.filter-input-container:first-child,
.autocomplete-container:first-child,
.sort-select-container:first-child {
    margin-left: 0;
}

.filter-input-container:last-child,
.autocomplete-container:last-child,
.sort-select-container:last-child {
    margin-right: 0;
}

/* ========================================
   LAYOUT PAR GRILLE - ALIGNEMENT STABLE (DESKTOP UNIQUEMENT)
   ======================================== */
@media (min-width: 1280px) {
    .controls-wrapper .bg-card-light > .flex.flex-wrap.items-center.justify-start {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "platform search period actions";
        align-items: center;
        gap: var(--menu-gap);
        height: var(--filter-btn-height); /* Force la hauteur fixe en desktop */
    }
    .platform-filter-wrapper-main { grid-area: platform; }
    .search-container-controls { grid-area: search; }
    .period-filter-wrapper-main { grid-area: period; }
    .controls-actions-group { grid-area: actions; justify-self: end; }
    
    /* Supprimer les séparateurs inline qui perturbent la grille */
    .controls-wrapper [style*="width: 24px"],
    .controls-wrapper [style*="width: 16px"] { display: none; }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1280px) {
    .controls-wrapper .flex.flex-wrap.items-center.justify-start { 
        flex-wrap: wrap;
        height: auto;
    }
}

@media (max-width: 1024px) {
    .controls-wrapper .bg-card-light {
        padding: 1.25rem 1.75rem;
    }
    
    .advanced-filters-panel {
        padding: 0.875rem 1.25rem;
    }
    
    .discreet-search-wrapper { 
        min-width: 200px;
        max-width: 280px;
    }

    /* Empilement vertical dès 1024px pour fiabiliser l'affichage mobile/tablete */
    .controls-wrapper .flex.flex-wrap.items-center.justify-start {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }
    .platform-filter-wrapper-main { order: 1; width: 100%; }
    .search-container-controls { order: 2; width: 100%; }
    .period-filter-wrapper-main { order: 3; width: 100%; }
    .controls-actions-group { order: 4; width: 100%; display: flex; justify-content: flex-end; }
    .modern-search-wrapper,
    .discreet-search-wrapper { width: 100%; max-width: none; }

    /* Eviter le chevauchement calendrier / filtres avancés */
    #periodFilterContainer { 
        width: 100%; 
        display: flex; 
        justify-content: flex-start; 
        align-items: center; 
        gap: 8px; 
        flex-wrap: wrap;
    }
    #calendarBtn { margin-left: 0; }

    /* Masquer les séparateurs inline */
    .controls-wrapper [style*="width: 24px"],
    .controls-wrapper [style*="width: 16px"] { display: none; }

    /* Autoriser les groupes à s'étendre et à passer à la ligne si besoin */
    .platform-group-prominent { height: auto; align-items: flex-start; }
    .platform-filter { flex-wrap: wrap; }

    .period-filter-wrapper-main { height: auto; flex-wrap: wrap; align-items: center; }
    .period-filter-wrapper-main .filter-group-icon { display: none; }
}

@media (max-width: 768px) {
    .controls-wrapper .bg-card-light {
        padding: 1rem 1.5rem;
    }
    
    .advanced-filters-panel {
        padding: 0.75rem 1rem;
    }
    
    .controls-wrapper .flex.flex-wrap.items-center.justify-start { 
        gap: 12px;
        flex-wrap: wrap;
        /* Empilement vertical + hauteur auto pour afficher toutes les lignes */
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }
    
    /* Ordre souhaité: 1 plateformes, 2 recherche, 3 période, 4 actions */
    .platform-filter-wrapper-main { order: 1; width: 100%; }
    .search-container-controls { order: 2; width: 100%; }
    .period-filter-wrapper-main { order: 3; width: 100%; }
    .controls-actions-group { order: 4; width: 100%; display: flex; justify-content: flex-end; }
    
    /* Recherche pleine largeur */
    .modern-search-wrapper,
    .discreet-search-wrapper { width: 100%; max-width: none; }
    
    /* Répartition homogène des boutons de période */
    #periodFilterContainer { width: 100%; display: flex; justify-content: space-between; }

    /* Forcer chaque groupe direct à occuper toute la largeur */
    .controls-wrapper .flex.flex-wrap.items-center.justify-start > * { width: 100%; flex: 1 1 100%; }
    
    .filter-btn-base, .platform-filter .platform-btn,
    #calendarBtn.filter-btn-icon-only, .filter-btn-icon-only {
        height: 38px;
        font-size: 0.8rem;
    }
    
    .filter-group-icon {
        font-size: 1.1em;
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 576px) {
    .controls-wrapper .bg-card-light {
        padding: 0.75rem 1rem;
    }
    
    .advanced-filters-panel {
        padding: 0.5rem 0.75rem;
    }
    
    .controls-wrapper .flex.flex-wrap.items-center.justify-start { 
        gap: 8px;
    }
    
    .filter-btn-base, .platform-filter .platform-btn,
    #calendarBtn.filter-btn-icon-only, .filter-btn-icon-only {
        height: 36px;
        font-size: 0.75rem;
    }
    
    .filter-group-icon {
        font-size: 1em;
        width: 16px;
        height: 16px;
    }
} 

/* ========================================
   LAYOUT PAR GRILLE - ALIGNEMENT STABLE (DESKTOP UNIQUEMENT)
   ======================================== */
/* Supprimé et remplacé par la version avec media query ci-dessus */

/* Alignement précis de l'icône de groupe (plateformes) avec les boutons */
.platform-group-prominent .filter-group-icon {
    height: var(--filter-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.platform-filter .platform-btn { vertical-align: middle; }