/* ============================================================
   Searchable selects — styled against the shared design tokens
   (--surface-inset, --line-2, --accent, …) defined by each page.
   Fallbacks keep the component usable on pages that predate them.
   ============================================================ */

.searchable-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.select-search-input {
    width: 100%;
    min-width: 0;
    height: var(--ctl-h, 34px);
    padding: 0 26px 0 10px;
    font-family: var(--font, inherit);
    font-size: var(--fs-base, 13.5px);
    color: var(--text, #1a1917);
    background: var(--surface-inset, #fbfaf8);
    border: 1px solid var(--line-2, #ddd8cc);
    border-radius: var(--r-md, 9px);
    outline: none;
    box-sizing: border-box;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--dur, 160ms) var(--ease, ease),
                box-shadow var(--dur, 160ms) var(--ease, ease),
                background var(--dur, 160ms) var(--ease, ease);
}

.searchable-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 11px;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.4px solid var(--text-muted, #8b877e);
    border-bottom: 1.4px solid var(--text-muted, #8b877e);
    pointer-events: none;
    transform: rotate(45deg);
    transition: transform var(--dur, 160ms) var(--ease, ease);
}

.select-search-input::-webkit-search-cancel-button { display: none; }
.select-search-input::placeholder { color: var(--text-muted, #8b877e); opacity: 1; }
.select-search-input:hover:not(:disabled):not(:focus) { border-color: var(--line-strong, #c6bfae); }
.select-search-input:focus {
    background: var(--surface, #fff);
    border-color: var(--accent, #96762c);
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(150, 118, 44, 0.16));
}
.select-search-input:disabled {
    background: var(--surface-3, #f1efe9);
    color: var(--text-muted, #8b877e);
    cursor: not-allowed;
}

/* Compact inside data tables */
table .select-search-input {
    height: var(--ctl-h-sm, 28px);
    font-size: var(--fs-sm, 12.5px);
    border-radius: var(--r-sm, 6px);
    text-align: left;
}
table .searchable-select { min-width: 150px; }

.searchable-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Results panel ---------------------------------------------------
   Positioned by script (fixed, anchored to the field) so it floats above
   scrolling table containers instead of being clipped by them. */
.select-search-results {
    position: fixed;
    z-index: 9800;
    max-height: min(300px, 45vh);
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--line-2, #ddd8cc);
    border-radius: var(--r-md, 9px);
    background: var(--bg-elevated, #fff);
    box-shadow: var(--shadow-lg, 0 16px 40px -12px rgba(26, 25, 23, 0.22));
    animation: ssResultsIn 130ms var(--ease, ease);
}

@keyframes ssResultsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.select-search-results[hidden] { display: none; }

.select-search-results button {
    display: block;
    width: 100%;
    padding: 6px 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-sm, 6px);
    color: var(--text-2, #56534c);
    background: transparent;
    font-family: var(--font, inherit);
    font-size: var(--fs-sm, 12.5px);
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    scroll-margin: 5px;
}

.select-search-results button:hover,
.select-search-results button.active {
    color: var(--text, #1a1917);
    background: var(--surface-3, #f1efe9);
}

.select-search-results button.selected {
    color: var(--accent, #96762c);
    font-weight: 500;
}

.select-search-empty {
    margin: 0;
    padding: 16px 10px;
    color: var(--text-muted, #8b877e);
    font-size: var(--fs-sm, 12.5px);
    text-align: center;
}