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

.ahr-search-select__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    color: var(--ink-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

#akashic-health-records-patient-portal-root .ahr-search-select__input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ak-field-height, 40px);
    height: var(--ak-field-height, 40px);
    margin: 0;
    padding: 0 12px 0 38px;
    /* Override the app-level input[type="search"] padding shorthand. */
    padding-left: var(--ahr-search-select-inset, 38px) !important;
    border: 1px solid var(--line);
    border-radius: var(--ak-field-radius, 6px);
    background: var(--surface);
    color: var(--ink-strong);
    font-size: var(--ak-field-font-size, 14px);
    line-height: var(--ak-field-line-height, 1.4);
    box-shadow: none;
    outline: none;
}

/* The plain field: no glyph, 36px, squared. It sets the field tokens the app-level input rule reads,
   so no selector has to outrank that rule. */
.ahr-search-select--plain {
    --ak-field-height: 36px;
    --ak-field-radius: 2px;
    --ak-field-padding-x: 10px;
    --ak-field-font-size: 14px;
    --ak-field-line-height: 20px;
    --ahr-search-select-inset: 10px;
}

/* One line that ends in an ellipsis, never a hard cut mid-letter; the input's title holds the rest. */
#akashic-health-records-patient-portal-root .ahr-search-select--plain .ahr-search-select__input,
#akashic-health-records-patient-portal-root .ahr-search-select--plain .ahr-search-select__input::placeholder {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* A chosen name reads as the field's value, not as a hint. */
#akashic-health-records-patient-portal-root .ahr-search-select--has-selection .ahr-search-select__input::placeholder {
    color: var(--ink);
    opacity: 1;
}

#akashic-health-records-patient-portal-root .ahr-search-select__input:hover {
    border-color: var(--line);
}

#akashic-health-records-patient-portal-root .ahr-search-select__input:focus,
#akashic-health-records-patient-portal-root .ahr-search-select__input:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.15);
    outline: none;
}

.ahr-search-select__results {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 280px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--ak-field-radius, 6px);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}

.ahr-search-select__option {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-strong);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.ahr-search-select__option:hover,
.ahr-search-select__option:focus-visible,
.ahr-search-select__option[aria-selected="true"] {
    background: rgb(var(--primary-rgb) / 0.09);
    outline: none;
}

.ahr-search-select__empty {
    padding: 10px;
    color: var(--ink-muted);
    font-size: 13px;
}