/*
 * Listes déroulantes avec recherche (Tom Select, assets/js/listes-recherche.js).
 * Le cadre reprend les classes de la liste d'origine (couleurs, bordure, largeur) ; ici, la structure,
 * la flèche et le menu. Menu clair par défaut (connexion, installation, thème clair), sombre en thème sombre.
 */
/* Liste d'origine : masquée mais présente (formulaire, validation, lecteurs d'écran) */
select.ts-hidden-accessible, .ts-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; }

.ts-wrapper { position: relative; display: inline-flex; align-items: center; vertical-align: middle; min-height: 2.25rem; cursor: pointer; }
.ts-wrapper.w-full, .ts-wrapper.block { display: flex; }
.ts-wrapper.single { padding-right: 2rem !important; }
.ts-wrapper.single::after {
    content: ''; position: absolute; right: .75rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.3rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; pointer-events: none;
}
.ts-wrapper.single.dropdown-active::after { transform: rotate(-135deg); margin-top: -.05rem; }
.ts-wrapper.disabled { opacity: .55; cursor: not-allowed; }
.ts-wrapper.focus { box-shadow: 0 0 0 2px rgb(16 185 129 / .45); }

.ts-control { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; width: 100%; min-width: 0; padding: 0; margin: 0;
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit; font: inherit; line-height: 1.4; overflow: hidden; }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-control > input { flex: 1 1 3rem; min-width: 3rem; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important;
    background: transparent !important; box-shadow: none !important; color: inherit; font: inherit; }
.ts-control > input::placeholder { color: inherit; opacity: .5; }

/* Liste multiple : étiquettes */
.ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px;
    background: rgb(16 185 129 / .15); color: inherit; font-size: .85em; }
.ts-wrapper.multi .ts-control > .item .remove { text-decoration: none; color: inherit; opacity: .6; font-weight: 700; }
.ts-wrapper.multi .ts-control > .item .remove:hover { opacity: 1; }

/* Menu */
.ts-dropdown { position: absolute; z-index: 10000; margin-top: .25rem; border-radius: .6rem; overflow: hidden;
    background: #fff; color: #0f172a; border: 1px solid #e2e8f0; box-shadow: 0 12px 32px -8px rgb(15 23 42 / .25); font-size: .8125rem; text-align: left; }
.ts-dropdown-content { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: .4rem .65rem; border-radius: .4rem; cursor: pointer; }
.ts-dropdown .option.active { background: #d1fae5; color: #064e3b; }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .option[aria-disabled="true"], .ts-dropdown .option.disabled { opacity: .45; cursor: default; }
.ts-dropdown .optgroup-header { padding: .5rem .65rem .2rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; cursor: default; }
.ts-dropdown .no-results { color: #64748b; cursor: default; }
.ts-dropdown .highlight { background: rgb(212 167 44 / .35); border-radius: 2px; }

html.theme-sombre .ts-dropdown { background: #1e293b; color: #e2e8f0; border-color: #334155; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .6); }
html.theme-sombre .ts-dropdown .option.active { background: rgb(16 185 129 / .2); color: #a7f3d0; }
html.theme-sombre .ts-dropdown .optgroup-header, html.theme-sombre .ts-dropdown .no-results { color: #94a3b8; }
html.theme-sombre .ts-wrapper.multi .ts-control > .item { background: rgb(16 185 129 / .25); }

/* Saisie libre (liste des villes) : proposée en bas de la liste */
.ts-dropdown .ts-dropdown-content { display: flex; flex-direction: column; }
.ts-dropdown .create { order: 99; border-top: 1px solid rgb(148 163 184 / .25); border-radius: 0 0 .4rem .4rem; font-style: italic; }

/* Champs en majuscules (codes) : l'indication grisée reste en casse normale */
input::placeholder { text-transform: none; }

/* Champ « Rechercher… » en haut du menu (module dropdown_input) */
.ts-dropdown .dropdown-input-wrap { padding: .4rem .4rem .3rem; border-bottom: 1px solid rgb(148 163 184 / .25); }
.ts-dropdown .dropdown-input { display: block; width: 100%; box-sizing: border-box; padding: .45rem .65rem; border: 1px solid #cbd5e1; border-radius: .45rem;
    background: #fff; color: #0f172a; font: inherit; outline: none; }
.ts-dropdown .dropdown-input:focus { border-color: #10b981; box-shadow: 0 0 0 2px rgb(16 185 129 / .25); }
html.theme-sombre .ts-dropdown .dropdown-input { background: #0f172a; color: #e2e8f0; border-color: #334155; }
/* Indication du champ quand aucune valeur n'est choisie (ex. Ville) */
.ts-control .items-placeholder { flex: 1; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: inherit; font: inherit; outline: none; cursor: pointer; pointer-events: none; }
.ts-control .items-placeholder::placeholder { color: inherit; opacity: .5; }
.ts-wrapper.has-items .ts-control .items-placeholder { display: none; }

/* Pas de contour navigateur à l'intérieur du champ : le cadre (.ts-wrapper.focus) signale déjà le focus */
.ts-control:focus, .ts-control:focus-visible { outline: none; }