/* ─── TomSelect — intégration thème shadcn (light + dark) ──────────────────
 * Les variables --xxx (popover, background, foreground…) ne sont définies que
 * dans le contexte front (shadcn.css via app.css). Dans EasyAdmin ces variables
 * n'existent pas ; on fournit donc un repli sur les variables Bootstrap
 * (--bs-*) d'EasyAdmin, qui suivent son thème clair/sombre. Le front reste
 * inchangé (les variables shadcn priment) ; l'admin est correctement thémé au
 * lieu d'un widget transparent. ─────────────────────────────────────────── */
.ts-wrapper {
    font-size: 0.875rem;
}

.ts-control,
.ts-wrapper.single .ts-control {
    background-color: var(--background, var(--bs-body-bg)) !important;
    background-image: none !important;
    border-color: var(--input, var(--bs-border-color)) !important;
    color: var(--foreground, var(--bs-body-color)) !important;
    border-radius: calc(var(--radius, var(--bs-border-radius, 0.375rem)) - 2px);
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    box-shadow: none !important;
}

.ts-control input {
    color: var(--foreground, var(--bs-body-color)) !important;
}

.ts-control input::placeholder {
    color: var(--muted-foreground, var(--bs-secondary-color)) !important;
}

/* Tags (items sélectionnés) */
.ts-control .item {
    background-color: var(--primary, var(--bs-primary)) !important;
    color: var(--primary-foreground, #fff) !important;
    border-radius: calc(var(--radius, var(--bs-border-radius, 0.375rem)) - 4px);
    border: none !important;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
}

.ts-control .item .remove {
    color: var(--primary-foreground, #fff) !important;
    border-left-color: color-mix(in oklch, var(--primary-foreground, #fff) 30%, transparent) !important;
}

/* Dropdown */
.ts-dropdown {
    background-color: var(--popover, var(--bs-body-bg)) !important;
    border-color: var(--border, var(--bs-border-color)) !important;
    color: var(--popover-foreground, var(--bs-body-color)) !important;
    border-radius: calc(var(--radius, var(--bs-border-radius, 0.375rem)) - 2px);
    box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
}

.ts-dropdown .ts-option {
    color: var(--popover-foreground, var(--bs-body-color)) !important;
    padding: 0.375rem 0.75rem;
}

.ts-dropdown .ts-option:hover,
.ts-dropdown .ts-option.active {
    background-color: var(--accent, var(--bs-tertiary-bg)) !important;
    color: var(--accent-foreground, var(--bs-body-color)) !important;
}

.ts-dropdown .ts-option.selected {
    background-color: var(--primary, var(--bs-primary)) !important;
    color: var(--primary-foreground, #fff) !important;
}

/* Composer de suggestion : le contrôle TomSelect sert uniquement de champ de
   recherche — la sélection est représentée par la liste dédiée en dessous
   (titre + libellé exact + retirer), pour garder chaque libellé collé à son
   chapitre. On masque donc les items dans le contrôle. */
.suggestion-composer-ts .ts-control > .item {
    display: none;
}