/* Theme-aware form styles using CSS variables */

/* ============================================
   Global Form Field Typography
   Uses --bit-form-field-font-family from org theme settings.
   Falls back to 'inherit' (uses the global font) when not set.
   ============================================ */
.form-control,
.form-select,
.form-check-label,
.form-label,
.form-text,
.form-floating > label,
.input-group-text,
textarea,
input,
select,
.ts-wrapper,
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.ts-dropdown,
.ts-dropdown .option {
    font-family: var(--bit-form-field-font-family, inherit) !important;
}

/* ============================================
   Form Controls - Base Styles
   ============================================ */

/* Basic form controls - neutral styling (not theme-colored) */

.form-control,
.modal .form-control,
.bit-modal .form-control,
.modal-content .form-control {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #212529 !important;
    background-color: #fff !important;
}

/* Height rules for non-textarea form controls */
.form-control:not(textarea),
.modal .form-control:not(textarea),
.bit-modal .form-control:not(textarea),
.modal-content .form-control:not(textarea) {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Student search inputs in modals - use fixed height so input matches the input-group icon */
.student-search-wrapper .input-group .form-control {
    height: 38px !important;
    min-height: 38px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.student-search-wrapper .input-group .input-group-text {
    height: 38px !important;
    min-height: 38px !important;
}

/*.form-select,*/
/*.modal .form-select,*/
/*.bit-modal .form-select,*/
/*#appointment-modal .form-select,*/
/*#cart-register-modal .form-select,*/
/*.modal-content .form-select {*/
/*    border: 1px solid #dee2e6 !important;*/
/*    border-radius: 0.375rem !important;*/
/*    font-size: var(--bit-form-field-font-size, 14px) !important;*/
/*    color: #212529 !important;*/
/*    background-color: #fff !important;*/
/*    min-height: var(--bit-form-field-height, 38px) !important;*/
/*}*/

/* Form-floating padding and height - must be taller to fit floating label */
.form-floating > .form-control,
.modal .form-floating > .form-control
{
    padding: 1.625rem 0.75rem 0.625rem 0.75rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Height rules for non-textarea form-floating controls */
.form-floating > .form-control:not(textarea),
.modal .form-floating > .form-control:not(textarea)
{
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

/* Exclude TomSelect-processed selects (.tomselected) - they're styled in tomselect-overrides.css */
.form-floating > select.form-select:not(.tomselected),
.modal .form-floating > select.form-select:not(.tomselected)
{
    padding: 1.25rem 2.25rem 0.375rem 0.75rem !important;
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* ============================================
   Selects — the standard chevron, guaranteed everywhere
   (docs/patterns/form-fields.md — replicates the e/employees Status filter)

   App CSS kept knocking bootstrap's caret out on individual selects
   (background shorthand resets, appearance resets), so every plain select
   ships OUR caret from here. This file loads BEFORE the context skins
   (frosted-listing chips, frosted-modal, sectioned eo modals), and those
   selectors are more specific — so their re-positioning/tinting of the same
   glyph still wins. TomSelect fields excluded (tomselect-overrides.css owns
   them, and it must stay the last import in app.js).
   ============================================ */
select.form-select:not(.tomselected),
select.form-control:not(.tomselected) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%2341597a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    padding-right: 34px !important;
}

/* Filter section form controls */
.filter-section-modern .form-control,
.filter-section-modern .form-select,
.filter-content .form-control,
.filter-content .form-select {
    font-size: var(--bit-form-field-font-size, 14px) !important;
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Filter section form-floating wrapper - override Bootstrap's default min-height */
.filter-section-modern .form-floating,
.filter-content .form-floating {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.filter-section-modern .form-floating > .form-control,
.filter-section-modern .form-floating > .form-select,
.filter-content .form-floating > .form-control,
.filter-content .form-floating > .form-select {
    height: 100% !important;
    min-height: 100% !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section floating labels */
.filter-section-modern .form-floating > label,
.filter-content .form-floating > label {
    font-size: var(--bit-form-field-font-size, 14px) !important;
    padding: 0.75rem !important;
}

/* Filter section TomSelect wrapper */
.filter-section-modern .form-floating > .ts-wrapper,
.filter-section-modern .form-floating > .ts-wrapper.single,
.filter-content .form-floating > .ts-wrapper,
.filter-content .form-floating > .ts-wrapper.single {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Filter section TomSelect control - with border and dropdown arrow */
.filter-section-modern .form-floating > .ts-wrapper .ts-control,
.filter-section-modern .form-floating > .ts-wrapper.single .ts-control,
.filter-content .form-floating > .ts-wrapper .ts-control,
.filter-content .form-floating > .ts-wrapper.single .ts-control {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    /* DOWN CARET / DROPDOWN ARROW */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding: 1.625rem 2.25rem 0.625rem 0.75rem !important;
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section TomSelect floating label */
.filter-section-modern .form-floating > .ts-wrapper ~ label,
.filter-content .form-floating > .ts-wrapper ~ label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: var(--bit-secondary, #6c757d);
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section TomSelect float label when has value */
.filter-section-modern .form-floating > .ts-wrapper.has-items ~ label,
.filter-section-modern .form-floating > .ts-wrapper .ts-control.focus ~ label,
.filter-content .form-floating > .ts-wrapper.has-items ~ label,
.filter-content .form-floating > .ts-wrapper .ts-control.focus ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    opacity: 0.65;
}

/* Global floating label styling for modals - apply theme font size */
.modal .form-floating > label,
.bit-modal .form-floating > label,
.modal-content .form-floating > label {
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Override Bootstrap's theme-colored borders */
.form-control:not(:focus),
.form-select:not(:focus),
.modal .form-control:not(:focus),
.modal .form-select:not(:focus) {
    border-color: #dee2e6 !important;
}

.form-control:focus,
.form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.bit-modal .form-control:focus,
.bit-modal .form-select:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: 0 !important;
}

/* Invalid state */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid state */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754 !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

/* ============================================
   Compact Floating Labels
   ============================================ */

.compact-floating .form-floating {
    position: relative;
    min-height: var(--bit-form-field-height, 38px) !important;
    margin-bottom: 0.75rem;
}

.compact-floating .form-floating > .form-control {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    padding: 0.5rem 0.75rem !important;
    padding-top: 1.375rem !important;
    padding-bottom: 0.25rem !important;
    font-size: var(--bit-form-field-font-size, 14px);
    line-height: 1.25;
    border-radius: 0.375rem;
}

.compact-floating .form-floating > .form-select {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    padding: 0.5rem 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.375rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    line-height: 1.5 !important;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.compact-floating .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--bit-form-field-height, 38px) !important;
    padding: 0.75rem 0.75rem !important;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: all .1s ease-in-out;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #6c757d;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 1.5rem);
}

/* Adjust label height for select boxes */
.compact-floating .form-floating > .form-select ~ label {
    height: calc(var(--bit-form-field-height, 38px) + 4px) !important;
    line-height: 1.6 !important;
}

/* Floated state for all select labels and filled inputs */
.compact-floating .form-floating > .form-control:focus ~ label,
.compact-floating .form-floating > .form-control:not(:placeholder-shown) ~ label,
.compact-floating .form-floating > .form-select ~ label {
    opacity: .85;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    padding: 0 0.25rem !important;
    background-color: white;
    font-size: 1rem !important;
    color: #495057;
    height: auto !important;
    line-height: 1 !important;
}

.compact-floating .form-floating > .form-control:focus,
.compact-floating .form-floating > .form-control:not(:placeholder-shown),
.compact-floating .form-floating > .form-select {
    padding-top: 1.375rem !important;
    padding-bottom: 0.25rem !important;
}

/* Special padding for select to account for arrow */
.compact-floating .form-floating > .form-select {
    padding-top: 0.5rem !important;
    padding-bottom: 0.375rem !important;
}

.compact-floating .form-floating > textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* ============================================
   Checkboxes and Radio Buttons
   ============================================ */

/* Moved to components/_bit-check.css — the global checkbox/radio control.
   These rules filled the box with a raw var(--bit-primary), which turned
   invisible against Bootstrap's hardcoded white checkmark whenever an org
   themed Primary to a light color. Do not re-add them here: a second themed
   source of truth is what made that bug hard to find. */

/* ============================================
   Switch Toggles
   ============================================ */

/* Default switch uses primary color */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d6efd'/%3e%3c/svg%3e");
}

/* Green Toggle Switch (Success State) */
.toggle-green:checked {
    background-color: var(--bit-success, #48bb78) !important;
    border-color: var(--bit-success, #48bb78) !important;
}

.toggle-green:focus {
    border-color: var(--bit-success, #48bb78) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-success, #48bb78) 25%, transparent) !important;
}

/* Red Toggle Switch (Danger State) */
.toggle-red:checked {
    background-color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
}

.toggle-red:focus {
    border-color: var(--bit-danger, #dc3545) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-danger, #dc3545) 25%, transparent) !important;
}

/* ============================================
   Form Labels and Help Text
   ============================================ */

.form-label {
    font-weight: 500;
    color: var(--bit-dark, #212529);
    margin-bottom: 0.5rem;
}

/* Smaller labels for listing page filters */
.filter-section-modern .form-label,
.filter-content .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0.5rem;
    color: #495057;
}

.form-text {
    color: var(--bit-secondary, #6c757d);
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

/* ============================================
   Input Groups
   ============================================ */

.input-group-text {
    background-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 10%, white) !important;
    border-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white) !important;
    color: var(--bit-secondary, #6c757d) !important;
}

/* Primary variant input group */
.input-group.input-group-primary .input-group-text {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    color: white !important;
}

/* ============================================
   Range Inputs
   ============================================ */

.form-range {
    --bs-form-range-track-bg: color-mix(in srgb, var(--bit-secondary, #6c757d) 25%, white);
    --bs-form-range-thumb-bg: var(--bit-primary, #0d6efd);
    --bs-form-range-thumb-active-bg: color-mix(in srgb, var(--bit-primary, #0d6efd) 75%, white);
}

.form-range:focus {
    --bs-form-range-thumb-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-primary, #0d6efd) 25%, transparent);
}

/* ============================================
   File Inputs
   ============================================ */

.form-control[type="file"] {
    cursor: pointer;
}

.form-control[type="file"]:hover {
    background-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 5%, white) !important;
}

.form-control[type="file"]::file-selector-button {
    background-color: var(--bit-secondary, #6c757d) !important;
    color: white !important;
    border: none;
    padding: 0.375rem 0.75rem;
    margin-right: 0.5rem;
}

.form-control[type="file"]::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 85%, black) !important;
}

/* ============================================
   Disabled States
   ============================================ */

.form-control:disabled,
.form-select:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
}

.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Required Field Indicator (red asterisk)
   ============================================ */

.form-floating > .form-control:required,
.form-floating > .form-select:required {
    background-color: rgba(220, 53, 69, 0.075) !important;
}

.form-floating > .form-control:required ~ label::after,
.form-floating > .form-select:required ~ label::after {
    content: " *";
    color: var(--bit-danger, #dc3545);
    font-weight: 700;
}

/* Bootstrap paints a white pill (background: var(--bs-body-bg)) behind every
   FLOATED label's ::after as a border mask — on frosted/tinted inputs it reads
   as a stray white chip behind the label text (see Home Address screenshot).
   Kill the fill everywhere; on plain white forms it was invisible anyway, and
   the required "*" above still renders (it's content, not background). */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

/* ============================================
   Validation Feedback
   ============================================ */

.invalid-feedback {
    color: var(--bit-danger, #dc3545) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

.valid-feedback {
    color: var(--bit-success, #198754) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

/* ============================================
   Form Sections and Fieldsets
   ============================================ */

fieldset {
    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 20%, white);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bit-primary, #0d6efd);
    padding: 0 0.5rem;
    width: auto;
    margin-bottom: 0;
}

/* ============================================
   Custom Select Dropdown Styling
   ============================================ */

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* ============================================
   Textarea Auto-resize
   ============================================ */

/* Textareas use natural height based on rows attribute. No !important on
   height — it would override the inline height the browser sets when the
   user drag-resizes the textarea (the height rules above already exclude
   textareas via :not(textarea)). */
textarea.form-control {
    height: auto;
    resize: vertical;
}

/* ============================================
   Search Input Styling
   ============================================ */

input[type="search"].form-control {
    -webkit-appearance: textfield;
}

input[type="search"].form-control::-webkit-search-decoration,
input[type="search"].form-control::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================
   Color Input Styling
   ============================================ */

input[type="color"].form-control {
    max-width: 3rem;
    padding: 5px !important;
}

input[type="color"].form-control::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"].form-control::-webkit-color-swatch {
    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white);
    border-radius: 0.25rem;
}

/* ============================================
   TomSelect Autocomplete Fields - Global Styling
   Unified styling for ALL TomSelect fields to match native form-select
   These rules MUST override TomSelect's default styles
   ============================================ */

/* Base TomSelect control styling - applies to ALL TomSelect fields GLOBALLY */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control,
div.ts-wrapper .ts-control,
div.ts-wrapper.single .ts-control {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    /* DOWN CARET / DROPDOWN ARROW */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    display: flex !important;
    align-items: center !important;
}

/* TomSelect wrapper - reset any conflicting styles */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
div.ts-wrapper {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Form-floating TomSelect wrapper - GLOBAL */
.form-floating > .ts-wrapper,
.form-floating > .ts-wrapper.single,
.form-floating > .ts-wrapper.multi,
.form-floating > div.ts-wrapper {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Form-floating TomSelect control - GLOBAL for all contexts */
.form-floating > .ts-wrapper .ts-control,
.form-floating > .ts-wrapper.single .ts-control,
.form-floating > .ts-wrapper.multi .ts-control,
.form-floating > div.ts-wrapper .ts-control {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    /* DOWN CARET / DROPDOWN ARROW */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    /* Padding matching form-select in form-floating */
    padding: 1.625rem 2.25rem 0.625rem 0.75rem !important;
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    display: flex !important;
    align-items: center !important;
}

/* Non form-floating TomSelect (regular layout) */
div:not(.form-floating) > .ts-wrapper .ts-control,
div:not(.form-floating) > .ts-wrapper.single .ts-control {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
}

/* Multi-select TomSelect - allow height to grow for tags */
.ts-wrapper.multi .ts-control,
div:not(.form-floating) > .ts-wrapper.multi .ts-control {
    height: auto !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    flex-wrap: wrap !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
}

/* Multi-select items/tags styling */
.ts-wrapper.multi .ts-control .item {
    background-color: var(--bit-primary, #0d6efd) !important;
    color: white !important;
    border-radius: 0.25rem !important;
    padding: 0.125rem 0.5rem !important;
    margin: 0.125rem 0.25rem 0.125rem 0 !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Input inside TomSelect control */
.ts-wrapper .ts-control input {
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Focus state */
.ts-wrapper .ts-control:focus,
.ts-wrapper .ts-control.focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Floating label positioning for TomSelect */
.form-floating > .ts-wrapper ~ label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: var(--bit-secondary, #6c757d);
}

/* Float label when has value or focused */
.form-floating > .ts-wrapper.has-items ~ label,
.form-floating > .ts-wrapper .ts-control.focus ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Dropdown styling */
/*.ts-dropdown {*/
/*    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white) !important;*/
/*    border-radius: 0.375rem !important;*/
/*    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;*/
/*}*/

/*.ts-dropdown .option {*/
/*    padding: 0.5rem 0.75rem !important;*/
/*    font-size: 0.95rem !important;*/
/*}*/

/*.ts-dropdown .option.active {*/
/*    background-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 10%, white) !important;*/
/*    color: var(--bit-dark, #212529) !important;*/
/*}*/

/*.ts-dropdown .option:hover,*/
/*.ts-dropdown .option.active:hover {*/
/*    background-color: var(--bit-primary, #0d6efd) !important;*/
/*    color: white !important;*/
/*}*/