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

/* .fcol-tight opt-in (see frosted-listing.css): pin the control to the chip's
   --opt-ch width so a long option label can't widen the toolbar into a second
   row, and ellipsise the selected value rather than clipping it mid-glyph. */
.frosted-listing .filter-section-modern .fcol-tight .ts-wrapper {
    max-width: calc(var(--opt-ch, 12) * 0.62em + 44px);
}
.frosted-listing .filter-section-modern .fcol-tight .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
}

/* ===========================================
   FILTER-CHIP DROPDOWN PANELS (listing toolbars)
   The chips are deliberately narrow (--opt-ch, capped per page), and the
   TomSelect panel inherits that width — so long Location / Package names
   wrapped onto two or three lines with acres of empty space beside them.
   The panel is absolutely positioned, so sizing it to its content can't
   push the toolbar around: let it grow past the chip and keep every option
   on one line.
   =========================================== */
.frosted-listing .filter-section-modern .fcol .ts-dropdown,
.frosted-listing .filter-section-modern .fcol-search .ts-dropdown {
    width: max-content !important;
    min-width: 100% !important;
    max-width: min(460px, 92vw) !important;
}
.frosted-listing .filter-section-modern .fcol .ts-dropdown .option,
.frosted-listing .filter-section-modern .fcol .ts-dropdown .optgroup-header,
.frosted-listing .filter-section-modern .fcol-search .ts-dropdown .option {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The collapsed chip value never wraps either — it ellipsises on one line
   (the panel above shows the full name). .fcol-tight already does this for
   its .item; this covers the control itself and any non-tight chip. */
.frosted-listing .filter-section-modern .fcol .ts-control {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.frosted-listing .filter-section-modern .fcol .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================
   SINGLE SELECT: ONE VALUE, ONE LINE
   A single select shows exactly one value, so it has no reason to wrap — and when it
   does, the control grows a second line and the row it sits in changes height. That
   started showing up once field names got longer ("Owner Program Completion Date
   (Mgr+)") in lists of narrow cards, but it was always latent: the base .ts-control
   rule sets flex-wrap:wrap for the MULTI select case, where wrapping chips onto more
   lines is the whole point, and single selects inherited it.
   Ellipsis instead: the value truncates, the full text stays in the open dropdown and
   in the control's title. Multi selects are untouched.
   =========================================== */
/* :not(.multi) rather than .single — a wrapper that is not a chip list is a
   single-value control however it was set up, and the rules below must not depend on
   TomSelect having tagged it. Every declaration is !important because the vendor
   stylesheet and the base block at the top of this file both use !important. */
.ts-wrapper:not(.multi) .ts-control,
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.ts-wrapper:not(.multi) .ts-control > .item,
.ts-wrapper.single .ts-control > .item {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    /* a flex child ignores its own text-overflow unless it is allowed to shrink */
    flex: 0 1 auto !important;
}
/* the typing input must not push the value wider than the control */
.ts-wrapper:not(.multi) .ts-control > input,
.ts-wrapper.single .ts-control > input {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

/* ===========================================
   DOCUMENT FORM: REGION CARDS
   The field cards in the document form modal put a type control, a REQ box and three
   icon buttons on one row of a narrow column, and they carry the longest names in the
   app now that every type leads with its role. Smaller type fits more of the name
   before the ellipsis and keeps a card one line tall. Scoped to that screen, and kept
   in THIS file rather than the template, because this file owns TomSelect styling —
   a copy in the template is what drifted out of step with the listing filters before.
   =========================================== */
#document-modal .regions-table-container .ts-wrapper .ts-control,
#document-modal .regions-table-container .ts-wrapper .ts-control > .item,
#document-modal .regions-table-container .ts-wrapper .ts-control > input {
    font-size: .72rem !important;
}
#document-modal .regions-table-container .ts-wrapper .ts-control {
    min-height: 30px !important;
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
    padding-left: .5rem !important;
}
/* The DROPDOWN is deliberately not shrunk with it: inside a modal this app re-parents
   autocomplete dropdowns to <body> (see the autocomplete:pre-connect handler in app.js),
   so it is no longer inside #document-modal and a scoped rule here would never match.
   It also does not need to be small — it opens over the whole modal, where the full
   field name is exactly what you want to read. */