/**
 * Tom Select — overrides pour s'aligner sur la charte Nisios Connect.
 * Couleurs : --color-secondary (#91B78F) pour focus/highlight,
 *            --color-cream (#f0f7ee) pour le hover doux.
 */

.ts-wrapper {
	font-family: inherit;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
	border: 1px solid #b0b6c0;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	background: var(--color-base);
	box-shadow: none;
	min-height: 0;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 3px rgba(145, 183, 143, 0.25);
}

.ts-wrapper .ts-control input::placeholder {
	color: #9ba3af;
}

/* Neutralise le `width: 100%` global du thème sur input[type="text"] qui force
   l'input de recherche Tom Select à passer sous l'item (rendu sur 2 lignes). */
.ts-wrapper .ts-control > input {
	width: auto !important;
}

.ts-dropdown {
	border: 1px solid #b0b6c0;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(18, 18, 23, 0.12);
	margin-top: 4px;
	font-family: inherit;
	font-size: 14px;
}

.ts-dropdown .option {
	padding: 8px 12px;
	color: var(--color-contrast);
}

.ts-dropdown .active {
	background: var(--color-cream);
	color: var(--color-contrast);
}

.ts-dropdown .option.selected,
.ts-dropdown .active.selected {
	background: var(--color-secondary);
	color: var(--color-base);
}

.ts-wrapper.single .ts-control:after {
	border-top-color: #6b7280;
}

/* Multi : pills aux couleurs de la charte (vert secondary doux) */
.ts-wrapper.multi .ts-control [data-value] {
	background: #fafafa;
	background-image: none;
	border: 1px solid #ccc;
	color: var(--color-contrast);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 13px;
	font-weight: var(--custom--font-weight--medium, 500);
	box-shadow: none;
	text-shadow: none;
	margin: 2px 4px 2px 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ts-wrapper.multi .ts-control [data-value].active {
	background: var(--color-secondary);
	background-image: none;
	border-color: var(--color-secondarydark, var(--color-secondary));
	color: #fff;
}

.ts-wrapper.multi.plugin-remove_button .item .remove {
	border: none;
	padding: 0 6px 0 3px;
	margin-left: 0;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ts-wrapper.multi.plugin-remove_button .item .remove:hover {
	background: rgba(90, 137, 88, 0.15);
	opacity: 1;
}

.ts-wrapper.multi .ts-control > div.active .remove {
	border-left-color: rgba(255, 255, 255, 0.4);
}