/*
 * Les listes deroulantes a la charte (21/09), par-dessus le theme de base de Tom
 * Select. Les variables viennent de templates/_tokens.html.twig, inclus par les
 * deux gabarits qui chargent cette feuille (administration, ecrans publics) : plus
 * de valeurs de repli, qui avaient fini par diverger des vraies.
 *
 * Le champ ferme reprend exactement nos champs de formulaire (hauteur, rayon,
 * bordure, focus) ; la liste ouverte est une carte flottante, pas le panneau gris
 * du systeme.
 */

/* Le wrapper recoit les classes de la liste d'origine : on lui retire ce qui
   appartenait au <select> lui-meme (cadre, fleche), le champ interieur le porte. */
.ts-wrapper.list-filter__facet,
.ts-wrapper.select,
.ts-wrapper.form-control,
.ts-wrapper.request-form__field {
    padding: 0; border: 0; background: none; box-shadow: none; height: auto;
}
.ts-wrapper { min-width: 0; }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    display: flex; align-items: center; flex-wrap: nowrap;
    min-height: var(--h-field); padding: .5rem 2.1rem .5rem .8rem;
    font: inherit; font-size: var(--fs-body); line-height: 1.3; color: var(--ink);
    background-color: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Le chevron, dessine par nous comme sur les listes natives du produit ; il se
   retourne quand la liste est ouverte. */
.ts-wrapper.single .ts-control::after {
    content: ""; position: absolute; right: .7rem; top: 50%; width: 16px; height: 16px; margin-top: -8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F4960' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    border: 0; transition: transform .18s ease;
}
.ts-wrapper.single.dropdown-active .ts-control::after { transform: rotate(180deg); }
.ts-wrapper .ts-control:hover { border-color: var(--violet-200); }
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--violet-600); box-shadow: var(--focus-ring);
}
.ts-wrapper .ts-control > input { font: inherit; font-size: var(--fs-body); color: inherit; min-width: 4rem; height: auto; padding: 0; border: 0; box-shadow: none; }
.ts-wrapper .ts-control > input::placeholder { color: var(--muted); opacity: .85; }
.ts-wrapper.single .ts-control .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.disabled .ts-control { opacity: .6; cursor: not-allowed; }

/* La liste ouverte : une carte flottante. Posee dans <body> (dropdownParent), elle
   n'est jamais coupee par une carte a debordement cache. */
.ts-dropdown {
    margin-top: 6px; padding: .3rem;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 14px 36px -10px rgba(35,20,70,.22), 0 2px 6px rgba(35,20,70,.06);
    font-family: var(--font-ui); font-size: var(--fs-body);
    z-index: 1100;
    animation: ts-in .14s ease-out;
}
@keyframes ts-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ts-dropdown { animation: none; } .ts-wrapper.single .ts-control::after { transition: none; } }
.ts-dropdown .ts-dropdown-content { max-height: 18rem; padding: 0; }
.ts-dropdown .option,
.ts-dropdown .create,
.ts-dropdown .no-results { padding: .5rem .7rem; border-radius: var(--radius-md); line-height: 1.35; }
.ts-dropdown .option { position: relative; padding-right: 2rem; }
.ts-dropdown .option.active,
.ts-dropdown .create.active { background: var(--violet-100); color: var(--violet-700); }
/* L'option retenue porte une coche : on sait ou l'on en est sans relire le champ. */
.ts-dropdown .option.selected { font-weight: 600; color: var(--violet-700); }
.ts-dropdown .option.selected::after {
    content: ""; position: absolute; right: .65rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A2E9E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
.ts-dropdown .create { color: var(--violet-700); }
.ts-dropdown .create strong { font-weight: 600; }
.ts-dropdown .no-results { color: var(--muted); }
.ts-dropdown .optgroup-header { padding: .5rem .7rem .25rem; font-size: var(--fs-th); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; }
/* Le champ de recherche integre (listes longues) prend l'allure du champ ferme. */
.ts-dropdown .dropdown-input { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .45rem .6rem; margin: .1rem 0 .3rem; width: 100%; }

/* Barres de filtre : meme hauteur que la recherche et les boutons voisins. */
.list-filter .ts-wrapper .ts-control { height: var(--h-field); }
.bulk .ts-wrapper .ts-control,
.external-refuse__form .ts-wrapper .ts-control { min-height: 2.15rem; height: 2.15rem; padding-top: .3rem; padding-bottom: .3rem; font-size: var(--fs-body-sm); }
/* Une liste posee en ligne dans une phrase (offrir une licence) garde sa place. */
.gift .ts-wrapper { display: inline-block; min-width: 10rem; vertical-align: middle; }
.gift .ts-wrapper .ts-control { min-height: 2rem; padding-top: .25rem; padding-bottom: .25rem; font-size: var(--fs-body-sm); }

/* Un champ requis laisse vide : Tom Select pose .invalid, on le dessine. */
.ts-wrapper { position: relative; }
.ts-wrapper.invalid .ts-control { border-color: var(--danger); box-shadow: var(--focus-ring-danger); }
.ts-wrapper.disabled .ts-control { background-color: var(--paper); }

/* Recherche d'organisation (onboarding) : une largeur stable, sinon le champ
   prend celle du texte choisi et saute a chaque choix. */
.join-search__field .ts-wrapper { min-width: 12rem; }

/* Ecrans publics : meme hauteur que les champs voisins. */
.auth__field .ts-wrapper.single .ts-control { min-height: var(--h-field); padding: .5rem 2.2rem .5rem .85rem; border-radius: var(--radius-md); }
/* Dans le tunnel d'inscription, les champs sont plus hauts (2.9rem) : la liste
   habillee doit suivre, sinon elle parait tassee a cote d'un champ texte. */
.auth--tunnel .auth__field .ts-wrapper.single .ts-control { min-height: 2.9rem; }