/* ─── TomSelect — intégration thème shadcn (light + dark) ──────────────── */
.ts-wrapper {
    font-size: 0.875rem;
}

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

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

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

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

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

/* Dropdown */
.ts-dropdown {
    background-color: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--popover-foreground) !important;
    border-radius: calc(var(--radius) - 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) !important;
    padding: 0.375rem 0.75rem;
}

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

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