/* ============================================
   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;
    cursor: pointer !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;
}

/* Selected-item chips: PINNED brand gradient (same as frosted Apply/Add
   buttons), never the org theme primary — light theme primaries made the
   white chip text unreadable (white on light blue). One consistent class
   of chip everywhere. */
.ts-wrapper.multi .ts-control > div,
div.ts-wrapper.multi .ts-control > div {
    background-image: linear-gradient(135deg, #2674a6, #112a54) !important;
    background-color: #2674a6 !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-image: none !important;
    background-color: #112a54 !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;
    cursor: pointer !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;
}

/* ===========================================
   MODERN DROPDOWN PANEL (all TomSelect instances)
   Frosted, rounded, Lexend — matches the
   customer-listing-redesign mockup language.
   =========================================== */
.ts-dropdown {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 14px 34px rgba(17, 42, 84, 0.18), 0 3px 8px rgba(17, 42, 84, 0.08) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}

.ts-dropdown .option {
    font-size: 0.85rem;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: #12233b;
}

.ts-dropdown .option.active {
    background: rgba(38, 116, 166, 0.12) !important;
    color: #12233b !important;
}

.ts-dropdown .option.selected {
    font-weight: 600;
}

.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 8px 12px;
    color: #64748b;
    font-size: 0.82rem;
}

/* ===========================================
   FROSTED FILTER CHIPS (e/customers listing)
   TomSelect control sits borderless inside the
   .fcol chip; extra depth beats the page's
   generic .filter-section-modern .ts-control rule.
   =========================================== */
/* width scales with the longest option label (--opt-ch set per chip in the markup) */
.frosted-listing .filter-section-modern .fcol .ts-wrapper {
    min-width: calc(var(--opt-ch, 12) * 0.62em + 44px);
}

.frosted-listing .filter-section-modern .fcol .ts-control {
    /* background-color only — the `background` shorthand wipes the caret
       background-image (form-fields.md gotcha) */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 9px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 26px 0 7px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #12233b !important;
}

.frosted-listing .filter-section-modern .fcol .ts-control input {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #12233b !important;
}

/* Chip control stays borderless in every TomSelect state (chosen value, focus, open) */
.frosted-listing .filter-section-modern .fcol .ts-wrapper.form-select,
.frosted-listing .filter-section-modern .fcol .ts-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.frosted-listing .filter-section-modern .fcol .ts-wrapper .ts-control,
.frosted-listing .filter-section-modern .fcol .ts-wrapper.single.has-items .ts-control,
.frosted-listing .filter-section-modern .fcol .ts-wrapper.focus .ts-control,
.frosted-listing .filter-section-modern .fcol .ts-wrapper.dropdown-active .ts-control {
    /* background-color only — the caret arrives via background-image on .ts-control */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* An OPEN autocomplete must paint above the rows/panels after it — frosted
   surfaces (backdrop-filter) create stacking contexts that otherwise cover
   the dropdown (e.g. High School Location in the customer edit modal). */
.modal .ts-wrapper.dropdown-active,
.frosted-listing .ts-wrapper.dropdown-active {
    z-index: 1091 !important;
}

/* ===========================================
   DROPDOWN GEOMETRY — HARD RESET
   app.css carries a legacy global rule (`.ts-dropdown, .ts-dropdown-content
   { position: relative !important; z-index: 9999 }`) that takes the list out
   of absolute positioning: in modal panels it then flows into the layout
   (instantly growing the .eo-content scroller) and gets squashed to a sliver.
   It ALSO overrides TomSelect's INLINE positioning of body-attached dropdowns
   (CSS !important beats inline styles), which is why dropdownParent:'body'
   looked like "nothing shows up".
   Two cases, both restored to vendor behavior:
   1) in-field dropdowns (inside .ts-wrapper) — anchored under the control;
   2) body-attached dropdowns (modal fields, attached via the app.js
      pre-connect hook) — TomSelect positions them inline; we only restore
      position:absolute and stack them above the modal. NO top/left/width
      overrides here or the inline coords get clobbered.
   =========================================== */
.ts-wrapper {
    position: relative !important;
}
/* case 1: dropdown rendered inside its field wrapper */
.ts-wrapper .ts-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}
/* case 2: dropdown attached to <body> (modal fields) — inline styles rule */
body > .ts-dropdown {
    position: absolute !important;
    height: auto !important;
    max-height: none !important;
    z-index: 100000 !important;
}
.ts-dropdown .ts-dropdown-content,
.ts-dropdown-content {
    position: static !important;
    z-index: auto !important;
    max-height: 220px;
    overflow-y: auto;
}

/* ===========================================
   VENDOR TRANSPARENCY KILL
   tom-select.bootstrap5.css (loaded via importmap, order not guaranteed)
   ships `.ts-wrapper.form-select:not(.disabled) .ts-control
   { background: transparent !important }` — (0,4,0) + a SHORTHAND, so it
   beat our white background-color AND wiped the caret background-image.
   Result: glass-tinted, arrow-less selects in frosted modals (e.g. Primary
   Training Location on customer edit). These selectors are (0,5,0)+ so they
   win regardless of load order.
   =========================================== */
.ts-wrapper.form-select:not(.disabled).single .ts-control,
.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control,
.ts-wrapper.form-control:not(.disabled).single .ts-control,
.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control {
    background-color: #fff !important;
    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;
}

/* multi-selects: white too, but never a caret */
.ts-wrapper.form-select:not(.disabled).multi .ts-control,
.ts-wrapper.form-control:not(.disabled).multi .ts-control {
    background-color: #fff !important;
    background-image: none !important;
}

/* frosted listing filter chips: transparent inside the white chip (never a
   solid fill), but they DO show the standard chevron — every select carries
   the arrow (form-fields.md; e.g. Status/Role on e/employees were bare).
   Same glyph/tint as the chip's plain selects, tucked to right 8px. Must
   outrank the white/caret rules above. */
.frosted-listing .filter-section-modern .fcol .ts-wrapper.single .ts-control,
.frosted-listing .filter-section-modern .fcol .ts-wrapper.form-select:not(.disabled).single .ts-control,
.frosted-listing .filter-section-modern .fcol .ts-wrapper.form-select:not(.disabled).single.input-active .ts-control {
    background-color: transparent !important;
    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 8px center !important;
    background-size: 12px 12px !important;
}

/* Filter toolbars OUTSIDE the chips (report pages keep their .col +
   .form-floating markup — e.g. e/reports/unsubmitted-attendance "Course"):
   there the frosted CSS styles the ts-WRAPPER div as the glass field, so the
   inner control must stay transparent — the white fill above nested a second
   white pill inside the glass box (double border/caret soup). Keep the
   standard chevron, tucked inside the wrapper's padding. */
.filter-section-modern .ts-wrapper.form-control:not(.disabled).single .ts-control,
.filter-section-modern .ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,
.filter-section-modern .ts-wrapper.form-select:not(.disabled).single .ts-control,
.filter-section-modern .ts-wrapper.form-select:not(.disabled).single.input-active .ts-control {
    background-color: transparent !important;
    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;
    border: none !important;
    box-shadow: none !important;
}
/* multi-select chips stay caret-less (chips-in-field UI, nothing to drop) */
.frosted-listing .filter-section-modern .fcol .ts-wrapper.multi .ts-control {
    background-image: none !important;
}