/* Dark-mode bridge for Tom Select. The vendored `tom-select.bootstrap5` theme keeps a light
   palette under data-bs-theme="dark", so the control box, the typeahead text, the dropdown options
   and the multi-select chips (lead + extra services) all stayed bright and hard to read. Map them
   onto the Bootstrap --bs-* vars so the widget matches the rest of the page — same approach as
   flatpickr-dark.css / easymde-dark.css. */

/* Control box (the visible field) + the typeahead input inside it. */
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-control input,
[data-bs-theme="dark"] .ts-control input:focus {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-control input::placeholder,
[data-bs-theme="dark"] .ts-control > .ts-control-placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}
[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
[data-bs-theme="dark"] .ts-wrapper.disabled .ts-control {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Dropdown panel + options. */
[data-bs-theme="dark"] .ts-dropdown {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .option.active {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .ts-dropdown .optgroup-header {
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .ts-dropdown .no-results,
[data-bs-theme="dark"] .ts-dropdown .create {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .ts-dropdown .active.create {
    background-color: var(--bs-tertiary-bg);
}

/* Multi-select chips (the lead + extra services in the booking / edit dialog). */
[data-bs-theme="dark"] .ts-control .item {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-control .item.active {
    background-color: var(--bs-primary);
    color: #fff;
}