/* WEBBASE-4038 (lot 5 de l'épic #3947) — select2 sur les variables du socle.
   La feuille livrée (lib/select2/css/select2.min.css, thème « default ») fige blanc, gris et bleu : le champ restait
   blanc en mode sombre (filtre « Toutes les étiquettes » de la liste des tickets) et ignorait la palette.
   Chargée par _ThemeStylesheets pour toutes les pages, sans effet tant qu'aucun select2 n'est rendu. Les vues chargent
   select2.min.css plus bas dans la page : chaque règle commence par `html` pour l'emporter sans !important, quel que
   soit l'ordre. Valeurs --wb-* (contrat --theme-*, compat.css) : justes en clair comme en sombre, aucune couleur en dur. */

/* Champ fermé : comme un .form-control (fond, bordure de champ, rayon, texte). */
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
  background-color: var(--wb-surface-card);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius);
  color: var(--wb-text);
}
html .select2-container--default:hover .select2-selection--single,
html .select2-container--default:hover .select2-selection--multiple {
  border-color: var(--wb-input-border-hover);
}
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--single,
html .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 .25rem var(--wb-focus-ring);
}
html .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--wb-text); }
html .select2-container--default .select2-selection--single .select2-selection__placeholder,
html .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--wb-text-muted);
}
html .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--wb-text-muted);
}
html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--wb-text-muted);
}
html .select2-container--default .select2-selection__clear { color: var(--wb-text-muted); }
html .select2-container--default.select2-container--disabled .select2-selection--single,
html .select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--wb-surface-alt);
}

/* Valeurs choisies (sélection multiple) : pastilles neutres sur la surface secondaire. */
html .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--wb-surface-alt);
  border: 1px solid var(--wb-border-color);
  border-radius: var(--wb-radius);
  color: var(--wb-text);
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--wb-text-muted);
  border-right-color: var(--wb-border-color);
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: var(--wb-hover);
  color: var(--wb-text);
}
html .select2-container--default .select2-search--inline .select2-search__field { color: var(--wb-text); }

/* Liste ouverte : surface de carte, survol sur la marque, valeur choisie teintée. */
html .select2-container--default .select2-dropdown,
html .select2-dropdown {
  background-color: var(--wb-surface-card);
  border-color: var(--wb-border-color);
  border-radius: var(--wb-radius);
  color: var(--wb-text);
}
html .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--wb-surface-card);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius);
  color: var(--wb-text);
}
html .select2-container--default .select2-results__option--selected,
html .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: color-mix(in srgb, var(--wb-primary) 12%, var(--wb-surface-card));
  color: var(--wb-text);
}
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--wb-primary);
  color: var(--wb-on-brand);
}
html .select2-container--default .select2-results__option--disabled,
html .select2-container--default .select2-results__group,
html .select2-container--default .select2-results__message {
  color: var(--wb-text-muted);
}