/* ============================================================ Searchable combo (select2) — theme + form-floating fit Loaded globally so any .js-searchable combo looks consistent. Brand blue: #102a83 ============================================================ */ /* Container fills the field width */ .select2-container { width: 100% !important; } /* ---- Single-selection box: match .form-control look ---- */ .select2-container--default .select2-selection--single { height: calc(3.5rem + 2px); /* same as a form-floating control */ border: 1.5px solid #102a83; border-radius: 8px; background: #fff; display: flex; align-items: center; transition: border-color .25s ease, box-shadow .25s ease; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.3; color: #374151; padding-left: 0.75rem; padding-right: 2rem; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa0ac; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; } /* Focus / open state -> blue edge + glow (matches .form-control:focus) */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #102a83; box-shadow: 0 0 0 4px rgba(28,58,168,.16); outline: none; } /* ---- form-floating fit: size + keep the label floated up ---- */ .form-floating > .select2-container { height: calc(3.5rem + 2px); } .form-floating > .select2-container .select2-selection--single { padding-top: 1.05rem; /* room for the floating label */ } .form-floating > .select2-container .select2-selection--single .select2-selection__rendered { padding-top: 0; } /* Label must sit above the select2 box and stay in the floated position */ .form-floating > label { z-index: 3; } .form-floating:has(.select2-container) > label { opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem); } /* ---- Dropdown panel ---- */ .select2-container--default .select2-dropdown { border: 1px solid #e3e6f1; border-radius: 10px; box-shadow: 0 12px 28px rgba(16,42,131,.16); overflow: hidden; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #e3e6f1; border-radius: 8px; padding: 7px 10px; outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #102a83; box-shadow: 0 0 0 3px rgba(28,58,168,.15); } .select2-container--default .select2-results__option { padding: 9px 14px; font-size: 14px; } /* Highlighted / selected options -> brand blue */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #eef2fb; color: #102a83; } .select2-container--default .select2-results__option[aria-selected="true"] { background: #dfe7fb; color: #102a83; font-weight: 600; } /* select2 is very high z-index by default; ensure it clears modals/iframes */ .select2-container--open { z-index: 20000; } /* Inside a modal the dropdown is anchored to the modal instead of , so a Bootstrap focus trap cannot steal the search box. It then has to clear the modal's own stacking context. */ .modal .select2-container--open, .modal .select2-dropdown { z-index: 20001; }