/* ─────────────────────────────────────────────────────────────────────
   sc-ms-*  — searchable DOM single-select dropdown
   ─────────────────────────────────────────────────────────────────────
   Replaces native <select> popups so Teams window-share picks them up
   (native popups live on separate OS HWNDs and aren't captured).

   Two variants:
     • Default        — 40 px form-field (SampleCreate / SampleEdit /
                        LabCreate / report criteria screens).
     • .sc-ms--compact — 38 px filter-bar (Samples filter row).

   Modifiers on .sc-ms-box:
     • --err      red border + tinted fill when a form field is invalid.
     • --disabled dimmed + not-allowed cursor; the trigger element must
                  also drop its @onclick so the panel can't open.

   The dropdown panel hugs its longest option (max-content) rather than
   stretching to the trigger — long labels used to wrap to a second
   line before this fix.  min-width keeps the panel at least as wide
   as the trigger.                                           */

/* ── Ancestor stacking: elevate the row/section so a later sibling
   doesn't paint over the open panel. ── */
.form-section:has(.sc-ms--open),
.filter-card:has(.sc-ms--open),
.criteria-grid:has(.sc-ms--open) {
    position: relative;
    z-index: 10;
}

.sc-ms { position: relative; }

/* ── Trigger ── */
.sc-ms-box {
    min-height: 40px;
    width: 100%;
    padding: 8px 40px 8px 12px;
    background: var(--surface-input-bg);
    border: 1px solid var(--surface-card-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    font-family: var(--font-display);
    font-size: 13.5px;
    color: var(--text-ink);
    line-height: 1.2;
}
.sc-ms-box:hover { border-color: #b8c4d2; }
.sc-ms--open .sc-ms-box {
    background: #ffffff;
    border-color: var(--app-blue-mid);
    box-shadow: 0 0 0 3px rgba(10,109,168,0.12);
}
.sc-ms-box--err {
    border-color: #b91c1c;
    background: rgba(185, 28, 28, 0.04);
}
.sc-ms-box--err:hover { border-color: #b91c1c; }
.sc-ms-box--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sc-ms-box--disabled:hover { border-color: var(--surface-card-border); }

.sc-ms-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-ms-placeholder { color: #8aa4b8; }

.sc-ms-chevron {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--app-blue-mid);
    pointer-events: none;
    transition: transform 0.2s ease;
}

/* ── Backdrop + panel ── */
.sc-ms-backdrop { position: fixed; inset: 0; z-index: 199; }

.sc-ms-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* Hug the longest option without being narrower than the trigger or
       wider than the viewport. */
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 2rem);
    background: #ffffff;
    border: 1px solid var(--surface-card-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,45,74,0.18), 0 2px 6px rgba(15,45,74,0.08);
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-ms-search {
    width: 100%;
    padding: 9px 12px;
    margin: 2px 0 4px;
    background: var(--surface-input-bg);
    border: 1px solid var(--surface-card-border);
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-ink);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.sc-ms-search::placeholder { color: #8aa4b8; }
.sc-ms-search:focus {
    background: #ffffff;
    border-color: var(--app-blue-mid);
    box-shadow: 0 0 0 3px rgba(10,109,168,0.12);
}

.sc-ms-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-ms-opt {
    display: block;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-ink);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.sc-ms-opt:hover { background: var(--app-blue-soft); color: var(--app-blue); }
.sc-ms-opt--on {
    background: rgba(10,109,168,0.08);
    color: var(--app-blue);
    font-weight: 600;
}
.sc-ms-opt--on:hover { background: rgba(10,109,168,0.14); }

.sc-ms-empty {
    padding: 14px 10px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────
   Compact variant (.sc-ms--compact)
   38 px trigger, surface-soft background, slightly smaller type — for
   filter rows that sit alongside .filter-select / .filter-input.
   ────────────────────────────────────────────────────────────────── */
.sc-ms--compact .sc-ms-box {
    height: 38px;
    min-height: 0;
    padding: 0 32px 0 10px;
    background: var(--surface-soft);
    font-size: 13px;
}

.sc-ms--compact .sc-ms-placeholder { color: var(--text-muted); }

.sc-ms--compact .sc-ms-chevron {
    right: 9px;
    color: var(--text-muted);
}

.sc-ms--compact .sc-ms-search {
    padding: 8px 10px;
    background: var(--surface-soft);
    font-size: 12.5px;
}
.sc-ms--compact .sc-ms-search::placeholder { color: var(--text-muted); }

.sc-ms--compact .sc-ms-opt { font-size: 12.5px; }

.sc-ms--compact .sc-ms-empty {
    padding: 12px 10px;
    font-size: 12.5px;
}