/*
 * Tom Select's Bootstrap 5 skin, made to work under Tabler. Not a place for restyling.
 *
 * The skin is compiled against Bootstrap's variable names, and Tabler renames the prefix:
 * tabler.css declares 1053 --tblr-* custom properties and exactly one --bs-* name, --bs-position.
 * Every var(--bs-*) the
 * skin reads is therefore undefined, fourteen of them, and an undefined var() does not fall back
 * to anything useful: the whole declaration becomes invalid at computed-value time and the
 * property resolves to unset. Measured on a page of ours before this file existed:
 *
 *     .ts-dropdown  background: transparent, border: 0px none
 *     .ts-control   border: 0px none
 *
 * A dropdown drawn with no background over the page behind it, in both color schemes. Nothing
 * reports it, which is the same silence the CSP img-src defect had.
 *
 * Aliasing the names is the whole fix for that, and it is deliberately a bridge rather than a
 * rule-by-rule patch: it repairs all fourteen lookups at once, including the ones no page of ours
 * has hit yet (the sm/lg radii, the valid/invalid colors), and it keeps working if Tom Select
 * reads another --bs-* in a later release. Tabler's own tabler-vendors.css patches around about
 * four of the symptoms instead and leaves the borders and radii broken; its Tom Select block is
 * not loaded here for that reason, and because it also carries an !important ApexCharts tooltip
 * override that would then apply to charts only on pages that happen to contain a select.
 *
 * The property names map one to one, so this list is a prefix rename with two exceptions, each
 * marked below.
 */
.ts-wrapper,
.ts-dropdown {
	/* A form control's background, not the page's: --bs-body-bg is what the skin reads for it. */
	--bs-body-bg: var(--tblr-bg-forms);
	--bs-body-color: var(--tblr-body-color);
	--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-sm);
	--bs-border-radius-lg: var(--tblr-border-radius-lg);
	--bs-border-width: var(--tblr-border-width);
	--bs-box-shadow-inset: var(--tblr-box-shadow-inset);
	--bs-form-invalid-color: var(--tblr-form-invalid-color);
	--bs-form-valid-color: var(--tblr-form-valid-color);
	--bs-secondary-bg: var(--tblr-secondary-bg);
	--bs-secondary-color: var(--tblr-secondary-color);
	--bs-tertiary-bg: var(--tblr-tertiary-bg);
}

/*
 * The second exception. The dropdown floats over the page rather than sitting in the form, so
 * Tabler draws it on the surface color and gives it the dropdown shadow; both are what
 * tabler-vendors.css picks for it, and both differ visibly from a plain rename on the dark scheme.
 */
.ts-dropdown {
	--bs-body-bg: var(--tblr-bg-surface);
	box-shadow: var(--tblr-shadow-dropdown);
}

/* The skin hardcodes #343a40 here rather than reading a variable, so no alias reaches it. */
.ts-dropdown,
.ts-control,
.ts-control input {
	color: var(--tblr-body-color);
}

/*
 * Restores the focus ring on a validated control, which the skin loses to a CSS grammar error of
 * its own. It writes
 *
 *     box-shadow: 0 0 0 0.25rem rgba(var(--bs-form-invalid-color), 0.25);
 *
 * and rgba() needs three channel numbers there, not a color. This is not something the alias above
 * causes and not something removing it would fix: Bootstrap itself defines --bs-form-invalid-color
 * as #dc3545, so the declaration is equally invalid under plain Bootstrap. It is an upstream bug in
 * tom-select 2.6.2, and an invalid box-shadow computes to none, so a select that has failed
 * validation shows no focus indicator at all. That is a keyboard trap in the WCAG sense, on exactly
 * the control a user has just been told to correct.
 *
 * Written the way Tabler writes its own, with the -rgb channel variable:
 *
 *     .form-control.is-invalid:focus { box-shadow: ..., 0 0 0 0.25rem rgba(var(--tblr-danger-rgb), 0.25) }
 *
 * Selectors copied exactly from the skin so specificity matches and source order decides.
 */
.ts-wrapper.is-invalid.focus .ts-control,
.was-validated .invalid.focus .ts-control,
.was-validated :invalid + .ts-wrapper.focus .ts-control {
	box-shadow: 0 0 0 0.25rem rgba(var(--tblr-danger-rgb), 0.25);
}

.ts-wrapper.is-valid.focus .ts-control,
.was-validated .valid.focus .ts-control,
.was-validated :valid + .ts-wrapper.focus .ts-control {
	box-shadow: 0 0 0 0.25rem rgba(var(--tblr-success-rgb), 0.25);
}

.ts-dropdown .option {
	padding: 0.5rem 0.75rem;
}

/*
 * Tabler's own control box, which the skin cannot know about: it hardcodes Bootstrap's stock
 * 0.375rem/0.75rem padding and 1.5 line-height, while Tabler's .form-control and .form-select use
 * 0.5625rem 3rem 0.5625rem 1rem with a 1.25rem line-height. The difference renders as a searchable
 * select five pixels shorter than every other input beside it, 35 against 40.
 *
 * Tabler's own preview has this bug too, so matching Tabler exactly would mean shipping it. The
 * numbers are repeated here because Tabler hardcodes them as well and exposes no custom property
 * to read them from; TomSelectCorrectionsTest reads .form-select out of the shipped tabler.css and
 * fails if they drift apart.
 *
 * Left alone on purpose: .ts-wrapper.multi.has-items .ts-control, whose padding is computed from
 * its chips and outranks these selectors anyway.
 */
.ts-control {
	--ts-pr-min: 1rem;
	padding-top: 0.5625rem;
	padding-bottom: 0.5625rem;
	padding-left: 1rem;
	line-height: 1.25rem;
}

