/* =====================================================================
   Module 75 — searchable dropdown: overflow escape + dark mode.

   Loaded AFTER searchable-select.css so these win. That file was written
   before dark mode existed and hardcodes #fff, #dfe3ec, #263043 and
   friends — in dark mode the panel rendered as a white card with dark
   text on a dark page, which is one of the light patches DARKMODE.md
   lists. Everything below re-expresses those colours as theme tokens,
   which prefs.css already re-tunes for [data-theme="dark"].
   ===================================================================== */

/* ---- let the panel out of a scrolling table -------------------------
   select-fix.js switches the panel to position:fixed when it detects a
   clipping ancestor. These rules make sure nothing in the cascade fights
   it, and raise the panel above Bootstrap's sticky table headers
   (z-index 1020) and the app's own frozen columns. */
.ss-panel[data-ss-fixed="1"] {
    position: fixed !important;
    z-index: 1065 !important;   /* see the layer note in select-fix.js */
}

/* A table cell in edit mode must not clip the control itself. */
td .ss-wrap { position: relative; }
.table-responsive td, .rpt-autoscroll td { overflow: visible; }

/* The control sits in a narrow grid cell; stop the label from forcing
   the column wider than the table can afford. */
.ss-control {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 8rem;
}

/* ---- theme tokens ---------------------------------------------------- */
.ss-panel {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-3, 0 12px 30px rgba(16,29,58,.16));
}
.ss-search {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.ss-search::placeholder { color: var(--muted-2); }
.ss-search:focus { border-color: var(--accent, #9db4f0); }

.ss-item { color: var(--ink); }
.ss-item:hover,
.ss-item.ss-hover { background: var(--line-soft); }
.ss-item.ss-active { background: var(--line); font-weight: 600; }

.ss-empty { color: var(--muted); }
.ss-control.ss-placeholder { color: var(--muted-2); }

/* The native select stays hidden but reachable — keep the override here
   too in case searchable-select.css is ever loaded after this file. */
.ss-native {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

/* ---- an item added by UiSelect because it is no longer valid ---------
   Rendered as an ordinary option by ASP.NET, so it is styled by text
   rather than a class. Nothing to do here yet; noted so the next person
   knows the "(no longer assignable)" wording is deliberate and comes
   from UiSelect.cs, not from a data problem. */