/*
 * 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 1.7.1's tabler.css declares 1,374 --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 three 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);
}

/*
 * 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.
 *
 * The third is the highlighted option, the only thing in the skin that reads --bs-tertiary-bg:
 *
 *     .ts-dropdown .active { background-color: var(--bs-tertiary-bg) }
 *
 * So it is bridged here alone, where it is read. The plain rename, which the block above carried
 * until an audit found nothing else reads it, resolved it to --tblr-tertiary-bg, which Tabler
 * declares as a fixed zero-chroma gray that no [data-bs-theme-base] or [data-bs-theme-primary] block
 * redefines, so the highlight stayed the same gray under every theme. Tabler's own choice for this
 * state is --tblr-active-bg, a tint of the primary: tabler-vendors.css gives it to
 * `.ts-dropdown [data-selectable].active`, and .dropdown-item.active takes it through
 * --tblr-dropdown-link-active-bg. Re-pointing the property here rather than restating the rule keeps
 * the skin's own selector deciding, and scopes it to the dropdown, the only place it is read.
 */
.ts-dropdown {
	--bs-body-bg: var(--tblr-bg-surface);
	--bs-tertiary-bg: var(--tblr-active-bg);
	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);
}

/*
 * The focus ring, in Tabler's shape rather than the skin's.
 *
 * Tabler 1.6 draws focus as an outline - --tblr-focus-ring-width solid --tblr-focus-ring-color,
 * inset by a pixel on form controls - and the skin still draws Bootstrap's 0.25rem box-shadow halo
 * in Bootstrap's own hardcoded blue:
 *
 *     .focus .ts-control { border-color: rgb(134, 182.5, 254); outline: 0;
 *                          box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) }
 *
 * so beside a native .form-select a focused Tom Select was a different shape in a different color.
 * This copies .form-select:focus from tabler.css. Reading --tblr-focus-ring-color rather than
 * restating it means an application that re-tints focus on an ancestor re-tints this too.
 *
 * The border reads --tblr-control-focus-border-color, as Tabler's does since 1.7, and falls back to
 * the value Tabler declares for it. Tabler declares it on .form-control and .form-select, not on
 * :root, so on a wrapper carrying neither class, the one case where .ts-control draws a border, a
 * bare var() would leave it at its initial color. On a wrapper carrying one, the skin's
 * .ts-wrapper.form-select .ts-control { border: none !important } leaves the border to the wrapper,
 * which is never :focus and keeps its resting color. Neither shows while the ring is drawn: Tabler's
 * 2px ring is opaque and covers a 1px border, a native control's too.
 *
 * The validated states have a second reason. The skin 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. Bootstrap itself defines
 * --bs-form-invalid-color as #dc3545, so the declaration is invalid under plain Bootstrap too: an
 * upstream bug in tom-select 2.6.2, and an invalid box-shadow computes to none, so a select that has
 * failed validation showed 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. The rings below are Tabler's own
 * .form-control.is-invalid:focus and .is-valid:focus, and the box-shadow is cleared so the broken
 * declaration cannot come back to life under a theme that happens to define the variable as
 * channels.
 *
 * Selectors copied exactly from the skin so specificity matches and source order decides.
 */
.focus .ts-control {
	border-color: var(--tblr-control-focus-border-color, color-mix(in oklab, var(--tblr-white) 50%, var(--tblr-primary)));
	box-shadow: none;
	--tblr-focus-ring-offset: -1px;
	outline: var(--tblr-focus-ring, var(--tblr-focus-ring-width) solid var(--tblr-focus-ring-color));
	outline-offset: var(--tblr-focus-ring-offset);
}

.ts-wrapper.is-invalid.focus .ts-control,
.was-validated .invalid.focus .ts-control,
.was-validated :invalid + .ts-wrapper.focus .ts-control {
	box-shadow: none;
	outline: var(--tblr-focus-ring-width) solid light-dark(color-mix(in oklab, var(--tblr-danger) calc(var(--tblr-focus-ring-opacity) * 100%), var(--tblr-body-bg)), color-mix(in oklab, var(--tblr-danger) calc(var(--tblr-focus-ring-opacity-dark) * 100%), var(--tblr-body-bg)));
}