/*
 * The sized variants, which the block above would otherwise defeat.
 *
 * Tom Select copies the original control's classes onto its wrapper, so `form-select-sm` does reach
 * `.ts-wrapper` and its border-radius applies. The box does not: the padding that sizes a control
 * lives on `.ts-control`, one element in, where a class on the wrapper cannot reach it. So the
 * correction above pinned every searchable select to the default height whatever size it was asked
 * for, and a filter strip of small controls rendered one of them eight pixels taller than the rest:
 * measured 40 against 32.
 *
 * The numbers are Tabler's own `.form-select-sm` and `.form-select-lg`, repeated here for the same
 * reason the default ones are - Tabler hardcodes them and exposes no custom property to read them
 * from. `TomSelectCorrectionsTest` reads them out of the shipped stylesheet and fails when they
 * drift.
 */
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
	padding-top: 0.3125rem;
	padding-bottom: 0.3125rem;
	padding-left: 0.5rem;
	font-size: 0.75rem;
}

.ts-wrapper.form-select-lg .ts-control,
.ts-wrapper.form-control-lg .ts-control {
	padding-top: 0.6875rem;
	padding-bottom: 0.6875rem;
	padding-left: 1.5rem;
	font-size: 1rem;
}

/*
 * And the wrapper's floor, which the skin computes from Bootstrap's stock box rather than Tabler's.
 *
 *     .ts-wrapper.form-select-sm { min-height: calc(1.5em + 0.5rem + border * 2) }
 *
 * That is 34px where Tabler's own small control is 32, so correcting the padding alone left the
 * wrapper two pixels proud and stretched the control back out to fill it. Tabler states the same
 * measurement as `calc(1.25rem + 0.625rem + border * 2)` on `.form-control-sm`, a fixed line-height
 * rather than 1.5em, which is why the two disagree: `em` here resolves against the wrapper's font
 * size, not the sized control's.
 */
.ts-wrapper.form-select-sm,
.ts-wrapper.form-control-sm {
	min-height: calc(1.25rem + 0.625rem + calc(var(--tblr-border-width) * 2));
}

.ts-wrapper.form-select-lg,
.ts-wrapper.form-control-lg {
	min-height: calc(1.25rem + 1.375rem + calc(var(--tblr-border-width) * 2));
}

/*
 * The placeholder, which nothing styled at all.
 *
 * Tabler colors one with `.form-control::placeholder`, and the input Tom Select builds inside
 * `.ts-control` is not a `.form-control` - it carries no class the skin or the theme keys on. So it
 * fell through to the browser default, measured #757575 against Tabler's --tblr-tertiary at
 * #9ca3af, and a searchable select's placeholder read darker than the plain input beside it.
 */
.ts-control > input::placeholder {
	color: var(--tblr-tertiary);
	opacity: 1;
}

/* Clears Tabler's caret, drawn on the wrapper at right 1rem. Same selector the skin uses. */
.ts-wrapper.form-select,
.ts-wrapper.single {
	--ts-pr-caret: 3rem;
}

/*
 * The chips a multi-select draws. The alias block above cannot reach these: the skin writes literal
 * colors here rather than var() lookups, so they follow no color scheme at all.
 *
 *     .ts-wrapper.multi .ts-control > div            background #efefef,  color #343a40
 *     .ts-wrapper.multi .ts-control > div.active     background #0d6efd,  color #fff
 *     .ts-wrapper.multi.disabled .ts-control > div   background white
 *     .plugin-remove_button ... .item .remove        border #dee2e6, and white when disabled
 *
 * Measured on the dark scheme before this: a chip was #efefef on #343a40, the same light gray it is
 * on the light one, and a disabled chip was pure white with a white separator. The active state is
 * wrong in both schemes, because #0d6efd is Bootstrap's stock blue and Tabler's primary is #066fd1.
 *
 * The resting and disabled mappings are Tabler's own, copied from the tabler-vendors.css block this
 * project does not load. The active state and the remove separator are not in that block and take
 * the obvious names.
 *
 * Selectors copied exactly from the skin so specificity matches and source order decides. The
 * active separator stays transparent: the skin sets it through .item.active .remove, which outranks
 * the rule here by one class.
 *
 * The border is load-bearing and was left out of the first version of this block as "not a
 * correction". It is: --tblr-bg-surface-secondary and --tblr-bg-forms are both #111827 on the dark
 * scheme, so a chip painted the first sits inside a field painted the second and there is nothing
 * to see. Tabler's rule is background, border and color together and only works as the three. The
 * skin gives the border zero width, so the width has to be written here, not only the color.
 *
 * The active and disabled rules repeat it to keep the box the same size: the skin resets both to
 * zero width at a specificity that outranks the resting rule, so a chip would shrink by two pixels
 * the moment it was clicked.
 *
 * Left alone on purpose: .remove:hover, a 5% black wash that darkens a chip which is already dark.
 * A weak affordance on this scheme rather than a broken one, and picking a replacement is a design
 * decision rather than a correction.
 */
.ts-wrapper.multi .ts-control > div {
	background: var(--tblr-bg-surface-secondary);
	border: 1px solid var(--tblr-border-color);
	color: var(--tblr-body-color);
}

.ts-wrapper.multi .ts-control > div.active {
	background: var(--tblr-primary);
	border: 1px solid var(--tblr-primary);
	color: var(--tblr-primary-fg);
}

.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active {
	background: var(--tblr-bg-surface-secondary);
	border: 1px solid var(--tblr-border-color);
	color: var(--tblr-gray-500);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove,
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
	border-left-color: var(--tblr-border-color);
}

.ts-wrapper.plugin-remove_button.rtl .item .remove,
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
	border-right-color: var(--tblr-border-color);
}