/* The open panel. Radzen moves it to the end of <body> and copies the closed dropdown's pixel width onto it, so it is
   found by the lookup rows inside it, and !important overrides that width. Its rows have fixed column widths, so it is
   as wide as they are (at least as wide as the closed dropdown) and never wider than the screen. */
.rz-dropdown-panel:has(.sf-lookup-row) {
    --sf-lookup-item-height: 2.25rem;
    width: max-content !important;
    max-width: 95vw !important;
}

.rz-dropdown-panel:has(.sf-lookup-row) .rz-dropdown-items-wrapper {
    width: 100%;
}

/* Compact rows, so the default 15 fit on most screens; the list height is VisibleItems times this. */
.rz-dropdown-panel:has(.sf-lookup-row) .rz-dropdown-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--sf-lookup-item-height);
    padding-block: 0;
}

.sf-lookup-row {
    display: grid;
    gap: 0 0.75rem;
    align-items: baseline;
    width: 100%;
}

.sf-lookup-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-lookup-header {
    padding: 0.5rem 1rem 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-300);
}

.sf-lookup-footer {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--rz-base-300);
}

.sf-lookup-all {
    font-style: italic;
}

/* The search box the header carries in place of Radzen's own (see LookupDropDown.HeaderRow). */
.sf-lookup-search {
    position: relative;
    padding: 0.5rem 0.5rem 0.25rem;
}

.sf-lookup-search-input {
    width: 100%;
    box-sizing: border-box;
}