.ts-wrapper.is-valid.focus .ts-control,
.was-validated .valid.focus .ts-control,
.was-validated :valid + .ts-wrapper.focus .ts-control {
	box-shadow: none;
	outline: var(--tblr-focus-ring-width) solid light-dark(color-mix(in oklab, var(--tblr-success) calc(var(--tblr-focus-ring-opacity) * 100%), var(--tblr-body-bg)), color-mix(in oklab, var(--tblr-success) calc(var(--tblr-focus-ring-opacity-dark) * 100%), var(--tblr-body-bg)));
}

/*
 * The ring's corners, Tabler 1.7.1's own rule copied from the tabler-vendors.css this project does
 * not load. The ring is an outline on .ts-control, inset a pixel, and .ts-control sits inside the
 * wrapper's border with the wrapper's radius, so the outline curved wider than the border's inner
 * edge and a sliver of the gray border showed outside it at each corner, measured in Chrome 155 at
 * eight times zoom. Taking the border's width off the radius makes the two concentric. Not in an
 * input group, where the wrapper's corners differ by position, nor on a wrapper a .rounded-*
 * utility reshapes, whose radius is not the token. TomSelectCorrectionsTest holds the copy to
 * Tabler's and states.mjs the corners.
 */
.ts-wrapper.form-control:not(.input-group > *):not([class*=rounded]) .ts-control,
.ts-wrapper.form-select:not(.input-group > *):not([class*=rounded]) .ts-control {
	border-radius: max(0px, var(--tblr-control-border-radius) - var(--tblr-control-border-width)) !important;
}

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

/*
 * A validated searchable select, and the shadow and group headers a native one has: Tabler 1.7's own
 * rules, copied from the tabler-vendors.css this project does not load.
 *
 * The skin draws a validated select's caret and icon itself, Bootstrap's images in Bootstrap's
 * colors: a #343a40 caret, near-invisible on a dark field. Tabler's native validated rule,
 * .form-select.is-invalid:not([multiple]):not([size]), already matches the wrapper, a div that is
 * neither, and outranks the skin, so the wrapper takes Tabler's positions, sizes and validation icon;
 * only the images were the skin's. Tabler's rule restores them through the properties a native select
 * draws from, and reserves room for the icon in the control.
 *
 * The wrapper's input shadow, which the skin clears and a native select keeps, and the group headers
 * of a select with optgroups, which the skin paints a fixed #6c757d, 3.23 on a dark dropdown.
 * TomSelectCorrectionsTest holds each to Tabler's.
 */
.ts-wrapper .form-control,
.ts-wrapper .form-select,
.ts-wrapper.form-control,
.ts-wrapper.form-select {
	box-shadow: var(--tblr-shadow-input);
}

.ts-wrapper.is-invalid .ts-control,
.ts-wrapper.is-valid .ts-control {
	--ts-pr-clear-button: 1.5rem;
}

.ts-wrapper.form-select.is-invalid,
.ts-wrapper.form-select.is-invalid:not(.single),
.ts-wrapper.form-select.is-valid,
.ts-wrapper.form-select.is-valid:not(.single) {
	background-image: var(--tblr-form-select-bg-img), var(--tblr-form-select-bg-icon, none);
}

.ts-dropdown .optgroup-header {
	color: var(--tblr-body-color) !important;
	background: var(--tblr-bg-surface) !important;
}

/*
 * 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 draw
 * theirs from --tblr-control-padding-y|x and --tblr-control-line-height, 0.5625rem, 1rem and 1.25rem at
 * the default size. 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 box reads those properties rather than repeating their values. Tom Select copies the original's
 * classes onto its wrapper, so the wrapper is a .form-select, and .form-select-sm|lg or a sized input
 * group set the properties on it exactly as they do on a native select; .ts-control, one element in,
 * inherits them. So one rule sizes every searchable select the way Tabler sizes the select beside it,
 * at every size and inside a group, and follows tabler-form-corrections.css's phone line too. Tabler
 * declares the properties on .form-control and .form-select, never on :root, so each read falls back
 * to what .form-select would have set, for a wrapper carrying neither class.
 * TomSelectCorrectionsTest holds the names and the fallbacks to tabler.css.
 *
 * A multi-select holding chips is padded by the next rule instead, which outranks this one.
 */
