/* ─── Select2, restyled to AdmitShark ──────────────────────────────────────── A theme layer over public/assets/plugins/select2-4.0.3/css/select2.min.css (already in the repo for the LMS admin). Select2's stock skin is grey and square and looks nothing like the rest of the site, so everything below re-points it at the same tokens .as-filter already uses: --as-border for edges, --as-accent for focus, --as-primary for the selected row. Scoped to .as-select2 (set via containerCssClass/dropdownCssClass in as-select2.js) so nothing here can leak into the LMS admin's own Select2 instances, which keep the stock skin. Note the dropdown is appended to , not inside the container — hence the two separate scopes below. */ /* ── The closed control ── */ .select2-container--default .select2-selection--single.as-select2 { height:auto; padding:9px 12px; border:1px solid var(--as-border); border-radius:8px; background:#fff; transition:border-color .15s; } .select2-container--default .select2-selection--single.as-select2:hover { border-color:#cbd5e1; } .select2-container--default .select2-selection--single.as-select2 .select2-selection__rendered { padding:0; line-height:1.35; font-size:.88rem; color:var(--as-text); } /* The "All countries" / "All fields" placeholder rows read as a value in the stock skin; muted so a real selection is visibly different from none. */ .select2-container--default .select2-selection--single.as-select2 .select2-selection__placeholder { color:var(--as-muted); } .select2-container--default .select2-selection--single.as-select2 .select2-selection__arrow { height:100%; top:0; right:8px; } .select2-container--default .select2-selection--single.as-select2 .select2-selection__arrow b { border-color:var(--as-muted) transparent transparent transparent; } /* Open or keyboard-focused — matches the orange focus the wizard inputs use. */ .select2-container--default.select2-container--open .select2-selection--single.as-select2, .select2-container--default.select2-container--focus .select2-selection--single.as-select2 { border-color:var(--as-accent); } .select2-container--default.select2-container--open .select2-selection--single.as-select2 .select2-selection__arrow b { border-color:transparent transparent var(--as-accent) transparent; } /* A cleared selection gets an × — keep it from crowding the arrow. */ .select2-container--default .select2-selection--single.as-select2 .select2-selection__clear { margin-right:18px; color:var(--as-muted); font-weight:700; } /* ── The dropdown panel ── Same card treatment as the eligibility page's program-search results, so the two searchable dropdowns on the site look like one component. */ .select2-dropdown.as-select2 { border:1px solid var(--as-border); border-radius:12px; box-shadow:0 12px 32px rgba(16,40,74,.14); overflow:hidden; } .select2-container--default .select2-dropdown.as-select2 .select2-search--dropdown { padding:10px; border-bottom:1px solid var(--as-border); } .select2-container--default .select2-dropdown.as-select2 .select2-search--dropdown .select2-search__field { border:1.5px solid var(--as-border); border-radius:8px; padding:8px 10px; font-size:.86rem; outline:0; color:var(--as-text); } .select2-container--default .select2-dropdown.as-select2 .select2-search--dropdown .select2-search__field:focus { border-color:var(--as-accent); } .select2-container--default .select2-dropdown.as-select2 .select2-results > .select2-results__options { max-height:280px; padding:6px; } .select2-container--default .select2-dropdown.as-select2 .select2-results__option { padding:9px 12px; border-radius:8px; font-size:.86rem; color:var(--as-text); } .select2-container--default .select2-dropdown.as-select2 .select2-results__option--highlighted[aria-selected] { background:var(--as-soft); color:var(--as-text); } .select2-container--default .select2-dropdown.as-select2 .select2-results__option[aria-selected=true] { background:var(--as-primary); color:#fff; font-weight:700; } /* Highlight must still win when the cursor is over the already-selected row, otherwise navigating with the keyboard appears to do nothing on that row. */ .select2-container--default .select2-dropdown.as-select2 .select2-results__option--highlighted[aria-selected=true] { background:#1B3E6F; color:#fff; } .select2-container--default .select2-dropdown.as-select2 .select2-results__message { padding:12px; font-size:.84rem; color:var(--as-muted); } /* ── Sidebar fit ── .as-filter is position:sticky; Select2 appends its dropdown to , so it escapes the sticky context correctly on its own — but the container itself must fill the group like the native control it replaces. */ .as-filter .select2-container { width:100% !important; }