/*
 * TomSelect thème bootstrap5 + Tabler : variables --bs-* attendues par le CSS CDN.
 * Étendre un ancêtre avec .tomselect-tabler-bridge (ex. carte filtres, #step-1 bulk).
 * Dropdown déplacé sous body : classe .ts-dropdown-bulk (voir contrôleurs Stimulus).
 */
.tomselect-tabler-bridge,
#step-1,
.ts-dropdown-bulk {
    --bs-border-width: var(--tblr-border-width, 1px);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius);
    --bs-border-radius-lg: var(--tblr-border-radius);
    --bs-body-bg: var(--tblr-bg-forms);
    --bs-body-color: var(--tblr-body-color);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface));
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface));
    --bs-box-shadow-inset: var(--tblr-shadow-input);
    --bs-form-invalid-color: var(--tblr-danger);
    --bs-form-valid-color: var(--tblr-success);
    /* Même cible que .form-control Tabler (hauteur de ligne des champs) */
    --ms-tomselect-field-h: calc(1.25rem + 1.125rem + calc(var(--tblr-border-width) * 2));
}

/* Si un script résiduel injecte une barre de filtre dans le panneau détaché */
.ts-dropdown-bulk .dropdown-input,
.ts-dropdown-bulk input.dropdown-input {
    display: none !important;
}

.ts-dropdown-bulk {
    z-index: 9999 !important;
    isolation: isolate !important;
    background: var(--tblr-bg-surface, #fff) !important;
    border: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.2)) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25) !important;
    border-radius: var(--tblr-border-radius, 0.25rem);
}

[data-bs-theme="dark"] .ts-dropdown-bulk {
    background: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-border-color) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5) !important;
}

.ts-dropdown-bulk .ts-dropdown-content,
.ts-dropdown-bulk .ts-dropdown-content {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: inherit !important;
}

#step-1 .ts-dropdown-bulk,
.ts-dropdown-bulk {
    max-width: 300px !important;
    box-sizing: border-box !important;
}

.ts-dropdown-bulk .optgroup-header {
    font-weight: 700 !important;
    color: var(--tblr-body-color) !important;
    background: rgba(0, 0, 0, 0.06) !important;
    padding: 0.35rem 0.75rem !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

[data-bs-theme="dark"] .ts-dropdown-bulk .optgroup-header {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ts-dropdown-bulk .optgroup .option,
.ts-dropdown-bulk .optgroup [data-selectable] {
    padding-left: 1.25rem !important;
}

.ts-dropdown-bulk .option,
.ts-dropdown-bulk [data-selectable] {
    background: transparent !important;
    color: var(--tblr-body-color, #1e293b) !important;
}

[data-bs-theme="dark"] .ts-dropdown-bulk .optgroup-header,
[data-bs-theme="dark"] .ts-dropdown-bulk .option,
[data-bs-theme="dark"] .ts-dropdown-bulk [data-selectable] {
    color: var(--tblr-body-color) !important;
}

.ts-dropdown-bulk .option.active,
.ts-dropdown-bulk .option.selected.active,
.ts-dropdown-bulk [data-selectable].active {
    background: var(--tblr-primary, #206bc4) !important;
    color: #fff !important;
}

.ts-dropdown-bulk .input-wrapper,
.ts-dropdown-bulk .ts-control input {
    background: inherit !important;
    color: inherit !important;
}