@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Features/Recipes/RecipeListBox.razor.rz.scp.css */
/* RecipeListBox.razor.css — scoped styles.
   Consumes YOUR app.css tokens (--accent, --accent-soft, FluentUI neutral
   layers, type ramp, spacing). Fallback values keep it sane if a token is
   missing. Because it reads var(--accent), it follows your theme/accent
   automatically — nothing is overridden. */

.recipe-listbox[b-mznj3j52vs] {
    background: var(--neutral-layer-1, #1f1f1f);
    border: calc(var(--stroke-width, 1px)) solid var(--neutral-stroke-divider-rest, #333);
    border-radius: calc(var(--layer-corner-radius, 8px));
    overflow: hidden;
    font-family: var(--body-font, "Segoe UI Variable", "Segoe UI", sans-serif);
    box-shadow: 0 1.6px 3.6px rgba(0,0,0,.32), 0 .3px .9px rgba(0,0,0,.28);
}

.rlb-head[b-mznj3j52vs] {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: var(--spacingVerticalM, 12px) var(--spacingHorizontalM, 16px) var(--spacingVerticalS, 8px);
}
.rlb-head__label[b-mznj3j52vs] {
    font-size: var(--type-ramp-base-font-size, 14px);
    font-weight: 600; color: var(--neutral-foreground-rest, #e0e0e0);
}
.rlb-head__count[b-mznj3j52vs] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint, #8a8a8a); font-variant-numeric: tabular-nums;
}

/* search */
.rlb-search[b-mznj3j52vs] { position: relative; margin: 0 var(--spacingHorizontalM, 16px) var(--spacingVerticalS, 8px); display: flex; align-items: center; }
.rlb-search__icon[b-mznj3j52vs] { position: absolute; left: 10px; color: var(--neutral-foreground-hint, #8a8a8a); pointer-events: none; }
.rlb-search__input[b-mznj3j52vs] {
    width: 100%; height: 32px; padding: 0 30px 0 32px;
    background: var(--neutral-fill-input-rest, #242424);
    border: calc(var(--stroke-width, 1px)) solid var(--neutral-stroke-rest, #494949);
    border-bottom-color: var(--neutral-stroke-strong-rest, #8a8a8a);
    border-radius: calc(var(--control-corner-radius, 4px));
    color: var(--neutral-foreground-rest, #fff); font: inherit;
    font-size: var(--type-ramp-base-font-size, 13.5px); outline: none;
}
.rlb-search__input[b-mznj3j52vs]::placeholder { color: var(--neutral-foreground-hint, #8a8a8a); }
.rlb-search__input:focus[b-mznj3j52vs] { border-bottom: 2px solid var(--accent, #FF7A1A); padding-bottom: 1px; }
.rlb-search__clear[b-mznj3j52vs] {
    position: absolute; right: 6px; width: 22px; height: 22px;
    border: none; background: transparent; color: var(--neutral-foreground-hint, #8a8a8a);
    cursor: pointer; border-radius: 4px; font-size: 11px;
}
.rlb-search__clear:hover[b-mznj3j52vs] { background: var(--neutral-fill-stealth-hover, #2e2e2e); color: var(--neutral-foreground-rest, #e0e0e0); }

/* scroll region — the height fix */
.rlb-list[b-mznj3j52vs] {
    overflow-y: auto; padding: 4px; outline: none;
    scrollbar-width: thin; scrollbar-color: var(--neutral-stroke-rest, #4a4a4a) transparent;
}
.rlb-list:focus-visible[b-mznj3j52vs] { box-shadow: inset 0 0 0 2px var(--accent, #FF7A1A); }
.rlb-list[b-mznj3j52vs]::-webkit-scrollbar { width: 10px; }
.rlb-list[b-mznj3j52vs]::-webkit-scrollbar-thumb { background: var(--neutral-stroke-rest, #454545); border-radius: 6px; border: 3px solid var(--neutral-layer-1, #1f1f1f); }
.rlb-list[b-mznj3j52vs]::-webkit-scrollbar-thumb:hover { background: var(--neutral-stroke-hover, #565656); }
.rlb-empty[b-mznj3j52vs] { padding: 28px 16px; text-align: center; color: var(--neutral-foreground-hint, #8a8a8a); font-size: var(--type-ramp-base-font-size, 13px); }

/* option row */
.rlb-option[b-mznj3j52vs] {
    position: relative; display: flex; align-items: center; gap: 12px;
    border-radius: calc(var(--control-corner-radius, 4px)); cursor: pointer;
    color: var(--neutral-foreground-rest, #fff);
    transition: background-color .08s ease;
}
.rlb-option__bar[b-mznj3j52vs] {
    position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: transparent; transition: background-color .1s;
}
.rlb-option:hover[b-mznj3j52vs], .rlb-option.is-active[b-mznj3j52vs] { background: var(--neutral-fill-stealth-hover, #2e2e2e); }
.rlb-option.is-selected[b-mznj3j52vs] { background: var(--accent-soft, rgba(255,122,26,.16)); }
.rlb-option.is-selected .rlb-option__bar[b-mznj3j52vs] { background: var(--accent, #FF7A1A); }

.rlb-option__text[b-mznj3j52vs] { min-width: 0; flex: 1; }
.rlb-option__code[b-mznj3j52vs] {
    font-weight: 600; color: var(--neutral-foreground-rest, #fff); letter-spacing: .1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlb-option__desc[b-mznj3j52vs] { color: var(--neutral-foreground-hint, #adadad); overflow: hidden; text-overflow: ellipsis; }
.rlb-option__check[b-mznj3j52vs] { flex: none; color: var(--accent, #FF7A1A); opacity: 0; transition: opacity .1s; }
.rlb-option.is-selected .rlb-option__check[b-mznj3j52vs] { opacity: 1; }

.has-dividers .rlb-option:not(:last-child)[b-mznj3j52vs]::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 1px; background: var(--neutral-stroke-divider-rest, #2b2b2b);
}

/* density */
.density-compact .rlb-option[b-mznj3j52vs] { padding: 5px 12px; }
.density-compact .rlb-option__code[b-mznj3j52vs] { font-size: var(--type-ramp-base-font-size, 13.5px); }
.density-compact .rlb-option__desc[b-mznj3j52vs] { font-size: var(--type-ramp-minus-1-font-size, 12px); line-height: 1.35; white-space: nowrap; }

.density-cozy .rlb-option[b-mznj3j52vs] { padding: 8px 14px; }
.density-cozy .rlb-option__code[b-mznj3j52vs] { font-size: var(--type-ramp-plus-1-font-size, 15px); }
.density-cozy .rlb-option__desc[b-mznj3j52vs] { font-size: var(--type-ramp-base-font-size, 13px); line-height: 1.4; margin-top: 2px; white-space: nowrap; }

.density-comfortable .rlb-option[b-mznj3j52vs] { padding: 12px 16px; align-items: flex-start; }
.density-comfortable .rlb-option__bar[b-mznj3j52vs] { top: 12px; bottom: 12px; }
.density-comfortable .rlb-option__code[b-mznj3j52vs] { font-size: var(--type-ramp-plus-2-font-size, 16px); }
.density-comfortable .rlb-option__desc[b-mznj3j52vs] {
    font-size: var(--type-ramp-base-font-size, 13.5px); line-height: 1.45; margin-top: 4px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* status chip */
.rlb-chip[b-mznj3j52vs] {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px 0 8px; border-radius: 11px;
    font-size: var(--type-ramp-minus-1-font-size, 11.5px); font-weight: 600; letter-spacing: .1px;
    background: var(--neutral-fill-secondary-rest, #242424);
    border: calc(var(--stroke-width, 1px)) solid var(--neutral-stroke-rest, #494949);
    color: var(--neutral-foreground-rest, #e0e0e0);
}
.rlb-chip__dot[b-mznj3j52vs] { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-foreground-hint, #9a9a9a); }
.rlb-chip--success .rlb-chip__dot[b-mznj3j52vs] { background: var(--success, #6cc070); }
.rlb-chip--warning .rlb-chip__dot[b-mznj3j52vs] { background: var(--warning, #f0b429); }
.rlb-chip--neutral .rlb-chip__dot[b-mznj3j52vs] { background: var(--neutral-foreground-hint, #9a9a9a); }