/* SearchSelect / MultiSearchSelect — shared across every portal.

   The panel is portaled to document.body by search-select.js, so it leaves the
   component's DOM subtree and loses Blazor's CSS isolation. Scoped styles cannot
   reach it, which is why these are global rather than in the .razor.css files.

   Lives in Web.Shared so all four portals get identical behaviour from one place;
   it was previously inside staff-portal.css, which is why only StaffPortal could
   use the control at all.
*/

/* === SearchSelect portal panel ===
   These styles live here (global) because the panel is portaled to
   document.body via JS and therefore loses Blazor CSS isolation. */

.search-select__panel {
    position: fixed;
    z-index: 9999;
    visibility: hidden;
    min-width: 200px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    background: var(--color-neutral-0);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.search-select__panel.open {
    visibility: visible;
}

.search-select__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    padding: var(--space-2) var(--space-3);
}

.search-select__search-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-neutral-400);
    pointer-events: none;
}

.search-select__search {
    width: 100%;
    border: none;
    outline: none;
    padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-3) + 18px);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    background: transparent;
    line-height: var(--leading-normal);
}

.search-select__search::placeholder {
    color: var(--color-neutral-400);
}

.search-select__clear-search {
    position: absolute;
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--color-neutral-100);
    border-radius: var(--radius-full);
    color: var(--color-neutral-500);
    cursor: pointer;
    padding: 0;
}

.search-select__clear-search:hover {
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
}

.search-select__items {
    overflow-y: auto;
    flex: 1;
}

.search-select__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-select__item.highlighted {
    background: var(--color-neutral-100);
}

.search-select__item.selected {
    color: var(--color-navy-900);
    font-weight: 500;
}

.search-select__item:active {
    background: var(--color-neutral-200);
}

.search-select__item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-select__item-text.placeholder {
    color: var(--color-neutral-400);
    font-style: italic;
}

.search-select__check {
    flex-shrink: 0;
    color: var(--color-navy-600);
    margin-left: var(--space-2);
}

.search-select__empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}