/* ============================================
   TomSelect Overrides
   ============================================

   This file MUST be loaded AFTER TomSelect's CSS to properly override styles.
   Import this file LAST in app.js after all other CSS imports.

   TomSelect renders autocomplete fields with this structure:

   <div class="ts-wrapper [single|multi] [form-control|form-select]">
     <div class="ts-control">
       <!-- Selected items and input go here -->
     </div>
     <div class="ts-dropdown">
       <!-- Dropdown options go here -->
     </div>
   </div>

   KEY ISSUES THIS FILE SOLVES:
   1. TomSelect's bootstrap5.css sets "border: none" on .ts-control when
      wrapper has .form-control class - we restore the border
   2. TomSelect's bootstrap5.css sets "background: transparent" - we restore white bg
   3. TomSelect's bootstrap5.css doesn't include dropdown caret - we add it
   4. Height/padding consistency with our form field sizing

   ============================================ */

/* ===========================================
   BASE .ts-control STYLING
   Applies to ALL TomSelect fields (single and multi)
   =========================================== */
.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 {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* ===========================================
   DROPDOWN CARET
   Using SVG background-image (matches Bootstrap form-select)
   =========================================== */
.ts-wrapper.single .ts-control::after {
    display: none !important;
    content: none !important;
}

/* Add dropdown caret via background-image (Bootstrap 5 style) */
.ts-wrapper.single .ts-control {
    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;
}

/* ===========================================
   FORM-FLOATING CONTEXT
   Extra height and padding for floating labels
   =========================================== */

/* Reset the form-floating container when it contains TomSelect */
.form-floating:has(.ts-wrapper) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.form-floating > .ts-wrapper,
.form-floating > .ts-wrapper.single,
.form-floating > .ts-wrapper.multi {
    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 > .ts-wrapper .ts-control,
.form-floating > .ts-wrapper.single .ts-control,
.form-floating > .ts-wrapper.multi .ts-control {
    height: 100% !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    padding: 1.625rem 2.25rem 0.625rem 0.75rem !important;
}

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

/* 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 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* ===========================================
   MULTI-SELECT SPECIFIC
   Styling for selected item "chips/tags"
   Using high-specificity selectors to override theme_forms.css
   =========================================== */
.ts-wrapper.multi .ts-control,
div.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.form-select .ts-control,
div.ts-wrapper.multi.form-select .ts-control,
div:not(.form-floating) > .ts-wrapper.multi .ts-control,
div:not(.form-floating) > div.ts-wrapper.multi .ts-control {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    background-image: none !important; /* No dropdown caret for multi-select */
    padding: 0.25rem 0.75rem 0.25rem 0.5rem !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

.ts-wrapper.multi .ts-control > div,
div.ts-wrapper.multi .ts-control > div {
    background-color: var(--bit-primary, #0d6efd) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.15rem 0.5rem !important;
    margin: 0.15rem 0.25rem 0.15rem 0 !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

.ts-wrapper.multi .ts-control > div.active,
div.ts-wrapper.multi .ts-control > div.active {
    background-color: var(--bit-primary-dark, #0b5ed7) !important;
}

/* Form-floating multi-select needs more flexible height */
.form-floating > .ts-wrapper.multi,
.form-floating > div.ts-wrapper.multi {
    height: auto !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.form-floating > .ts-wrapper.multi .ts-control,
.form-floating > div.ts-wrapper.multi .ts-control {
    height: auto !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    padding: 1.625rem 0.75rem 0.375rem 0.5rem !important;
}

/* ===========================================
   FOCUS STATE
   =========================================== */
.ts-wrapper .ts-control.focus,
.ts-wrapper.focus .ts-control,
.ts-wrapper.multi .ts-control.focus,
div.ts-wrapper.multi .ts-control.focus {
    border-color: var(--bit-primary, #0d6efd) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

/* ===========================================
   INPUT INSIDE .ts-control
   The actual text input element
   =========================================== */
.ts-wrapper .ts-control > input {
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: var(--bit-body-color, #212529) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.ts-wrapper .ts-control > input::placeholder {
    color: #6c757d !important;
    opacity: 0.65 !important;
}

/* ===========================================
   DROPDOWN MENU
   =========================================== */
.ts-dropdown {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    background-color: #fff !important;
    z-index: 1060 !important;
}

/* TomSelect dropdown inside modals needs higher z-index */
.modal .ts-dropdown,
.modal-dialog .ts-dropdown,
.modal-content .ts-dropdown,
.modal-body .ts-dropdown {
    z-index: 1090 !important;
}

/* Allow TomSelect dropdown to overflow card containers in modals */
.modal .card,
.modal .card-body,
.modal .bit-card,
.modal .bit-card-body,
.modal-body .card,
.modal-body .card-body,
.modal-body,
.modal-content,
.modal-dialog {
    overflow: visible !important;
}

/* Ensure TomSelect dropdown appears above everything in modals */
.modal .ts-wrapper .ts-dropdown,
.modal-content .ts-wrapper .ts-dropdown,
.modal-body .ts-wrapper .ts-dropdown {
    z-index: 99999 !important;
    position: absolute !important;
}

/* Make sure the wrapper allows overflow */
.modal .ts-wrapper,
.modal-content .ts-wrapper,
.modal-body .ts-wrapper {
    overflow: visible !important;
}

.ts-dropdown .option {
    padding: 0.5rem 0.75rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: var(--bit-body-color, #212529) !important;
}

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

.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: var(--bit-secondary, #6c757d) !important;
    background-color: #f8f9fa !important;
}

/* ===========================================
   DISABLED STATE
   =========================================== */
.ts-wrapper.disabled .ts-control {
    background-color: #e9ecef !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* ===========================================
   WRAPPER RESET
   Ensure wrapper doesn't interfere with control styling
   =========================================== */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-control,
.ts-wrapper.form-select,
div.ts-wrapper,
div.ts-wrapper.single,
div.ts-wrapper.multi,
div.ts-wrapper.form-select,
div.ts-wrapper.multi.form-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ===========================================
   HIDE ORIGINAL SELECT ELEMENT
   TomSelect adds .tomselected class to the original select
   The select may be inside or sibling to .ts-wrapper
   =========================================== */
select.tomselected,
.form-floating > select.tomselected,
.form-floating > select.form-select.tomselected,
.modal select.tomselected,
.modal .form-floating > select.tomselected {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    min-height: 0 !important;
}