.hrc-searchable-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    font-family: var(--hrc-font-sans);
}

.hrc-searchable-select__native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hrc-searchable-select__control-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

/*
 * The ERP has older route rescue rules that intentionally target every
 * button/span with !important declarations. Keep the shared combobox geometry
 * authoritative without weakening those route-specific safety rules.
 */
html body .hrc-searchable-select .hrc-searchable-select__control-group {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.hrc-searchable-select__control,
.hrc-searchable-select__clear {
    min-height: var(--hrc-control-height);
    border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font: inherit;
    transition:
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        background-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

.hrc-searchable-select__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-2);
    width: 100%;
    min-width: 0;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-control);
    text-align: left;
    cursor: pointer;
}

html body .hrc-searchable-select .hrc-searchable-select__control {
    display: flex !important;
    justify-content: space-between !important;
    text-align: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--hrc-control-height) !important;
    block-size: var(--hrc-control-height) !important;
    padding: var(--hrc-space-2) var(--hrc-space-3) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: var(--hrc-leading-normal) !important;
    color: var(--hrc-color-text) !important;
    border: var(--hrc-border-width) solid var(--hrc-color-border-strong) !important;
    border-radius: var(--hrc-radius-control) !important;
    background: var(--hrc-color-surface) !important;
    font-size: var(--hrc-text-sm) !important;
    font-weight: var(--hrc-weight-medium) !important;
    box-shadow: none !important;
}

html body .hrc-searchable-select .hrc-searchable-select__control:is(:hover, :focus-visible),
html body .hrc-searchable-select.is-open .hrc-searchable-select__control {
    border-color: var(--hrc-color-focus) !important;
    background: var(--hrc-color-surface) !important;
    box-shadow: var(--hrc-focus-ring) !important;
}

.hrc-searchable-select.has-clear .hrc-searchable-select__control {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.hrc-searchable-select__clear {
    display: grid;
    place-items: center;
    min-width: var(--hrc-touch-target);
    padding: 0;
    border-inline-start: 0;
    border-radius: 0 var(--hrc-radius-control) var(--hrc-radius-control) 0;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xl);
    cursor: pointer;
}

html body .hrc-searchable-select .hrc-searchable-select__clear {
    display: grid !important;
    min-width: var(--hrc-touch-target) !important;
    min-inline-size: var(--hrc-touch-target) !important;
    block-size: var(--hrc-control-height) !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
}

html body .hrc-searchable-select .hrc-searchable-select__clear[hidden] {
    display: none !important;
}

.hrc-searchable-select__control:hover,
.hrc-searchable-select__clear:hover,
.hrc-searchable-select.is-open .hrc-searchable-select__control {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-surface-soft);
}

.hrc-searchable-select__control:focus-visible,
.hrc-searchable-select__clear:focus-visible,
.hrc-searchable-select__search:focus-visible,
.hrc-searchable-select__option:focus-visible {
    outline: 0;
    border-color: var(--hrc-color-focus);
    box-shadow: var(--hrc-focus-ring);
}

.hrc-searchable-select__current {
    min-width: 0;
    overflow: hidden;
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-md);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .hrc-searchable-select .hrc-searchable-select__current {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto;
    text-align: start;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: var(--hrc-leading-normal) !important;
}

.hrc-searchable-select__current.is-placeholder {
    color: var(--hrc-color-text-muted);
    font-weight: var(--hrc-weight-medium);
}

.hrc-searchable-select__caret {
    flex: 0 0 auto;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-lg);
    line-height: 1;
    transition: transform var(--hrc-motion-fast) var(--hrc-ease-standard);
}

.hrc-searchable-select.is-open .hrc-searchable-select__caret {
    transform: rotate(180deg);
}

.hrc-searchable-select.is-disabled {
    opacity: var(--hrc-opacity-disabled);
}

.hrc-searchable-select.is-disabled .hrc-searchable-select__control,
.hrc-searchable-select.is-disabled .hrc-searchable-select__clear {
    cursor: not-allowed;
}

.hrc-searchable-select.is-error .hrc-searchable-select__control,
.hrc-searchable-select.is-error .hrc-searchable-select__clear {
    border-color: var(--hrc-color-danger);
}

.hrc-searchable-select__dropdown {
    box-sizing: border-box;
    position: fixed;
    z-index: var(--hrc-z-dropdown);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    /* The popup runtime clamps width to the visual viewport and portal host. */
    min-width: 0;
    max-width: min(420px, calc(100vw - var(--hrc-space-5)));
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface-raised);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-md);
}

dialog .hrc-searchable-select__dropdown,
.modal .hrc-searchable-select__dropdown,
.offcanvas .hrc-searchable-select__dropdown,
[data-drawer] .hrc-searchable-select__dropdown {
    z-index: calc(var(--hrc-z-modal) + 1);
}

.hrc-searchable-select__dropdown[hidden] {
    display: none;
}

