/*
 * Habillage de Choices.js (assets/vendor/choices/) pour reprendre les tokens
 * du design AssoGestion. Choices.js remplace automatiquement tout
 * <select multiple> (voir ag-core.js) par un composant type "Select2"
 * (tags + recherche), demandé pour les listes à sélection multiple
 * (ex: Profils dans Mon profil).
 */

.choices {
	margin-bottom: 0;
	font-size: var(--ag-font-size-base);
}

.choices__inner {
	background: var(--ag-color-surface);
	border: 1px solid var(--ag-color-border-strong);
	border-radius: var(--ag-radius-sm);
	padding: 6px var(--ag-space-2) 3px;
	min-height: 42px;
	font-size: var(--ag-font-size-base);
}

.choices.is-open .choices__inner {
	border-radius: var(--ag-radius-sm);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: var(--ag-color-primary);
	box-shadow: 0 0 0 3px var(--ag-color-primary-soft);
}

.choices__list--multiple .choices__item {
	background: var(--ag-color-primary);
	border: 1px solid var(--ag-color-primary-hover);
	border-radius: var(--ag-radius-full);
	font-size: var(--ag-font-size-sm);
	padding: 3px var(--ag-space-3);
}

.choices__list--multiple .choices__item.is-highlighted {
	background: var(--ag-color-primary-hover);
}

.choices__button {
	filter: invert(1) brightness(2);
	opacity: 0.85;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
	border-color: var(--ag-color-border-strong);
	border-radius: var(--ag-radius-sm);
	box-shadow: var(--ag-shadow-md);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background: var(--ag-color-primary-soft);
}

/*
 * Choices.js réserve par défaut 100px de padding à droite de chaque option
 * (choices.min.css, .choices__item--selectable), pour l'indice clavier
 * "Press to select" (::after, content: attr(data-select-text)). On a
 * configuré itemSelectText: "" (ag-core.js) — cet indice est donc toujours
 * vide, mais l'espace réservé restait pris en compte dans le calcul de
 * largeur du texte : sur un champ étroit (ex. "Mode de paiement"/"Personne"
 * dans un .ag-field-row--narrow), il ne restait presque plus de place pour
 * le texte de l'option, qui se retrouvait à passer à la ligne caractère par
 * caractère (word-break: break-all, également par défaut). Ramené à un
 * padding symétrique classique, cohérent avec .choices__item (padding
 * gauche) ci-dessus.
 */
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
	padding-right: var(--ag-space-2);
	/* Choices.js casse par défaut n'importe où dans le mot (break-all) — sur
	 * un champ étroit, un mot un peu long donnait des coupures illisibles
	 * (ex. "AADIA Moh"/"amed (M.)"). break-word ne coupe qu'en dernier
	 * recours, en respectant les espaces quand c'est possible. */
	word-break: break-word;
}

.choices__input {
	background: var(--ag-color-surface);
	font-size: var(--ag-font-size-base);
}

.choices__placeholder {
	color: var(--ag-color-text-muted);
	opacity: 1;
}