@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

html, body {font-family: 'Lexend ExtraLight', 'Lexend', sans-serif;}

.bg-gradient-primary {
    background-color: #0d6efd !important;
    background-image: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%) !important;
}

/* ==========================================================================
   TOM SELECT : CHAMP D'ICÔNES CUSTOM (BARRE + GRILLE)
   ========================================================================== */

/* --- PARTIE 1 : LA BARRE DE RECHERCHE (Fix du double select & Fond gris) --- */

/* On neutralise l'enveloppe native pour enlever la double flèche et le fond */
.ts-wrapper.tomselect-clean {
    padding: 0 !important;
    border: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* On force le look Bootstrap et le fond BLANC sur le champ de saisie */
.ts-wrapper.tomselect-clean .ts-control,
.ts-wrapper.tomselect-clean.single .ts-control,
.ts-wrapper.tomselect-clean.input-active .ts-control {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #ffffff !important;
    background-color: #ffffff !important; /* Force le blanc */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-height: 58px;
}

/* Le halo bleu au clic (Focus Bootstrap) */
.ts-wrapper.tomselect-clean.focus .ts-control {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}


/* --- PARTIE 2 : LE MENU DÉROULANT (La Grille d'icônes) --- */

/* On transforme la liste verticale en grille */
.tomselect-clean .ts-dropdown .ts-dropdown-content {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 8px;
    max-height: 300px;
}

/* On dimensionne chaque option comme un petit carré cliquable */
.tomselect-clean .ts-dropdown .option {
    width: 40px;
    height: 40px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    padding: 0 !important;
}

/* Effet au survol d'une icône dans la grille */
.tomselect-clean .ts-dropdown .option:hover,
.tomselect-clean .ts-dropdown .option.active {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    transform: scale(1.1);
}

/* On agrandit l'icône et on la centre */
.tomselect-clean .ts-dropdown .option .bi {
    font-size: 1.25rem !important;
    margin: 0 !important;
}

/* On cache le texte dans la liste (mais il reste cherchable !) */
.tomselect-clean .ts-dropdown .option span {
    display: none;
}

/* ==========================================================================
   TOM SELECT : FACETTES DE LA BIBLIOTHÈQUE DE BLOCS (Type / Modèle / Tags)
   Libellés potentiellement longs (emoji + texte, ex: "🌿 Bannière
   Paysagiste") -- ne PAS réutiliser .tomselect-clean ci-dessus : sa grille
   40x40px texte-caché est pensée pour le picker d'icônes, elle rendrait ces
   libellés totalement illisibles (options tassées 3 par ligne). Ici : liste
   déroulante verticale classique, une option par ligne, et un contour
   visible sur le champ (page/edit.html.twig, en-tête blanc de la modale
   bibliothèque -- sans bordure nette le champ blanc s'y fondait).
   ========================================================================== */

/* flex-wrap: nowrap -- volontaire et le point clé : les puces ne DOIVENT
   jamais retomber à la ligne (empilement haut/bas), elles doivent au
   contraire se compresser de plus en plus au fur et à mesure qu'on en
   ajoute pour tenir toutes sur la même ligne (voir .item ci-dessous, qui
   porte le vrai travail de compression via flex-shrink + min-width: 0).
   overflow: hidden en sécurité si un jour le contenu ne peut vraiment plus
   se compresser. */
.ts-wrapper.library-facet-select .ts-control {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px;
    background-color: #f8fafc !important;
    min-height: 38px;
    padding: 0.25rem 0.5rem;
}

.ts-wrapper.library-facet-select.focus .ts-control {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
}

/* La barre de recherche interne (texte tapé / placeholder "Type de bloc...",
   etc.) a un min-width de 7rem (112px) en dur dans le thème bootstrap5 de
   Tom Select. flex-grow: 1 ici : quand le champ est vide (aucune puce), rien
   ne lui dispute la place, elle occupe donc tout le champ et le placeholder
   reste lisible en entier -- flex-shrink: 1 + min-width: 20px la laissent
   ensuite se comprimer, comme les puces, une fois qu'il faut leur faire de
   la place. (flex-basis: 80px n'est qu'un point de départ pour le calcul de
   la répartition, pas une largeur fixe.) */
.library-facet-select .ts-control > input {
    flex: 1 1 80px !important;
    min-width: 20px !important;
}

/* Puces des valeurs sélectionnées, à la suite de gauche à droite, qui se
   COMPRESSENT de plus en plus (flex-shrink) au lieu de passer à la ligne --
   min-width: 0 est ce qui autorise un flex-item à rétrécir sous la largeur
   de son propre contenu (sans ça, flex-shrink ne peut rien faire de plus
   une fois le contenu à sa largeur minimale). */
.library-facet-select .ts-control > .item {
    display: inline-flex !important;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
    padding: 4px 8px !important;
    margin: 0 4px 4px 0;
    border-radius: 6px;
    background: #e9eef5;
    overflow: hidden;
}

/* Le libellé se compresse avec son parent .item (min-width: 0 propagé,
   ellipsis dès que ça ne rentre plus plutôt qu'un retour à la ligne interne)
   -- rendu via library-filter-render_controller.js (le libellé est enveloppé
   dans ce <span> plutôt que d'être du texte brut directement dans .item).
   `title` (posé par le contrôleur) affiche le texte complet au survol. La
   croix de suppression, elle, n'est jamais tronquée (flex-shrink: 0). */
.library-facet-select .ts-control > .item .item-label {
    display: inline-block;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.library-facet-select .ts-control > .item .remove {
    flex-shrink: 0;
}

/* Liste déroulante verticale classique (pas de grille en flex-wrap). Le
   dropdown est un descendant du wrapper (Tom Select l'y insère par défaut,
   copyClassesToDropdown désactivé) -- sélecteur descendant, pas chaîné. */
.library-facet-select .ts-dropdown .ts-dropdown-content {
    display: block;
    max-height: 280px;
}

.library-facet-select .ts-dropdown .option {
    display: block;
    width: 100%;
    white-space: normal;
    padding: 6px 12px;
}

/* ==========================================================================
   CHAMPS REQUIRED
   ========================================================================== */

label.required::after {
    content: '*';
    color: var(--bs-danger);
    font-size: 0.75em;
    vertical-align: super;
    margin-left: 0.5em;
}

.no-required-marker label.required::after {
    content: none;
}