.ts-control {
	--ts-pr-min: var(--tblr-control-padding-x, var(--tblr-btn-input-padding-x));
	padding-top: var(--tblr-control-padding-y, var(--tblr-btn-input-padding-y));
	padding-bottom: var(--tblr-control-padding-y, var(--tblr-btn-input-padding-y));
	padding-left: var(--tblr-control-padding-x, var(--tblr-btn-input-padding-x));
	line-height: var(--tblr-control-line-height, var(--tblr-btn-input-line-height));
}

/*
 * A multi-select holding chips, padded by Tabler 1.7's own rule, copied from the tabler-vendors.css this
 * project does not load.
 *
 * The skin pads a row of chips from Bootstrap's stock box, and the small size with an !important top
 * computed in em:
 *
 *     .ts-wrapper.multi.has-items .ts-control { padding: calc(0.375rem - 1px - 0px) 0.75rem
 *                                                        calc(0.375rem - 1px - 3px - 0px) }
 *
 * so a row of chips stood shorter than the controls beside it, 36 against 40 at the default size, 38
 * on a phone, and this file floored the small and large wrappers to hold them. Tabler 1.7 pads the row
 * from the properties the box above reads, less the two pixels a chip's border adds above and the
 * five its border and bottom margin add below, and outranks the skin by the field class. Measured in
 * Chrome 155 by sizes.mjs: a row of chips stands 32, 40 and 48, 36 for the small size on a phone, with
 * its chips centered, so the floor is gone. The skin's own floor, computed from Bootstrap's 1.5em line,
 * stood two pixels proud of Tabler 1.4's small control; under 1.7 it sits below every box Tabler draws.
 * TomSelectCorrectionsTest holds the copy to Tabler's.
 */
.ts-wrapper.form-control.multi.has-items .ts-control,
.ts-wrapper.form-select.multi.has-items .ts-control {
	padding-top: calc(var(--tblr-control-padding-y) - 2px) !important;
	padding-bottom: calc(var(--tblr-control-padding-y) - 5px);
}

/*
 * The sized variants' text, which the skin sets one element in and Tabler on the wrapper.
 *
 * The skin's sized rules give .ts-control Bootstrap's sized text, 0.875rem small and 1.25rem large,
 * where its own default is to inherit. Tabler gives the wrapper its sized text through .form-select-sm|lg
 * or the sized group, 0.75rem and 1rem, and on a phone its 16px, which is what stops iOS zooming on
 * focus. So the sized rules go back to inheriting, and the search input, which inherits from
 * .ts-control through the skin's `.ts-control input { font-size: inherit }`, takes Tabler's size with
 * them. Under the skin alone a small searchable select reads 14px beside 12px native controls. This
 * file used to restate Tabler's 0.75rem and 1rem here instead, and then needed a phone block of its
 * own to give the small size Tabler's 16px (#90); inheriting takes Tabler's phone rule as it stands.
 *
 * The first selector in each list is a select inside a sized input group, which carries no size class
 * of its own: FormField puts `input-group-sm|lg` on the group and nothing on its children. Selectors
 * copied exactly from the skin so specificity matches and source order decides.
 */
.input-group-sm > .ts-wrapper .ts-control,
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
	font-size: inherit;
}

.input-group-lg > .ts-wrapper .ts-control,
.ts-wrapper.form-select-lg .ts-control,
.ts-wrapper.form-control-lg .ts-control {
	font-size: inherit;
}

/*
 * And once a value is chosen. The skin restates its own small font-size one class more specific
 * than the rule above,
 *
 *     .ts-wrapper.form-select-sm.has-items .ts-control { font-size: 0.875rem }
 *
 * so a small searchable select read 12px while empty and 14px the moment it held anything, beside a
 * native small select at 12px. Measured on the samples app, alone and in an input group. The skin
 * writes no large counterpart, which `TomSelectCorrectionsTest` checks.
 */
.input-group-sm > .ts-wrapper.has-items .ts-control,
.ts-wrapper.form-select-sm.has-items .ts-control,
.ts-wrapper.form-control-sm.has-items .ts-control {
	font-size: inherit;
}

