/* Searchable controls retain their native select for form values and validation. */
select.search-select-native {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.search-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    text-align: left;
}
.search-select[hidden] { display: none !important; }
.search-select::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--portal-muted, #61718d);
    -webkit-mask: url('/assets/figma/icons/search.svg') center / contain no-repeat;
    mask: url('/assets/figma/icons/search.svg') center / contain no-repeat;
    pointer-events: none;
}
.search-select .search-select-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 10px 42px 10px 38px;
    border: 1px solid var(--portal-border, #e0e7f1);
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    color: var(--portal-ink, #101a35);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-overflow: ellipsis;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-select .search-select-input::placeholder { color: var(--portal-muted, #61718d); opacity: 1; }
.search-select .search-select-input:hover { border-color: var(--ust-brand-200, #bfd7ff); }
.search-select[data-open="true"] .search-select-input,
.search-select .search-select-input:focus {
    border-color: var(--portal-blue, #005bff);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-blue, #005bff) 16%, transparent);
}
.search-select[data-open="true"]::before { background: var(--portal-blue, #005bff); }
.search-select .search-select-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 34px;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--portal-muted, #61718d);
    box-shadow: none;
    cursor: pointer;
}
.search-select .search-select-toggle:hover { color: var(--portal-blue, #005bff); background: var(--portal-background, #f5f7fb); }
.search-select-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.search-select-chevron { display: none; }
.search-select[data-readonly="true"]::before { display: none; }
.search-select[data-readonly="true"] .search-select-input {
    padding-inline: 13px;
    cursor: default;
    background: var(--portal-background, #f5f7fb);
}
.search-select .search-select-toggle[hidden] { display: none; }
.search-select[data-open="true"] .search-select-toggle::after { margin-top: 4px; transform: rotate(225deg); }
.search-select[data-disabled="true"] { opacity: .62; }
.search-select[data-disabled="true"] :is(.search-select-input, .search-select-toggle) { cursor: not-allowed; }
.search-select[data-invalid="true"] .search-select-input {
    border-color: var(--danger, #c73545);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #c73545) 12%, transparent);
}
.document-form .search-select,
.editor-fields .search-select,
.ticket-aside .search-select { margin-top: 8px; }
.route-input > .search-select { flex: 1 1 0; width: 0; }
.table-toolbar > .search-select { width: auto; min-width: 150px; flex: 1 1 150px; }
.table-pagination .search-select { width: 160px; flex: 0 1 160px; }
.search-select-panel {
    position: fixed;
    /* Viewport positioning must remain immediate, including reduced-motion
       rules that assign a transition duration to every element. */
    transition-property: none;
    z-index: 1000;
    box-sizing: border-box;
    inset: auto;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    border: 1px solid var(--portal-border, #e0e7f1);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
    color: var(--portal-ink, #101a35);
    box-shadow: 0 10px 32px rgba(16, 26, 53, .17), 0 2px 6px rgba(16, 26, 53, .05);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}
.search-select-panel[hidden] { display: none !important; }
.search-select-panel::backdrop { background: transparent; pointer-events: none; }
.search-select-list {
    position: relative;
    max-height: var(--search-select-list-height, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--portal-border, #e0e7f1) transparent;
    scroll-padding: 5px;
}
.search-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--portal-ink, #101a35);
    cursor: pointer;
    user-select: none;
}
.search-select-option-label { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.search-select-option.is-active { background: var(--portal-background, #f5f7fb); outline: 1px solid var(--portal-border, #e0e7f1); outline-offset: -1px; }
.search-select-option.is-selected { color: var(--portal-blue, #005bff); background: color-mix(in srgb, var(--portal-blue, #005bff) 9%, var(--portal-surface, #fff)); font-weight: 500; }
.search-select-option.is-selected.is-active { background: color-mix(in srgb, var(--portal-blue, #005bff) 15%, var(--portal-surface, #fff)); }
.search-select-option.is-disabled { color: var(--portal-muted, #61718d); opacity: .55; cursor: not-allowed; }
.search-select-check { flex: 0 0 16px; font-size: 17px; font-weight: 600; line-height: 1; color: currentColor; text-align: center; }
.search-select-option:not(.is-selected) .search-select-check { visibility: hidden; }
.search-select-group { padding: 10px 12px 5px; color: var(--portal-muted, #61718d); font-size: 12px; font-weight: 600; }
.search-select-empty { padding: 22px 12px; color: var(--portal-muted, #61718d); text-align: center; }
.search-select-status { margin: 5px -5px -5px; padding: 8px 14px; border-top: 1px solid var(--portal-border, #e0e7f1); color: var(--portal-muted, #61718d); background: var(--portal-background, #f5f7fb); font-size: 11px; line-height: 16px; }
.search-select-panel[data-multiple="true"] { overflow-y: auto; overscroll-behavior: contain; }
.search-select-panel[data-multiple="true"] .search-select-check {
    order: -1;
    display: grid;
    place-items: center;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    box-sizing: border-box;
    visibility: visible;
    border: 1px solid var(--portal-muted, #61718d);
    border-radius: 5px;
    color: transparent;
    font-size: 14px;
}
.search-select-panel[data-multiple="true"] .is-selected .search-select-check {
    border-color: var(--portal-blue, #005bff);
    background: var(--portal-blue, #005bff);
    color: var(--portal-surface, #fff);
}
.search-select-panel[data-multiple="true"] .search-select-status { margin-bottom: 0; font-size: 12px; }
.search-select-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 0 -5px -5px;
    padding: 8px;
    border-top: 1px solid var(--portal-border, #e0e7f1);
    background: var(--portal-surface, #fff);
}
.search-select-actions button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--portal-border, #e0e7f1);
    border-radius: 7px;
    background: var(--portal-background, #f5f7fb);
    color: var(--portal-ink, #101a35);
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.search-select-actions .search-select-done { background: var(--portal-blue, #005bff); border-color: var(--portal-blue, #005bff); color: var(--portal-surface, #fff); }
.search-select-actions button:hover:not(:disabled) { filter: brightness(.95); }
.search-select-actions button:focus-visible { outline: 2px solid var(--portal-blue, #005bff); outline-offset: 2px; }
.search-select-actions button:disabled { opacity: .5; cursor: not-allowed; }
:root[data-theme="dark"] .search-select-panel { box-shadow: 0 12px 36px rgba(0, 0, 0, .4); }
@media (max-width: 700px) {
    .search-select .search-select-input { font-size: 16px; }
    .search-select-option { min-height: 46px; }
    .search-select-panel { font-size: 15px; }
    .table-pagination .search-select { width: 146px; flex-basis: 146px; }
}
@media (max-width: 480px) {
    .route-input:has(> .scan-trigger) { flex-wrap: wrap; gap: 8px; }
    .route-input:has(> .scan-trigger) > .search-select { width: 100%; flex-basis: 100%; }
    .route-input > .scan-trigger { width: 100%; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .search-select .search-select-input, .search-select-toggle::after { transition: none; }
}
@media print {
    .search-select-panel { display: none !important; }
}