/* ── Searchable <select> (shared) ─────────────────────────────────────────────────────────────────
   Pairs with wwwroot/js/searchable-select.js. Load it in an app that has adopted the component:

       <link rel="stylesheet" href="~/_content/Web.Shared/css/searchable-select.css" />

   Kept in its OWN file (not shared-ui.css) so adopting is opt-in and can't restyle an app that already
   ships these rules itself — OpsCore has them inline in app.css and must stay on its own copy.

   The native <select> is hidden but stays in the form (it still POSTs, and any code driving it through
   .value/.options keeps working). `.oc-ss-toggle` is a button carrying .form-control, so inside a
   .form-floating it picks up the very same height/padding the select had and the label still floats over
   it. The menu is position:fixed (placed by JS) so an editor dialog's overflow ancestors can't clip it.

   Colours fall back to Bootstrap's own custom properties, so this works in a host that doesn't define
   the --em-* design tokens. */
select.oc-ss-native { display: none !important; }
.oc-ss-toggle { display: flex; align-items: center; text-align: left; cursor: pointer; }
.oc-ss-toggle:disabled { cursor: default; }
.oc-ss-toggle .oc-ss-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-ss-toggle .oc-ss-caret { flex: 0 0 auto; margin-left: .5rem; font-size: .7rem; opacity: .55; }
.oc-ss-menu {
    display: none; flex-direction: column;
    position: fixed; z-index: 2000;
    overflow: hidden;                 /* the list scrolls; the search box stays pinned */
    background: var(--em-surface, var(--bs-body-bg));
    border: 1px solid var(--em-border, var(--bs-border-color));
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.oc-ss-menu.show { display: flex; }
.oc-ss-menu .oc-ss-search-wrap { padding: .4rem; border-bottom: 1px solid var(--em-border, var(--bs-border-color)); flex: 0 0 auto; }
.oc-ss-menu .oc-ss-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.oc-ss-menu .oc-ss-option { padding: 7px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-ss-menu .oc-ss-option:hover,
.oc-ss-menu .oc-ss-option.active { background: var(--em-accent-subtle, rgba(0,0,0,.06)); }
.oc-ss-menu .oc-ss-option.selected { font-weight: 600; }
.oc-ss-menu .oc-ss-empty { padding: 10px; color: var(--em-text-secondary, var(--bs-secondary-color)); font-size: .85rem; }