/*
 * A searchable select that opens an input group, Tabler 1.7.1's own rule copied from the
 * tabler-vendors.css this project does not load. Tom Select keeps the original <select> in place,
 * hidden by .ts-hidden-accessible, and puts the wrapper after it, so in a group whose addon is
 * appended the hidden select is the first child and the wrapper is not. Bootstrap's
 * `.input-group > :not(:first-child)` then takes the wrapper's start corners and pulls it a pixel
 * over the group's edge: measured in Chrome 155 under 1.7.0 and 1.7.1 alike, radii 0 on all four
 * corners at -1px, beside a native select's 6px start corners at 0. FormField's append(...) is
 * exactly that shape. TomSelectCorrectionsTest holds the copy to Tabler's and sizes.mjs the corners.
 */
.input-group > .ts-hidden-accessible:first-child + .ts-wrapper {
	margin-inline-start: 0 !important;
	border-start-start-radius: var(--tblr-control-border-radius, var(--tblr-border-radius)) !important;
	border-end-start-radius: var(--tblr-control-border-radius, var(--tblr-border-radius)) !important;
}

/*
 * The placeholder, which nothing styled at all.
 *
 * Tabler colors one with `.form-control::placeholder`, from --tblr-control-placeholder-color since
 * 1.7, 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, and the skin colors only its plugins' placeholders. So it
 * fell through to the browser default, measured under Tabler 1.5 at #757575 against
 * --tblr-tertiary's #9ca3af, and a searchable select's placeholder read darker than the plain input
 * beside it. It reads the property the wrapper's field class declares, as Tabler's own Tom Select
 * rule does, with the value Tabler declares for it as the fallback.
 */
.ts-control > input::placeholder {
	color: var(--tblr-control-placeholder-color, var(--tblr-tertiary));
	opacity: 1;
}

/*
 * A disabled searchable select, drawn as a disabled native one is.
 *
 * The skin paints the control inside the wrapper its secondary gray,
 *
 *     .disabled .ts-control { opacity: 1; background-color: var(--bs-secondary-bg) }
 *
 * which under Tabler is gray-200 in light where a disabled field is gray-50, covers the caret Tabler
 * draws on the wrapper, and leaves the text at full strength. Tabler 1.7's tabler-vendors.css gives the
 * wrapper the field's disabled fill and border and clears the control's, and those are copied here as
 * they are. The chosen value takes the text Tabler 1.7 gives a disabled field,
 * --tblr-control-disabled-color, which the wrapper's field class declares, with its value as the
 * fallback; chips keep the disabled text the chip rules below give them. The not-allowed cursor is
 * tabler-form-corrections.css's for a disabled field, for the reason given there: the wrapper is
 * never :disabled, so that rule does not reach it. The skin sets the cursor with !important on the
 * control and everything in it, so this does too, one class more specific. TomSelectCorrectionsTest
 * holds the copy to Tabler's and the cursor to the form sheet's.
 */
.ts-wrapper.disabled.form-control,
.ts-wrapper.disabled.form-select {
	background-color: var(--tblr-control-disabled-bg);
	border-color: var(--tblr-control-disabled-border-color);
}

.ts-wrapper.disabled.form-control .ts-control,
.ts-wrapper.disabled.form-select .ts-control {
	background-color: transparent;
}

.ts-wrapper.disabled .ts-control > .item {
	color: var(--tblr-control-disabled-color, var(--tblr-secondary));
}

.ts-wrapper.disabled,
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
	cursor: not-allowed !important;
}

/*
 * Clears Tabler's caret, drawn on the wrapper at the control's own padding from the right, by the
 * padding Tabler gives a select for it, with .form-select's own value for a wrapper that is not one.
 * Since 1.7.1 both follow --tblr-control-padding-x, so the caret and its room move with the size.
 * That property is declared on the field classes too, so the fallback reads it with the field's own
 * value as well: a bare <select> with Tom Select has neither class, and a var() with nothing to fall
 * back on would void the whole value, the skin's padding with it, and the caret and clear button
 * would sit on the text. Same selector the skin uses.
 */
.ts-wrapper.form-select,
.ts-wrapper.single {
	--ts-pr-caret: var(--tblr-control-select-indicator-padding, calc(var(--tblr-control-padding-x, var(--tblr-btn-input-padding-x)) * 2 + 16px));
}

/*
 * 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);
}