/* ==========================================================================
   FEATURE FILTERS
   --------------------------------------------------------------------------
   Pattern UI générique pour :
   - Sidebar desktop
   - Panneau fullscreen en mobile
   Réutilisable par toutes les features (events, plans, pages, etc.)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Desktop : le panneau de filtres reste dans le flux normal
   (colonne Bootstrap classique à gauche)
   -------------------------------------------------------------------------- */
.feature-filters {
    position: relative;
}


/* ==========================================================================
   MOBILE : transformation du panneau en off‑canvas fullscreen
   Breakpoint Bootstrap < lg (tablette / mobile)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ----------------------------------------------------------------------
       Le panneau devient un écran plein :
       - retiré du flux
       - recouvre toute la page
       - scrollable indépendamment
       ---------------------------------------------------------------------- */
    .feature-filters {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;

        background: #fff;
        z-index: 1050;

        overflow-y: auto;

        /* caché par défaut (hors de l'écran à gauche) */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;

        padding: 1rem;
    }

    /* ----------------------------------------------------------------------
       État ouvert du panneau :
       - glisse depuis la gauche
       ---------------------------------------------------------------------- */
    .feature-filters.is-open {
        transform: translateX(0);
    }

    /* ----------------------------------------------------------------------
       Header du panneau de filtres (mobile)
       - titre à gauche
       - bouton fermer à droite
       ---------------------------------------------------------------------- */
    .feature-filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Optionnel : header sticky en mobile (UX ++)
    .feature-filters-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
    }
    */

    /* ----------------------------------------------------------------------
       Colonne Bootstrap :
       - elle ne doit plus réserver de place en mobile
       - display: contents supprime visuellement le wrapper
       - mais conserve ses enfants dans le DOM
       ---------------------------------------------------------------------- */
    .feature-filters-col {
        display: contents; /* clé pour éviter les colonnes "fantômes" */
    }

    /* ----------------------------------------------------------------------
       Empêche le scroll du body quand le panneau est ouvert
       (UX mobile propre)
       ---------------------------------------------------------------------- */
    body.feature-filters-open {
        overflow: hidden;
    }

    /* ----------------------------------------------------------------------
       Header de la page (icône + titre)
       ---------------------------------------------------------------------- */
    .feature-header,
    .feature-header h1 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ----------------------------------------------------------------------
       Tabs en mobile :
       - affichage horizontal
       - scrollable au swipe
       - évite l’empilement vertical
       ---------------------------------------------------------------------- */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Cache la scrollbar WebKit pour un rendu plus natif */
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    /* ----------------------------------------------------------------------
       Actions du formulaire (boutons de filtres)
       ---------------------------------------------------------------------- */
    .feature-filter-actions {
        align-items: center;
    }

    .feature-filter-footer {
        padding-top: 0.75rem;
    }

    /* ----------------------------------------------------------------------
       Bouton "Rechercher" optimisé mobile :
       - plus compact
       - moins haut qu'un bouton desktop
       ---------------------------------------------------------------------- */
    .btn-search-mobile {
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 8px;
        width: auto;
    }
}


/* ==========================================================================
   Boutons UI génériques
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bouton icône :
   - carré
   - centré
   - utilisé pour Filtrer / Ajouter / actions secondaires
   -------------------------------------------------------------------------- */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   Badge "filtres actifs"
   ========================================================================== */

/* Wrapper nécessaire pour positionner le badge */
.feature-filters-toggle {
    position: relative;
}

/* --------------------------------------------------------------------------
   Badge visuel indiquant qu'au moins un filtre est actif
   - cercle discret
   - couleur primary
   - léger contour blanc pour rester visible
   -------------------------------------------------------------------------- */
.feature-filters-badge {
    position: absolute;
    top: 4px;
    right: 4px;

    min-width: 8px;
    height: 8px;

    background: #0d6efd; /* couleur primary Bootstrap */
    border-radius: 50%;

    box-shadow: 0 0 0 2px #fff;
}