.hrc-searchable-select__search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: var(--hrc-space-1);
    background: var(--hrc-color-surface-raised);
}

.hrc-searchable-select__search {
    width: 100%;
    min-height: var(--hrc-control-height);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 0;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
    font: inherit;
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-regular);
}

.hrc-searchable-select__search::placeholder {
    color: var(--hrc-color-text-muted);
}

.hrc-searchable-select__status {
    min-height: 1.5rem;
    padding: 0 var(--hrc-space-3) var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-normal);
}

.hrc-searchable-select__list {
    display: block;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 var(--hrc-space-1) var(--hrc-space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--hrc-color-border-strong) transparent;
    scrollbar-gutter: stable;
}

.hrc-searchable-select__list::-webkit-scrollbar {
    width: var(--hrc-space-2);
}

.hrc-searchable-select__list::-webkit-scrollbar-track {
    background: transparent;
}

.hrc-searchable-select__list::-webkit-scrollbar-thumb {
    border: var(--hrc-space-1) solid transparent;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-border-strong);
    background-clip: padding-box;
}

.hrc-searchable-select__option {
    display: grid;
    grid-template-columns: var(--hrc-icon-md) minmax(0, 1fr);
    align-items: center;
    gap: var(--hrc-space-2);
    width: 100%;
    min-height: var(--hrc-touch-target);
    margin: 0;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 0;
    border-radius: var(--hrc-radius-sm);
    background: transparent;
    color: var(--hrc-color-text);
    font: inherit;
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-medium);
    line-height: var(--hrc-leading-normal);
    text-align: left;
    cursor: pointer;
}

/*
 * Global ERP action governance intentionally styles every button. Options are
 * listbox rows, not standalone actions, so the shared component owns their
 * geometry and presentation even after action metadata is injected at runtime.
 */
html body.qm-erp2050[data-hrc-icon-button-system="v1"]
    .hrc-searchable-select__dropdown
    .hrc-searchable-select__option[data-hrc-action-control="v1"],
html body .hrc-searchable-select__dropdown .hrc-searchable-select__option {
    display: grid !important;
    grid-template-columns: var(--hrc-icon-md) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: var(--hrc-space-2) !important;
    width: 100% !important;
    min-height: var(--hrc-touch-target) !important;
    min-block-size: var(--hrc-touch-target) !important;
    margin: 0 !important;
    padding: var(--hrc-space-1) var(--hrc-space-3) !important;
    border: 0 !important;
    border-radius: var(--hrc-radius-sm) !important;
    background: var(--hrc-searchable-option-bg, transparent) !important;
    color: var(--hrc-searchable-option-color, var(--hrc-color-text)) !important;
    font-size: var(--hrc-text-sm) !important;
    font-weight: var(--hrc-searchable-option-weight, var(--hrc-weight-medium)) !important;
    line-height: var(--hrc-leading-normal) !important;
    text-align: left !important;
    white-space: normal !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.hrc-searchable-select__option:hover,
.hrc-searchable-select__option.is-active {
    --hrc-searchable-option-bg: var(--hrc-color-surface-soft);
    background: var(--hrc-color-surface-soft) !important;
}

.hrc-searchable-select__option.is-selected {
    --hrc-searchable-option-bg: var(--hrc-color-brand-soft);
    /* Brand hover is an action fill, not readable text on a tinted Dark surface. */
    --hrc-searchable-option-color: var(--hrc-color-text);
    --hrc-searchable-option-weight: var(--hrc-weight-semibold);
    background: var(--hrc-color-brand-soft) !important;
    color: var(--hrc-color-text) !important;
    font-weight: var(--hrc-weight-semibold) !important;
}

.hrc-searchable-select__option:disabled {
    opacity: var(--hrc-opacity-disabled);
    cursor: not-allowed;
}

.hrc-searchable-select__option-indicator {
    display: grid;
    place-items: center;
    width: var(--hrc-icon-md);
    height: var(--hrc-icon-md);
    color: currentColor;
    font-size: var(--hrc-text-sm);
}

.hrc-searchable-select__option-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hrc-searchable-select__option mark {
    padding: 0;
    border-radius: var(--hrc-radius-xs);
    background: var(--hrc-color-warning-soft);
    color: inherit;
    font-weight: var(--hrc-weight-bold);
}

.hrc-searchable-select__group {
    display: block;
    padding: var(--hrc-space-3) var(--hrc-space-3) var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
    text-transform: uppercase;
}

.hrc-searchable-select__state {
    display: grid;
    place-items: center;
    min-height: 5rem;
    padding: var(--hrc-space-4);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
    text-align: center;
}

@media (max-width: 640px) {
    .hrc-searchable-select__dropdown {
        max-width: calc(100vw - var(--hrc-space-5));
        border-radius: var(--hrc-radius-control);
    }

    .hrc-searchable-select__search {
        font-size: var(--hrc-text-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hrc-searchable-select *,
    .hrc-searchable-select__dropdown,
    .hrc-searchable-select__dropdown * {
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}