/* /Components/CatalogCardsPanel.razor.rz.scp.css */
/* ── Outer panel (flex column, fills parent) ─────────────────────────────── */
.cvp-panel[b-fmz7vr1p1k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Card grid ───────────────────────────────────────────────────────────── */
.cvp-cards[b-fmz7vr1p1k] {
    flex: 0 0 auto;
    max-height: 45%;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    align-content: start;
}

.cvp-cards--split[b-fmz7vr1p1k] {
    max-height: 44%;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.cvp-spinner-wrap[b-fmz7vr1p1k] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.cvp-spinner[b-fmz7vr1p1k] {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin-b-fmz7vr1p1k 0.65s linear infinite;
}

@keyframes spin-b-fmz7vr1p1k {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY / SUBCATEGORY CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-card[b-fmz7vr1p1k] {
    background: var(--lp-bg-card);
    border: 1.5px solid var(--lp-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    color: var(--lp-text);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: center;
    padding: 0;
    width: 100%;
    outline: none;
}

@media (hover: hover) {
    .cat-card:hover:not(.cat-card--active)[b-fmz7vr1p1k] {
        border-color: rgba(245, 158, 11, 0.45);
        background: rgba(245, 158, 11, 0.04);
    }
}

.cat-card--active[b-fmz7vr1p1k] {
    border-color: var(--lp-orange);
    border-width: 2px;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 20px 0 rgba(245, 158, 11, 0.12);
}

/* ── Colored card ────────────────────────────────────────────────────────── */
.cat-card--colored[b-fmz7vr1p1k] {
    border-color: color-mix(in srgb, var(--card-color) 50%, transparent);
}

@media (hover: hover) {
    .cat-card--colored:hover:not(.cat-card--active)[b-fmz7vr1p1k] {
        border-color: color-mix(in srgb, var(--card-color) 75%, transparent);
        background: color-mix(in srgb, var(--card-color) 6%, transparent);
    }
}

.cat-card--colored.cat-card--active[b-fmz7vr1p1k] {
    border-color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 10%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color) 22%, transparent),
                0 0 20px 0 color-mix(in srgb, var(--card-color) 14%, transparent);
}

.cat-card:focus-visible[b-fmz7vr1p1k] {
    box-shadow: 0 0 8px 2px rgba(245,158,11,0.65), 0 0 28px 8px rgba(245,158,11,0.3);
}

/* ── Card image area (4:3) ───────────────────────────────────────────────── */
.cat-card__img[b-fmz7vr1p1k] {
    aspect-ratio: 4 / 3;
    background: var(--lp-bg-card2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cat-card__img img[b-fmz7vr1p1k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-card__no-img[b-fmz7vr1p1k] {
    color: var(--lp-muted);
    opacity: 0.3;
}

.cat-card__no-img--colored[b-fmz7vr1p1k] {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

.cat-card__no-img svg[b-fmz7vr1p1k] {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

/* ── Back card ───────────────────────────────────────────────────────────── */
.cat-card__back-icon[b-fmz7vr1p1k] {
    color: var(--lp-muted);
}

.cat-card__back-icon svg[b-fmz7vr1p1k] {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

@media (hover: hover) {
    .cat-card--back:hover .cat-card__back-icon[b-fmz7vr1p1k] {
        color: var(--lp-text);
    }
}

/* ── Card name strip ─────────────────────────────────────────────────────── */
.cat-card__name[b-fmz7vr1p1k] {
    padding: 0.5rem 0.625rem 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-card--active .cat-card__name[b-fmz7vr1p1k] {
    color: var(--lp-orange);
}

.cat-card--colored .cat-card__name[b-fmz7vr1p1k] {
    background: color-mix(in srgb, var(--card-color) 50%, transparent);
}

.cat-card--colored.cat-card--active .cat-card__name[b-fmz7vr1p1k] {
    color: var(--lp-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ITEM ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Plain wrapper (orders/new) */
.cvp-items-plain[b-fmz7vr1p1k] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Card wrapper (catalog preview): bordered card with margin */
.cvp-items-card[b-fmz7vr1p1k] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 1.25rem 1rem;
    border: 1px solid var(--lp-border);
    border-radius: 12px;
}

/* Stub card (shown when no category is selected in catalog preview) */
.cvp-stub-card[b-fmz7vr1p1k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.75rem 1.25rem 1rem;
    border: 1px dashed var(--lp-border);
    border-radius: 12px;
    color: var(--lp-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

/* Favourites section title (shown above favorite items when no category selected) */
.cvp-fav-title[b-fmz7vr1p1k] {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cvp-fav-title--uncat[b-fmz7vr1p1k] {
    padding-top: 50px;
}

/* Remove the border-bottom from the last FAVOURITES item when it is
   immediately followed by the NO CATEGORY title inside the same cvp-items. */
.cvp-items > .item-row:has(+ .cvp-fav-title)[b-fmz7vr1p1k] {
    border-bottom: none;
}

.cvp-stub-card[b-fmz7vr1p1k]  svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
    opacity: 0.35;
}

/* Scrollable item list (inside either wrapper) */
.cvp-items[b-fmz7vr1p1k] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* item-row styles live in app.css (shared with CatalogPreview list view) */

/* ── Card carousel wrapper (desktop: transparent passthrough by default) ───── */
.cvp-cards-wrap[b-fmz7vr1p1k] {
    display: contents;
}

.cvp-scroll-btn[b-fmz7vr1p1k] {
    display: none;
}

/* ── Carousel mode (all screen sizes) ────────────────────────────────────── */
.cvp-cards-wrap--carousel[b-fmz7vr1p1k] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.25rem;
    padding: 0 0.75rem;
}

.cvp-cards--carousel[b-fmz7vr1p1k] {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.75rem 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.625rem;
    align-content: unset;
    max-height: none !important;
    flex: 1;
}

.cvp-cards--carousel[b-fmz7vr1p1k]::-webkit-scrollbar {
    display: none;
}

.cvp-cards--carousel .cat-card[b-fmz7vr1p1k] {
    min-width: 112px;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
}

.cvp-cards--carousel .cat-card .cat-card__img[b-fmz7vr1p1k] {
    flex: 1;
    aspect-ratio: unset;
}

.cvp-cards--carousel .cat-card--back[b-fmz7vr1p1k] {
    position: relative;
}

.cvp-cards--carousel .cat-card--back .cat-card__back-icon[b-fmz7vr1p1k] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cvp-cards-wrap--carousel .cvp-scroll-btn[b-fmz7vr1p1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
    border-radius: 50%;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    cursor: pointer;
    padding: 0;
    transition: background 0.13s;
}

@media (hover: hover) {
    .cvp-cards-wrap--carousel .cvp-scroll-btn:hover[b-fmz7vr1p1k] {
        background: var(--lp-orange);
        color: #111;
    }
}

.cvp-cards-wrap--carousel .cvp-scroll-btn:active[b-fmz7vr1p1k] {
    background: var(--lp-orange);
    color: #111;
}

.cvp-cards-wrap--carousel .cvp-scroll-btn[b-fmz7vr1p1k]  svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
}

.cvp-cards-wrap--carousel .cvp-scroll-btn:disabled[b-fmz7vr1p1k] {
    opacity: 0.3;
    cursor: default;
}

@media (max-width: 575.98px) {
    /* Non-carousel mode: switch to carousel layout on mobile */
    .cvp-cards-wrap:not(.cvp-cards-wrap--carousel)[b-fmz7vr1p1k] {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 0 0 auto;
        gap: 0.25rem;
        padding: 0 0.75rem;
    }

    .cvp-cards:not(.cvp-cards--carousel)[b-fmz7vr1p1k] {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1rem 1.25rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.625rem;
        align-content: unset;
        max-height: none !important;
        flex: 1;
    }

    .cvp-cards:not(.cvp-cards--carousel)[b-fmz7vr1p1k]::-webkit-scrollbar {
        display: none;
    }

    .cvp-cards:not(.cvp-cards--carousel) .cat-card[b-fmz7vr1p1k] {
        min-width: 104px;
        width: 104px;
        height: 104px;
        flex-shrink: 0;
    }

    .cvp-cards:not(.cvp-cards--carousel) .cat-card .cat-card__img[b-fmz7vr1p1k] {
        flex: 1;
        aspect-ratio: unset;
    }

    .cvp-cards:not(.cvp-cards--carousel) .cat-card--back[b-fmz7vr1p1k] {
        position: relative;
    }

    .cvp-cards:not(.cvp-cards--carousel) .cat-card--back .cat-card__back-icon[b-fmz7vr1p1k] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cvp-cards-wrap:not(.cvp-cards-wrap--carousel) .cvp-scroll-btn[b-fmz7vr1p1k] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        border: 1px solid var(--lp-border);
        border-radius: 50%;
        background: var(--lp-bg-card);
        color: var(--lp-text);
        cursor: pointer;
        padding: 0;
        transition: background 0.13s;
    }

    @media (hover: hover) {
        .cvp-cards-wrap:not(.cvp-cards-wrap--carousel) .cvp-scroll-btn:hover[b-fmz7vr1p1k] {
            background: var(--lp-orange);
            color: #111;
        }
    }

    .cvp-cards-wrap:not(.cvp-cards-wrap--carousel) .cvp-scroll-btn:active[b-fmz7vr1p1k] {
        background: var(--lp-orange);
        color: #111;
    }

    .cvp-cards-wrap:not(.cvp-cards-wrap--carousel) .cvp-scroll-btn[b-fmz7vr1p1k]  svg {
        width: 0.75rem;
        height: 0.75rem;
        fill: currentColor;
    }

    .cvp-cards-wrap:not(.cvp-cards-wrap--carousel) .cvp-scroll-btn:disabled[b-fmz7vr1p1k] {
        opacity: 0.3;
        cursor: default;
    }

    /* Carousel mode on mobile: smaller cards */
    .cvp-cards--carousel .cat-card[b-fmz7vr1p1k] {
        min-width: 96px;
        width: 96px;
        height: 96px;
    }

    .cvp-items[b-fmz7vr1p1k] {
        overflow-x: auto;
    }

    .cvp-items[b-fmz7vr1p1k]  .item-row {
        min-width: 340px;
    }
}
/* /Components/ClockDisplay.razor.rz.scp.css */
.clock-display[b-p57tnm81ut] {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--lp-text);
    margin-right: 0.75rem;
    user-select: none;
}
/* /Components/CollapsibleCard.razor.rz.scp.css */
/* ── Card container ───────────────────────────────────────────────────────── */
.cc-card[b-4nirbl8dh7] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 1.5rem;
}

/* ── Header row ───────────────────────────────────────────────────────────── */
.cc-header[b-4nirbl8dh7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
}

.cc-header-left[b-4nirbl8dh7] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.cc-header-right[b-4nirbl8dh7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Icon wrap ────────────────────────────────────────────────────────────── */
.cc-icon-wrap[b-4nirbl8dh7] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-orange);
}

.cc-icon-wrap[b-4nirbl8dh7]  svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ── Title / description ──────────────────────────────────────────────────── */
.cc-title[b-4nirbl8dh7] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
    line-height: 1.3;
}

.cc-desc[b-4nirbl8dh7] {
    font-size: 0.82rem;
    color: var(--lp-muted);
    margin-top: 0.15rem;
}

/* ── Chevron ──────────────────────────────────────────────────────────────── */
.cc-header-right[b-4nirbl8dh7]  .cc-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--lp-muted);
    flex-shrink: 0;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.cc-header-right[b-4nirbl8dh7]  .cc-chevron--open { transform: rotate(180deg); }

/* ── Collapse / expand animation ──────────────────────────────────────────── */
.cc-body[b-4nirbl8dh7] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.cc-body--open[b-4nirbl8dh7] { grid-template-rows: 1fr; }

.cc-body-inner[b-4nirbl8dh7] {
    overflow: hidden;
    min-height: 0;
    padding-top: 0;
    transition: padding-top 0.28s ease;
}

.cc-body--open .cc-body-inner[b-4nirbl8dh7] { padding-top: 1rem; }

@media (max-width: 575.98px) {
    .cc-header[b-4nirbl8dh7] {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    /* Force left section to full width so right section wraps to next row */
    .cc-header-left[b-4nirbl8dh7] {
        flex: 1 0 100%;
    }
    /* Right section (Add button + chevron) sits below, pushed to the right */
    .cc-header-right[b-4nirbl8dh7] {
        margin-left: auto;
    }
}
/* /Components/LanguageSelector.razor.rz.scp.css */
/* ─── Trigger button ─────────────────────────────────────────────────────── */
.ls-btn[b-85f83ci6s9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1;
}

@media (hover: hover) {
    .ls-btn:hover[b-85f83ci6s9] {
        background: var(--lp-hover-bg-strong);
        border-color: var(--lp-btn-border-hover);
        color: var(--lp-text);
    }
}

.ls-btn:focus[b-85f83ci6s9],
.ls-btn:focus-visible[b-85f83ci6s9] {
    outline: none;
    box-shadow: none;
}

/* Two-letter code next to flag */
.ls-code[b-85f83ci6s9] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Chevron arrow */
.ls-btn[b-85f83ci6s9]  .ls-chevron {
    width: 11px;
    height: 11px;
    opacity: 0.65;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.ls-btn[aria-expanded="true"][b-85f83ci6s9]  .ls-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* ─── Dropdown menu ──────────────────────────────────────────────────────── */
.ls-menu[b-85f83ci6s9] {
    background: var(--lp-dropdown-bg);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    padding: 0.35rem 0;
    min-width: 130px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ─── Dropdown items ─────────────────────────────────────────────────────── */
.ls-item[b-85f83ci6s9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--lp-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
    line-height: 1;
}

@media (hover: hover) {
    .ls-item:hover[b-85f83ci6s9] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.ls-item-active[b-85f83ci6s9] {
    color: var(--lp-text);
    font-weight: 600;
}

/* Checkmark column — fixed width keeps all items aligned */
.ls-check[b-85f83ci6s9] {
    width: 14px;
    flex-shrink: 0;
    color: var(--lp-orange);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Flag emoji */
.ls-flag[b-85f83ci6s9] {
    font-size: 1rem;
    line-height: 1;
}

.ls-flag--text[b-85f83ci6s9] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Two-letter code in list */
.ls-item-code[b-85f83ci6s9] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
/* /Components/PaymentDialog.razor.rz.scp.css */
dialog.offer-dialog[b-fux60pwz1w] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 420px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.offer-dialog[open][b-fux60pwz1w] { display: flex; flex-direction: column; }

.order-variant-body[b-fux60pwz1w] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
}

.order-variant-card[b-fux60pwz1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    width: 100%;
    background: var(--lp-bg-card);
    border: 1.5px solid var(--lp-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
}

@media (hover: hover) {
    .order-variant-card:hover[b-fux60pwz1w] {
        border-color: rgba(245, 158, 11, 0.5);
        background: rgba(245, 158, 11, 0.04);
    }
}

.order-variant-card--selected[b-fux60pwz1w] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
}

.order-variant-name[b-fux60pwz1w] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-text);
}
/* /Components/ReservationFilterBar.razor.rz.scp.css */
/* ── Controls row ────────────────────────────────────────────────────────── */

.res-controls[b-6vqfzrvnvw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.res-ctrl-btn[b-6vqfzrvnvw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-decoration: none;
    line-height: 1;
}

.res-ctrl-btn--outline[b-6vqfzrvnvw] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    color: var(--lp-text);
}

@media (hover: hover) {
    .res-ctrl-btn--outline:hover[b-6vqfzrvnvw] {
        background: var(--lp-hover-bg);
        border-color: var(--lp-orange);
    }
}

.res-ctrl-btn--primary[b-6vqfzrvnvw] {
    background: var(--lp-orange);
    border: 1px solid var(--lp-orange);
    color: #fff;
}

@media (hover: hover) { .res-ctrl-btn--primary:hover[b-6vqfzrvnvw] { filter: brightness(1.1); } }

.res-ctrl-btn[b-6vqfzrvnvw]  .res-ctrl-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* ── Filter time pickers ─────────────────────────────────────────────────── */

.res-filter-slots[b-6vqfzrvnvw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.res-filter-slots[b-6vqfzrvnvw]  .ui-select {
    width: fit-content;
}

.res-filter-trigger[b-6vqfzrvnvw] {
    width: auto;
    min-width: fit-content;
    height: 2rem;
    font-size: 0.8125rem;
    padding-left: 0.625rem;
    padding-right: 0.5rem;
}

.res-filter-sep[b-6vqfzrvnvw] {
    font-size: 0.8125rem;
    color: var(--lp-muted);
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle-btn[b-awwbauj67a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    border-radius: 8px;
    color: var(--lp-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
    flex-shrink: 0;
}

@media (hover: hover) {
    .theme-toggle-btn:hover[b-awwbauj67a] {
        background: var(--lp-hover-bg-strong);
        border-color: var(--lp-btn-border-hover);
    }
}

.theme-toggle-btn:focus[b-awwbauj67a],
.theme-toggle-btn:focus-visible[b-awwbauj67a] {
    outline: none;
    box-shadow: none;
}

.theme-toggle-btn[b-awwbauj67a]  .theme-icon {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    flex-shrink: 0;
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* ── Toast stack ──────────────────────────────────────────────────────────── */
.toast-stack[b-ln8xh7xz3f] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}

/* ── Individual toast ─────────────────────────────────────────────────────── */
.toast[b-ln8xh7xz3f] {
    display: block; /* override Bootstrap's .toast:not(.show) { display: none } */
    pointer-events: auto;
    min-width: 260px;
    max-width: 360px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in-b-ln8xh7xz3f 0.2s ease;
}

@keyframes toast-slide-in-b-ln8xh7xz3f {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Toast types ──────────────────────────────────────────────────────────── */
.toast--error[b-ln8xh7xz3f],
.toast--networkerror[b-ln8xh7xz3f] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

.toast--success[b-ln8xh7xz3f] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

/* ── Toast body ───────────────────────────────────────────────────────────── */
.toast-body[b-ln8xh7xz3f] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
}

.toast-message[b-ln8xh7xz3f] {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
}

.toast-dismiss[b-ln8xh7xz3f] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.15s;
    margin-top: 1px;
}

@media (hover: hover) { .toast-dismiss:hover[b-ln8xh7xz3f] { opacity: 1; } }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.toast-progress[b-ln8xh7xz3f] {
    height: 3px;
    background: currentColor;
    opacity: 0.35;
    animation: toast-drain-b-ln8xh7xz3f 4s linear forwards;
}

@keyframes toast-drain-b-ln8xh7xz3f {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
:root.dark .toast--error[b-ln8xh7xz3f],
:root.dark .toast--networkerror[b-ln8xh7xz3f] {
    background: #3b1111;
    border-color: #7f1d1d;
    color: #fca5a5;
}

:root.dark .toast--success[b-ln8xh7xz3f] {
    background: #052e16;
    border-color: #166534;
    color: #6ee7b7;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .toast-stack[b-ln8xh7xz3f] {
        bottom: 1rem;
        right: 0.75rem;
        left: 0.75rem;
    }

    .toast[b-ln8xh7xz3f] {
        min-width: 0;
        max-width: 100%;
    }
}
/* /Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-imq99flg22] {
    min-height: 100vh;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-dzq37haygm] {
    position: relative;
    display: flex;
    flex-direction: row;  /* always side-by-side; sidebar never stacks above main */
}

main[b-dzq37haygm] {
    flex: 1;
    min-width: 0;       /* allow main to shrink in the flex row */
    overflow-x: clip;   /* clip visually without creating a new containing block;
                           overflow:hidden would trap position:fixed children on iOS */
}

.sidebar[b-dzq37haygm] {
    background: var(--lp-bg);
    border-right: 1px solid var(--lp-border);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

.top-row[b-dzq37haygm] {
    background-color: var(--lp-bg-card2);
    border-bottom: 1px solid var(--lp-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
}

    .top-row[b-dzq37haygm]  a, .top-row[b-dzq37haygm]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    @media (hover: hover) {
        .top-row[b-dzq37haygm]  a:hover, .top-row[b-dzq37haygm]  .btn-link:hover {
            text-decoration: underline;
        }
    }

    .top-row[b-dzq37haygm]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-row.auth[b-dzq37haygm]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

article[b-dzq37haygm] {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
}

/* ── Hamburger button (mobile only) ────────────────────────────────────── */
.hamburger-btn[b-dzq37haygm] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: none;
    color: var(--lp-muted);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    flex-shrink: 0;
    margin-right: auto;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

@media (hover: hover) {
    .hamburger-btn:hover[b-dzq37haygm] {
        color: var(--lp-text);
        background: var(--lp-hover-bg);
    }
}

/* ── Mobile backdrop ────────────────────────────────────────────────────── */
.mobile-backdrop[b-dzq37haygm] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
}

/* ── Mobile breakpoint ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .sidebar[b-dzq37haygm] {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar--mobile-open[b-dzq37haygm] {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .hamburger-btn[b-dzq37haygm] {
        display: flex;
    }

    .mobile-backdrop[b-dzq37haygm] {
        display: block;
    }

    .top-row[b-dzq37haygm] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    article[b-dzq37haygm] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ── Nav panel ──────────────────────────────────────────────────────────── */
.nav-panel[b-titwnhr3bw] {
    width: 240px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: width 0.22s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.nav-panel--collapsed[b-titwnhr3bw] {
    width: 60px;
}

/* ── Sidebar header ─────────────────────────────────────────────────────── */
.sidebar-header[b-titwnhr3bw] {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
    gap: 0.5rem;
}

.sidebar-header__label[b-titwnhr3bw] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-header__toggle[b-titwnhr3bw] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

@media (hover: hover) {
    .sidebar-header__toggle:hover[b-titwnhr3bw] {
        color: var(--lp-text);
        background: var(--lp-hover-bg);
    }
}

.sidebar-header__toggle:focus-visible[b-titwnhr3bw] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ── Scrollable body ────────────────────────────────────────────────────── */
.nav-body[b-titwnhr3bw] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.nav-body nav[b-titwnhr3bw] {
    flex: 1;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

/* ── Nav button — single class for all interactive items ────────────────── */
.nav-btn[b-titwnhr3bw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 2.75rem;
    padding: 0 1rem;
    margin: 1px 0.5rem;
    width: calc(100% - 1rem);
    border-radius: 8px;
    color: var(--lp-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    outline: none;
    box-sizing: border-box;
}

@media (hover: hover) {
    .nav-btn:hover:not(.active)[b-titwnhr3bw] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.nav-btn.active[b-titwnhr3bw] {
    background: rgba(245,158,11,0.15);
    color: var(--lp-orange);
}

.nav-btn:focus-visible[b-titwnhr3bw] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ── Icon ───────────────────────────────────────────────────────────────── */
.nav-btn[b-titwnhr3bw]  .nav-icon{
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    fill: currentColor;
}

/* ── Chevron ────────────────────────────────────────────────────────────── */
.nav-btn[b-titwnhr3bw]  .nav-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.nav-btn[b-titwnhr3bw]  .nav-chevron.open {
    transform: rotate(180deg);
}

/* ── Submenu ────────────────────────────────────────────────────────────── */
/* Indent subitems so their icon aligns under the parent label text.        */
/* Parent text starts at: margin(0.5rem) + padding(1rem) + icon(1.1rem)    */
/* + gap(0.75rem) = 3.35rem. Subitems get padding-left to match that.      */
/*                                                                           */
/* The ::before line sits at the parent icon's left edge:                   */
/* margin(0.5rem) + padding(1rem) = 1.5rem                                  */
.nav-submenu[b-titwnhr3bw] {
    position: relative;
}

.nav-submenu[b-titwnhr3bw]::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--lp-border);
    border-radius: 1px;
}

.nav-submenu .nav-btn[b-titwnhr3bw] {
    margin-left: 2.25rem;
    width: calc(100% - 2.75rem);
    padding-left: 0.75rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.nav-footer[b-titwnhr3bw] {
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lp-border);
}


/* ── Collapsed overrides ────────────────────────────────────────────────── */
/*                                                                           */
/* MUST live in this scoped file. Blazor compiles these as:                 */
/* .nav-panel--collapsed[b-x] .nav-btn[b-x]  →  specificity 0-4-0          */
/* beating the base .nav-btn[b-x]             →  specificity 0-2-0          */

.nav-panel--collapsed .sidebar-header[b-titwnhr3bw] {
    justify-content: center;
    padding: 0;
}

.nav-panel--collapsed .nav-body nav[b-titwnhr3bw] {
    align-items: center;
}

.nav-panel--collapsed .nav-btn[b-titwnhr3bw] {
    width: 2.75rem;
    margin: 1px auto;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.nav-panel--collapsed .nav-footer[b-titwnhr3bw] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Mobile: hide collapse toggle ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .sidebar-header__toggle[b-titwnhr3bw] {
        display: none;
    }
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
.nav-body[b-titwnhr3bw]::-webkit-scrollbar { width: 3px; }
.nav-body[b-titwnhr3bw]::-webkit-scrollbar-track { background: transparent; }
.nav-body[b-titwnhr3bw]::-webkit-scrollbar-thumb { background: var(--lp-border); border-radius: 2px; }

/* ── Pending badge ──────────────────────────────────────────────────────── */
.nav-btn--with-badge[b-titwnhr3bw] {
    position: relative;
}

.nav-badge[b-titwnhr3bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
/* /Pages/AuthorizeDisplay.razor.rz.scp.css */
.dauth-root[b-6cc63xnyh2] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #0f1117;
}

.dauth-card[b-6cc63xnyh2] {
    background: #1e2535;
    border: 1px solid #2d3748;
    border-radius: 14px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    color: #e2e8f0;
}

.dauth-card--done[b-6cc63xnyh2]  { border-color: rgba(34, 197, 94, 0.4); background: #192c20; }
.dauth-card--error[b-6cc63xnyh2] { border-color: rgba(248, 113, 113, 0.4); }

.dauth-check[b-6cc63xnyh2] {
    width: 3.5rem;
    height: 3.5rem;
    color: #22c55e;
}

.dauth-title[b-6cc63xnyh2] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.dauth-desc[b-6cc63xnyh2] {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
}

.dauth-done-text[b-6cc63xnyh2] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #22c55e;
    margin: 0;
}

.dauth-error-text[b-6cc63xnyh2] {
    font-size: 1rem;
    color: #f87171;
    margin: 0;
}

.dauth-btn[b-6cc63xnyh2] {
    width: 100%;
    padding: 0.8rem 1.5rem;
    background: #f59e0b;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.15s;
}

.dauth-btn:disabled[b-6cc63xnyh2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.dauth-btn:not(:disabled):hover[b-6cc63xnyh2] { opacity: 0.9; }

.dauth-spinner[b-6cc63xnyh2] {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(0,0,0,0.3);
    border-top-color: #000;
    border-radius: 50%;
    animation: dauth-spin-b-6cc63xnyh2 0.7s linear infinite;
    display: inline-block;
}

@keyframes dauth-spin-b-6cc63xnyh2 {
    to { transform: rotate(360deg); }
}
/* /Pages/CatalogCategories.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.offers-toolbar[b-xnf872804s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-input-wrap[b-xnf872804s] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.search-input-wrap[b-xnf872804s]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-xnf872804s] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-xnf872804s]::placeholder { color: var(--lp-muted); }
.search-input:focus[b-xnf872804s]         { border-color: var(--lp-orange); }

.add-offer-btn[b-xnf872804s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-offer-btn svg[b-xnf872804s] { width: 0.95rem; height: 0.95rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .add-offer-btn:hover[b-xnf872804s]  { opacity: 0.85; } }
.add-offer-btn:active[b-xnf872804s] { opacity: 0.7; }
.add-offer-btn:focus-visible[b-xnf872804s] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

/* ── Category list ───────────────────────────────────────────────────────── */
.cat-list[b-xnf872804s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 4rem;
}

.cat-list-state[b-xnf872804s] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.cat-list-empty[b-xnf872804s] {
    font-size: 0.875rem;
    color: var(--lp-muted);
}

/* ── Category card ───────────────────────────────────────────────────────── */
.cat-card[b-xnf872804s] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s, filter 0.2s;
    user-select: none;
}

/* ── Selection dimming — same-level only ─────────────────────────────────── */

/* Category level: dim sibling cards that contain no nested selection */
.cat-list--has-selection .cat-card:not(.cat-card--selected):not(:has(.sub-item--selected, .offer-item--selected))[b-xnf872804s] {
    opacity: 0.55;
    transform: scale(0.985);
    filter: blur(0.4px);
}

/* Sub-item level: dim sibling sub-items inside the same card */
.cat-card:has(.sub-item--selected) .sub-item:not(.sub-item--selected)[b-xnf872804s] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.3px);
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

/* Offer-item level (direct under category): dim sibling direct offer-items */
.cat-accordion-inner:has(> .offer-item--selected) > .offer-item:not(.offer-item--selected)[b-xnf872804s] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.3px);
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

/* Offer-item level (under subcategory): dim sibling offer-items in the same sub-body */
.sub-item-body-inner:has(> .offer-item--selected) > .offer-item:not(.offer-item--selected)[b-xnf872804s] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.3px);
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

/* Offer-item in sub-section selected: dim sibling sub-sections */
.cat-accordion-inner:has(.sub-item-body-inner > .offer-item--selected) > .sub-section:not(:has(.offer-item--selected))[b-xnf872804s] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.3px);
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

@media (hover: hover) {
    .cat-card:hover[b-xnf872804s] {
        border-color: color-mix(in srgb, var(--lp-border) 60%, var(--lp-orange));
    }
}

.cat-card--selected[b-xnf872804s] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
}

.cat-card--colored[b-xnf872804s] {
    border-left: 3px solid var(--card-color);
    background: color-mix(in srgb, var(--card-color) 9%, var(--lp-bg-card));
}

.cat-card--colored.cat-card--selected[b-xnf872804s] {
    border-left-color: var(--card-color);
    border-top-color: var(--lp-orange);
    border-right-color: var(--lp-orange);
    border-bottom-color: var(--lp-orange);
}

.cat-card--deleting[b-xnf872804s] {
    opacity: 0;
    transition: opacity 0.28s ease-out;
    pointer-events: none;
}

/* ── Category card header ────────────────────────────────────────────────── */
.cat-card-header[b-xnf872804s] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    transition: background 0.12s;
}

.cat-card--selected .cat-card-header[b-xnf872804s] {
    background: color-mix(in srgb, var(--lp-orange) 5%, transparent);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.cat-chevron-btn[b-xnf872804s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s, background 0.12s;
}

@media (hover: hover) { .cat-chevron-btn:hover[b-xnf872804s]          { color: var(--lp-text); background: var(--lp-hover-bg); } }
.cat-chevron-btn:focus-visible[b-xnf872804s]  { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.cat-chevron-btn--invisible[b-xnf872804s]     { visibility: hidden; pointer-events: none; }

.cat-chevron-btn[b-xnf872804s]  .chevron-icon {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.cat-chevron-btn[b-xnf872804s]  .chevron-icon--open                    { transform: rotate(0deg); }
.cat-chevron-btn[b-xnf872804s]  .chevron-icon:not(.chevron-icon--open) { transform: rotate(-90deg); }

/* ── Category thumbnail ──────────────────────────────────────────────────── */
.cat-card-thumb[b-xnf872804s] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
}

.cat-card-thumb-placeholder[b-xnf872804s] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 7px;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    opacity: 0.55;
    flex-shrink: 0;
}

.cat-card-thumb-placeholder svg[b-xnf872804s] {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* ── Category info ───────────────────────────────────────────────────────── */
.cat-card-info[b-xnf872804s] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.cat-card-name[b-xnf872804s] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cat-card-desc[b-xnf872804s] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Subcategory / item count chip (under description, like variant-chip) ── */
.sub-count-chip[b-xnf872804s] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-muted);
    white-space: nowrap;
    width: fit-content;
    margin-top: 0.2rem;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.action-btns[b-xnf872804s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.action-btns--hidden[b-xnf872804s] { visibility: hidden; pointer-events: none; }

.action-btn[b-xnf872804s] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

.action-btn svg[b-xnf872804s] { width: 0.9rem; height: 0.9rem; fill: currentColor; }

.action-order[b-xnf872804s] { color: var(--lp-muted); }
@media (hover: hover) { .action-order:hover[b-xnf872804s] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-add[b-xnf872804s] { color: var(--lp-muted); }
@media (hover: hover) { .action-add:hover[b-xnf872804s]  { background: rgba(245, 158, 11, 0.1); color: var(--lp-orange); } }

.action-edit[b-xnf872804s] { color: var(--lp-muted); }
@media (hover: hover) { .action-edit:hover[b-xnf872804s] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-delete[b-xnf872804s] { color: #f87171; }
@media (hover: hover) { .action-delete:hover[b-xnf872804s] { background: rgba(248, 113, 113, 0.1); } }

.action-btn:focus-visible[b-xnf872804s] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.action-btn:disabled[b-xnf872804s] { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

/* ── Subcategory accordion ───────────────────────────────────────────────── */
.cat-accordion[b-xnf872804s] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.cat-accordion--open[b-xnf872804s] { grid-template-rows: 1fr; }

.cat-accordion-inner[b-xnf872804s] { overflow: hidden; } /* mobile: see @media block at end of file */

.cat-accordion-empty[b-xnf872804s] {
    padding: 0.6rem 1rem 0.6rem 4.5rem;
    font-size: 0.82rem;
    color: var(--lp-muted);
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
}

/* ── Subcategory item row ────────────────────────────────────────────────── */
.sub-item[b-xnf872804s] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem 0.65rem 3rem;
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}

@media (hover: hover) { .sub-item:hover[b-xnf872804s] { background: color-mix(in srgb, var(--lp-bg-card2) 70%, var(--lp-hover-bg)); } }

.sub-item--selected[b-xnf872804s] {
    background: color-mix(in srgb, var(--lp-orange) 6%, var(--lp-bg-card2));
    box-shadow: inset 0 0 0 1px var(--lp-orange);
}

.sub-item--colored[b-xnf872804s] {
    border-left: 3px solid var(--card-color);
    background: color-mix(in srgb, var(--card-color) 9%, var(--lp-bg-card2));
}

.sub-item--colored.sub-item--selected[b-xnf872804s] {
    box-shadow: inset 0 0 0 1px var(--lp-orange);
    border-left-color: var(--lp-orange);
}

.sub-item--deleting[b-xnf872804s] {
    opacity: 0;
    transition: opacity 0.28s ease-out;
    pointer-events: none;
}

/* ── Subcategory indent ──────────────────────────────────────────────────── */
.sub-indent[b-xnf872804s] {
    width: 1.6rem;
    flex-shrink: 0;
}

/* ── Sub-chevron (inside sub-item) ──────────────────────────────────────── */
.sub-chevron-btn[b-xnf872804s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s, background 0.12s;
}
.sub-chevron-btn:hover[b-xnf872804s]         { color: var(--lp-text); background: var(--lp-hover-bg); }
.sub-chevron-btn:focus-visible[b-xnf872804s] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.sub-chevron-btn--invisible[b-xnf872804s]    { visibility: hidden; pointer-events: none; }

.sub-chevron-btn[b-xnf872804s]  .chevron-icon {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.sub-chevron-btn[b-xnf872804s]  .chevron-icon--open                    { transform: rotate(0deg); }
.sub-chevron-btn[b-xnf872804s]  .chevron-icon:not(.chevron-icon--open) { transform: rotate(-90deg); }

/* ── Smaller thumbnail variant (for items inside accordion) ─────────────── */
.cat-card-thumb--sm[b-xnf872804s] {
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
}
.cat-card-thumb-placeholder--sm[b-xnf872804s] {
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
}

/* ── Sub-section wrapper (subcategory header + items accordion) ──────────── */
.sub-section[b-xnf872804s] {
    display: flex;
    flex-direction: column;
}

/* ── Sub-item body accordion (items inside a subcategory) ────────────────── */
.sub-item-body[b-xnf872804s] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}
.sub-item-body--open[b-xnf872804s]  { grid-template-rows: 1fr; }
.sub-item-body-inner[b-xnf872804s]  { overflow: hidden; } /* mobile: see @media block at end of file */

/* ── Offer item row (inside category or subcategory accordion) ───────────── */
.offer-item[b-xnf872804s] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
@media (hover: hover) { .offer-item:hover[b-xnf872804s] { background: color-mix(in srgb, var(--lp-bg-card2) 70%, var(--lp-hover-bg)); } }

.offer-item--selected[b-xnf872804s] {
    background: color-mix(in srgb, var(--lp-orange) 6%, var(--lp-bg-card2));
    box-shadow: inset 0 0 0 1px var(--lp-orange);
}

/* ── Offer item indent ───────────────────────────────────────────────────── */
.offer-item-indent[b-xnf872804s] {
    width: 3.1rem;
    flex-shrink: 0;
}
.offer-item-indent--deep[b-xnf872804s] {
    width: 4.9rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.mods-spinner[b-xnf872804s] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin-b-xnf872804s 0.6s linear infinite;
}

@keyframes spin-b-xnf872804s { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Modal shared styles
   ══════════════════════════════════════════════════════════════════════════ */

dialog.cat-dialog[b-xnf872804s] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 420px;
    min-height: 560px;
    max-height: 96dvh;
    overflow: hidden;
    outline: none;
}

dialog.cat-dialog[open][b-xnf872804s] { display: flex; flex-direction: column; }

dialog.confirm-dialog[b-xnf872804s] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

/* ── Modal parts ─────────────────────────────────────────────────────────── */
.modal-header[b-xnf872804s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title-group[b-xnf872804s] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.modal-title[b-xnf872804s] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-subtitle[b-xnf872804s] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-close[b-xnf872804s] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
    flex-shrink: 0;
}

.modal-close svg[b-xnf872804s] { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-xnf872804s]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-xnf872804s] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-xnf872804s] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer[b-xnf872804s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field-group[b-xnf872804s] { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label[b-xnf872804s] { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }
.field-error[b-xnf872804s] { font-size: 0.78rem; color: #f87171; line-height: 1.3; }

.modal-input[b-xnf872804s] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-xnf872804s]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-xnf872804s]        { border-color: var(--lp-orange); }

/* ── Image drop zone ─────────────────────────────────────────────────────── */
.img-drop-zone[b-xnf872804s] {
    position: relative;
    border: 2px dashed var(--lp-border);
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.img-drop-zone--over[b-xnf872804s] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.05);
}

.img-drop-zone--filled[b-xnf872804s] {
    border-style: solid;
    border-color: var(--lp-border);
    min-height: 160px;
}

.drop-zone-img[b-xnf872804s] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.drop-zone-overlay[b-xnf872804s] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: 8px;
}

@media (hover: hover) { .img-drop-zone--filled:hover .drop-zone-overlay[b-xnf872804s] { opacity: 1; } }

.drop-zone-action-btn[b-xnf872804s] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.drop-zone-action-btn svg[b-xnf872804s] { width: 0.82rem; height: 0.82rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .drop-zone-action-btn:hover[b-xnf872804s] { background: rgba(255, 255, 255, 0.25); } }
.drop-zone-action-btn--danger:hover[b-xnf872804s] {
    background: rgba(239, 68, 68, 0.55);
    border-color: rgba(239, 68, 68, 0.6);
}

.drop-zone-empty[b-xnf872804s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.drop-zone-icon[b-xnf872804s] { width: 2rem; height: 2rem; fill: currentColor; color: var(--lp-muted); opacity: 0.6; margin-bottom: 0.25rem; }
.drop-zone-title[b-xnf872804s] { font-size: 0.875rem; font-weight: 500; color: var(--lp-text); }
.drop-zone-sub[b-xnf872804s]   { font-size: 0.82rem; color: var(--lp-muted); }
.drop-zone-browse[b-xnf872804s] { color: var(--lp-orange); text-decoration: underline; }
.drop-zone-hint[b-xnf872804s]  { font-size: 0.75rem; color: var(--lp-muted); opacity: 0.7; margin-top: 0.15rem; }

/* ── Error banner ────────────────────────────────────────────────────────── */
.modal-error-banner[b-xnf872804s] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

/* ── Modal buttons ───────────────────────────────────────────────────────── */
.modal-btn-cancel[b-xnf872804s] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) { .modal-btn-cancel:hover:not(:disabled)[b-xnf872804s] { background: var(--lp-hover-bg); border-color: var(--lp-muted); } }
.modal-btn-cancel:disabled[b-xnf872804s]             { opacity: 0.45; cursor: not-allowed; }
.modal-btn-cancel:focus-visible[b-xnf872804s]        { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-submit[b-xnf872804s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 96px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-xnf872804s]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-xnf872804s] { opacity: 0.7; }
.modal-btn-submit:disabled[b-xnf872804s]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-submit:focus-visible[b-xnf872804s]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-delete[b-xnf872804s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-xnf872804s]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-xnf872804s] { opacity: 0.7; }
.modal-btn-delete:disabled[b-xnf872804s]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-delete:focus-visible[b-xnf872804s]         { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.confirm-body[b-xnf872804s] { display: flex; align-items: flex-start; gap: 1rem; }

.confirm-icon[b-xnf872804s] {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon svg[b-xnf872804s] { width: 1rem; height: 1rem; fill: currentColor; }
.confirm-text[b-xnf872804s]    { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; }
.confirm-message[b-xnf872804s] { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; }
.confirm-sub[b-xnf872804s]     { margin: 0; font-size: 0.8rem; color: var(--lp-muted); }

/* ── Modal spinner ───────────────────────────────────────────────────────── */
.modal-spinner[b-xnf872804s] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-xnf872804s 0.6s linear infinite;
    flex-shrink: 0;
}

.modal-spinner--light[b-xnf872804s] { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }

/* ── Color picker ────────────────────────────────────────────────────────── */
.color-picker-row[b-xnf872804s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.color-circle[b-xnf872804s] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (hover: hover) {
    .color-circle:hover[b-xnf872804s] {
        transform: scale(1.2);
    }
}

.color-circle:focus-visible[b-xnf872804s] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.color-circle--selected[b-xnf872804s] {
    box-shadow: 0 0 0 2px var(--lp-bg-card), 0 0 0 4px var(--lp-orange);
}

.color-circle--none[b-xnf872804s] {
    background: var(--lp-bg-card2) !important;
    border-color: var(--lp-border);
    overflow: hidden;
}

.color-circle--none[b-xnf872804s]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1.5px;
    background: #f87171;
    transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 575.98px) {
    /* Single horizontal scroll at category accordion level only */
    .cat-accordion-inner[b-xnf872804s] {
        overflow-x: auto;
        overflow-y: hidden;
    }
    /* All rows and section wrappers share the same min-width so
       every element in the scroll container is identical in width —
       no gaps when scrolled horizontally. */
    .offer-item[b-xnf872804s],
    .sub-item[b-xnf872804s],
    .sub-section[b-xnf872804s],
    .cat-accordion-empty[b-xnf872804s] {
        min-width: 480px;
    }
}
/* /Pages/CatalogModifiers.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.offers-toolbar[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-input-wrap[b-1flk4wg3uh] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.search-input-wrap[b-1flk4wg3uh]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-1flk4wg3uh] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-1flk4wg3uh]::placeholder { color: var(--lp-muted); }
.search-input:focus[b-1flk4wg3uh]         { border-color: var(--lp-orange); }

.add-offer-btn[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-offer-btn + .add-offer-btn[b-1flk4wg3uh] { margin-left: 0; }

.add-offer-btn svg[b-1flk4wg3uh] { width: 0.95rem; height: 0.95rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .add-offer-btn:hover[b-1flk4wg3uh]  { opacity: 0.85; } }
.add-offer-btn:active[b-1flk4wg3uh] { opacity: 0.7; }
.add-offer-btn:focus-visible[b-1flk4wg3uh] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

.add-offer-btn--secondary[b-1flk4wg3uh] {
    background: var(--lp-bg-card);
    color: var(--lp-text);
    border: 1px solid var(--lp-border);
    margin-left: auto;
}

@media (hover: hover) { .add-offer-btn--secondary:hover[b-1flk4wg3uh]  { opacity: 1; background: var(--lp-hover-bg); border-color: var(--lp-muted); } }
.add-offer-btn--secondary:focus-visible[b-1flk4wg3uh] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

/* ── Card wrapper ────────────────────────────────────────────────────────── */
.offers-card[b-1flk4wg3uh] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow-x: auto;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.offers-table[b-1flk4wg3uh] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
}

.offers-table thead th[b-1flk4wg3uh] {
    padding: 0.85rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--lp-border);
}

.th-chevron[b-1flk4wg3uh]    { width: 2.5rem; padding-right: 0 !important; }
.th-offer-item[b-1flk4wg3uh] { min-width: 140px; }
.th-price[b-1flk4wg3uh]      { width: 130px; white-space: nowrap; }
.th-type[b-1flk4wg3uh]       { white-space: nowrap; width: 160px; }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.offers-table tbody tr.offer-row[b-1flk4wg3uh] {
    border-bottom: 1px solid var(--lp-border);
    cursor: pointer;
    transition: background 0.12s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

@media (hover: hover) { .offers-table tbody tr.offer-row:hover[b-1flk4wg3uh]       { background: var(--lp-hover-bg); } }
.offers-table tbody tr.offer-row--expanded[b-1flk4wg3uh]   { background: var(--lp-hover-bg); }

.offers-table tbody tr.offer-row--selected[b-1flk4wg3uh] {
    background: color-mix(in srgb, var(--lp-orange) 6%, var(--lp-bg-card)) !important;
    box-shadow: inset 3px 0 0 var(--lp-orange);
}

.offers-table--has-selection tbody tr.offer-row:not(.offer-row--selected)[b-1flk4wg3uh] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.4px);
}


.offers-table tbody td[b-1flk4wg3uh] {
    padding: 0.9rem 1.1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--lp-text);
}

.td-empty[b-1flk4wg3uh] {
    text-align: center;
    color: var(--lp-muted);
    padding: 3rem 1rem !important;
    font-size: 0.875rem;
}

.table-state[b-1flk4wg3uh] {
    padding: 3rem 1.5rem;
    text-align: center;
}

/* ── Chevron cell ────────────────────────────────────────────────────────── */
.td-chevron[b-1flk4wg3uh] { width: 2.5rem; padding-right: 0 !important; }

.chevron-btn[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s, background 0.12s;
}

@media (hover: hover) { .chevron-btn:hover[b-1flk4wg3uh]          { color: var(--lp-text); background: var(--lp-hover-bg); } }
.chevron-btn:focus-visible[b-1flk4wg3uh]  { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.chevron-btn--invisible[b-1flk4wg3uh]     { visibility: hidden; pointer-events: none; }

.chevron-btn[b-1flk4wg3uh]  .chevron-icon {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.chevron-btn[b-1flk4wg3uh]  .chevron-icon--open              { transform: rotate(0deg); }
.chevron-btn[b-1flk4wg3uh]  .chevron-icon:not(.chevron-icon--open) { transform: rotate(-90deg); }

/* ── Item cell ───────────────────────────────────────────────────────────── */
.td-item[b-1flk4wg3uh] {
    width: 100%;
    max-width: 0;
    overflow: hidden;
}

.item-info[b-1flk4wg3uh] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.item-name[b-1flk4wg3uh] {
    font-weight: 600;
    color: var(--lp-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-desc[b-1flk4wg3uh] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modifier-count-chip[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #06b6d4;
    width: fit-content;
    white-space: nowrap;
}

/* ── Offer item name cell ────────────────────────────────────────────────── */
.td-offer-item[b-1flk4wg3uh] { min-width: 140px; }

.offer-item-name[b-1flk4wg3uh] {
    font-size: 0.82rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Price cell ──────────────────────────────────────────────────────────── */
.price-cell[b-1flk4wg3uh]  { font-weight: 600; white-space: nowrap; min-width: 70px; transition: opacity 0.15s ease; }
.no-value[b-1flk4wg3uh]    { color: var(--lp-muted); font-size: 0.82rem; transition: opacity 0.15s ease; }
.price-stack[b-1flk4wg3uh]     { display: flex; flex-direction: column; gap: 0.1rem; }
.price-range[b-1flk4wg3uh]     { display: inline-flex; align-items: center; gap: 0.2rem; }
.price-range-sep[b-1flk4wg3uh] { font-weight: 400; color: var(--lp-muted); font-size: 0.8rem; }
.price-tax[b-1flk4wg3uh]       { font-size: 0.73rem; font-weight: 400; color: var(--lp-muted); }

.offer-row--selected .price-cell[b-1flk4wg3uh] { opacity: 0; }

/* ── Type cell ───────────────────────────────────────────────────────────── */
.td-type[b-1flk4wg3uh] { white-space: nowrap; position: relative; }

.td-type .action-btns[b-1flk4wg3uh] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    padding-left: 1.25rem;
    padding-right: 0.75rem;
}

.offer-row--selected .td-type .action-btns[b-1flk4wg3uh] {
    opacity: 1;
    pointer-events: auto;
}

.type-cell[b-1flk4wg3uh] { transition: opacity 0.15s ease; }
.offer-row--selected .type-cell[b-1flk4wg3uh] { opacity: 0; }

.type-cell[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── no-value ────────────────────────────────────────────────────────────── */
.no-value[b-1flk4wg3uh] { color: var(--lp-muted); font-size: 0.82rem; }


.action-btns[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

.action-btn[b-1flk4wg3uh] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

.action-btn svg[b-1flk4wg3uh] { width: 0.9rem; height: 0.9rem; fill: currentColor; }

.action-manage[b-1flk4wg3uh] { color: var(--lp-muted); }
@media (hover: hover) { .action-manage:hover[b-1flk4wg3uh] { background: rgba(168, 85, 247, 0.1); color: #a855f7; } }

.action-order[b-1flk4wg3uh] { color: var(--lp-muted); }
@media (hover: hover) { .action-order:hover[b-1flk4wg3uh] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-edit[b-1flk4wg3uh] { color: var(--lp-muted); }
@media (hover: hover) { .action-edit:hover[b-1flk4wg3uh] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-delete[b-1flk4wg3uh] { color: #f87171; }
@media (hover: hover) { .action-delete:hover[b-1flk4wg3uh] { background: rgba(248, 113, 113, 0.1); } }

.action-btn:focus-visible[b-1flk4wg3uh] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.action-btn:disabled[b-1flk4wg3uh] { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

/* ── Measurement ─────────────────────────────────────────────────────────── */
.measurement-value[b-1flk4wg3uh] { font-weight: 600; color: var(--lp-text); margin-right: 0.2rem; }
.measurement-unit[b-1flk4wg3uh]  { font-size: 0.78rem; color: var(--lp-muted); }

/* ── Status badge ────────────────────────────────────────────────────────── */
.status-badge[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid;
    width: fit-content;
    white-space: nowrap;
}

.status-active[b-1flk4wg3uh]   { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.status-inactive[b-1flk4wg3uh] { color: var(--lp-muted); border-color: var(--lp-border); background: transparent; }

/* ── Modifier type badge ─────────────────────────────────────────────────── */
.mod-type-badge[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

.mod-type-badge--addition[b-1flk4wg3uh]     { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.mod-type-badge--removal[b-1flk4wg3uh]      { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.mod-type-badge--substitution[b-1flk4wg3uh] { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }

/* ── Selection hint ──────────────────────────────────────────────────────── */
.sel-hint[b-1flk4wg3uh] { font-size: 0.75rem; color: var(--lp-muted); }

/* ── Accordion wrapper row ───────────────────────────────────────────────── */
.variant-accordion-tr[b-1flk4wg3uh]       { border: none; }
@media (hover: hover) { .variant-accordion-tr:hover[b-1flk4wg3uh] { background: none !important; } }

.variant-accordion-td[b-1flk4wg3uh] { padding: 0 !important; border: none !important; }

.variant-accordion[b-1flk4wg3uh] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.variant-accordion--open[b-1flk4wg3uh] { grid-template-rows: 1fr; }

.variant-accordion-inner[b-1flk4wg3uh] { overflow: hidden; }

/* ── Group modifier sub-rows ─────────────────────────────────────────────── */
.variant-row[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
    transition: background 0.12s;
    padding-left: 1.5rem;
}

@media (hover: hover) { .variant-row:hover[b-1flk4wg3uh] { background: var(--lp-hover-bg); } }

.vr-chevron[b-1flk4wg3uh]    { width: 2.5rem; flex-shrink: 0; padding: 0.55rem 0 0.55rem 1.1rem; }
.vr-item[b-1flk4wg3uh]       { flex: 1; min-width: 0; overflow: hidden; padding: 0.55rem 1.1rem; }
.vr-offer-item[b-1flk4wg3uh] { min-width: 140px; flex-shrink: 0; padding: 0.55rem 1.1rem; }
.vr-price[b-1flk4wg3uh]      { width: 130px; flex-shrink: 0; padding: 0.55rem 1.1rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.vr-type[b-1flk4wg3uh]       { width: 160px; flex-shrink: 0; padding: 0.55rem 1.1rem; white-space: nowrap; }
.vr-actions[b-1flk4wg3uh]    { flex-shrink: 0; padding: 0.55rem 1.1rem; }

/* ── Empty group message ─────────────────────────────────────────────────── */
.group-empty-row[b-1flk4wg3uh] {
    padding: 0.75rem 1.1rem 0.75rem calc(2.5rem + 1.1rem);
    font-size: 0.82rem;
    color: var(--lp-muted);
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.mods-spinner[b-1flk4wg3uh] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   Modal shared styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dialogs ─────────────────────────────────────────────────────────────── */
dialog.offer-dialog[b-1flk4wg3uh] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 420px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.offer-dialog[open][b-1flk4wg3uh] { display: flex; flex-direction: column; }

dialog.variants-dialog[b-1flk4wg3uh] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 520px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.variants-dialog[open][b-1flk4wg3uh] { display: flex; flex-direction: column; }

dialog.confirm-dialog[b-1flk4wg3uh] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

/* ── Modal parts ─────────────────────────────────────────────────────────── */
.modal-header[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title[b-1flk4wg3uh] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-1flk4wg3uh] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
    flex-shrink: 0;
}

.modal-close svg[b-1flk4wg3uh] { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-1flk4wg3uh]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-1flk4wg3uh] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-1flk4wg3uh] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.modal-footer[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.75rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field-group[b-1flk4wg3uh]  { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label[b-1flk4wg3uh]  { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.field-label-hint[b-1flk4wg3uh] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lp-muted);
}

.field-row[b-1flk4wg3uh] { display: flex; gap: 0.75rem; }
.field-row .field-group[b-1flk4wg3uh] { flex: 1; min-width: 0; }

.modal-input[b-1flk4wg3uh] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-1flk4wg3uh]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-1flk4wg3uh]        { border-color: var(--lp-orange); }

/* ── Number picker ───────────────────────────────────────────────────────── */
.num-picker[b-1flk4wg3uh] { position: relative; }

.num-input[b-1flk4wg3uh] {
    padding-right: 2rem !important;
    -moz-appearance: textfield;
}
.num-input[b-1flk4wg3uh]::-webkit-inner-spin-button,
.num-input[b-1flk4wg3uh]::-webkit-outer-spin-button { -webkit-appearance: none; }

.num-spinners[b-1flk4wg3uh] {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.num-spin-btn[b-1flk4wg3uh] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.num-spin-btn:first-child[b-1flk4wg3uh] { border-radius: 0 7px 0 0; border-bottom: 1px solid rgba(0,0,0,0.15); }
.num-spin-btn:last-child[b-1flk4wg3uh]  { border-radius: 0 0 7px 0; }
.num-spin-btn svg[b-1flk4wg3uh]         { width: 0.5rem; height: 0.5rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .num-spin-btn:hover[b-1flk4wg3uh]       { opacity: 0.8; } }
.num-spin-btn:active[b-1flk4wg3uh]      { opacity: 0.65; }

/* ── Modal select (dropdown picker) ─────────────────────────────────────── */
.modal-select[b-1flk4wg3uh] { position: relative; }

.ui-select-trigger[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.ui-select--open .ui-select-trigger[b-1flk4wg3uh],
.ui-select-trigger:focus-visible[b-1flk4wg3uh] { border-color: var(--lp-orange); }

.ui-select-value[b-1flk4wg3uh]        { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-select-placeholder[b-1flk4wg3uh]  { color: var(--lp-muted); }

.ui-select-trigger[b-1flk4wg3uh]  .ui-select-chevron {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
    flex-shrink: 0;
    color: var(--lp-muted);
    transition: transform 0.18s;
}

.ui-select--open .ui-select-trigger[b-1flk4wg3uh]  .ui-select-chevron { transform: rotate(180deg); }

.ui-select-backdrop[b-1flk4wg3uh] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.ui-select-dropdown[b-1flk4wg3uh] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    max-height: 220px;
    overflow-y: auto;
}

.ui-select-option[b-1flk4wg3uh] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.875rem;
    background: none;
    border: none;
    color: var(--lp-text);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: background 0.12s;
    white-space: nowrap;
}

.ui-select-option:hover[b-1flk4wg3uh],
.ui-select-option:focus-visible[b-1flk4wg3uh] { background: rgba(245, 158, 11, 0.1); color: var(--lp-orange); outline: none; }
.ui-select-option--selected[b-1flk4wg3uh]     { color: var(--lp-orange); }

.ui-select-option[b-1flk4wg3uh]  .option-check { width: 0.85rem; height: 0.85rem; flex-shrink: 0; fill: currentColor; }
span.option-check[b-1flk4wg3uh] { display: inline-block; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.toggle-field[b-1flk4wg3uh] { flex-direction: row !important; align-items: center; justify-content: space-between; }


/* ── Error banner ────────────────────────────────────────────────────────── */
.modal-error-banner[b-1flk4wg3uh] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

/* ── Modal buttons ───────────────────────────────────────────────────────── */
.modal-btn-cancel[b-1flk4wg3uh] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) { .modal-btn-cancel:hover:not(:disabled)[b-1flk4wg3uh] { background: var(--lp-hover-bg); border-color: var(--lp-muted); } }
.modal-btn-cancel:disabled[b-1flk4wg3uh]             { opacity: 0.45; cursor: not-allowed; }
.modal-btn-cancel:focus-visible[b-1flk4wg3uh]        { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-submit[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-1flk4wg3uh]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-1flk4wg3uh] { opacity: 0.7; }
.modal-btn-submit:disabled[b-1flk4wg3uh]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-submit:focus-visible[b-1flk4wg3uh]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-delete[b-1flk4wg3uh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-1flk4wg3uh]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-1flk4wg3uh] { opacity: 0.7; }
.modal-btn-delete:disabled[b-1flk4wg3uh]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-delete:focus-visible[b-1flk4wg3uh]         { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── Modal spinner ───────────────────────────────────────────────────────── */
.modal-spinner[b-1flk4wg3uh] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

.modal-spinner--light[b-1flk4wg3uh] { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }

/* ── Variants dialog body ────────────────────────────────────────────────── */
.vd-body[b-1flk4wg3uh] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.vd-empty[b-1flk4wg3uh] { font-size: 0.875rem; color: var(--lp-muted); padding: 0.5rem 0; }

.vd-row[b-1flk4wg3uh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
}

.vd-row-name[b-1flk4wg3uh] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vd-row-price[b-1flk4wg3uh]    { font-size: 0.875rem; white-space: nowrap; flex-shrink: 0; text-align: right; margin-left: auto; transition: opacity 0.15s ease; }
.om-measurement[b-1flk4wg3uh]  { font-size: 0.78rem; color: var(--lp-muted); white-space: nowrap; flex-shrink: 0; margin-left: 0.25rem; transition: opacity 0.15s ease; }
.vd-row--selected .om-measurement[b-1flk4wg3uh] { opacity: 0; }
.vd-row-type[b-1flk4wg3uh]     { flex-shrink: 0; transition: opacity 0.15s ease; }
.vd-row-default[b-1flk4wg3uh]  { flex-shrink: 0; min-width: 56px; transition: opacity 0.15s ease; }
.vd-row-actions[b-1flk4wg3uh]  { display: flex; gap: 0.15rem; flex-shrink: 0; overflow: hidden; max-width: 9rem; transition: max-width 0.2s ease, opacity 0.15s; }

.vd-row--selected .vd-row-price[b-1flk4wg3uh],
.vd-row--selected .vd-row-type[b-1flk4wg3uh],
.vd-row--selected .vd-row-default[b-1flk4wg3uh] { opacity: 0; }

/* ── Confirm dialog parts ────────────────────────────────────────────────── */
.confirm-body[b-1flk4wg3uh] { display: flex; align-items: flex-start; gap: 1rem; }

.confirm-icon[b-1flk4wg3uh] {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon svg[b-1flk4wg3uh] { width: 1rem; height: 1rem; fill: currentColor; }

.confirm-text[b-1flk4wg3uh]    { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; }
.confirm-message[b-1flk4wg3uh] { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; }
.confirm-sub[b-1flk4wg3uh]     { margin: 0; font-size: 0.8rem; color: var(--lp-muted); }

/* ── Details title wrap ──────────────────────────────────────────────────── */
.details-title-wrap[b-1flk4wg3uh] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }

/* ── Manage dialog — selection / blur / highlight ────────────────────────── */
.action-btns--hidden[b-1flk4wg3uh] { max-width: 0 !important; opacity: 0; pointer-events: none; }

.vd-row[b-1flk4wg3uh] {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s, filter 0.2s, background 0.12s;
}

.vd-row--selected[b-1flk4wg3uh] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
    background: color-mix(in srgb, var(--lp-orange) 5%, var(--lp-bg-card2));
}

.vd-body--has-selection .vd-row:not(.vd-row--selected):not(.vd-row--moving)[b-1flk4wg3uh] {
    opacity: 0.55;
    transform: scale(0.985);
    filter: blur(0.4px);
}

@media (max-width: 575.98px) {
    /* Row 1: Add Group + Add Modifier buttons (right-aligned) */
    /* Row 2: search bar (full width) */
    .offers-toolbar[b-1flk4wg3uh] { flex-wrap: wrap; gap: 0.5rem; }
    .search-input-wrap[b-1flk4wg3uh] {
        flex: 0 0 100%;  /* override desktop flex:1 so width takes effect */
        max-width: none;
        order: 1;        /* push to second row */
    }
    .add-offer-btn[b-1flk4wg3uh]            { margin-left: 0; }
    .add-offer-btn--secondary[b-1flk4wg3uh] { margin-left: auto; } /* push both buttons to the right */

    /* Accordion inner: allow parent overflow-x:auto to scroll freely on mobile */
    .variant-accordion-inner[b-1flk4wg3uh] { overflow-x: visible; overflow-y: clip; }
}
/* /Pages/CatalogOffers.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.offers-toolbar[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Controls strip (search + filters + view toggle) sits after Add button */
.offers-controls[b-a5dxszn7xb] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-input-wrap[b-a5dxszn7xb] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.search-input-wrap[b-a5dxszn7xb]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-a5dxszn7xb] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-a5dxszn7xb]::placeholder { color: var(--lp-muted); }
.search-input:focus[b-a5dxszn7xb]         { border-color: var(--lp-orange); }

/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle-btn[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    padding: 0;
}

@media (hover: hover) {
    .view-toggle-btn:hover:not(.view-toggle-btn--active)[b-a5dxszn7xb] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.view-toggle-btn--active[b-a5dxszn7xb] {
    background: var(--lp-orange);
    color: #000;
}

.view-toggle-btn svg[b-a5dxszn7xb] {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

/* ── Category filter dropdown ────────────────────────────────────────────── */
.cat-filter[b-a5dxszn7xb] {
    position: relative;
    flex-shrink: 0;
}

/* trigger override: card bg + min-width for filter context */
.cat-filter .ui-select-trigger[b-a5dxszn7xb] {
    min-width: 11rem;
    background: var(--lp-bg-card);
}

.ui-select-dropdown[b-a5dxszn7xb] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.ui-select-option[b-a5dxszn7xb] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.875rem;
    background: none;
    border: none;
    color: var(--lp-text);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: background 0.12s;
    white-space: nowrap;
}

.ui-select-option:hover[b-a5dxszn7xb],
.ui-select-option:focus-visible[b-a5dxszn7xb] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--lp-orange);
    outline: none;
}

.ui-select-option--selected[b-a5dxszn7xb] { color: var(--lp-orange); }

.ui-select-option[b-a5dxszn7xb]  .option-check {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    fill: currentColor;
}

span.option-check[b-a5dxszn7xb] { display: inline-block; }

.add-offer-btn[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-offer-btn svg[b-a5dxszn7xb] { width: 0.95rem; height: 0.95rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .add-offer-btn:hover[b-a5dxszn7xb]  { opacity: 0.85; } }
.add-offer-btn:active[b-a5dxszn7xb] { opacity: 0.7; }
.add-offer-btn:focus-visible[b-a5dxszn7xb] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination-bar[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--lp-border);
    flex-wrap: wrap;
}

.page-btn[b-a5dxszn7xb] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    background: var(--lp-bg-card2);
    color: var(--lp-text);
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1;
}

@media (hover: hover) { .page-btn:hover:not(:disabled)[b-a5dxszn7xb] { border-color: var(--lp-orange); color: var(--lp-orange); } }
.page-btn:focus-visible[b-a5dxszn7xb]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.page-btn:disabled[b-a5dxszn7xb]              { opacity: 0.35; cursor: default; }

.page-btn--active[b-a5dxszn7xb] {
    background: var(--lp-orange);
    border-color: var(--lp-orange);
    color: #000;
    font-weight: 600;
}
@media (hover: hover) { .page-btn--active:hover:not(:disabled)[b-a5dxszn7xb] { color: #000; } }

.page-btn--nav[b-a5dxszn7xb] { min-width: 2rem; }

.page-ellipsis[b-a5dxszn7xb] {
    min-width: 1.5rem;
    text-align: center;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 2rem;
    user-select: none;
}

.page-info[b-a5dxszn7xb] {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* Top row: view-toggle + add button. Second row: scrollable controls */
    .offers-toolbar[b-a5dxszn7xb] {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    /* Controls fill full width and wrap to second row */
    .offers-controls[b-a5dxszn7xb] {
        flex: none;
        width: 100%;
        order: 1;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.5rem;
    }
    .offers-controls[b-a5dxszn7xb]::-webkit-scrollbar { display: none; }
    /* Add button pushed to the right of the top row */
    .add-offer-btn[b-a5dxszn7xb] { margin-left: auto; }
    /* Search: fixed width inside scroll strip, doesn't grow */
    .offers-controls .search-input-wrap[b-a5dxszn7xb] {
        flex: 0 0 180px;
        max-width: none;
    }
}

/* ── Card wrapper ────────────────────────────────────────────────────────── */
.offers-card[b-a5dxszn7xb] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow-x: auto;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.offers-table[b-a5dxszn7xb] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.col-chevron[b-a5dxszn7xb]     { width: 40px; }
.col-item[b-a5dxszn7xb]        { min-width: 260px; }
.col-category[b-a5dxszn7xb]    { width: 150px; }
.col-measurement[b-a5dxszn7xb] { width: 110px; }
.col-price[b-a5dxszn7xb]       { width: 140px; }
.col-status[b-a5dxszn7xb]      { width: 120px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.offers-table thead th[b-a5dxszn7xb] {
    padding: 0.85rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--lp-border);
}

.th-chevron[b-a5dxszn7xb] {
    width: 2.5rem;
    padding-right: 0 !important;
}

.th-inner[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    outline: none;
}

@media (hover: hover) { .th-inner:hover[b-a5dxszn7xb] { color: var(--lp-text); } }

.th-inner:focus-visible[b-a5dxszn7xb] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── Sort icons ──────────────────────────────────────────────────────────── */
.sort-icon[b-a5dxszn7xb] {
    width: 0.7rem;
    height: 0.7rem;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s;
}

.sort-icon--active[b-a5dxszn7xb] {
    opacity: 1;
    color: var(--lp-orange);
}

/* ── Rows ────────────────────────────────────────────────────────────────── */
.offers-table tbody tr.offer-row[b-a5dxszn7xb] {
    border-bottom: 1px solid var(--lp-border);
    cursor: pointer;
    transition: background 0.12s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

.offers-table tbody tr.offer-row:hover[b-a5dxszn7xb] {
    background: var(--lp-hover-bg);
}

.offers-table tbody tr.offer-row--expanded[b-a5dxszn7xb] {
    background: var(--lp-hover-bg);
}

.offers-table tbody tr.offer-row--selected[b-a5dxszn7xb] {
    background: color-mix(in srgb, var(--lp-orange) 6%, var(--lp-bg-card)) !important;
    box-shadow: inset 3px 0 0 var(--lp-orange);
}

.offers-table--has-selection tbody tr.offer-row:not(.offer-row--selected)[b-a5dxszn7xb] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.4px);
}

.offers-table tbody td[b-a5dxszn7xb] {
    padding: 0.9rem 1.1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--lp-text);
}

.td-empty[b-a5dxszn7xb] {
    text-align: center;
    color: var(--lp-muted);
    padding: 3rem 1rem !important;
    font-size: 0.875rem;
}

.table-state[b-a5dxszn7xb] {
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Chevron cell ────────────────────────────────────────────────────────── */
.td-chevron[b-a5dxszn7xb] {
    width: 40px;
    padding-right: 0 !important;
}

.chevron-btn[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s, background 0.12s;
}

.chevron-btn:hover[b-a5dxszn7xb] { color: var(--lp-text); background: var(--lp-hover-bg); }
.chevron-btn:focus-visible[b-a5dxszn7xb] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.chevron-btn--invisible[b-a5dxszn7xb]    { visibility: hidden; pointer-events: none; }

.chevron-btn[b-a5dxszn7xb]  .chevron-icon {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.chevron-btn[b-a5dxszn7xb]  .chevron-icon--open        { transform: rotate(0deg); }
.chevron-btn[b-a5dxszn7xb]  .chevron-icon:not(.chevron-icon--open) { transform: rotate(-90deg); }

/* ── Item (title) cell ───────────────────────────────────────────────────── */
.td-item[b-a5dxszn7xb] {
    width: 100%;
    max-width: 0;
    overflow: visible;
}

.item-cell[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
}


.item-thumb[b-a5dxszn7xb] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
}

.item-thumb--placeholder[b-a5dxszn7xb] {
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    opacity: 0.6;
}

.item-thumb--placeholder svg[b-a5dxszn7xb] {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.item-info[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.item-name[b-a5dxszn7xb] {
    font-weight: 600;
    color: var(--lp-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-desc[b-a5dxszn7xb] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Category cell ───────────────────────────────────────────────────────── */
.category-cell[b-a5dxszn7xb] {
    min-width: 130px;
}

.cat-stack[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cat-label[b-a5dxszn7xb] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lp-text);
    white-space: nowrap;
    line-height: 1.3;
}

.subcat-label[b-a5dxszn7xb] {
    font-size: 0.76rem;
    color: var(--lp-muted);
    white-space: nowrap;
    line-height: 1.3;
}

.no-value[b-a5dxszn7xb] {
    color: var(--lp-muted);
    font-size: 0.82rem;
}

/* ── Price cell ──────────────────────────────────────────────────────────── */
.price-cell[b-a5dxszn7xb] {
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
}

.price-stack[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.price-range[b-a5dxszn7xb] { display: inline-flex; align-items: center; gap: 0.2rem; }

.price-range-sep[b-a5dxszn7xb] {
    font-weight: 400;
    color: var(--lp-muted);
    font-size: 0.8rem;
}

.price-tax[b-a5dxszn7xb] {
    font-size: 0.73rem;
    font-weight: 400;
    color: var(--lp-muted);
}

/* ── Measurement cell ────────────────────────────────────────────────────── */
.measurement-cell[b-a5dxszn7xb] {
    white-space: nowrap;
    min-width: 90px;
}

.measurement-value[b-a5dxszn7xb] {
    font-weight: 600;
    color: var(--lp-text);
    margin-right: 0.2rem;
}

.measurement-unit[b-a5dxszn7xb] {
    font-size: 0.78rem;
    color: var(--lp-muted);
}

/* ── Status cell ─────────────────────────────────────────────────────────── */
.status-cell[b-a5dxszn7xb] {
    white-space: nowrap;
    position: relative;
}

.category-cell[b-a5dxszn7xb],
.price-cell[b-a5dxszn7xb],
.measurement-cell[b-a5dxszn7xb],
.status-cell .status-badge[b-a5dxszn7xb] {
    transition: opacity 0.15s ease;
}

.offer-row--selected .category-cell[b-a5dxszn7xb],
.offer-row--selected .price-cell[b-a5dxszn7xb],
.offer-row--selected .measurement-cell[b-a5dxszn7xb],
.offer-row--selected .status-cell .status-badge[b-a5dxszn7xb] {
    opacity: 0;
}

.status-cell .action-btns[b-a5dxszn7xb] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    padding-left: 1.25rem;
    padding-right: 0.75rem;
}

.offer-row--selected .status-cell .action-btns[b-a5dxszn7xb] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Status badge ────────────────────────────────────────────────────────── */
.status-badge[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid;
    width: fit-content;
    white-space: nowrap;
}

.status-active[b-a5dxszn7xb] {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(74, 222, 128, 0.08);
}

.status-inactive[b-a5dxszn7xb] {
    color: var(--lp-muted);
    border-color: var(--lp-border);
    background: transparent;
}

.status-blocked[b-a5dxszn7xb] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
}

.status-archived[b-a5dxszn7xb] {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
}

/* ── Variant chip ────────────────────────────────────────────────────────── */
.variant-chip[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-muted);
    width: fit-content;
    white-space: nowrap;
}

.item-chips[b-a5dxszn7xb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.modifier-chip[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #06b6d4;
    width: fit-content;
    white-space: nowrap;
}

.allergen-chip[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    width: fit-content;
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.action-btns[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

.action-btn[b-a5dxszn7xb] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

.action-btn svg[b-a5dxszn7xb] { width: 0.9rem; height: 0.9rem; fill: currentColor; }

.action-view[b-a5dxszn7xb] { color: var(--lp-muted); }
@media (hover: hover) { .action-view:hover[b-a5dxszn7xb] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-variants[b-a5dxszn7xb] { color: var(--lp-muted); }
@media (hover: hover) { .action-variants:hover[b-a5dxszn7xb] { background: rgba(168, 85, 247, 0.1); color: #a855f7; } }

.action-manage[b-a5dxszn7xb] { color: var(--lp-muted); }
@media (hover: hover) { .action-manage:hover[b-a5dxszn7xb] { background: rgba(168, 85, 247, 0.1); color: #a855f7; } }

.action-order[b-a5dxszn7xb] { color: var(--lp-muted); }
@media (hover: hover) { .action-order:hover[b-a5dxszn7xb] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-edit[b-a5dxszn7xb] { color: var(--lp-muted); }
@media (hover: hover) { .action-edit:hover[b-a5dxszn7xb] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.action-delete[b-a5dxszn7xb] { color: #f87171; }
@media (hover: hover) { .action-delete:hover[b-a5dxszn7xb] { background: rgba(248, 113, 113, 0.1); } }

.action-btn:focus-visible[b-a5dxszn7xb] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.action-btn:disabled[b-a5dxszn7xb] { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

/* ── Variant rows ────────────────────────────────────────────────────────── */
/* ── Variant accordion wrapper row ───────────────────────────────────────── */
.variant-accordion-tr[b-a5dxszn7xb] { border: none; }
@media (hover: hover) { .variant-accordion-tr:hover[b-a5dxszn7xb] { background: none; } }

.variant-accordion-td[b-a5dxszn7xb] {
    padding: 0 !important;
    border: none !important;
}

.variant-accordion[b-a5dxszn7xb] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.variant-accordion--open[b-a5dxszn7xb] {
    grid-template-rows: 1fr;
}

.variant-accordion-inner[b-a5dxszn7xb] {
    overflow: hidden;
}

/* ── Variant item row (flex, matches table column widths) ────────────────── */
.variant-row[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--lp-bg-card2);
    border-top: 1px solid var(--lp-border);
    cursor: pointer;
    transition: background 0.12s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

.variant-row:hover[b-a5dxszn7xb] { background: var(--lp-hover-bg); }

.variant-row--selected[b-a5dxszn7xb] {
    background: color-mix(in srgb, var(--lp-orange) 6%, var(--lp-bg-card)) !important;
    box-shadow: inset 3px 0 0 var(--lp-orange);
}

.variant-accordion-inner--has-selection .variant-row:not(.variant-row--selected)[b-a5dxszn7xb] {
    opacity: 0.55;
    transform: scale(0.99);
    filter: blur(0.4px);
}

.variant-row .action-btns[b-a5dxszn7xb] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.variant-row--selected .action-btns[b-a5dxszn7xb] {
    opacity: 1;
    pointer-events: auto;
}

.vr-chevron[b-a5dxszn7xb]      { width: 40px; flex-shrink: 0; padding: 0.55rem 0 0.55rem 1.1rem; }
.vr-item[b-a5dxszn7xb]         { flex: 1; min-width: 0; overflow: hidden; padding: 0.55rem 1.1rem; }
.vr-category[b-a5dxszn7xb]     { width: 150px; flex-shrink: 0; }
.vr-measurement[b-a5dxszn7xb]  { width: 110px; flex-shrink: 0; padding: 0.55rem 1.1rem; white-space: nowrap; }
.vr-price[b-a5dxszn7xb]        { width: 140px; flex-shrink: 0; padding: 0.55rem 1.1rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.vr-status[b-a5dxszn7xb]       { width: 120px; flex-shrink: 0; padding: 0.55rem 1.1rem; }
.vr-actions[b-a5dxszn7xb]      { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 0.55rem 0.75rem; }

.variant-row .item-info[b-a5dxszn7xb] { padding-left: calc(2.6rem + 0.75rem); }


/* ── Image drop zone ─────────────────────────────────────────────────────── */
.img-drop-zone[b-a5dxszn7xb] {
    position: relative;
    border: 2px dashed var(--lp-border);
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.img-drop-zone--over[b-a5dxszn7xb] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.05);
}

.img-drop-zone--filled[b-a5dxszn7xb] {
    border-style: solid;
    border-color: var(--lp-border);
    min-height: 160px;
}

.drop-zone-img[b-a5dxszn7xb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.drop-zone-overlay[b-a5dxszn7xb] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: 8px;
}

@media (hover: hover) { .img-drop-zone--filled:hover .drop-zone-overlay[b-a5dxszn7xb] { opacity: 1; } }

.drop-zone-action-btn[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.drop-zone-action-btn svg[b-a5dxszn7xb] { width: 0.82rem; height: 0.82rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .drop-zone-action-btn:hover[b-a5dxszn7xb] { background: rgba(255, 255, 255, 0.25); } }
.drop-zone-action-btn--danger:hover[b-a5dxszn7xb] {
    background: rgba(239, 68, 68, 0.55);
    border-color: rgba(239, 68, 68, 0.6);
}

.drop-zone-empty[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.drop-zone-icon[b-a5dxszn7xb] { width: 2rem; height: 2rem; fill: currentColor; color: var(--lp-muted); opacity: 0.6; margin-bottom: 0.25rem; }
.drop-zone-title[b-a5dxszn7xb] { font-size: 0.875rem; font-weight: 500; color: var(--lp-text); }
.drop-zone-sub[b-a5dxszn7xb]   { font-size: 0.82rem; color: var(--lp-muted); }
.drop-zone-browse[b-a5dxszn7xb] { color: var(--lp-orange); text-decoration: underline; }
.drop-zone-hint[b-a5dxszn7xb]  { font-size: 0.75rem; color: var(--lp-muted); opacity: 0.7; margin-top: 0.15rem; }

.field-error[b-a5dxszn7xb] { font-size: 0.78rem; color: #f87171; line-height: 1.3; }

/* ── Side-by-side field row ──────────────────────────────────────────────── */
.field-row[b-a5dxszn7xb] {
    display: flex;
    gap: 0.75rem;
}

.field-row--top[b-a5dxszn7xb] { align-items: flex-start; }

.field-row .field-group[b-a5dxszn7xb] {
    flex: 1;
    min-width: 0;
}

.field-group--narrow[b-a5dxszn7xb] {
    flex: 0 0 6.5rem !important;
}

.field-group--fav[b-a5dxszn7xb] {
    flex: 0 0 auto !important;
}

.field-group--status[b-a5dxszn7xb] {
    flex: 0 0 7.5rem !important;
}


/* ── Textarea (Description field) ───────────────────────────────────────── */
textarea.modal-input[b-a5dxszn7xb] {
    resize: none;
    height: 2.5rem;
    min-height: 2.5rem;
    overflow: hidden;
    line-height: 1.45;
    transition: height 0.2s ease;
}

textarea.modal-input:focus[b-a5dxszn7xb] {
    height: 6rem;
    overflow-y: auto;
}


/* ── Modal custom select (category / subcategory pickers) ────────────────── */
.modal-select[b-a5dxszn7xb] {
    position: relative;
}


/* ── Edit / Add dialog ───────────────────────────────────────────────────── */
dialog.offer-dialog[b-a5dxszn7xb] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 504px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.offer-dialog[open][b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
}

/* ── Details dialog ──────────────────────────────────────────────────────── */
dialog.details-dialog[b-a5dxszn7xb] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 480px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.details-dialog[open][b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
}

/* ── Variants dialog ─────────────────────────────────────────────────────── */
dialog.variants-dialog[b-a5dxszn7xb] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 560px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.variants-dialog[open][b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
}

.vd-body[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.vd-empty[b-a5dxszn7xb] {
    font-size: 0.875rem;
    color: var(--lp-muted);
    padding: 0.5rem 0;
}

.vd-row[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s, filter 0.2s, background 0.12s;
}

.vd-row--selected[b-a5dxszn7xb] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
    background: color-mix(in srgb, var(--lp-orange) 5%, var(--lp-bg-card2));
}

.vd-body--has-selection .vd-row:not(.vd-row--selected):not(.vd-row--moving)[b-a5dxszn7xb] {
    opacity: 0.55;
    transform: scale(0.985);
    filter: blur(0.4px);
}

.vd-row-name[b-a5dxszn7xb] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vd-row-price[b-a5dxszn7xb] {
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.vd-row-meta[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.vd-row--selected .vd-row-meta[b-a5dxszn7xb] { opacity: 0; pointer-events: none; }

.vd-row-measurement[b-a5dxszn7xb] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.vd-row-status[b-a5dxszn7xb] { flex-shrink: 0; }

.mod-type-badge[b-a5dxszn7xb] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15em 0.55em;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mod-type-badge--addition[b-a5dxszn7xb]     { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.mod-type-badge--removal[b-a5dxszn7xb]      { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.mod-type-badge--substitution[b-a5dxszn7xb] { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }

.sel-hint[b-a5dxszn7xb] { font-size: 0.75rem; color: var(--lp-muted); }

.vd-row-actions[b-a5dxszn7xb] {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 9rem;
    transition: max-width 0.2s ease, opacity 0.15s;
}

.action-btns--hidden[b-a5dxszn7xb] {
    max-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ── Group accordion ─────────────────────────────────────────────────────── */
.vd-group-wrap[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
}

.vd-row--group[b-a5dxszn7xb] {
    cursor: pointer;
}

.vd-group-chevron[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 1rem;
    color: var(--lp-muted);
    cursor: pointer;
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.12s;
}

@media (hover: hover) { .vd-group-chevron:hover[b-a5dxszn7xb] { color: var(--lp-text); background: var(--lp-hover-bg); } }

.vd-group-chevron svg[b-a5dxszn7xb] {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.18s ease;
}

.vd-row--expanded .vd-group-chevron svg[b-a5dxszn7xb] {
    transform: rotate(90deg);
}

.vd-row--expanded[b-a5dxszn7xb] {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
}

.vd-group-accordion[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    background: var(--lp-bg-input, rgba(0,0,0,0.04));
    border: 1px solid var(--lp-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.25rem 0.65rem 0.25rem 2.25rem;
}

.vd-accordion-mod-row[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--lp-border);
}

.vd-accordion-mod-row:last-child[b-a5dxszn7xb] {
    border-bottom: none;
}

/* ── Group row status badges (required/optional, single/multi) ───────────── */
.om-badges[b-a5dxszn7xb] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
    margin-left: auto;
    transition: opacity 0.15s ease;
}

.vd-row--selected .om-badges[b-a5dxszn7xb] { opacity: 0; }

.om-badge[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

.om-badge--required[b-a5dxszn7xb]  { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.om-badge--optional[b-a5dxszn7xb]  { color: var(--lp-muted); border-color: var(--lp-border); background: transparent; }
.om-badge--multi[b-a5dxszn7xb]     { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.om-badge--single[b-a5dxszn7xb]    { color: var(--lp-muted); border-color: var(--lp-border); background: transparent; }

/* ── Child modifier: price stack with tax ────────────────────────────────── */
.om-price-stack[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.05rem;
}

.om-tax-label[b-a5dxszn7xb] {
    font-size: 0.7rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Child modifier: measurement ─────────────────────────────────────────── */
.om-measurement[b-a5dxszn7xb] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.35rem;
}

.vd-accordion-empty[b-a5dxszn7xb] {
    font-size: 0.8125rem;
    color: var(--lp-muted);
    padding: 0.4rem 0;
}


/* ── Variant row move animation ──────────────────────────────────────────── */
.vd-row--moving[b-a5dxszn7xb] {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.vd-section-divider[b-a5dxszn7xb] {
    height: 1px;
    background: var(--lp-border);
    margin: 6px 0;
}

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
dialog.confirm-dialog[b-a5dxszn7xb] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

/* ── Modal shared components ─────────────────────────────────────────────── */
.modal-header[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title[b-a5dxszn7xb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-a5dxszn7xb] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
    flex-shrink: 0;
}

.modal-close svg[b-a5dxszn7xb] { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-a5dxszn7xb]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-a5dxszn7xb] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-a5dxszn7xb] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.modal-footer[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.75rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.field-group[b-a5dxszn7xb]  { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label[b-a5dxszn7xb]  { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.modal-input[b-a5dxszn7xb] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-a5dxszn7xb]::placeholder  { color: var(--lp-muted); }
.modal-input:focus[b-a5dxszn7xb]         { border-color: var(--lp-orange); }
.modal-input--error[b-a5dxszn7xb]        { border-color: #f87171; }
.modal-input--error:focus[b-a5dxszn7xb]  { border-color: #f87171; }

/* ── Number picker (price / tax) ─────────────────────────────────────────── */
.num-picker[b-a5dxszn7xb] { position: relative; }

.num-input[b-a5dxszn7xb] {
    padding-right: 2rem !important;
    text-align: left;
    -moz-appearance: textfield;
}

.num-input[b-a5dxszn7xb]::-webkit-inner-spin-button,
.num-input[b-a5dxszn7xb]::-webkit-outer-spin-button { -webkit-appearance: none; }

.num-spinners[b-a5dxszn7xb] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.num-spin-btn[b-a5dxszn7xb] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.num-spin-btn:first-child[b-a5dxszn7xb] {
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.num-spin-btn:last-child[b-a5dxszn7xb] { border-radius: 0 0 7px 0; }

.num-spin-btn svg[b-a5dxszn7xb] {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .num-spin-btn:hover[b-a5dxszn7xb]  { opacity: 0.8; } }
.num-spin-btn:active[b-a5dxszn7xb] { opacity: 0.65; }
.num-spin-btn:focus-visible[b-a5dxszn7xb] { outline: 2px solid var(--lp-orange); outline-offset: 1px; }

.modal-error-banner[b-a5dxszn7xb] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

.modal-btn-cancel[b-a5dxszn7xb] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) { .modal-btn-cancel:hover:not(:disabled)[b-a5dxszn7xb] { background: var(--lp-hover-bg); border-color: var(--lp-muted); } }
.modal-btn-cancel:disabled[b-a5dxszn7xb]             { opacity: 0.45; cursor: not-allowed; }
.modal-btn-cancel:focus-visible[b-a5dxszn7xb]        { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-submit[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 96px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-a5dxszn7xb]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-a5dxszn7xb] { opacity: 0.7; }
.modal-btn-submit:disabled[b-a5dxszn7xb]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-submit:focus-visible[b-a5dxszn7xb]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-delete[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-a5dxszn7xb]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-a5dxszn7xb] { opacity: 0.7; }
.modal-btn-delete:disabled[b-a5dxszn7xb]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-delete:focus-visible[b-a5dxszn7xb]         { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── Confirm dialog parts ────────────────────────────────────────────────── */
.confirm-body[b-a5dxszn7xb] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.confirm-icon[b-a5dxszn7xb] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon svg[b-a5dxszn7xb] { width: 1rem; height: 1rem; fill: currentColor; }

.confirm-text[b-a5dxszn7xb] { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; }

.confirm-message[b-a5dxszn7xb] { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; }
.confirm-sub[b-a5dxszn7xb]     { margin: 0; font-size: 0.8rem; color: var(--lp-muted); }

/* ── Details modal header ────────────────────────────────────────────────── */
.details-title-wrap[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.details-fav-star[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-orange);
}

.details-fav-star svg[b-a5dxszn7xb] {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

/* ── Details modal body ──────────────────────────────────────────────────── */
.details-body[b-a5dxszn7xb] {
    gap: 1.25rem;
    max-height: 70vh;
    overflow-y: auto;
}

.details-img[b-a5dxszn7xb] {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--lp-border);
}

.details-grid[b-a5dxszn7xb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.detail-row[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.detail-row--full[b-a5dxszn7xb] {
    grid-column: 1 / -1;
}

.detail-label[b-a5dxszn7xb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-value[b-a5dxszn7xb] {
    font-size: 0.875rem;
    color: var(--lp-text);
    font-weight: 500;
}

.detail-tag[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-muted);
    white-space: nowrap;
}

.details-section[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--lp-border);
    padding-top: 1rem;
}

.details-section-title[b-a5dxszn7xb] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
/* @keyframes spin lives in app.css */
.modal-spinner[b-a5dxszn7xb] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

.modal-spinner--light[b-a5dxszn7xb] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* ── Delete animation (offer row) ────────────────────────────────────────── */
@keyframes offer-row-delete-b-a5dxszn7xb {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-10px); }
}

.offers-table tbody tr.offer-row.row--deleting td[b-a5dxszn7xb] {
    animation: offer-row-delete-b-a5dxszn7xb 0.3s ease-out forwards;
    pointer-events: none;
}

/* ── Favourite badge on thumbnail ────────────────────────────────────────── */
.item-thumb-wrap[b-a5dxszn7xb] {
    position: relative;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    overflow: visible;
}

.fav-badge[b-a5dxszn7xb] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 1rem;
    height: 1rem;
    background: var(--lp-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.fav-badge svg[b-a5dxszn7xb] {
    width: 0.5rem;
    height: 0.5rem;
    fill: #000;
}

.vegan-badge[b-a5dxszn7xb] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 1rem;
    height: 1rem;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.vegan-badge svg[b-a5dxszn7xb] {
    width: 0.65rem;
    height: 0.65rem;
    stroke: #fff;
    fill: none;
}

/* ── Toggle switch (Favourite field in dialog) ───────────────────────────── */
.toggle-field[b-a5dxszn7xb] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


/* ── Modifier multiselect picker ─────────────────────────────────────────── */
.ms-pick-list[b-a5dxszn7xb] {
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    padding-top: 0.5rem;
}

.ms-pick-section-label[b-a5dxszn7xb] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-muted);
    padding: 0.5rem 0.25rem 0.25rem;
}

.ms-pick-row[b-a5dxszn7xb] {
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}

@media (hover: hover) {
    .ms-pick-row:hover[b-a5dxszn7xb] {
        background: var(--lp-hover, rgba(255,255,255,0.05));
    }
}

.ms-pick-row--selected[b-a5dxszn7xb] {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.5);
}

@media (hover: hover) {
    .ms-pick-row--selected:hover[b-a5dxszn7xb] {
        background: rgba(249, 115, 22, 0.25);
    }
}

.ms-pick-check[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--lp-orange);
}

/* ── Allergen multiselect ─────────────────────────────────────────────────── */
.allergen-count-badge[b-a5dxszn7xb] {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    background: var(--lp-orange);
    color: #000;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.allergen-dropdown[b-a5dxszn7xb] {
    max-height: 220px;
    overflow-y: auto;
}

.allergen-dot[b-a5dxszn7xb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.allergen-abbr[b-a5dxszn7xb] {
    margin-left: auto;
    color: var(--lp-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

/* ── Cards view grid ─────────────────────────────────────────────────────── */
.offer-cards-grid[b-a5dxszn7xb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.offer-card[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.875rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--lp-text);
    transition: border-color 0.13s, background 0.13s;
    outline: none;
    width: 100%;
}

@media (hover: hover) {
    .offer-card:hover[b-a5dxszn7xb] {
        border-color: rgba(245, 158, 11, 0.4);
        background: rgba(245, 158, 11, 0.04);
    }
}

.offer-card:focus-visible[b-a5dxszn7xb] {
    outline: 2px solid var(--lp-orange);
    outline-offset: -2px;
}

/* ── Card thumbnail ──────────────────────────────────────────────────────── */
.offer-card__img-wrap[b-a5dxszn7xb] {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.offer-card__img[b-a5dxszn7xb] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--lp-bg-card2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-card__img img[b-a5dxszn7xb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-card__no-img[b-a5dxszn7xb] {
    color: var(--lp-muted);
    opacity: 0.3;
}

.offer-card__no-img svg[b-a5dxszn7xb] {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.offer-card__fav[b-a5dxszn7xb] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 1rem;
    height: 1rem;
    background: var(--lp-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.offer-card__fav svg[b-a5dxszn7xb] {
    width: 0.45rem;
    height: 0.45rem;
    fill: #000;
}

.offer-card__vegan[b-a5dxszn7xb] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 1rem;
    height: 1rem;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.offer-card__vegan svg[b-a5dxszn7xb] {
    width: 0.6rem;
    height: 0.6rem;
    stroke: #fff;
    fill: none;
}

/* When both fav and vegan are shown, push vegan to avoid overlap */
.offer-card__img-wrap:has(.offer-card__fav) .offer-card__vegan[b-a5dxszn7xb] {
    right: 0.85rem;
}

/* ── Card text ───────────────────────────────────────────────────────────── */
.offer-card__info[b-a5dxszn7xb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.offer-card__name[b-a5dxszn7xb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-card__measure[b-a5dxszn7xb] {
    font-size: 0.75rem;
    color: var(--lp-muted);
}

/* ── Card right: price + status ──────────────────────────────────────────── */
.offer-card__right[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.offer-card__price[b-a5dxszn7xb] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Details modal — vegan leaf icon ────────────────────────────────────── */
.details-vegan-leaf[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #16a34a;
}

.details-vegan-leaf svg[b-a5dxszn7xb] {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
    fill: none;
}

/* ── Details modal — allergen tags ──────────────────────────────────────── */
.detail-allergen-tags[b-a5dxszn7xb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.detail-allergen-tag[b-a5dxszn7xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--lp-border);
    background: var(--lp-btn-bg);
    color: var(--lp-text);
    white-space: nowrap;
}

/* ── Details modal — variants / modifiers list rows ─────────────────────── */
.details-list-row[b-a5dxszn7xb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--lp-border);
}

.details-list-row:last-child[b-a5dxszn7xb] {
    border-bottom: none;
}

.details-list-row--indent[b-a5dxszn7xb] {
    padding-left: 1rem;
}

.details-list-name[b-a5dxszn7xb] {
    font-size: 0.85rem;
    color: var(--lp-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-list-price[b-a5dxszn7xb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lp-text);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Details modal — modifier group header ──────────────────────────────── */
.details-mod-group[b-a5dxszn7xb] {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
}

.details-mod-group-name[b-a5dxszn7xb] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--lp-border);
    margin-bottom: 0.1rem;
}
/* /Pages/CatalogPreview.razor.rz.scp.css */
/* ── State (loading / empty / error) ─────────────────────────────────────── */
.preview-state[b-bl15zahixz] {
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--lp-muted);
}

.preview-state--error[b-bl15zahixz] { color: #f87171; }

.preview-spinner[b-bl15zahixz] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin-b-bl15zahixz 0.6s linear infinite;
}

@keyframes spin-b-bl15zahixz {
    to { transform: rotate(360deg); }
}

/* .empty-state styles live in app.css (shared across all catalog pages) */

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.pv-toolbar[b-bl15zahixz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle[b-bl15zahixz] {
    display: flex;
    align-items: center;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle-btn[b-bl15zahixz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    padding: 0;
}

@media (hover: hover) {
    .view-toggle-btn:hover:not(.view-toggle-btn--active)[b-bl15zahixz] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.view-toggle-btn--active[b-bl15zahixz] {
    background: var(--lp-orange);
    color: #000;
}

.view-toggle-btn svg[b-bl15zahixz] {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

/* ── Category list ───────────────────────────────────────────────────────── */
.cat-list[b-bl15zahixz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Category row card ───────────────────────────────────────────────────── */
.cat-row[b-bl15zahixz] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Category header row ─────────────────────────────────────────────────── */
.cat-item[b-bl15zahixz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    transition: background 0.12s;
}

@media (hover: hover) {
    .cat-item:hover[b-bl15zahixz] {
        background: var(--lp-hover-bg);
    }
}

.cat-item--colored[b-bl15zahixz] {
    border-left: 3px solid var(--card-color);
    background: color-mix(in srgb, var(--card-color) 9%, var(--lp-bg-card));
}

@media (hover: hover) {
    .cat-item--colored:hover[b-bl15zahixz] {
        background: color-mix(in srgb, var(--card-color) 13%, var(--lp-bg-card));
    }
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.chevron-btn[b-bl15zahixz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s;
}

@media (hover: hover) { .chevron-btn:hover[b-bl15zahixz]         { color: var(--lp-text); } }
.chevron-btn:focus-visible[b-bl15zahixz] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.chevron-btn--invisible[b-bl15zahixz]    { visibility: hidden; pointer-events: none; }

.chevron-btn[b-bl15zahixz]  .chevron-icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.chevron-btn[b-bl15zahixz]  .chevron-icon--open            { transform: rotate(0deg); }
.chevron-btn[b-bl15zahixz]  .chevron-icon:not(.chevron-icon--open) { transform: rotate(-90deg); }

/* ── Category thumbnail ──────────────────────────────────────────────────── */
.cat-thumb[b-bl15zahixz] {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
}

.cat-thumb--placeholder[b-bl15zahixz] {
    background: var(--lp-bg-card2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    opacity: 0.55;
}

.cat-thumb--placeholder svg[b-bl15zahixz] {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* ── Subcategory thumbnail ────────────────────────────────────────────────── */
.sub-thumb[b-bl15zahixz] {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
}

.sub-thumb--placeholder[b-bl15zahixz] {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    opacity: 0.55;
}

.sub-thumb--placeholder svg[b-bl15zahixz] {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* ── Category name + description ─────────────────────────────────────────── */
.cat-info[b-bl15zahixz] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.cat-name[b-bl15zahixz] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cat-desc[b-bl15zahixz] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}


/* ── Category body accordion ─────────────────────────────────────────────── */
.cat-body[b-bl15zahixz] {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.cat-body--open[b-bl15zahixz] {
    grid-template-rows: 1fr;
}

.cat-body-inner[b-bl15zahixz] {
    overflow: hidden;
    width: 100%;
}

/* ── Subcategory body accordion ──────────────────────────────────────────── */
.sub-body[b-bl15zahixz] {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.sub-body--open[b-bl15zahixz] {
    grid-template-rows: 1fr;
}

.sub-body-inner[b-bl15zahixz] {
    overflow: hidden;
    width: 100%;
}

@media (max-width: 575.98px) {
    /* Single horizontal scroll at category level only */
    .cat-body-inner[b-bl15zahixz] {
        overflow-x: auto;
        overflow-y: hidden;
    }
    /* Expand sub-sections and headers to the same min-width as item rows
       so every element in the scroll container is the same width — no gaps */
    .sub-section[b-bl15zahixz],
    .sub-header[b-bl15zahixz] {
        min-width: 600px;
    }
}

/* ── Subcategory section ─────────────────────────────────────────────────── */
.sub-section[b-bl15zahixz] {
    border-top: 1px solid var(--lp-border);
}

/* ── Subcategory header row ──────────────────────────────────────────────── */
.sub-header[b-bl15zahixz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem 0.6rem 2.85rem;
    background: var(--lp-bg-card2);
    transition: background 0.12s;
}

@media (hover: hover) {
    .sub-header:hover[b-bl15zahixz] {
        background: color-mix(in srgb, var(--lp-bg-card2) 75%, var(--lp-hover-bg-strong));
    }
}

.sub-header--colored[b-bl15zahixz] {
    border-left: 3px solid var(--card-color);
    background: color-mix(in srgb, var(--card-color) 9%, var(--lp-bg-card2));
}

@media (hover: hover) {
    .sub-header--colored:hover[b-bl15zahixz] {
        background: color-mix(in srgb, var(--card-color) 13%, var(--lp-bg-card2));
    }
}

/* Subcategory chevron — same size as category chevron for alignment */
.sub-chevron-btn[b-bl15zahixz] {
    width: 1.5rem;
    height: 1.5rem;
}

.sub-indent[b-bl15zahixz] {
    width: 1.5rem;
    flex-shrink: 0;
}


/* ── Subcategory info ────────────────────────────────────────────────────── */
.sub-info[b-bl15zahixz] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.sub-info--toggle[b-bl15zahixz] {
    cursor: pointer;
    user-select: none;
}

.sub-name[b-bl15zahixz] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sub-desc[b-bl15zahixz] {
    font-size: 0.75rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Price column (price + tax) ──────────────────────────────────────────── */
.item-row__price-col[b-bl15zahixz] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.1rem;
}

.price-tax[b-bl15zahixz] {
    font-size: 0.73rem;
    font-weight: 400;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* /Pages/CatalogSettings.razor.rz.scp.css */

.add-unit-btn[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-unit-btn svg[b-o31616gkzx] {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .add-unit-btn:hover[b-o31616gkzx]  { opacity: 0.85; } }
.add-unit-btn:active[b-o31616gkzx] { opacity: 0.7; }

.add-unit-btn:focus-visible[b-o31616gkzx] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
}

/* ── Units card ──────────────────────────────────────────────────────────── */
.units-card[b-o31616gkzx] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow-x: auto;
}

.table-state[b-o31616gkzx] {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Units table ─────────────────────────────────────────────────────────── */
.units-table[b-o31616gkzx] {
    width: 100%;
    border-collapse: collapse;
}

.units-table thead th[b-o31616gkzx] {
    padding: 0.85rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--lp-border);
}

.th-actions[b-o31616gkzx] {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.td-actions[b-o31616gkzx] {
    width: 1%;
    white-space: nowrap;
}

.units-table tbody tr[b-o31616gkzx] {
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.units-table tbody tr:last-child[b-o31616gkzx] { border-bottom: none; }

@media (hover: hover) { .units-table tbody tr:hover[b-o31616gkzx] { background: var(--lp-hover-bg); } }

.units-table tbody td[b-o31616gkzx] {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--lp-text);
}

.td-empty[b-o31616gkzx] {
    text-align: center;
    color: var(--lp-muted) !important;
    padding: 2.5rem 1.25rem !important;
    font-size: 0.875rem;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.action-btns[b-o31616gkzx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.action-btn[b-o31616gkzx] {
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--lp-muted);
    transition: background 0.12s, color 0.12s;
    outline: none;
    flex-shrink: 0;
}

.action-btn svg[b-o31616gkzx] {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

.action-btn:hover[b-o31616gkzx] {
    background: var(--lp-hover-bg);
    color: var(--lp-text);
}

.action-btn:focus-visible[b-o31616gkzx] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.action-btn:disabled[b-o31616gkzx] {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

.action-add:hover[b-o31616gkzx] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--lp-orange);
}

.action-edit:hover[b-o31616gkzx] {
    background: var(--lp-hover-bg);
    color: var(--lp-text);
}

.action-delete[b-o31616gkzx] {
    color: #f87171;
}

.action-delete:hover[b-o31616gkzx] {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

/* ── Add/Edit dialog ─────────────────────────────────────────────────────── */
dialog.unit-dialog[b-o31616gkzx] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 400px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.unit-dialog[open][b-o31616gkzx] {
    display: flex;
    flex-direction: column;
}

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
dialog.confirm-dialog[b-o31616gkzx] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

/* ── Modal header ────────────────────────────────────────────────────────── */
.modal-header[b-o31616gkzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
}

.modal-title-group[b-o31616gkzx] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.modal-title[b-o31616gkzx] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-subtitle[b-o31616gkzx] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-close[b-o31616gkzx] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

.modal-close svg[b-o31616gkzx] { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-o31616gkzx]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-o31616gkzx] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Modal body ──────────────────────────────────────────────────────────── */
.modal-body[b-o31616gkzx] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.confirm-body[b-o31616gkzx] { flex-direction: row; align-items: flex-start; gap: 1rem; }

/* ── Confirm icon ────────────────────────────────────────────────────────── */
.confirm-icon[b-o31616gkzx] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon svg[b-o31616gkzx] { width: 1rem; height: 1rem; fill: currentColor; }

.confirm-text[b-o31616gkzx] { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; }

.confirm-message[b-o31616gkzx] { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; }

.confirm-sub[b-o31616gkzx] { margin: 0; font-size: 0.8rem; color: var(--lp-muted); }

/* ── Field group ─────────────────────────────────────────────────────────── */
.field-group[b-o31616gkzx] { display: flex; flex-direction: column; gap: 0.4rem; }

.field-label[b-o31616gkzx] { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.modal-input[b-o31616gkzx] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-o31616gkzx]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-o31616gkzx]         { border-color: var(--lp-orange); }

/* ── Error banner ────────────────────────────────────────────────────────── */
.modal-error-banner[b-o31616gkzx] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

/* ── Modal footer ────────────────────────────────────────────────────────── */
.modal-footer[b-o31616gkzx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
}

.modal-btn-cancel[b-o31616gkzx] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) {
    .modal-btn-cancel:hover:not(:disabled)[b-o31616gkzx] {
        background: var(--lp-hover-bg);
        border-color: var(--lp-muted);
    }
}

.modal-btn-submit[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 96px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-o31616gkzx]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-o31616gkzx] { opacity: 0.7; }

.modal-btn-submit:disabled[b-o31616gkzx],
.modal-btn-cancel:disabled[b-o31616gkzx] { opacity: 0.45; cursor: not-allowed; }

.modal-btn-submit:focus-visible[b-o31616gkzx],
.modal-btn-cancel:focus-visible[b-o31616gkzx] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-delete[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-o31616gkzx]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-o31616gkzx] { opacity: 0.7; }
.modal-btn-delete:disabled[b-o31616gkzx]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-delete:focus-visible[b-o31616gkzx]         { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.modal-spinner[b-o31616gkzx] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-o31616gkzx 0.6s linear infinite;
    flex-shrink: 0;
}

.modal-spinner--light[b-o31616gkzx] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

@keyframes spin-b-o31616gkzx {
    to { transform: rotate(360deg); }
}

/* ── Category toolbar ────────────────────────────────────────────────────── */
.cat-toolbar[b-o31616gkzx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.search-input-wrap[b-o31616gkzx] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.search-input-wrap[b-o31616gkzx]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-o31616gkzx] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-o31616gkzx]::placeholder { color: var(--lp-muted); }
.search-input:focus[b-o31616gkzx]         { border-color: var(--lp-orange); }

.add-cat-btn[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
    margin-left: auto;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
}

.add-cat-btn svg[b-o31616gkzx] {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .add-cat-btn:hover[b-o31616gkzx]  { opacity: 0.85; } }
.add-cat-btn:active[b-o31616gkzx] { opacity: 0.7; }

.add-cat-btn:focus-visible[b-o31616gkzx] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
}

/* ── Category list ───────────────────────────────────────────────────────── */
.cat-list[b-o31616gkzx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cat-state[b-o31616gkzx] {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Category row group (category + its subcategories) ───────────────────── */
.cat-row[b-o31616gkzx] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Category body accordion ─────────────────────────────────────────────── */
.cat-body[b-o31616gkzx] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.cat-body--open[b-o31616gkzx] {
    grid-template-rows: 1fr;
}

.cat-body-inner[b-o31616gkzx] {
    overflow: hidden;
}

/* ── Category item row ───────────────────────────────────────────────────── */
.cat-item[b-o31616gkzx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    transition: background 0.12s;
}

@media (hover: hover) {
    .cat-item:hover[b-o31616gkzx] {
        background: var(--lp-hover-bg);
    }
}

/* ── Chevron toggle ──────────────────────────────────────────────────────── */
.chevron-btn[b-o31616gkzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    outline: none;
    border-radius: 4px;
    transition: color 0.15s;
}

@media (hover: hover) {
    .chevron-btn:hover[b-o31616gkzx] {
        color: var(--lp-text);
    }
}

.chevron-btn:focus-visible[b-o31616gkzx] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.chevron-btn--invisible[b-o31616gkzx] {
    visibility: hidden;
    pointer-events: none;
}

.chevron-btn[b-o31616gkzx]  .chevron-icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.chevron-btn[b-o31616gkzx]  .chevron-icon--open {
    transform: rotate(0deg);
}

.chevron-btn[b-o31616gkzx]  .chevron-icon:not(.chevron-icon--open) {
    transform: rotate(-90deg);
}

/* ── Category thumbnail ──────────────────────────────────────────────────── */
.cat-thumb[b-o31616gkzx] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lp-border);
}

.cat-thumb--placeholder[b-o31616gkzx] {
    background: var(--lp-bg-card2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    opacity: 0.55;
}

.cat-thumb--placeholder svg[b-o31616gkzx] {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

/* ── Category info ───────────────────────────────────────────────────────── */
.cat-info[b-o31616gkzx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.cat-name[b-o31616gkzx] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cat-desc[b-o31616gkzx] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Subcategory item row ────────────────────────────────────────────────── */
.sub-item[b-o31616gkzx] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem 0.7rem 0.75rem;
    border-top: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
    transition: background 0.12s;
}

@media (hover: hover) {
    .sub-item:hover[b-o31616gkzx] {
        background: color-mix(in srgb, var(--lp-bg-card2) 80%, var(--lp-hover-bg-strong));
    }
}

.sub-indent[b-o31616gkzx] {
    width: 1.5rem;
    flex-shrink: 0;
    align-self: center;
}


/* ── Subcategory name + description ─────────────────────────────────────── */
.sub-info[b-o31616gkzx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.sub-name[b-o31616gkzx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sub-desc[b-o31616gkzx] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Row actions ─────────────────────────────────────────────────────────── */
.row-actions[b-o31616gkzx] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

/* ── Sub-count badge ─────────────────────────────────────────────────────── */
.sub-badge[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Item count text ─────────────────────────────────────────────────────── */
.item-count[b-o31616gkzx] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Row separator ───────────────────────────────────────────────────────── */
.row-sep[b-o31616gkzx] {
    width: 1px;
    height: 1.1rem;
    background: var(--lp-border);
    flex-shrink: 0;
    margin: 0 0.3rem;
}

/* ── Category/Subcategory dialog ─────────────────────────────────────────── */
dialog.cat-dialog[b-o31616gkzx] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 420px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.cat-dialog[open][b-o31616gkzx] {
    display: flex;
    flex-direction: column;
}

/* ── Image drop zone ─────────────────────────────────────────────────────── */
.img-drop-zone[b-o31616gkzx] {
    position: relative;
    border: 2px dashed var(--lp-border);
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.img-drop-zone--over[b-o31616gkzx] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.05);
}

.img-drop-zone--filled[b-o31616gkzx] {
    border-style: solid;
    border-color: var(--lp-border);
    min-height: 160px;
}

.drop-zone-img[b-o31616gkzx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.drop-zone-overlay[b-o31616gkzx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: 8px;
}

@media (hover: hover) {
    .img-drop-zone--filled:hover .drop-zone-overlay[b-o31616gkzx] {
        opacity: 1;
    }
}

.drop-zone-action-btn[b-o31616gkzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.drop-zone-action-btn svg[b-o31616gkzx] {
    width: 0.82rem;
    height: 0.82rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .drop-zone-action-btn:hover[b-o31616gkzx] { background: rgba(255, 255, 255, 0.25); } }

.drop-zone-action-btn--danger:hover[b-o31616gkzx] {
    background: rgba(239, 68, 68, 0.55);
    border-color: rgba(239, 68, 68, 0.6);
}

.drop-zone-empty[b-o31616gkzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.drop-zone-icon[b-o31616gkzx] {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
    color: var(--lp-muted);
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

.drop-zone-title[b-o31616gkzx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-text);
}

.drop-zone-sub[b-o31616gkzx] {
    font-size: 0.82rem;
    color: var(--lp-muted);
}

.drop-zone-browse[b-o31616gkzx] {
    color: var(--lp-orange);
    text-decoration: underline;
}

.drop-zone-hint[b-o31616gkzx] {
    font-size: 0.75rem;
    color: var(--lp-muted);
    opacity: 0.7;
    margin-top: 0.15rem;
}

/* ── Field error ─────────────────────────────────────────────────────────── */
.field-error[b-o31616gkzx] {
    font-size: 0.78rem;
    color: #f87171;
    line-height: 1.3;
}

/* ── Delete animation (cat-row) ──────────────────────────────────────────── */
@keyframes cat-delete-b-o31616gkzx {
    0%   { opacity: 1; transform: translateX(0);     max-height: 600px; margin-bottom: 0; }
    55%  { opacity: 0; transform: translateX(-10px); max-height: 600px; margin-bottom: 0; }
    100% { opacity: 0; transform: translateX(-10px); max-height: 0;     margin-bottom: -0.5rem; }
}

.cat-row.row--deleting[b-o31616gkzx] {
    animation: cat-delete-b-o31616gkzx 0.32s ease-out forwards;
    overflow: hidden;
    pointer-events: none;
}

/* ── Delete animation (sub-item) ─────────────────────────────────────────── */
@keyframes sub-delete-b-o31616gkzx {
    0%   { opacity: 1; max-height: 200px; }
    50%  { opacity: 0; max-height: 200px; }
    100% { opacity: 0; max-height: 0; }
}

.sub-item.row--deleting[b-o31616gkzx] {
    animation: sub-delete-b-o31616gkzx 0.32s ease-out forwards;
    overflow: hidden;
    pointer-events: none;
}

/* ── Allergen color swatch (table cell) ──────────────────────────────────── */
.allergen-color-swatch[b-o31616gkzx] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--lp-border);
    vertical-align: middle;
}

/* ── Color picker (shared with category picker) ──────────────────────────── */
.color-picker-row[b-o31616gkzx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.color-circle[b-o31616gkzx] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (hover: hover) {
    .color-circle:hover[b-o31616gkzx] {
        transform: scale(1.2);
    }
}

.color-circle:focus-visible[b-o31616gkzx] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.color-circle--selected[b-o31616gkzx] {
    box-shadow: 0 0 0 2px var(--lp-bg-card), 0 0 0 4px var(--lp-orange);
}

.color-circle--none[b-o31616gkzx] {
    background: var(--lp-bg-card2) !important;
    border-color: var(--lp-border);
    overflow: hidden;
}

.color-circle--none[b-o31616gkzx]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1.5px;
    background: #f87171;
    transform: translateY(-50%) rotate(-45deg);
}
/* /Pages/ClientManager/Organizations.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.orgs-toolbar[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
}

.search-input-wrap[b-0ew59ljn94] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.search-input-wrap[b-0ew59ljn94]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-0ew59ljn94] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-0ew59ljn94]::placeholder { color: var(--lp-muted); }
.search-input:focus[b-0ew59ljn94]         { border-color: var(--lp-orange); }

/* ── State (loading / empty / error) ─────────────────────────────────────── */
.roles-state[b-0ew59ljn94] {
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--lp-muted);
    margin-top: 1.25rem;
}

.roles-state--error[b-0ew59ljn94] { color: #f87171; }

.roles-spinner[b-0ew59ljn94] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin-b-0ew59ljn94 0.6s linear infinite;
}

@keyframes spin-b-0ew59ljn94 {
    to { transform: rotate(360deg); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    margin-top: 1.25rem;
    color: var(--lp-muted);
}

.empty-state[b-0ew59ljn94]  .empty-state__icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.35;
    fill: currentColor;
}

.empty-state__title[b-0ew59ljn94] {
    margin: 0;
    font-size: 0.875rem;
}

/* ── Role list ───────────────────────────────────────────────────────────── */
.role-list[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Role card ───────────────────────────────────────────────────────────── */
.role-card[b-0ew59ljn94] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Role header row ─────────────────────────────────────────────────────── */
.role-header[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
}

/* ── Building icon ───────────────────────────────────────────────────────── */
.role-icon[b-0ew59ljn94] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.15);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-orange);
}

.role-icon svg[b-0ew59ljn94] {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* ── Org name + slug/status ──────────────────────────────────────────────── */
.role-meta[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.role-name[b-0ew59ljn94] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-perm-count[b-0ew59ljn94] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Status dot ──────────────────────────────────────────────────────────── */
.org-status-dot[b-0ew59ljn94] {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.org-status-dot--active[b-0ew59ljn94]   { background: #22c55e; }
.org-status-dot--inactive[b-0ew59ljn94] { background: #ef4444; }

/* ── Chevron — exact copy from StaffRoles ────────────────────────────────── */
.role-chevron-btn[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

@media (hover: hover) { .role-chevron-btn:hover[b-0ew59ljn94] { background: var(--lp-hover-bg); color: var(--lp-text); } }
.role-chevron-btn:focus-visible[b-0ew59ljn94] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.role-chevron-btn[b-0ew59ljn94]  .chevron-icon {
    width: 0.8rem;
    height: 0.8rem;
    fill: var(--lp-muted);
    transition: transform 0.18s ease, fill 0.12s;
    transform: rotate(-90deg);
}

@media (hover: hover) { .role-chevron-btn:hover[b-0ew59ljn94]  .chevron-icon  { fill: var(--lp-text); } }
.role-chevron-btn--open[b-0ew59ljn94]  .chevron-icon  { fill: var(--lp-text); transform: rotate(0deg); }

/* override any SVG presentation-attribute inheritance */
.role-chevron-btn path[b-0ew59ljn94] { fill: inherit; }

/* ── Action buttons ──────────────────────────────────────────────────────── */
.role-action-btn[b-0ew59ljn94] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
    flex-shrink: 0;
}

.role-action-btn svg[b-0ew59ljn94] {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}

.role-action-btn--edit[b-0ew59ljn94] { color: var(--lp-muted); }
@media (hover: hover) { .role-action-btn--edit:hover:not(:disabled)[b-0ew59ljn94] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.role-action-btn--activate[b-0ew59ljn94] { color: #22c55e; }
@media (hover: hover) { .role-action-btn--activate:hover:not(:disabled)[b-0ew59ljn94] { background: rgba(34, 197, 94, 0.1); } }

.role-action-btn--deactivate[b-0ew59ljn94] { color: #f87171; }
@media (hover: hover) { .role-action-btn--deactivate:hover:not(:disabled)[b-0ew59ljn94] { background: rgba(248, 113, 113, 0.1); } }

.role-action-btn:disabled[b-0ew59ljn94] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.role-action-btn:focus-visible[b-0ew59ljn94] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ── Expanded: read-only module chips — exact copy from StaffRoles ──────── */
.role-perms[b-0ew59ljn94] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--lp-border);
}

.perm-chip[b-0ew59ljn94] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-text);
    white-space: nowrap;
}

.role-perms-empty[b-0ew59ljn94] {
    padding: 0.6rem 1.25rem 0.8rem;
    border-top: 1px solid var(--lp-border);
    font-size: 0.8rem;
    color: var(--lp-muted);
}

/* ── Inline button spinner (activate/deactivate) ─────────────────────────── */
.btn-spinner[b-0ew59ljn94] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-0ew59ljn94 0.6s linear infinite;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Subscription dialog — mirrors StaffRoles role-dialog ────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

dialog.org-dialog[b-0ew59ljn94] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 480px;
    max-height: calc(100dvh - 4rem);
    overflow: hidden;
    outline: none;
}

dialog.org-dialog[open][b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 4rem);
}

.modal-header[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title[b-0ew59ljn94] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-0ew59ljn94] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
    flex-shrink: 0;
}

.modal-close svg[b-0ew59ljn94] { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-0ew59ljn94] { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-0ew59ljn94] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Dialog scrollable body ──────────────────────────────────────────────── */
.org-dialog-body[b-0ew59ljn94] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Permission section (modules + limits) ───────────────────────────────── */
.perm-section[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
}

.perm-section-title[b-0ew59ljn94] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    margin: 0 0 0.15rem;
}

.perm-section-sub[b-0ew59ljn94] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    margin: 0 0 0.75rem;
}

.perm-group[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.perm-group:last-child[b-0ew59ljn94] { margin-bottom: 0; }

.perm-group-label[b-0ew59ljn94] {
    padding: 0.45rem 0.875rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lp-muted);
    background: var(--lp-btn-bg);
    border-bottom: 1px solid var(--lp-border);
}

.perm-row[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid var(--lp-border);
}

.perm-row:last-child[b-0ew59ljn94] { border-bottom: none; }

.perm-row-text[b-0ew59ljn94] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.perm-title[b-0ew59ljn94] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lp-text);
}

/* ── Toggle switch — matches CatalogOffers ───────────────────────────────── */

/* ── Number picker — matches CatalogOffers ───────────────────────────────── */
.num-picker[b-0ew59ljn94] {
    position: relative;
    width: 7rem;
    flex-shrink: 0;
}

.modal-input[b-0ew59ljn94] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-0ew59ljn94]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-0ew59ljn94]        { border-color: var(--lp-orange); }
.modal-input:disabled[b-0ew59ljn94]     { opacity: 0.5; cursor: not-allowed; }

.num-input[b-0ew59ljn94] {
    padding-right: 2rem !important;
    -moz-appearance: textfield;
}

.num-input[b-0ew59ljn94]::-webkit-inner-spin-button,
.num-input[b-0ew59ljn94]::-webkit-outer-spin-button { -webkit-appearance: none; }

.num-spinners[b-0ew59ljn94] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.num-spin-btn[b-0ew59ljn94] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.num-spin-btn:first-child[b-0ew59ljn94] {
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.num-spin-btn:last-child[b-0ew59ljn94] { border-radius: 0 0 7px 0; }

.num-spin-btn svg[b-0ew59ljn94] {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .num-spin-btn:hover:not(:disabled)[b-0ew59ljn94]  { opacity: 0.8; } }
.num-spin-btn:disabled[b-0ew59ljn94]              { opacity: 0.4; cursor: not-allowed; }

/* ── Error banner ────────────────────────────────────────────────────────── */
.modal-error-banner[b-0ew59ljn94] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.modal-footer[b-0ew59ljn94] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-btn-cancel[b-0ew59ljn94] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) { .modal-btn-cancel:hover:not(:disabled)[b-0ew59ljn94] { background: var(--lp-hover-bg); border-color: var(--lp-muted); } }
.modal-btn-cancel:disabled[b-0ew59ljn94]             { opacity: 0.45; cursor: not-allowed; }
.modal-btn-cancel:focus-visible[b-0ew59ljn94]        { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-submit[b-0ew59ljn94] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-0ew59ljn94]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-0ew59ljn94] { opacity: 0.7;  }
.modal-btn-submit:disabled[b-0ew59ljn94]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-submit:focus-visible[b-0ew59ljn94]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Dialog spinner (inside submit button) ───────────────────────────────── */
.modal-spinner[b-0ew59ljn94] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-0ew59ljn94 0.6s linear infinite;
}

.modal-spinner--light[b-0ew59ljn94] {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #000;
}
/* /Pages/ConfirmEmail.razor.rz.scp.css */
/* ── Page layout ──────────────────────────────────────────────────────────── */
.info-page[b-o2c79kwfk5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.info-card[b-o2c79kwfk5] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ── Icon circle ──────────────────────────────────────────────────────────── */
.info-card__icon[b-o2c79kwfk5] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    color: var(--lp-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.info-card__icon svg[b-o2c79kwfk5] {
    width: 28px;
    height: 28px;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */
.info-card__title[b-o2c79kwfk5] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lp-text);
    margin: 0;
}

/* ── Body text ────────────────────────────────────────────────────────────── */
.info-card__text[b-o2c79kwfk5] {
    color: var(--lp-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Action area ──────────────────────────────────────────────────────────── */
.info-card__actions[b-o2c79kwfk5] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ── Primary login button ─────────────────────────────────────────────────── */
.lp-btn-login[b-o2c79kwfk5] {
    display: inline-block;
    background: var(--lp-orange);
    color: #111 !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.6rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

@media (hover: hover) {
    .lp-btn-login:hover[b-o2c79kwfk5] {
        background: var(--lp-orange-dim);
        color: #111 !important;
        text-decoration: none;
    }
}

.lp-btn-login:active[b-o2c79kwfk5] {
    transform: scale(0.97);
}

/* ── Secondary back link ──────────────────────────────────────────────────── */
.info-card__link[b-o2c79kwfk5] {
    color: var(--lp-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}

@media (hover: hover) {
    .info-card__link:hover[b-o2c79kwfk5] {
        color: var(--lp-text);
        text-decoration: none;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .info-card[b-o2c79kwfk5] {
        padding: 36px 24px;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
/* ── Contact form ─────────────────────────────────────────────────────── */
.lp-contact-card[b-ce94xeqfq7] {
    background: var(--lp-card-bg, #1c1c1e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 2rem;
}

.lp-contact-card-title[b-ce94xeqfq7] {
    color: var(--lp-text, #f9fafb);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.lp-contact-form[b-ce94xeqfq7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lp-form-group[b-ce94xeqfq7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lp-form-group label[b-ce94xeqfq7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #9ca3af;
}

.lp-form-group input[b-ce94xeqfq7],
.lp-form-group textarea[b-ce94xeqfq7] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    color: var(--lp-text, #f9fafb);
    font-size: 0.92rem;
    outline: none;
    resize: none;
    transition: border-color 0.2s;
}

.lp-form-group input[b-ce94xeqfq7]::placeholder,
.lp-form-group textarea[b-ce94xeqfq7]::placeholder {
    color: #6b7280;
}

.lp-form-group input:focus[b-ce94xeqfq7],
.lp-form-group textarea:focus[b-ce94xeqfq7] {
    border-color: var(--lp-orange, #f59e0b);
}

.lp-contact-submit[b-ce94xeqfq7] {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-top: 0.25rem;
}

.lp-contact-success[b-ce94xeqfq7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── Contact info ─────────────────────────────────────────────────────── */
.lp-contact-info[b-ce94xeqfq7] {
    padding: 0.5rem 0;
}

.lp-contact-info-item[b-ce94xeqfq7] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.lp-contact-info-icon[b-ce94xeqfq7] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-orange, #f59e0b);
}

.lp-contact-info-label[b-ce94xeqfq7] {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lp-contact-info-value[b-ce94xeqfq7] {
    font-size: 0.92rem;
    color: var(--lp-text, #f9fafb);
    margin: 0;
    line-height: 1.5;
}
/* /Pages/Dashboard.razor.rz.scp.css */
.dash-stats[b-nixqawx0oo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.dash-stat-card[b-nixqawx0oo] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.dash-stat-top[b-nixqawx0oo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-stat-label[b-nixqawx0oo] {
    font-size: 0.82rem;
    color: var(--lp-muted);
}

.dash-stat-icon[b-nixqawx0oo] {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--lp-muted);
    flex-shrink: 0;
}

.dash-stat-value[b-nixqawx0oo] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--lp-text);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dash-stat-change[b-nixqawx0oo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-orange);
}

.dash-work-area[b-nixqawx0oo] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
}

/* Container queries — respond to available content width, not viewport width.
   This correctly accounts for the sidebar (240 px expanded / 60 px collapsed). */

@container (max-width: 640px) {
    .dash-stats[b-nixqawx0oo] { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 360px) {
    .dash-stats[b-nixqawx0oo]         { grid-template-columns: 1fr; }
    .dash-stat-value[b-nixqawx0oo]    { font-size: 1.5rem; }
}

/* /Pages/Debug.razor.rz.scp.css */
.debug-actions[b-mco6aci6ue] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

.debug-card[b-mco6aci6ue] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.debug-card__title[b-mco6aci6ue] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--lp-text);
}

.debug-card__desc[b-mco6aci6ue] {
    font-size: 0.875rem;
    color: var(--lp-text-muted);
    margin-bottom: 0.25rem;
}
/* /Pages/DisplayBoard.razor.rz.scp.css */
.db-root[b-1q3h8poqot] {
    width: 100dvw;
    min-height: 100dvh;
    background: #0f1117;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    color: #e2e8f0;
}

/* ── QR screen ────────────────────────────────────────────────────────────── */
.db-qr-wrap[b-1q3h8poqot] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.db-qr-link[b-1q3h8poqot] {
    display: block;
    line-height: 0;
}

.db-qr-box[b-1q3h8poqot] {
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    line-height: 0;
}

.db-qr-label[b-1q3h8poqot] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

.db-qr-waiting[b-1q3h8poqot] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
    animation: db-pulse-b-1q3h8poqot 1.8s ease-in-out infinite;
}

@keyframes db-pulse-b-1q3h8poqot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── Board ────────────────────────────────────────────────────────────────── */
.db-board[b-1q3h8poqot] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100dvw;
    min-height: 100dvh;
    padding: 1.5rem;
    box-sizing: border-box;
    align-items: start;
}

/* ── Column ──────────────────────────────────────────────────────────────── */
.db-col[b-1q3h8poqot] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.db-col-head[b-1q3h8poqot] {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.6rem 0;
    border-bottom: 2px solid;
    margin-bottom: 0.25rem;
}

.db-col-head--active[b-1q3h8poqot] { color: #f59e0b; border-color: #f59e0b; }
.db-col-head--ready[b-1q3h8poqot]  { color: #22c55e; border-color: #22c55e; }

.db-col-body[b-1q3h8poqot] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Order card ──────────────────────────────────────────────────────────── */
.db-card[b-1q3h8poqot] {
    background: #1e2535;
    border: 1px solid #2d3748;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.db-card--ready[b-1q3h8poqot] {
    border-color: rgba(34, 197, 94, 0.35);
    background: #192c20;
}

.db-card-number[b-1q3h8poqot] {
    font-size: var(--db-card-fs, 1.6rem);
    font-weight: 800;
    color: #fff;
    flex: 1;
}

/* ── Variants 1 & 2: horizontal wrapping tile layout ─────────────────────── */
.db-board--v1 .db-col-body[b-1q3h8poqot],
.db-board--v2 .db-col-body[b-1q3h8poqot] {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
}

.db-board--v1 .db-card[b-1q3h8poqot],
.db-board--v2 .db-card[b-1q3h8poqot] {
    width: calc(var(--db-card-fs, 1.6rem) * 4.5);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    min-height: calc(var(--db-card-fs, 1.6rem) * 3);
}

/* ── Variant 1: number solo (centered) ───────────────────────────────────── */
.db-card-number--solo[b-1q3h8poqot] {
    flex: unset;
    text-align: center;
}

/* ── Variant 2: number in border ─────────────────────────────────────────── */
.db-card-border-box[b-1q3h8poqot] {
    border: 3px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.4rem 0.9rem;
    font-size: var(--db-card-fs, 1.6rem);
    font-weight: 800;
    color: #fff;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.db-card--ready .db-card-border-box[b-1q3h8poqot] {
    border-color: #22c55e;
}

/* ── Variant 3: item count ───────────────────────────────────────────────── */
.db-card-count[b-1q3h8poqot] {
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
}

.db-card-table[b-1q3h8poqot] {
    font-size: 0.9rem;
    font-weight: 600;
    background: #1e3a5f;
    color: #93c5fd;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.db-card-time[b-1q3h8poqot] {
    font-size: 0.9rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── Empty ───────────────────────────────────────────────────────────────── */
.db-empty[b-1q3h8poqot] {
    font-size: 0.95rem;
    color: #475569;
    padding: 2rem 0;
    text-align: center;
}

/* ── Error ───────────────────────────────────────────────────────────────── */
.db-error[b-1q3h8poqot] {
    font-size: 1rem;
    color: #f87171;
    text-align: center;
    padding: 2rem;
}

/* ── Hover trigger zone (invisible bottom strip) ─────────────────────────── */
.db-settings-trigger[b-1q3h8poqot] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    z-index: 600;
    cursor: pointer;
}

/* ── Settings panel ──────────────────────────────────────────────────────── */
.db-settings-panel[b-1q3h8poqot] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 550;
    background: #1a202c;
    border-top: 1px solid #2d3748;
    border-radius: 16px 16px 0 0;
    padding: 0.75rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.28s ease;
}

.db-settings-panel--open[b-1q3h8poqot] {
    transform: translateY(0);
}

.db-settings-handle[b-1q3h8poqot] {
    width: 3rem;
    height: 4px;
    background: #2d3748;
    border-radius: 2px;
    align-self: center;
    margin-bottom: 0.25rem;
}

.db-settings-title[b-1q3h8poqot] {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
}

.db-settings-section[b-1q3h8poqot] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.db-settings-label[b-1q3h8poqot] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
}

.db-settings-row[b-1q3h8poqot] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.db-fs-btn[b-1q3h8poqot] {
    min-width: 2.8rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    background: #1e2535;
    border: 1px solid #2d3748;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.db-fs-btn--active[b-1q3h8poqot] {
    border-color: #f59e0b;
    color: #f59e0b;
}

.db-variant-btn[b-1q3h8poqot] {
    padding: 0.4rem 0.9rem;
    height: 2.5rem;
    background: #1e2535;
    border: 1px solid #2d3748;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s;
}

.db-variant-btn--active[b-1q3h8poqot] {
    border-color: #f59e0b;
    color: #f59e0b;
}
/* /Pages/Home.razor.rz.scp.css */
/* ─── Home page — page-specific overrides only ────────────────────────────── */
/* Shared landing page styles (nav, footer, hero, sections, etc.) live in     */
/* wwwroot/css/landing.css which is loaded globally via index.html.            */
/* /Pages/KitchenDisplay.razor.rz.scp.css */
/* ── Loading / error state ───────────────────────────────────────────────── */
.kds-state[b-jeqou7nl3j] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.kds-spinner[b-jeqou7nl3j] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: kds-spin-b-jeqou7nl3j 0.6s linear infinite;
}

@keyframes kds-spin-b-jeqou7nl3j { to { transform: rotate(360deg); } }

/* ── Toolbar (view selector + filter) ───────────────────────────────────── */
.kds-toolbar[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* ── View selector ───────────────────────────────────────────────────────── */
.kds-view-selector[b-jeqou7nl3j] {
    display: flex;
    gap: 0.35rem;
}

.kds-view-btn[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.2rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    color: var(--lp-muted);
    font-size: 0.7rem;
}

.kds-view-icon[b-jeqou7nl3j] {
    width: 0.85rem;
    height: 0.7rem;
    flex-shrink: 0;
}

.kds-view-btn--active[b-jeqou7nl3j] {
    border-color: var(--lp-orange);
    color: var(--lp-orange);
}

/* ── Jump nav (1-column mode) ────────────────────────────────────────────── */
.kds-jump-nav[b-jeqou7nl3j] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 3.5rem;   /* sit flush below the .top-row (height: 3.5rem) */
    z-index: 10;
    background: var(--lp-bg);
    padding-bottom: 0.5rem;
    padding-top: 0.25rem;
}

.kds-jump-btn[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-muted);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.kds-jump-btn[b-jeqou7nl3j]  svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

@media (hover: hover) {
    .kds-jump-btn:hover[b-jeqou7nl3j] {
        border-color: var(--lp-orange);
        color: var(--lp-orange);
    }
}

/* ── Board (grid) ────────────────────────────────────────────────────────── */
.kds-board[b-jeqou7nl3j] {
    display: grid;
    gap: 1rem;
    align-items: flex-start;
}

/* Layout mode classes — driven by _columnCount C# state */
.kds-board--1col[b-jeqou7nl3j] { grid-template-columns: 1fr; }
.kds-board--2col[b-jeqou7nl3j] { grid-template-columns: repeat(2, 1fr); }
.kds-board--3col[b-jeqou7nl3j] { grid-template-columns: repeat(3, 1fr); }

/* 2-col default (offset 0): hide col 3 */
.kds-board--2col:not(.kds-board--offset1) .kds-col:nth-child(3)[b-jeqou7nl3j] {
    display: none;
}

/* 2-col offset 1: hide col 1, show cols 2+3 */
.kds-board--2col.kds-board--offset1 .kds-col:nth-child(1)[b-jeqou7nl3j] {
    display: none;
}

/* 1-col: remove height cap so all status sections scroll freely */
.kds-board--1col .kds-col-body[b-jeqou7nl3j] {
    max-height: none;
    overflow-y: visible;
}

/* Prevent dragleave flicker when pointer enters a card child */
.kds-board--dragging .kds-card *[b-jeqou7nl3j] {
    pointer-events: none;
}

/* ── Column ──────────────────────────────────────────────────────────────── */
.kds-col[b-jeqou7nl3j] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kds-col--over[b-jeqou7nl3j] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

/* ── Column header ───────────────────────────────────────────────────────── */
.kds-col-head[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem 0.6rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.kds-col-title[b-jeqou7nl3j] {
    flex: 1;
    display: flex;
    align-items: center;
}

.kds-col-title[b-jeqou7nl3j]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.kds-col-badge[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-muted);
}

/* ── Column body (scrollable card list) ──────────────────────────────────── */
.kds-col-body[b-jeqou7nl3j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    max-height: calc(100dvh - 310px);
}

/* ── Empty column placeholder ────────────────────────────────────────────── */
.kds-col-empty[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0;
    font-size: 0.8rem;
    color: var(--lp-muted);
    opacity: 0.6;
}

/* ── Order group ─────────────────────────────────────────────────────────── */
.kds-order-group[b-jeqou7nl3j] {
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.kds-order-group-head[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: var(--lp-bg-card);
    border-bottom: 1px solid var(--lp-border);
    flex-wrap: wrap;
}

.kds-order-group-number[b-jeqou7nl3j] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--lp-text);
    flex: 1;
}

.kds-order-group .kds-card[b-jeqou7nl3j] {
    border: none;
    border-bottom: 1px solid var(--lp-border);
    border-radius: 0;
}

.kds-order-group .kds-card:last-child[b-jeqou7nl3j] {
    border-bottom: none;
}

@media (hover: hover) {
    .kds-order-group .kds-card:hover[b-jeqou7nl3j] {
        box-shadow: none;
        border-color: transparent;
    }
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.kds-card[b-jeqou7nl3j] {
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
    transition: opacity 0.15s, box-shadow 0.12s, border-color 0.12s;
    user-select: none;
}

@media (hover: hover) {
    .kds-card:hover[b-jeqou7nl3j] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        border-color: color-mix(in srgb, var(--lp-border) 50%, var(--lp-orange) 50%);
    }
}

.kds-card:active[b-jeqou7nl3j] {
    cursor: grabbing;
}

.kds-card--dragging[b-jeqou7nl3j] {
    opacity: 0.4;
    cursor: grabbing;
}

/* ── Card top row (name + quantity) ──────────────────────────────────────── */
.kds-card-top[b-jeqou7nl3j] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.kds-card-name[b-jeqou7nl3j] {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lp-text);
}

.kds-card-qty[b-jeqou7nl3j] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--lp-orange);
    flex-shrink: 0;
}

/* ── Card meta row (order number + context badge) ────────────────────────── */
.kds-card-meta[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.kds-card-order[b-jeqou7nl3j] {
    font-size: 0.74rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Context badges ──────────────────────────────────────────────────────── */
.kds-badge[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Light theme */
.kds-badge--table[b-jeqou7nl3j]    { background: #dbeafe; color: #1d4ed8; }
.kds-badge--dinein[b-jeqou7nl3j]   { background: #e8f0fe; color: #1a56db; }
.kds-badge--takeout[b-jeqou7nl3j]  { background: #fef3c7; color: #92400e; }
.kds-badge--delivery[b-jeqou7nl3j] { background: #ede9fe; color: #6d28d9; }

/* Dark theme */
:root.dark .kds-badge--table[b-jeqou7nl3j]    { background: #1e3a5f; color: #93c5fd; }
:root.dark .kds-badge--dinein[b-jeqou7nl3j]   { background: #1e3a5f; color: #93c5fd; }
:root.dark .kds-badge--takeout[b-jeqou7nl3j]  { background: #4b3a1a; color: #fcd34d; }
:root.dark .kds-badge--delivery[b-jeqou7nl3j] { background: #3b2d5e; color: #c4b5fd; }

/* ── Card notes ──────────────────────────────────────────────────────────── */
.kds-card-notes[b-jeqou7nl3j] {
    font-size: 0.75rem;
    color: var(--lp-muted);
    line-height: 1.4;
}

.kds-card-notes-label[b-jeqou7nl3j] {
    font-weight: 600;
    margin-right: 0.2rem;
}

/* ── Card station ────────────────────────────────────────────────────────── */
.kds-card-station[b-jeqou7nl3j] {
    font-size: 0.72rem;
    color: var(--lp-muted);
    font-style: italic;
}

/* ── Card action row (back + forward buttons) ────────────────────────────── */
.kds-card-actions[b-jeqou7nl3j] {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.kds-card-action-back[b-jeqou7nl3j] {
    flex: 1;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: 1px solid;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kds-card-action-back[b-jeqou7nl3j]  svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.kds-card-action-back--pending[b-jeqou7nl3j]  { color: #f59e0b; border-color: #f59e0b; }
.kds-card-action-back--rejected[b-jeqou7nl3j] { color: #f43f5e; border-color: #f43f5e; }
@media (hover: hover) { .kds-card-action-back:hover[b-jeqou7nl3j]  { opacity: 0.7; } }
.kds-card-action-back:active[b-jeqou7nl3j] { opacity: 0.5; }

/* ── Card forward action button ──────────────────────────────────────────── */
.kds-card-action[b-jeqou7nl3j] {
    flex: 4;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kds-card-action--inprogress[b-jeqou7nl3j] { background: #3b82f6; }
.kds-card-action--ready[b-jeqou7nl3j]      { background: #22c55e; }

.kds-card-action[b-jeqou7nl3j]  svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: #fff;
    color: #fff;
}

@media (hover: hover) { .kds-card-action:hover[b-jeqou7nl3j]  { opacity: 0.88; } }
.kds-card-action:active[b-jeqou7nl3j] { opacity: 0.72; }

/* ── New-items pulsing badge ─────────────────────────────────────────────── */
.kds-new-badge[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.4rem;
    background: var(--lp-orange);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    animation: kds-pulse-b-jeqou7nl3j 1.4s ease-in-out infinite;
}

@keyframes kds-pulse-b-jeqou7nl3j {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.12); }
}

/* ── Floating queue badge (2-col offset=1, queue off-screen) ─────────────── */
.kds-floating-queue-badge[b-jeqou7nl3j] {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    background: var(--lp-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45);
    animation: kds-pulse-b-jeqou7nl3j 1.4s ease-in-out infinite;
    z-index: 100;
}

/* ── Order group elapsed time ────────────────────────────────────────────── */
.kds-order-group-time[b-jeqou7nl3j] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Card unit label (variant name) ─────────────────────────────────────── */
.kds-card-unit[b-jeqou7nl3j] {
    font-size: 0.74rem;
    color: var(--lp-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Card info button ────────────────────────────────────────────────────── */
.kds-card-info-btn[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    transition: border-color 0.12s, color 0.12s;
}

.kds-card-info-btn[b-jeqou7nl3j]  svg {
    width: 0.75rem;
    height: 0.75rem;
}

@media (hover: hover) {
    .kds-card-info-btn:hover[b-jeqou7nl3j] {
        border-color: var(--lp-orange);
        color: var(--lp-orange);
    }
}

/* ── Info popup overlay ──────────────────────────────────────────────────── */
.kds-popup-overlay[b-jeqou7nl3j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.kds-popup[b-jeqou7nl3j] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kds-popup-head[b-jeqou7nl3j] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
}

.kds-popup-title[b-jeqou7nl3j] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1;
    flex-wrap: wrap;
}

.kds-popup-name[b-jeqou7nl3j] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
}

.kds-popup-unit[b-jeqou7nl3j] {
    font-size: 0.78rem;
    color: var(--lp-muted);
}

.kds-popup-close[b-jeqou7nl3j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    transition: border-color 0.12s, color 0.12s;
}

.kds-popup-close[b-jeqou7nl3j]  svg {
    width: 0.8rem;
    height: 0.8rem;
}

@media (hover: hover) {
    .kds-popup-close:hover[b-jeqou7nl3j] {
        border-color: var(--lp-orange);
        color: var(--lp-orange);
    }
}

.kds-popup-row[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kds-popup-section[b-jeqou7nl3j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kds-popup-label[b-jeqou7nl3j] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lp-muted);
    flex-shrink: 0;
}

.kds-popup-modifiers[b-jeqou7nl3j] {
    margin: 0;
    padding: 0 0 0 1rem;
    font-size: 0.82rem;
    color: var(--lp-text);
    line-height: 1.6;
}

.kds-popup-notes[b-jeqou7nl3j] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--lp-text);
    line-height: 1.5;
}

/* ── Station filter ──────────────────────────────────────────────────────── */
.kds-filter-wrap[b-jeqou7nl3j] {
    position: relative;
}

.kds-filter-btn[b-jeqou7nl3j] {
    width: auto;
    padding: 0 0.65rem;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    max-width: 10rem;
    overflow: hidden;
}

.kds-filter-btn[b-jeqou7nl3j]  svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.kds-filter-btn span[b-jeqou7nl3j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kds-filter-backdrop[b-jeqou7nl3j] {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.kds-filter-dropdown[b-jeqou7nl3j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 201;
    min-width: 10rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.kds-filter-option[b-jeqou7nl3j] {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--lp-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}

@media (hover: hover) {
    .kds-filter-option:hover[b-jeqou7nl3j] {
        background: var(--lp-bg-card2);
    }
}

.kds-filter-option--active[b-jeqou7nl3j] {
    color: var(--lp-orange);
    font-weight: 600;
}

/* ── 2-column pair switcher separator ────────────────────────────────────── */
.kds-view-sep[b-jeqou7nl3j] {
    width: 1px;
    height: 1.3rem;
    background: var(--lp-border);
    align-self: center;
    margin: 0 0.1rem;
    flex-shrink: 0;
}
/* /Pages/Login.razor.rz.scp.css */
input.is-valid[b-icl4bsfl58] {
    background-image: none;
}

@media (max-width: 575.98px) {
    .min-vh-100.d-flex[b-icl4bsfl58] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Pages/OrdersActive.razor.rz.scp.css */
/* ── Loading / error state ───────────────────────────────────────────────── */
.oa-state[b-da25vgds3g] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.oa-spinner[b-da25vgds3g] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: oa-spin-b-da25vgds3g 0.6s linear infinite;
}

@keyframes oa-spin-b-da25vgds3g { to { transform: rotate(360deg); } }

/* ── Order list ──────────────────────────────────────────────────────────── */
.oa-list[b-da25vgds3g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Order group card (top level — like .cat-card) ───────────────────────── */
.oa-group[b-da25vgds3g] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

/* ── Selection dimming (like .cat-list--has-selection) ───────────────────── */
.oa-list--has-selection .oa-group:not(.oa-group--selected)[b-da25vgds3g] {
    opacity: 0.55;
    transform: scale(0.985);
    filter: blur(0.4px);
}

@media (hover: hover) {
    .oa-group:hover:not(.oa-group--selected)[b-da25vgds3g] {
        border-color: color-mix(in srgb, var(--lp-border) 60%, var(--lp-orange));
    }
}

.oa-group--selected[b-da25vgds3g] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
}

/* ── Order group header (like .cat-card-header) ──────────────────────────── */
.oa-group-head[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    background: none;
    border: none;
    color: var(--lp-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) { .oa-group-head:hover[b-da25vgds3g] { background: var(--lp-bg-card2); } }

.oa-group--selected .oa-group-head[b-da25vgds3g] {
    background: color-mix(in srgb, var(--lp-orange) 5%, transparent);
}

.oa-group-info[b-da25vgds3g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.oa-group-label-row[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.oa-group-desc[b-da25vgds3g] {
    font-size: 0.73rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.oa-group-label[b-da25vgds3g] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-group-chip[b-da25vgds3g] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Warning indicator icons (ready / postponed) ─────────────────────────── */
.oa-group-head[b-da25vgds3g]  .oa-warn-icon,
.oa-check-toggle[b-da25vgds3g]  .oa-warn-icon {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    fill: currentColor;
}

.oa-group-head[b-da25vgds3g]  .oa-warn-icon--ready,
.oa-check-toggle[b-da25vgds3g]  .oa-warn-icon--ready     { color: #22c55e; }

.oa-group-head[b-da25vgds3g]  .oa-warn-icon--postponed,
.oa-check-toggle[b-da25vgds3g]  .oa-warn-icon--postponed { color: #f59e0b; }

:root.dark .oa-group-head[b-da25vgds3g]  .oa-warn-icon--ready,
:root.dark .oa-check-toggle[b-da25vgds3g]  .oa-warn-icon--ready     { color: #4ade80; }

:root.dark .oa-group-head[b-da25vgds3g]  .oa-warn-icon--postponed,
:root.dark .oa-check-toggle[b-da25vgds3g]  .oa-warn-icon--postponed { color: #fbbf24; }

.oa-group-meta[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.oa-group-total[b-da25vgds3g] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ── Payment status badges ───────────────────────────────────────────────── */
.oa-badge--pay[b-da25vgds3g]               { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.oa-badge--pay-pending[b-da25vgds3g]       { background: #f3f4f6; color: #6b7280; }
.oa-badge--pay-paid[b-da25vgds3g]          { background: #d1fae5; color: #065f46; }
.oa-badge--pay-refunded[b-da25vgds3g]      { background: #fef3c7; color: #92400e; }

:root.dark .oa-badge--pay-pending[b-da25vgds3g]  { background: #374151; color: #9ca3af; }
:root.dark .oa-badge--pay-paid[b-da25vgds3g]     { background: #064e3b; color: #6ee7b7; }
:root.dark .oa-badge--pay-refunded[b-da25vgds3g] { background: #4b3a1a; color: #fcd34d; }

/* ── Order group chevron (like .cat-chevron-btn chevron, -90° → 0°) ──────── */
.oa-group-head[b-da25vgds3g]  .oa-chevron {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    color: var(--lp-muted);
    fill: currentColor;
    transform: rotate(-90deg);
    transition: transform 0.22s ease;
}

.oa-group-head[b-da25vgds3g]  .oa-chevron--open {
    transform: rotate(0deg);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.oa-badge[b-da25vgds3g] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Type badges */
.oa-badge--dinein[b-da25vgds3g]   { background: #e8f0fe; color: #1a56db; }
.oa-badge--takeout[b-da25vgds3g]  { background: #fef3c7; color: #92400e; }
.oa-badge--delivery[b-da25vgds3g] { background: #ede9fe; color: #6d28d9; }

/* Dark mode */
:root.dark .oa-badge--dinein[b-da25vgds3g]   { background: #1e3a5f; color: #93c5fd; }
:root.dark .oa-badge--takeout[b-da25vgds3g]  { background: #4b3a1a; color: #fcd34d; }
:root.dark .oa-badge--delivery[b-da25vgds3g] { background: #3b2d5e; color: #c4b5fd; }

/* ── Order group body accordion (outer — like .cat-accordion) ────────────── */
.oa-group-body[b-da25vgds3g] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.oa-group-body--open[b-da25vgds3g] { grid-template-rows: 1fr; }

.oa-group-body-inner[b-da25vgds3g] { overflow: hidden; }

/* ── Check section wrapper (like .sub-section) ───────────────────────────── */
.oa-check-section[b-da25vgds3g] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lp-border);
}

/* ── Check header row wrapper ────────────────────────────────────────────── */
.oa-check-head[b-da25vgds3g] {
    display: flex;
    align-items: center;
    background: var(--lp-bg-card2);
}

/* ── Expand/collapse toggle button (fills the row) ───────────────────────── */
.oa-check-toggle[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem 0.6rem 3rem;
    background: none;
    border: none;
    color: var(--lp-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) {
    .oa-check-toggle:hover[b-da25vgds3g] {
        background: color-mix(in srgb, var(--lp-bg-card2) 70%, var(--lp-hover-bg));
    }
}

/* ── Sub-chevron (like .sub-chevron-btn chevron, -90° → 0°) ─────────────── */
.oa-check-toggle[b-da25vgds3g]  .oa-sub-chevron {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    color: var(--lp-muted);
    fill: currentColor;
    transform: rotate(-90deg);
    transition: transform 0.18s ease;
}

.oa-check-toggle[b-da25vgds3g]  .oa-sub-chevron--open {
    transform: rotate(0deg);
}

/* ── Check label: "Order #N · HH:mm" ────────────────────────────────────── */
.oa-check-label-col[b-da25vgds3g] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.oa-check-label[b-da25vgds3g] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-check-desc[b-da25vgds3g] {
    font-size: 0.71rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Pay button on group header ──────────────────────────────────────────── */
.oa-group-pay[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s;
}

.oa-group-pay[b-da25vgds3g]  svg { width: 0.82rem; height: 0.82rem; fill: currentColor; }
@media (hover: hover) { .oa-group-pay:hover[b-da25vgds3g]  { opacity: 0.85; } }
.oa-group-pay:active[b-da25vgds3g] { opacity: 0.7; }

.oa-paid-badge[b-da25vgds3g] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

:root.dark .oa-paid-badge[b-da25vgds3g] { background: #064e3b; color: #6ee7b7; }

/* ── Edit icon button on group header (single-check) ────────────────────── */
.oa-group-edit[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    background: none;
    color: var(--lp-muted);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.oa-group-edit[b-da25vgds3g]  svg { width: 0.82rem; height: 0.82rem; fill: currentColor; }
@media (hover: hover) { .oa-group-edit:hover[b-da25vgds3g] { background: rgba(245, 158, 11, 0.1); color: var(--lp-orange); border-color: var(--lp-orange); } }

.oa-group-reject[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    background: none;
    color: var(--lp-muted);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.oa-group-reject[b-da25vgds3g]  svg { width: 0.82rem; height: 0.82rem; fill: currentColor; }
@media (hover: hover) { .oa-group-reject:hover:not(:disabled)[b-da25vgds3g] { background: rgba(239, 68, 68, 0.08); color: #ef4444; border-color: #ef4444; } }
.oa-group-reject:disabled[b-da25vgds3g] { opacity: 0.35; cursor: not-allowed; }

/* ── Direct items (single-check, Level 2) ────────────────────────────────── */
.oa-item-row--direct[b-da25vgds3g] { padding-left: 1rem; }
.oa-check-empty--direct[b-da25vgds3g] { padding-left: 1rem; }

/* ── Edit icon button on check header (multi-check) ─────────────────────── */
.oa-check-add[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 0.4rem;
    background: none;
    color: var(--lp-muted);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.oa-check-add[b-da25vgds3g]  svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

@media (hover: hover) { .oa-check-add:hover[b-da25vgds3g] { background: rgba(245, 158, 11, 0.1); color: var(--lp-orange); border-color: var(--lp-orange); } }

/* ── Ready / postponed count badges ──────────────────────────────────────── */
.oa-count-badge[b-da25vgds3g] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.oa-count-badge--ready[b-da25vgds3g]     { background: #d1fae5; color: #065f46; }
.oa-count-badge--postponed[b-da25vgds3g] { background: #fef3c7; color: #92400e; }

:root.dark .oa-count-badge--ready[b-da25vgds3g]     { background: #064e3b; color: #6ee7b7; }
:root.dark .oa-count-badge--postponed[b-da25vgds3g] { background: #4b3a1a; color: #fcd34d; }

.oa-check-meta[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.oa-check-total[b-da25vgds3g] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Check body accordion (inner — like .sub-item-body) ─────────────────── */
.oa-check-body[b-da25vgds3g] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.oa-check-body--open[b-da25vgds3g] { grid-template-rows: 1fr; }

.oa-check-body-inner[b-da25vgds3g] { overflow: hidden; }

/* ── Empty state inside check ────────────────────────────────────────────── */
.oa-check-empty[b-da25vgds3g] {
    padding: 0.5rem 1rem 0.6rem 4.5rem;
    font-size: 0.82rem;
    color: var(--lp-muted);
    border-top: 1px solid var(--lp-border);
}

/* ── Item row (leaf — like .offer-item) ──────────────────────────────────── */
.oa-item-row[b-da25vgds3g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem 0.35rem 4.5rem;
    font-size: 0.875rem;
    border-top: 1px solid var(--lp-border);
}

.oa-item-info[b-da25vgds3g] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.oa-item-name[b-da25vgds3g] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-item-note[b-da25vgds3g] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-item-qty[b-da25vgds3g] {
    color: var(--lp-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.oa-item-price[b-da25vgds3g] {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}


/* ── Deliver button ──────────────────────────────────────────────────────── */
.oa-item-deliver[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s;
}

.oa-item-deliver[b-da25vgds3g]  svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
@media (hover: hover) { .oa-item-deliver:hover[b-da25vgds3g]  { opacity: 0.85; } }
.oa-item-deliver:active[b-da25vgds3g] { opacity: 0.7; }

/* ── Resume button ───────────────────────────────────────────────────────── */
.oa-item-resume[b-da25vgds3g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: #a78bfa;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s;
}

.oa-item-resume[b-da25vgds3g]  svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
@media (hover: hover) { .oa-item-resume:hover[b-da25vgds3g]  { opacity: 0.85; } }
.oa-item-resume:active[b-da25vgds3g] { opacity: 0.7; }

/* ── Check action buttons ─────────────────────────────────────────────── */
.oa-check-actions[b-da25vgds3g] {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem 0.6rem 3rem;
    border-top: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
}

.oa-action-btn[b-da25vgds3g] {
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.oa-action-btn--add[b-da25vgds3g] {
    background: var(--lp-bg-card);
    color: var(--lp-text);
    border: 1px solid var(--lp-border);
}

@media (hover: hover) { .oa-action-btn--add:hover[b-da25vgds3g] { background: var(--lp-border); } }

.oa-action-btn--complete[b-da25vgds3g] {
    background: var(--lp-orange);
    color: #000;
}

.oa-action-btn--complete:hover[b-da25vgds3g]  { opacity: 0.85; }
.oa-action-btn--complete:active[b-da25vgds3g] { opacity: 0.7; }


.oa-qr-badge[b-da25vgds3g] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
}
/* /Pages/OrdersConfiguration.razor.rz.scp.css */
/* ── Toggle rows container ────────────────────────────────────────────────── */
.oconf-rows[b-m8yx6f2fwp] {
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Toggle row ───────────────────────────────────────────────────────────── */
.oconf-row[b-m8yx6f2fwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 1rem;
    transition: background 0.12s;
}

.oconf-row:not(:last-child)[b-m8yx6f2fwp] { border-bottom: 1px solid var(--lp-border); }
@media (hover: hover) { .oconf-row:hover[b-m8yx6f2fwp]            { background: var(--lp-hover-bg); } }

.oconf-row-text[b-m8yx6f2fwp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.oconf-row-title[b-m8yx6f2fwp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.oconf-row-desc[b-m8yx6f2fwp] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.4;
}


/* ── Error banner ─────────────────────────────────────────────────────────── */
.module-error-banner[b-m8yx6f2fwp] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #b91c1c;
}

:root.dark .module-error-banner[b-m8yx6f2fwp] {
    background: #3b1111;
    border-color: #7f1d1d;
    color: #fca5a5;
}
/* /Pages/OrdersHistory.razor.rz.scp.css */
/* ── Filter bar ──────────────────────────────────────────────────────────── */
.oh-filter-bar[b-gpznb12lms] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.oh-filter-group[b-gpznb12lms] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.oh-filter-label[b-gpznb12lms] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Date picker trigger button ──────────────────────────────────────────── */
.res-date-wrap[b-gpznb12lms] {
    position: relative;
    flex-shrink: 0;
}

.res-date-btn[b-gpznb12lms] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.12s;
    white-space: nowrap;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) {
    .res-date-btn:hover[b-gpznb12lms] { border-color: var(--lp-orange); background: var(--lp-hover-bg); }
}

.res-date-btn[b-gpznb12lms]  .res-date-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.res-date-btn[b-gpznb12lms]  .res-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.res-date-btn[b-gpznb12lms]  .res-chevron--open { transform: rotate(180deg); }

/* ── Calendar popover ────────────────────────────────────────────────────── */
.res-calendar-backdrop[b-gpznb12lms] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.res-calendar[b-gpznb12lms] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 101;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    min-width: 240px;
}

.res-cal-header[b-gpznb12lms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.res-cal-month[b-gpznb12lms] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.res-cal-nav[b-gpznb12lms] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

@media (hover: hover) { .res-cal-nav:hover[b-gpznb12lms] { background: var(--lp-hover-bg); color: var(--lp-text); } }
.res-cal-nav[b-gpznb12lms]  svg { width: 0.75rem; height: 0.75rem; }

.res-cal-grid[b-gpznb12lms] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.res-cal-dow[b-gpznb12lms] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-align: center;
    padding: 2px 0 4px;
}

.res-cal-day[b-gpznb12lms] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--lp-text);
    cursor: pointer;
    transition: background 0.12s;
}

@media (hover: hover) { .res-cal-day:hover[b-gpznb12lms]                { background: var(--lp-hover-bg); } }
.res-cal-day--today[b-gpznb12lms]               { color: var(--lp-orange); font-weight: 700; }
.res-cal-day--selected[b-gpznb12lms]            { background: var(--lp-orange); color: #000; font-weight: 700; }
@media (hover: hover) { .res-cal-day--selected:hover[b-gpznb12lms]      { background: var(--lp-orange); } }

/* ── Loading / error state ───────────────────────────────────────────────── */
.oa-state[b-gpznb12lms] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.oa-spinner[b-gpznb12lms] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: oa-spin-b-gpznb12lms 0.6s linear infinite;
}

@keyframes oa-spin-b-gpznb12lms { to { transform: rotate(360deg); } }

/* ── Order list ──────────────────────────────────────────────────────────── */
.oa-list[b-gpznb12lms] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Date section header ─────────────────────────────────────────────────── */
.oh-date-header[b-gpznb12lms] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lp-muted);
    padding: 0.75rem 0 0.25rem;
}

.oh-date-header:first-child[b-gpznb12lms] { padding-top: 0; }

/* ── Order group card ────────────────────────────────────────────────────── */
.oa-group[b-gpznb12lms] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s, filter 0.2s;
}

.oa-list--has-selection .oa-group:not(.oa-group--selected)[b-gpznb12lms] {
    opacity: 0.55;
    transform: scale(0.985);
    filter: blur(0.4px);
}

@media (hover: hover) {
    .oa-group:hover:not(.oa-group--selected)[b-gpznb12lms] {
        border-color: color-mix(in srgb, var(--lp-border) 60%, var(--lp-orange));
    }
}

.oa-group--selected[b-gpznb12lms] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-orange) 40%, transparent);
}

/* ── Order group header ──────────────────────────────────────────────────── */
.oa-group-head[b-gpznb12lms] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    background: none;
    border: none;
    color: var(--lp-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) { .oa-group-head:hover[b-gpznb12lms] { background: var(--lp-bg-card2); } }

.oa-group--selected .oa-group-head[b-gpznb12lms] {
    background: color-mix(in srgb, var(--lp-orange) 5%, transparent);
}

.oa-group-info[b-gpznb12lms] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.oa-group-label-row[b-gpznb12lms] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.oa-group-label[b-gpznb12lms] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-group-desc[b-gpznb12lms] {
    font-size: 0.73rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.oa-group-meta[b-gpznb12lms] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.oa-group-total[b-gpznb12lms] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.oa-group-head[b-gpznb12lms]  .oa-chevron {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    color: var(--lp-muted);
    fill: currentColor;
    transform: rotate(-90deg);
    transition: transform 0.22s ease;
}

.oa-group-head[b-gpznb12lms]  .oa-chevron--open {
    transform: rotate(0deg);
}

/* ── Status badge ────────────────────────────────────────────────────────── */
.oh-status-badge[b-gpznb12lms] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.oh-status-badge--completed[b-gpznb12lms] { background: #d1fae5; color: #065f46; }
.oh-status-badge--cancelled[b-gpznb12lms] { background: #fee2e2; color: #991b1b; }

:root.dark .oh-status-badge--completed[b-gpznb12lms] { background: #064e3b; color: #6ee7b7; }
:root.dark .oh-status-badge--cancelled[b-gpznb12lms] { background: #450a0a; color: #fca5a5; }

/* ── Restore button ──────────────────────────────────────────────────────── */
.oh-restore-btn[b-gpznb12lms] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    background: none;
    color: var(--lp-muted);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.oh-restore-btn[b-gpznb12lms]  svg { width: 0.82rem; height: 0.82rem; fill: currentColor; }
@media (hover: hover) { .oh-restore-btn:hover[b-gpznb12lms] { background: rgba(34, 197, 94, 0.08); color: #16a34a; border-color: #16a34a; } }

/* ── Accordion body ──────────────────────────────────────────────────────── */
.oa-group-body[b-gpznb12lms] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.oa-group-body--open[b-gpznb12lms] { grid-template-rows: 1fr; }

.oa-group-body-inner[b-gpznb12lms] { overflow: hidden; }

/* ── Item row ────────────────────────────────────────────────────────────── */
.oa-item-row[b-gpznb12lms] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem 0.35rem 4.5rem;
    font-size: 0.875rem;
    border-top: 1px solid var(--lp-border);
}

.oa-item-row--direct[b-gpznb12lms] { padding-left: 1rem; }

.oa-item-info[b-gpznb12lms] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.oa-item-name[b-gpznb12lms] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-item-note[b-gpznb12lms] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-item-qty[b-gpznb12lms] {
    color: var(--lp-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.oa-item-price[b-gpznb12lms] {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Empty state inside order ────────────────────────────────────────────── */
.oa-check-empty[b-gpznb12lms] {
    padding: 0.5rem 1rem 0.6rem 4.5rem;
    font-size: 0.82rem;
    color: var(--lp-muted);
    border-top: 1px solid var(--lp-border);
}

.oa-check-empty--direct[b-gpznb12lms] { padding-left: 1rem; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination-bar[b-gpznb12lms] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--lp-border);
    flex-wrap: wrap;
}

.page-btn[b-gpznb12lms] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    background: var(--lp-bg-card2);
    color: var(--lp-text);
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1;
}

@media (hover: hover) { .page-btn:hover:not(:disabled)[b-gpznb12lms] { border-color: var(--lp-orange); color: var(--lp-orange); } }
.page-btn:focus-visible[b-gpznb12lms]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }
.page-btn:disabled[b-gpznb12lms]              { opacity: 0.35; cursor: default; }

.page-btn--active[b-gpznb12lms] {
    background: var(--lp-orange);
    border-color: var(--lp-orange);
    color: #000;
    font-weight: 600;
}
@media (hover: hover) { .page-btn--active:hover:not(:disabled)[b-gpznb12lms] { color: #000; } }

.page-btn--nav[b-gpznb12lms] { min-width: 2rem; }

.page-ellipsis[b-gpznb12lms] {
    min-width: 1.5rem;
    text-align: center;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 2rem;
    user-select: none;
}

.page-info[b-gpznb12lms] {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--lp-muted);
    white-space: nowrap;
}
/* /Pages/OrdersNew.razor.rz.scp.css */
/* ── Page header — matches dash-page padding-top on other pages ──────── */
.dash-header[b-ca7t9vd7j5] {
    padding-top: 2rem;
    padding-bottom: 0;
}

.dash-header h2[b-ca7t9vd7j5] {
    margin-bottom: 0;
}

/* ── Page: full-bleed 60/40 vertical split ───────────────────────────── */
.order-page[b-ca7t9vd7j5] {
    display: flex;
    height: calc(100vh - 3.5rem - 5.3rem);
    margin-top: -1.1rem;
    margin-left: -2rem;
    margin-right: -1.5rem;
    overflow: hidden;
    isolation: isolate;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEFT PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.order-cats[b-ca7t9vd7j5] {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0.75rem;
}



/* ── Mobile header bar (hidden on desktop) ───────────────────────────── */
.order-wrapper[b-ca7t9vd7j5] {
    display: contents;
}

.order-mobile-bar[b-ca7t9vd7j5] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT PANEL — RECEIPT
   ═══════════════════════════════════════════════════════════════════════ */
.order-check[b-ca7t9vd7j5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    margin: 0.5rem 0.75rem 0.5rem 0.5rem;
}


.order-check__empty[b-ca7t9vd7j5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--lp-muted);
    font-size: 0.875rem;
}

.order-check__empty svg[b-ca7t9vd7j5] {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.3;
    fill: currentColor;
}

.order-check__empty-title[b-ca7t9vd7j5] {
    font-weight: 600;
}

.order-check__empty-hint[b-ca7t9vd7j5] {
    font-size: 0.8rem;
    margin-top: -0.25rem;
}

/* ── View toggle (hidden on desktop) ─────────────────────────────────── */
.view-toggle[b-ca7t9vd7j5] {
    display: none;
}

.view-toggle-btn[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    padding: 0;
}

@keyframes badge-pulse-b-ca7t9vd7j5 {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

.view-toggle-badge[b-ca7t9vd7j5] {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--lp-orange);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    pointer-events: none;
    transform-origin: center;
}

.view-toggle-badge--pulse[b-ca7t9vd7j5] {
    animation: badge-pulse-b-ca7t9vd7j5 0.3s ease-out;
}

.view-toggle-btn--active .view-toggle-badge[b-ca7t9vd7j5] {
    background: #000;
    color: var(--lp-orange);
}

@media (hover: hover) {
    .view-toggle-btn:hover:not(.view-toggle-btn--active)[b-ca7t9vd7j5] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.view-toggle-btn--active[b-ca7t9vd7j5] {
    background: var(--lp-orange);
    color: #000;
}

.view-toggle-btn svg[b-ca7t9vd7j5] {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

/* ── List header (table/pager/tabs): sticky on desktop, scrolls on mobile ── */
.order-check__list-header[b-ca7t9vd7j5] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--lp-bg-card);
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .dash-header[b-ca7t9vd7j5] {
        padding-top: 0;
    }

    .order-wrapper[b-ca7t9vd7j5] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 6.5rem);
        height: calc(100dvh - 6.5rem);
        margin-top: 0;
        margin-left: -1rem;
        margin-right: -1rem;
        overflow: hidden;
    }

    .order-mobile-bar[b-ca7t9vd7j5] {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        background: var(--lp-bg);
        border-bottom: 1px solid var(--lp-border);
    }

    .order-mobile-bar__total[b-ca7t9vd7j5] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--lp-text);
    }

    .order-mobile-bar__total-value[b-ca7t9vd7j5] {
        font-size: 1.15rem;
        color: var(--lp-orange);
    }

    .order-page[b-ca7t9vd7j5] {
        flex: 1;
        height: auto;
        margin: 0;
        overflow: hidden;
    }

    .order-cats[b-ca7t9vd7j5] {
        flex: 1;
    }

    .order-check[b-ca7t9vd7j5] {
        flex: 1;
        border: none;
        border-radius: 0;
        margin: 0;
    }

    .order-panel--mobile-hidden[b-ca7t9vd7j5] {
        display: none;
    }

    .order-check__list-header[b-ca7t9vd7j5] {
        position: static;
    }

    .view-toggle[b-ca7t9vd7j5] {
        display: flex;
        align-items: center;
        border: 1px solid var(--lp-border);
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .order-tab--active .order-tab__btn[b-ca7t9vd7j5] {
        display: flex;
        opacity: 0.6;
    }

    .order-tab__btn:disabled[b-ca7t9vd7j5] {
        opacity: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RECEIPT TABS
   ═══════════════════════════════════════════════════════════════════════ */

.order-tab__name[b-ca7t9vd7j5] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.1rem;
    transition: color 0.13s;
}

.order-tab--active .order-tab__name[b-ca7t9vd7j5] {
    color: var(--lp-orange);
    font-weight: 600;
}

/* ── Tab action buttons ──────────────────────────────────────────────── */
.order-tab__btn[b-ca7t9vd7j5] {
    width: 1.4rem;
    height: 1.4rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--lp-muted);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: background 0.12s, color 0.12s, opacity 0.13s;
    outline: none;
}

.order-tab--active .order-tab__btn[b-ca7t9vd7j5]        { display: flex; }
@media (hover: hover) { .order-tab--active:hover .order-tab__btn[b-ca7t9vd7j5]  { opacity: 1; } }

.order-tab__btn:hover[b-ca7t9vd7j5]     { background: var(--lp-hover-bg); color: var(--lp-text); }
@media (hover: hover) { .order-tab__btn--del:hover[b-ca7t9vd7j5] { background: rgba(248, 113, 113, 0.12); color: #f87171; } }

.order-tab__btn:disabled[b-ca7t9vd7j5] {
    opacity: 0 !important;
    pointer-events: none;
}

.order-tab__btn:focus-visible[b-ca7t9vd7j5] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
    opacity: 1;
}

.order-tab__btn[b-ca7t9vd7j5]  svg {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
}

/* ── Add check button ──────────────────────────────────────────────── */
.order-tab-add[b-ca7t9vd7j5]  svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

/* ── Dialog: rename check ──────────────────────────────────────────── */
dialog.offer-dialog[b-ca7t9vd7j5] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 420px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.offer-dialog[open][b-ca7t9vd7j5] { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════════════
   RECEIPT ITEM LINES
   ═══════════════════════════════════════════════════════════════════════ */
.order-check__lines[b-ca7t9vd7j5] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.check-line[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s;
}

.check-line__info[b-ca7t9vd7j5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.check-line__name[b-ca7t9vd7j5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-line__price[b-ca7t9vd7j5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-muted);
}

/* ── Quantity counter ────────────────────────────────────────────────── */
.check-line__qty[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.check-qty-btn[b-ca7t9vd7j5] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid var(--lp-border);
    background: var(--lp-bg-card);
    color: var(--lp-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    outline: none;
    flex-shrink: 0;
}

@media (hover: hover) {
    .check-qty-btn:hover[b-ca7t9vd7j5] {
        background: var(--lp-orange);
        border-color: var(--lp-orange);
        color: #000;
    }
}

.check-qty-btn:focus-visible[b-ca7t9vd7j5] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.check-qty-btn[b-ca7t9vd7j5]  svg {
    width: 0.55rem;
    height: 0.55rem;
    fill: currentColor;
}

.check-qty-val[b-ca7t9vd7j5] {
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
    color: var(--lp-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANT PICKER DIALOG
   ═══════════════════════════════════════════════════════════════════════ */
.order-variant-body[b-ca7t9vd7j5] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
}

.order-variant-card[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    width: 100%;
    background: var(--lp-bg-card);
    border: 1.5px solid var(--lp-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
}

@media (hover: hover) {
    .order-variant-card:hover[b-ca7t9vd7j5] {
        border-color: rgba(245, 158, 11, 0.5);
        background: rgba(245, 158, 11, 0.04);
    }
}

.order-variant-card:active[b-ca7t9vd7j5] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.08);
}

.order-variant-card:focus-visible[b-ca7t9vd7j5] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.order-variant-name[b-ca7t9vd7j5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-text);
}

.order-variant-price[b-ca7t9vd7j5] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lp-orange);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   RECEIPT LINE ACTIONS
   ═══════════════════════════════════════════════════════════════════════ */
.check-line__note[b-ca7t9vd7j5] {
    font-size: 0.75rem;
    color: var(--lp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-line__postponed[b-ca7t9vd7j5] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    align-self: flex-start;
}

.check-line--selected[b-ca7t9vd7j5] {
    background: rgba(245, 158, 11, 0.05);
}

.check-line__actions[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.2s ease;
}

.check-line--selected .check-line__actions[b-ca7t9vd7j5] {
    max-width: 3.5rem;
}

.check-action-btn[b-ca7t9vd7j5] {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--lp-muted);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

@media (hover: hover) { .check-action-btn:hover[b-ca7t9vd7j5] { background: var(--lp-hover-bg); color: var(--lp-text); } }
.check-action-btn--del:hover[b-ca7t9vd7j5] { background: rgba(248, 113, 113, 0.12); color: #f87171; }

.check-action-btn:focus-visible[b-ca7t9vd7j5] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.check-action-btn[b-ca7t9vd7j5]  svg {
    width: 0.7rem;
    height: 0.7rem;
    fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTE TEXTAREA
   ═══════════════════════════════════════════════════════════════════════ */
.check-note-textarea[b-ca7t9vd7j5] {
    resize: none;
    min-height: 5rem;
    font-family: inherit;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════
   SUMMARY PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.order-check__summary[b-ca7t9vd7j5] {
    padding: 0.875rem 1.25rem 0.625rem;
    border-top: 1px solid var(--lp-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
}

.check-summary-row[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--lp-muted);
}

.check-summary-row--tax[b-ca7t9vd7j5] {
    font-size: 0.75rem;
}

.check-summary-row--total[b-ca7t9vd7j5] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--lp-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTION BUTTONS (Submit / Pay)
   ═══════════════════════════════════════════════════════════════════════ */
.order-check__actions[b-ca7t9vd7j5] {
    display: flex;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 2.25rem;
    flex-shrink: 0;
    border-top: 1px solid var(--lp-border);
}

.check-btn[b-ca7t9vd7j5] {
    flex: 1;
    height: 2.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s, color 0.13s, opacity 0.13s;
    outline: none;
}

.check-btn--submit[b-ca7t9vd7j5] {
    background: var(--lp-hover-bg);
    color: var(--lp-text);
    border: 1.5px solid var(--lp-border);
}

@media (hover: hover) { .check-btn--submit:hover[b-ca7t9vd7j5] { background: var(--lp-border); } }

.check-btn--pay[b-ca7t9vd7j5] {
    background: var(--lp-orange);
    color: #000;
}

.check-btn--pay:hover[b-ca7t9vd7j5] { background: #d97706; }

.check-btn--update[b-ca7t9vd7j5] {
    background: var(--lp-orange);
    color: #000;
}

@media (hover: hover) { .check-btn--update:hover[b-ca7t9vd7j5] { background: #d97706; } }
.check-btn--update:disabled[b-ca7t9vd7j5] { opacity: 0.5; cursor: not-allowed; }

.check-btn:focus-visible[b-ca7t9vd7j5] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE ASSIGNMENT BAR
   ═══════════════════════════════════════════════════════════════════════ */
.order-check__table-bar[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
    background: var(--lp-bg-card);
}

.order-table-label[b-ca7t9vd7j5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.order-table-readonly[b-ca7t9vd7j5] {
    font-size: 0.875rem;
    color: var(--lp-muted);
}

/* Number picker in table bar */
.order-table-picker[b-ca7t9vd7j5] {
    flex: 1;
    max-width: 9rem;
}

.order-table-picker .modal-input[b-ca7t9vd7j5] {
    height: 2rem;
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

/* ── num-picker component ─────────────────────────────────────────────── */
.num-picker[b-ca7t9vd7j5] { position: relative; }

.num-input[b-ca7t9vd7j5] {
    padding-right: 2rem !important;
    text-align: left;
    -moz-appearance: textfield;
}

.num-input[b-ca7t9vd7j5]::-webkit-inner-spin-button,
.num-input[b-ca7t9vd7j5]::-webkit-outer-spin-button { -webkit-appearance: none; }

.num-spinners[b-ca7t9vd7j5] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.num-spin-btn[b-ca7t9vd7j5] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.num-spin-btn:first-child[b-ca7t9vd7j5] {
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.num-spin-btn:last-child[b-ca7t9vd7j5] { border-radius: 0 0 7px 0; }

.num-spin-btn svg[b-ca7t9vd7j5] {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .num-spin-btn:hover[b-ca7t9vd7j5]  { opacity: 0.8; } }
.num-spin-btn:active[b-ca7t9vd7j5] { opacity: 0.65; }
.num-spin-btn:focus-visible[b-ca7t9vd7j5] { outline: 2px solid var(--lp-orange); outline-offset: 1px; }

/* Dropdown in table bar */
.order-table-select[b-ca7t9vd7j5] {
    flex: 1;
}

.order-table-select .ui-select-trigger[b-ca7t9vd7j5] {
    height: 2rem;
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

.ui-select-room[b-ca7t9vd7j5] {
    margin-left: 0.3rem;
    font-size: 0.78rem;
    color: var(--lp-muted);
    font-weight: 400;
}

/* ── Cancel button (edit mode) ───────────────────────────────────────── */
.check-btn--cancel[b-ca7t9vd7j5] {
    background: var(--lp-bg-card2);
    color: var(--lp-muted);
    border: 1.5px solid var(--lp-border);
}

@media (hover: hover) { .check-btn--cancel:hover[b-ca7t9vd7j5] { background: var(--lp-border); color: var(--lp-text); } }

/* ── Edit mode: order header ─────────────────────────────────────────── */
.order-check__edit-header[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--lp-bg-card2);
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.order-check__edit-title[b-ca7t9vd7j5] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    font-weight: 500;
}

.order-check__edit-num[b-ca7t9vd7j5] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-text);
}

/* ── Locked line (existing order item) ───────────────────────────────── */
.check-line--locked[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.25rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--lp-border);
    background: var(--lp-bg-card2);
    opacity: 0.85;
    cursor: default;
}


.check-line__qty-ro[b-ca7t9vd7j5] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── "New items" divider ─────────────────────────────────────────────── */
.order-check__new-divider[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--lp-bg-card);
    border-bottom: 1px solid var(--lp-border);
}

/* ── Paid banner (edit mode read-only notice) ────────────────────────── */
.order-paid-banner[b-ca7t9vd7j5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    border-bottom: 1px solid rgba(22, 163, 74, 0.2);
}

@media (prefers-color-scheme: dark) {
    .order-paid-banner[b-ca7t9vd7j5] {
        color: #4ade80;
        background: rgba(74, 222, 128, 0.08);
        border-bottom-color: rgba(74, 222, 128, 0.2);
    }
}

/* /Pages/OrdersPending.razor.rz.scp.css */
.op-list[b-tzprbyi21x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    max-width: 640px;
}

.op-card[b-tzprbyi21x] {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.op-card-header[b-tzprbyi21x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.op-card-title[b-tzprbyi21x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.op-order-number[b-tzprbyi21x] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.op-table-name[b-tzprbyi21x] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-page, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}

.op-takeout[b-tzprbyi21x] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-page, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}

.op-time[b-tzprbyi21x] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
}

.op-instructions[b-tzprbyi21x] {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
    margin: 0;
}

.op-items[b-tzprbyi21x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 0.6rem;
}

.op-item[b-tzprbyi21x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.op-item-qty[b-tzprbyi21x] {
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    min-width: 1.5rem;
}

.op-item-name[b-tzprbyi21x] {
    flex: 1;
    color: var(--text-primary, #111827);
}

.op-item-price[b-tzprbyi21x] {
    color: var(--text-secondary, #6b7280);
    font-size: 0.85rem;
}

.op-card-footer[b-tzprbyi21x] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.op-approve-btn[b-tzprbyi21x] {
    min-width: 120px;
}
/* /Pages/OrganizationLogin.razor.rz.scp.css */
input.is-valid[b-rwuchewb1l] {
    background-image: none;
}

@media (max-width: 575.98px) {
    .min-vh-100.d-flex[b-rwuchewb1l] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Pages/PinLogin.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────────── */
.pp-page[b-14zi2kckmx] {
    min-height: 100vh;
    background: var(--lp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.pp-card[b-14zi2kckmx] {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pp-title[b-14zi2kckmx] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lp-text);
    text-align: center;
    margin: 0;
}

.pp-sub[b-14zi2kckmx] {
    color: var(--lp-orange);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 0.25rem;
}

/* ── Entry fields — div, never focusable ─────────────────────────────────── */
.pp-field[b-14zi2kckmx] {
    background: var(--lp-bg-card2);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 0.75rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pp-field--on[b-14zi2kckmx] {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.2);
}

.pp-field-label[b-14zi2kckmx] {
    font-size: 0.7rem;
    color: var(--lp-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-field-val[b-14zi2kckmx] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--lp-text);
    min-height: 1.7rem;
    line-height: 1.2;
}

/* ── PIN dots ────────────────────────────────────────────────────────────── */
.pp-dots[b-14zi2kckmx] {
    display: flex;
    gap: 0.8rem;
    padding: 0.25rem 0;
}

.pp-dot[b-14zi2kckmx] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lp-border);
}

.pp-dot--on[b-14zi2kckmx] {
    background: var(--lp-orange);
}

/* ── Error ───────────────────────────────────────────────────────────────── */
.pp-error[b-14zi2kckmx] {
    color: #fca5a5;
    font-size: 0.82rem;
    text-align: center;
    min-height: 1.2rem;
    padding: 0 0.5rem;
}

.pp-error--off[b-14zi2kckmx] {
    visibility: hidden;
}

/* ── Numpad ──────────────────────────────────────────────────────────────── */
.pp-pad[b-14zi2kckmx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.pp-pad--loading[b-14zi2kckmx] {
    height: 260px;
    display: grid;
    place-items: center;
}

/* ── Keys ────────────────────────────────────────────────────────────────── */
.pp-key[b-14zi2kckmx] {
    background: var(--lp-bg-card);
    border: none;
    border-radius: var(--lp-radius);
    color: var(--lp-text);
    font-size: 1.2rem;
    font-weight: 600;
    height: 62px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* orange flash on touch — handled by browser compositor, unaffected by Blazor re-render */
    -webkit-tap-highlight-color: rgba(245, 158, 11, 0.35);
    touch-action: manipulation;
    outline: none;
}

@media (hover: hover) {
    .pp-key:hover[b-14zi2kckmx] {
        background: var(--lp-orange);
        color: #111;
    }
}

.pp-key:active[b-14zi2kckmx] {
    background: var(--lp-orange);
    color: #111;
}

.pp-key--alt[b-14zi2kckmx] {
    background: transparent;
    color: var(--lp-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

@media (hover: hover) {
    .pp-key--alt:hover[b-14zi2kckmx] {
        color: var(--lp-orange);
        background: transparent;
    }
}

.pp-key--alt:active[b-14zi2kckmx] {
    color: var(--lp-orange);
    background: transparent;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.pp-spinner[b-14zi2kckmx] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: pp-spin-b-14zi2kckmx 0.7s linear infinite;
}

@keyframes pp-spin-b-14zi2kckmx {
    to { transform: rotate(360deg); }
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.pp-nav-link[b-14zi2kckmx] {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    -webkit-tap-highlight-color: transparent;
}
/* /Pages/Profile.razor.rz.scp.css */
/* ── Profile card ─────────────────────────────────────────────────────────── */
.profile-card[b-ugi2bv1vac] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.profile-card-header[b-ugi2bv1vac] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
}

.profile-avatar[b-ugi2bv1vac] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--lp-orange);
    color: #000;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.profile-info[b-ugi2bv1vac] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.profile-name[b-ugi2bv1vac] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.profile-meta[b-ugi2bv1vac] {
    font-size: 0.875rem;
    color: var(--lp-muted);
}

.profile-meta-label[b-ugi2bv1vac] {
    font-size: 0.8rem;
    opacity: 0.75;
}

.profile-edit-btn[b-ugi2bv1vac] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
    transition: opacity 0.15s;
}

.profile-edit-btn[b-ugi2bv1vac]  svg { width: 0.875rem; height: 0.875rem; fill: currentColor; flex-shrink: 0; }

@media (hover: hover) { .profile-edit-btn:hover[b-ugi2bv1vac]         { opacity: 0.85; } }
.profile-edit-btn:active[b-ugi2bv1vac]        { opacity: 0.7; }
.profile-edit-btn:focus-visible[b-ugi2bv1vac] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Card divider ─────────────────────────────────────────────────────────── */
.profile-card-divider[b-ugi2bv1vac] {
    border-top: 1px solid var(--lp-border);
    margin: 0;
}

/* ── Fields grid ─────────────────────────────────────────────────────────── */
.profile-fields[b-ugi2bv1vac] {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-fields-row[b-ugi2bv1vac] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.profile-field[b-ugi2bv1vac] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-field-label[b-ugi2bv1vac] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    font-weight: 400;
}

.profile-field-value[b-ugi2bv1vac] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lp-text);
}

/* ── Action cards (Change Password / Change PIN) ─────────────────────────── */
.profile-action-card[b-ugi2bv1vac] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.5rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    outline: none;
    text-align: left;
}

@media (hover: hover) {
    .profile-action-card:hover[b-ugi2bv1vac] {
        background: var(--lp-hover-bg);
    }
}

.profile-action-card:focus-visible[b-ugi2bv1vac] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.profile-action-icon[b-ugi2bv1vac] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(217, 152, 70, 0.15);
    color: var(--lp-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-action-icon svg[b-ugi2bv1vac] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.profile-action-text[b-ugi2bv1vac] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.profile-action-title[b-ugi2bv1vac] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lp-text);
}

.profile-action-desc[b-ugi2bv1vac] {
    font-size: 0.82rem;
    color: var(--lp-muted);
}

.profile-action-card[b-ugi2bv1vac]  .profile-action-chevron {
    width: 1rem;
    height: 1rem;
    fill: var(--lp-muted);
    flex-shrink: 0;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */
dialog.profile-dialog[b-ugi2bv1vac] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 440px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.profile-dialog[open][b-ugi2bv1vac] {
    display: flex;
    flex-direction: column;
}

/* ── Reuse shared modal parts ────────────────────────────────────────────── */
.modal-header[b-ugi2bv1vac] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
}

.modal-title[b-ugi2bv1vac] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-ugi2bv1vac] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

.modal-close[b-ugi2bv1vac]  svg          { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-ugi2bv1vac]        { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-ugi2bv1vac] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-ugi2bv1vac] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.modal-row[b-ugi2bv1vac] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field-group[b-ugi2bv1vac]   { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label[b-ugi2bv1vac]   { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.modal-input[b-ugi2bv1vac] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-ugi2bv1vac]::placeholder  { color: var(--lp-muted); }
.modal-input:focus[b-ugi2bv1vac]         { border-color: var(--lp-orange); }
.modal-input--error[b-ugi2bv1vac]        { border-color: #f87171; }
.modal-input--error:focus[b-ugi2bv1vac]  { border-color: #f87171; }

.field-error[b-ugi2bv1vac] {
    font-size: 0.78rem;
    color: #f87171;
}

.modal-error-banner[b-ugi2bv1vac] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

.modal-footer[b-ugi2bv1vac] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
}

.modal-btn-cancel[b-ugi2bv1vac] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) {
    .modal-btn-cancel:hover:not(:disabled)[b-ugi2bv1vac] {
        background: var(--lp-hover-bg);
        border-color: var(--lp-muted);
    }
}

.modal-btn-submit[b-ugi2bv1vac] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-ugi2bv1vac]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-ugi2bv1vac] { opacity: 0.7;  }

.modal-btn-submit:disabled[b-ugi2bv1vac],
.modal-btn-cancel:disabled[b-ugi2bv1vac] { opacity: 0.45; cursor: not-allowed; }

.modal-btn-submit:focus-visible[b-ugi2bv1vac],
.modal-btn-cancel:focus-visible[b-ugi2bv1vac] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-spinner[b-ugi2bv1vac] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-ugi2bv1vac 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-ugi2bv1vac { to { transform: rotate(360deg); } }
/* /Pages/PublicMenu.razor.rz.scp.css */
/* ── Loading / Error / Success ──────────────────────────────────────────── */

.pm-loading[b-9vu885d9dm], .pm-error[b-9vu885d9dm], .pm-success[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 2rem;
}

.pm-spinner[b-9vu885d9dm] {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--accent, #6366f1);
    border-radius: 50%;
    animation: pm-spin-b-9vu885d9dm 0.7s linear infinite;
}

@keyframes pm-spin-b-9vu885d9dm { to { transform: rotate(360deg); } }

.pm-error[b-9vu885d9dm] { color: var(--text-secondary, #6b7280); }

.pm-success-card[b-9vu885d9dm] {
    text-align: center;
    max-width: 320px;
}

.pm-success-icon[b-9vu885d9dm] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: #22c55e;
    font-size: 3rem;
}

.pm-success-card h2[b-9vu885d9dm] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #111827);
}

.pm-success-card p[b-9vu885d9dm] {
    color: var(--text-secondary, #6b7280);
}

.pm-success-number[b-9vu885d9dm] {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #111827) !important;
}

.pm-back-btn[b-9vu885d9dm] {
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 12px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.pm-back-btn:hover[b-9vu885d9dm] { opacity: 0.88; }

/* ── Page shell ─────────────────────────────────────────────────────────── */

.pm-page[b-9vu885d9dm] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-page, #f9fafb);
    padding-bottom: 5rem; /* space for cart bar */
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.pm-header[b-9vu885d9dm] {
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 1rem 1rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pm-org-name[b-9vu885d9dm] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.pm-header-actions[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-lang-btns[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.pm-lang-btn[b-9vu885d9dm] {
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 0.1rem 0.15rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s, border-color 0.15s;
}

.pm-lang-btn:hover[b-9vu885d9dm] { opacity: 0.75; }

.pm-lang-btn--active[b-9vu885d9dm] {
    opacity: 1;
    border-color: var(--border-color, #e5e7eb);
}

.pm-flag--text[b-9vu885d9dm] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.pm-theme-btn[b-9vu885d9dm] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color 0.15s;
}

.pm-theme-btn:hover[b-9vu885d9dm] {
    color: var(--text-primary, #111827);
}

/* ── Category ribbon ────────────────────────────────────────────────────── */

.pm-ribbon[b-9vu885d9dm] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    overflow-x: auto;
    scrollbar-width: none;
}

.pm-ribbon[b-9vu885d9dm]::-webkit-scrollbar { display: none; }

.pm-ribbon-btn[b-9vu885d9dm] {
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.pm-ribbon-btn--active[b-9vu885d9dm] {
    background: var(--accent, #6366f1);
    color: #fff;
    border-color: var(--accent, #6366f1);
}

/* ── Content ────────────────────────────────────────────────────────────── */

.pm-content[b-9vu885d9dm] {
    flex: 1;
    padding: 0 0 1rem;
}

.pm-empty[b-9vu885d9dm] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

/* ── Category section ───────────────────────────────────────────────────── */

.pm-section[b-9vu885d9dm] {
    padding-top: 1.25rem;
}

.pm-section-title[b-9vu885d9dm] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    padding: 0 1rem 0.25rem;
    margin: 0;
}

.pm-section-desc[b-9vu885d9dm] {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    padding: 0 1rem 0.5rem;
    margin: 0;
}

/* ── Item list ──────────────────────────────────────────────────────────── */

.pm-items[b-9vu885d9dm] {
    display: flex;
    flex-direction: column;
}

.pm-item[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #ffffff);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    width: 100%;
}

.pm-item:active[b-9vu885d9dm] { background: var(--bg-hover, #f3f4f6); }

.pm-item-info[b-9vu885d9dm] {
    flex: 1;
    min-width: 0;
}

.pm-item-name[b-9vu885d9dm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pm-item-desc[b-9vu885d9dm] {
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pm-item-cal[b-9vu885d9dm] {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    margin-top: 0.15rem;
}

.pm-item-price[b-9vu885d9dm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin-top: 0.35rem;
}

.pm-item-img[b-9vu885d9dm] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.pm-item-img--placeholder[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover, #f3f4f6);
    color: var(--text-secondary, #9ca3af);
    flex-shrink: 0;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */

.pm-badge[b-9vu885d9dm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.65rem;
}

.pm-badge--vegan[b-9vu885d9dm] { background: #dcfce7; color: #16a34a; }
.pm-badge--fav[b-9vu885d9dm]   { background: #fef9c3; color: #ca8a04; }

/* ── Cart floating bar ──────────────────────────────────────────────────── */

.pm-cart-bar[b-9vu885d9dm] {
    position: fixed;
    bottom: 1.25rem;
    left: 1rem;
    right: 1rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(99,102,241,.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.pm-cart-bar:active[b-9vu885d9dm] {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(99,102,241,.25);
}

.pm-cart-bar-count[b-9vu885d9dm] {
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 0.1rem 0.55rem;
    font-size: 0.82rem;
}

.pm-cart-bar-label[b-9vu885d9dm] { flex: 1; text-align: center; }

.pm-cart-bar-total[b-9vu885d9dm] { font-size: 0.9rem; }

/* ── Backdrop ───────────────────────────────────────────────────────────── */

.pm-backdrop[b-9vu885d9dm] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-end;
}

/* ── Bottom sheet ───────────────────────────────────────────────────────── */

.pm-sheet[b-9vu885d9dm] {
    width: 100%;
    max-height: 90dvh;
    background: var(--bg-card, #ffffff);
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pm-sheet--cart[b-9vu885d9dm] {
    display: flex;
    flex-direction: column;
}

.pm-sheet-img[b-9vu885d9dm] {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.pm-sheet-body[b-9vu885d9dm] {
    padding: 1rem 1rem 1.5rem;
}

.pm-sheet-head[b-9vu885d9dm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 1rem 1rem 0;
}

.pm-sheet-title[b-9vu885d9dm] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0;
    flex: 1;
}

.pm-sheet-close[b-9vu885d9dm] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pm-sheet-desc[b-9vu885d9dm] {
    font-size: 0.88rem;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 0.75rem;
    padding: 0 1rem;
}

/* ── Section label inside sheet ─────────────────────────────────────────── */

.pm-section-label[b-9vu885d9dm] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    padding: 0.75rem 1rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pm-required[b-9vu885d9dm] {
    font-size: 0.72rem;
    font-weight: 600;
    background: #fee2e2;
    color: #dc2626;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.pm-optional[b-9vu885d9dm] {
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary, #9ca3af);
}

.pm-limit[b-9vu885d9dm] {
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Variants ───────────────────────────────────────────────────────────── */

.pm-variants[b-9vu885d9dm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 1rem;
}

.pm-variant[b-9vu885d9dm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary, #111827);
    transition: border-color 0.12s, background 0.12s;
}

.pm-variant--selected[b-9vu885d9dm] {
    border-color: var(--accent, #6366f1);
    background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
}

.pm-variant-name[b-9vu885d9dm] { font-weight: 500; }
.pm-variant-price[b-9vu885d9dm] { font-weight: 600; }

/* ── Modifiers ──────────────────────────────────────────────────────────── */

.pm-mods[b-9vu885d9dm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 1rem;
}

.pm-mod[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s;
}

.pm-mod--selected[b-9vu885d9dm] {
    border-color: var(--accent, #6366f1);
}

.pm-mod-info[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.pm-mod-name[b-9vu885d9dm] { font-size: 0.9rem; color: var(--text-primary, #111827); }
.pm-mod-price[b-9vu885d9dm] { font-size: 0.82rem; color: var(--text-secondary, #6b7280); }

/* ── Sheet footer (qty + add) ───────────────────────────────────────────── */

.pm-sheet-footer[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* ── Qty stepper ────────────────────────────────────────────────────────── */

.pm-qty[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-hover, #f3f4f6);
    border-radius: 10px;
    padding: 0.25rem;
}

.pm-qty--sm .pm-qty-btn[b-9vu885d9dm] { width: 26px; height: 26px; }
.pm-qty--sm .pm-qty-val[b-9vu885d9dm] { min-width: 20px; font-size: 0.85rem; }

.pm-qty-btn[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #111827);
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: background 0.12s;
}

.pm-qty-btn:disabled[b-9vu885d9dm] {
    opacity: 0.4;
    cursor: default;
}

.pm-qty-val[b-9vu885d9dm] {
    min-width: 24px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

/* ── Add to cart button ─────────────────────────────────────────────────── */

.pm-add-btn[b-9vu885d9dm] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.pm-add-btn:disabled[b-9vu885d9dm] { opacity: 0.5; cursor: default; }

/* ── Cart items ─────────────────────────────────────────────────────────── */

.pm-cart-items[b-9vu885d9dm] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.pm-cart-row[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.pm-cart-row-info[b-9vu885d9dm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pm-cart-row-name[b-9vu885d9dm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.pm-cart-row-sub[b-9vu885d9dm] {
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
}

.pm-cart-row-right[b-9vu885d9dm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pm-cart-row-price[b-9vu885d9dm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    min-width: 52px;
    text-align: right;
}

/* ── Order setup (inside cart panel) ────────────────────────────────────── */

.pm-order-setup[b-9vu885d9dm] {
    padding: 0 0 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.pm-type-btns[b-9vu885d9dm] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem;
}

.pm-type-btn[b-9vu885d9dm] {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.pm-type-btn--active[b-9vu885d9dm] {
    border-color: var(--accent, #6366f1);
    background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
    color: var(--accent, #6366f1);
    font-weight: 600;
}

.pm-instructions[b-9vu885d9dm] {
    margin: 0 1rem;
    width: calc(100% - 2rem);
    resize: none;
    font-size: 0.9rem;
}

/* ── Cart footer ────────────────────────────────────────────────────────── */

.pm-cart-footer[b-9vu885d9dm] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding: 0.875rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pm-cart-subtotal[b-9vu885d9dm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.pm-place-btn[b-9vu885d9dm] {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 12px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.15s;
}

.pm-place-btn:disabled[b-9vu885d9dm] { opacity: 0.5; cursor: default; }

/* ── Table picker — ui-select scoped to public theme colors ─────────────── */

.pm-table-select[b-9vu885d9dm] {
    margin: 0 1rem;
}

.ui-select-trigger[b-9vu885d9dm] {
    background: var(--bg-card, #ffffff);
    border-color: var(--border-color, #e5e7eb);
    color: var(--text-primary, #111827);
}

.ui-select-trigger:hover[b-9vu885d9dm],
.ui-select--open .ui-select-trigger[b-9vu885d9dm] {
    border-color: var(--accent, #6366f1);
}

.ui-select-placeholder[b-9vu885d9dm] { color: var(--text-secondary, #6b7280); }

.ui-select-chevron[b-9vu885d9dm] { color: var(--text-secondary, #6b7280); }

.ui-select-dropdown[b-9vu885d9dm] {
    background: var(--bg-card, #ffffff);
    border-color: var(--border-color, #e5e7eb);
    width: 100%;
}

.ui-select-option[b-9vu885d9dm] { color: var(--text-primary, #111827); }

.ui-select-option:hover[b-9vu885d9dm],
.ui-select-option:focus-visible[b-9vu885d9dm] {
    background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
    color: var(--accent, #6366f1);
}

.ui-select-option--selected[b-9vu885d9dm] { color: var(--accent, #6366f1); }

.role-select-group-label[b-9vu885d9dm] {
    padding: 0.4rem 0.75rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #9ca3af);
}
/* /Pages/RequestAccess.razor.rz.scp.css */
/* ── Page layout — mirrors sign-up step 4 ─────────────────────────────────── */
.ra-page[b-fy9s8txls5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ra-body[b-fy9s8txls5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* ── Heading — reuse signup-heading spacing ───────────────────────────────── */
.signup-heading[b-fy9s8txls5] {
    margin-bottom: 36px;
}

/* ── Navigation row — reuse signup-nav pattern ───────────────────────────── */
.signup-nav[b-fy9s8txls5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.signup-nav__back[b-fy9s8txls5] {
    background: none;
    border: none;
    color: var(--lp-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s;
}

@media (hover: hover) { .signup-nav__back:hover[b-fy9s8txls5] { color: var(--lp-text); } }

.signup-nav__continue[b-fy9s8txls5] {
    padding: 0.55rem 1.8rem;
    border-radius: 10px;
    font-size: 0.95rem;
}
/* /Pages/Reservations.razor.rz.scp.css */
/* ── Tab text styling (layout handled by global .lp-tab) ─────────────────── */

.tp-tab[b-f1gksmnd98] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
}

.tp-tab--active[b-f1gksmnd98] {
    color: var(--lp-orange);
    font-weight: 600;
}

.tp-tab:focus-visible[b-f1gksmnd98] { outline: 2px solid var(--lp-orange); outline-offset: -2px; }

/* ── Page layout ─────────────────────────────────────────────────────────── */

.res-page[b-f1gksmnd98] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.res-header[b-f1gksmnd98] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.res-date-wrap[b-f1gksmnd98] {
    position: relative;
    flex-shrink: 0;
}

.res-date-btn[b-f1gksmnd98] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.12s;
    white-space: nowrap;
    line-height: 1;
}

@media (hover: hover) { .res-date-btn:hover[b-f1gksmnd98] { border-color: var(--lp-orange); background: var(--lp-hover-bg); } }

.res-date-btn[b-f1gksmnd98]  .res-date-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.res-date-btn[b-f1gksmnd98]  .res-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.res-date-btn[b-f1gksmnd98]  .res-chevron--open { transform: rotate(180deg); }

/* ── Calendar popover ────────────────────────────────────────────────────── */

.res-calendar-backdrop[b-f1gksmnd98] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.res-calendar[b-f1gksmnd98] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 101;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    min-width: 240px;
}

.res-cal-header[b-f1gksmnd98] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.res-cal-month[b-f1gksmnd98] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.res-cal-nav[b-f1gksmnd98] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

@media (hover: hover) { .res-cal-nav:hover[b-f1gksmnd98] { background: var(--lp-hover-bg); color: var(--lp-text); } }
.res-cal-nav[b-f1gksmnd98]  svg { width: 0.75rem; height: 0.75rem; }

.res-cal-grid[b-f1gksmnd98] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.res-cal-dow[b-f1gksmnd98] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--lp-muted);
    text-align: center;
    padding: 2px 0 4px;
}

.res-cal-day[b-f1gksmnd98] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--lp-text);
    cursor: pointer;
    transition: background 0.12s;
}

@media (hover: hover) { .res-cal-day:hover[b-f1gksmnd98] { background: var(--lp-hover-bg); } }
.res-cal-day--today[b-f1gksmnd98] { color: var(--lp-orange); font-weight: 700; }
.res-cal-day--selected[b-f1gksmnd98] {
    background: var(--lp-orange);
    color: #000;
    font-weight: 700;
}
@media (hover: hover) { .res-cal-day--selected:hover[b-f1gksmnd98] { background: var(--lp-orange); } }

.res-cal-day--closed[b-f1gksmnd98] {
    color: var(--res-danger);
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: line-through;
}
.res-cal-day--closed:hover[b-f1gksmnd98] { background: none; }

.res-cal-day--past[b-f1gksmnd98] {
    color: var(--lp-muted);
    opacity: 0.5;
}

/* res-body, res-sidebar, res-item, res-main → wwwroot/css/app.css */

/* ── Dialog body ─────────────────────────────────────────────────────────── */

.res-dialog-body[b-f1gksmnd98] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(80dvh - 10rem);
    overflow-y: auto;
}

.res-dialog-section[b-f1gksmnd98] { display: flex; flex-direction: column; gap: 0.6rem; }

.res-dialog-section-label[b-f1gksmnd98] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.res-dialog-booking[b-f1gksmnd98] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
}

.res-dialog-booking-info[b-f1gksmnd98] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    font-size: 0.83rem;
}

.res-booking-time[b-f1gksmnd98] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* Booking time inherits accent color from parent booking state */
.res-dialog-booking--scheduled     .res-booking-time[b-f1gksmnd98] { color: var(--res-scheduled); }
.res-dialog-booking--starting-soon .res-booking-time[b-f1gksmnd98] { color: var(--res-starting-soon); }
.res-dialog-booking--waiting       .res-booking-time[b-f1gksmnd98] { color: var(--res-waiting); }
.res-dialog-booking--seated        .res-booking-time[b-f1gksmnd98] { color: var(--res-seated); }
.res-dialog-booking--noshow        .res-booking-time[b-f1gksmnd98] { color: var(--res-danger); }

.res-booking-name[b-f1gksmnd98] { font-weight: 500; color: var(--lp-text); }
.res-booking-phone[b-f1gksmnd98] { color: var(--lp-muted); font-size: 0.78rem; }
.res-booking-prepayment[b-f1gksmnd98] { color: var(--res-seated); font-size: 0.75rem; font-weight: 500; }

.res-dialog-empty-past[b-f1gksmnd98] {
    color: var(--lp-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 1.5rem 0;
}

.res-booking-actions[b-f1gksmnd98] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.res-booking-edit[b-f1gksmnd98],
.res-booking-del[b-f1gksmnd98] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--lp-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}

@media (hover: hover) { .res-booking-edit:hover[b-f1gksmnd98] { color: var(--lp-orange); background: rgba(245,158,11,0.1); } }
.res-booking-del:hover[b-f1gksmnd98]  { color: var(--res-danger); background: rgba(239,68,68,0.1); }
.res-booking-edit svg[b-f1gksmnd98],
.res-booking-del[b-f1gksmnd98]  svg { width: 0.8rem; height: 0.8rem; }

.res-dialog-time-row[b-f1gksmnd98] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.res-dialog-time-row .field-group[b-f1gksmnd98] { flex: 1; }

.res-time-sep[b-f1gksmnd98] {
    font-size: 1rem;
    color: var(--lp-muted);
    padding-bottom: 0.55rem;
    flex-shrink: 0;
}

/* ── Until end of day checkbox ───────────────────────────────────────────── */


/* ── Confirm icon warn variant ───────────────────────────────────────────── */

.confirm-icon--warn[b-f1gksmnd98] { color: var(--res-waiting); }


.res-dialog-fields-row[b-f1gksmnd98] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ── Running Late indicator ──────────────────────────────────────────────── */

.res-late-label--active .field-label[b-f1gksmnd98] { color: var(--res-waiting); }

/* ── Dialog booking status states ────────────────────────────────────────── */

.res-dialog-booking--scheduled[b-f1gksmnd98] {
    border-color: rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.05);
}
.res-dialog-booking--starting-soon[b-f1gksmnd98] {
    border-color: rgba(234,179,8,0.5);
    background: rgba(234,179,8,0.06);
}
.res-dialog-booking--waiting[b-f1gksmnd98] {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.07);
}
.res-dialog-booking--seated[b-f1gksmnd98] {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.07);
}
.res-dialog-booking--noshow[b-f1gksmnd98] {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.06);
}
.res-dialog-booking--completed[b-f1gksmnd98] {
    opacity: 0.55;
}
.res-dialog-booking--cancelled[b-f1gksmnd98] {
    border-color: rgba(107,114,128,0.35);
    background: rgba(107,114,128,0.05);
    opacity: 0.65;
}

.res-booking-cancelled-by[b-f1gksmnd98] {
    font-size: 0.72rem;
    color: var(--lp-muted);
    font-style: italic;
}

/* ── Active (Arrived) indicator ──────────────────────────────────────────── */

.res-active-label--active .field-label[b-f1gksmnd98] { color: var(--res-seated); }

/* ── Status group (Late + Active stacked) ────────────────────────────────── */

.res-status-group[b-f1gksmnd98] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Sidebar status quick buttons ────────────────────────────────────────── */

.res-item-status-btn[b-f1gksmnd98] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 5px;
    color: var(--lp-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    line-height: 1;
}

@media (hover: hover) { .res-item-status-btn:hover[b-f1gksmnd98] { color: var(--lp-text); border-color: var(--lp-text); } }
.res-item-status-btn--late-active[b-f1gksmnd98] { color: var(--res-waiting); border-color: var(--res-waiting); background: rgba(245,158,11,0.12); }
@media (hover: hover) { .res-item-status-btn--late-active:hover[b-f1gksmnd98] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }
.res-item-status-btn--activate:hover[b-f1gksmnd98] { color: var(--res-danger); border-color: var(--res-danger); }
.res-item-status-btn--active[b-f1gksmnd98] { color: var(--res-danger); border-color: var(--res-danger); background: rgba(239,68,68,0.12); }
@media (hover: hover) { .res-item-status-btn--active:hover[b-f1gksmnd98] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }

/* ── Sidebar item status states ──────────────────────────────────────────── */

.res-item--scheduled[b-f1gksmnd98]      { border-left: 2px solid var(--res-scheduled); background: rgba(59,130,246,0.04); }
.res-item--starting-soon[b-f1gksmnd98]  { border-left: 2px solid var(--res-starting-soon); background: rgba(234,179,8,0.05); }
.res-item--waiting[b-f1gksmnd98]        { border-left: 2px solid var(--res-waiting); background: rgba(245,158,11,0.05); }
.res-item--seated[b-f1gksmnd98]         { border-left: 2px solid var(--res-seated); background: rgba(34,197,94,0.05); }
.res-item--noshow[b-f1gksmnd98]         { border-left: 2px solid var(--res-noshow); background: rgba(239,68,68,0.04); opacity: 0.85; }
.res-item--completed[b-f1gksmnd98]      { opacity: 0.45; }
.res-item--cancelled[b-f1gksmnd98]      { border-left: 2px solid var(--res-cancelled); background: rgba(107,114,128,0.04); opacity: 0.6; }

.res-item-cancelled-by[b-f1gksmnd98] {
    font-size: 0.72rem;
    color: var(--lp-muted);
    font-style: italic;
}

/* res-item-badge and res-item-badge--* → wwwroot/css/app.css (shared with ReservationsPreview) */

/* ── Dialog booking status buttons ───────────────────────────────────────── */

.res-booking-status-btn[b-f1gksmnd98] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 5px;
    color: var(--lp-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    line-height: 1;
}

@media (hover: hover) { .res-booking-status-btn:hover[b-f1gksmnd98] { color: var(--lp-text); border-color: var(--lp-text); } }
.res-booking-status-btn--late-active[b-f1gksmnd98] { color: var(--res-waiting); border-color: var(--res-waiting); background: rgba(245,158,11,0.12); }
@media (hover: hover) { .res-booking-status-btn--late-active:hover[b-f1gksmnd98] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }
.res-booking-status-btn--activate:hover[b-f1gksmnd98] { color: var(--res-danger); border-color: var(--res-danger); }
.res-booking-status-btn--active[b-f1gksmnd98] { color: var(--res-danger); border-color: var(--res-danger); background: rgba(239,68,68,0.12); }
@media (hover: hover) { .res-booking-status-btn--active:hover[b-f1gksmnd98] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }

/* field-group, field-label, field-required, field-error, modal-input → wwwroot/css/app.css */

/* res-view-toggle, res-view-btn, tl-* → wwwroot/css/app.css (shared with ReservationsPreview) */
/* /Pages/ReservationsConfiguration.razor.rz.scp.css */

/* ── Module rows ─────────────────────────────────────────────────────────── */
.module-list[b-t6ahsbfrg4] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
}

.module-row[b-t6ahsbfrg4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.module-row:last-child[b-t6ahsbfrg4] { border-bottom: none; }
@media (hover: hover) { .module-row:hover[b-t6ahsbfrg4]      { background: var(--lp-hover-bg); } }

.module-row-text[b-t6ahsbfrg4] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.module-row-title[b-t6ahsbfrg4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.module-row-desc[b-t6ahsbfrg4] {
    font-size: 0.8rem;
    color: var(--lp-muted);
}

.module-error-banner[b-t6ahsbfrg4] {
    margin-top: 0.75rem;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #f87171;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
}

/* ── Timeout picker ──────────────────────────────────────────────────────── */
.timeout-input-wrap[b-t6ahsbfrg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.timeout-picker[b-t6ahsbfrg4] {
    position: relative;
}

.timeout-input[b-t6ahsbfrg4] {
    width: 6rem;
    padding: 0.55rem 2rem 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    text-align: left;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.timeout-input:focus[b-t6ahsbfrg4]         { border-color: var(--lp-orange); }
.timeout-input[b-t6ahsbfrg4]::placeholder  { color: var(--lp-muted); }
.timeout-input:disabled[b-t6ahsbfrg4]      { opacity: 0.6; }
.timeout-input--error[b-t6ahsbfrg4]        { border-color: #f87171 !important; }

.timeout-input[b-t6ahsbfrg4]::-webkit-inner-spin-button,
.timeout-input[b-t6ahsbfrg4]::-webkit-outer-spin-button { -webkit-appearance: none; }

.timeout-spinners[b-t6ahsbfrg4] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.timeout-spin-btn[b-t6ahsbfrg4] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.timeout-spin-btn:first-child[b-t6ahsbfrg4] {
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.timeout-spin-btn:last-child[b-t6ahsbfrg4] { border-radius: 0 0 7px 0; }

.timeout-spin-btn[b-t6ahsbfrg4]  svg {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .timeout-spin-btn:hover:not(:disabled)[b-t6ahsbfrg4]  { opacity: 0.8; } }
.timeout-spin-btn:active:not(:disabled)[b-t6ahsbfrg4] { opacity: 0.65; }
.timeout-spin-btn:disabled[b-t6ahsbfrg4]              { opacity: 0.4; cursor: not-allowed; }
.timeout-spin-btn:focus-visible[b-t6ahsbfrg4]         { outline: 2px solid var(--lp-orange); outline-offset: 1px; }

.timeout-unit[b-t6ahsbfrg4] {
    font-size: 0.82rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Max row: toggle + input side by side ────────────────────────────────── */
.max-row-controls[b-t6ahsbfrg4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.timeout-input-wrap--disabled[b-t6ahsbfrg4] {
    opacity: 0.4;
    pointer-events: none;
}

/* /Pages/ReservationsPreview.razor.rz.scp.css */
/* tp-* and res-* shared classes live in wwwroot/css/app.css and Reservations.razor.css */

/* ── Tab text styling (layout handled by global .lp-tab) ─────────────────── */

.tp-tab[b-ij70dp84qd] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
}

.tp-tab--active[b-ij70dp84qd] {
    color: var(--lp-orange);
    font-weight: 600;
}

.tp-tab:focus-visible[b-ij70dp84qd] { outline: 2px solid var(--lp-orange); outline-offset: -2px; }


/* ── Sidebar item states ──────────────────────────────────────────────────── */

.rp-item--scheduled[b-ij70dp84qd]      { border-left: 2px solid var(--res-scheduled);    background: rgba(59,130,246,0.04); }
.rp-item--starting-soon[b-ij70dp84qd]  { border-left: 2px solid var(--res-starting-soon); background: rgba(234,179,8,0.05); }
.rp-item--waiting[b-ij70dp84qd]        { border-left: 2px solid var(--res-waiting);       background: rgba(245,158,11,0.05); }
.rp-item--seated[b-ij70dp84qd]         { border-left: 2px solid var(--res-seated);        background: rgba(34,197,94,0.05); }
.rp-item--noshow[b-ij70dp84qd]         { border-left: 2px solid var(--res-noshow);        background: rgba(239,68,68,0.04); opacity: 0.85; }
.rp-item--completed[b-ij70dp84qd]      { opacity: 0.45; }
.rp-item--cancelled[b-ij70dp84qd]      { border-left: 2px solid var(--res-cancelled);     background: rgba(107,114,128,0.04); opacity: 0.6; }

.res-item-cancelled-by[b-ij70dp84qd] {
    font-size: 0.72rem;
    color: var(--lp-muted);
    font-style: italic;
}

/* ── Status action buttons ────────────────────────────────────────────────── */

.rp-item-footer[b-ij70dp84qd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.rp-status-btns[b-ij70dp84qd] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.rp-status-btn[b-ij70dp84qd] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 5px;
    color: var(--lp-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    line-height: 1;
}

@media (hover: hover) { .rp-status-btn:hover[b-ij70dp84qd] { color: var(--lp-text); border-color: var(--lp-text); } }
.rp-status-btn--late-active[b-ij70dp84qd] { color: var(--res-waiting); border-color: var(--res-waiting); background: rgba(245,158,11,0.12); }
@media (hover: hover) { .rp-status-btn--late-active:hover[b-ij70dp84qd] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }
.rp-status-btn--activate:hover[b-ij70dp84qd] { color: var(--res-danger); border-color: var(--res-danger); }
.rp-status-btn--active[b-ij70dp84qd] { color: var(--res-danger); border-color: var(--res-danger); background: rgba(239,68,68,0.12); }
@media (hover: hover) { .rp-status-btn--active:hover[b-ij70dp84qd] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }
.rp-status-btn--noshow-active[b-ij70dp84qd] { color: var(--res-noshow); border-color: var(--res-noshow); background: rgba(107,114,128,0.12); }
@media (hover: hover) { .rp-status-btn--noshow-active:hover[b-ij70dp84qd] { color: var(--lp-muted); border-color: var(--lp-border); background: none; } }

/* ── Info dialog ──────────────────────────────────────────────────────────── */

.res-info-body[b-ij70dp84qd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.res-info-status-row[b-ij70dp84qd] {
    margin-bottom: 0.125rem;
}

.res-info-row[b-ij70dp84qd] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--lp-text);
}

.res-info-label[b-ij70dp84qd] {
    font-size: 0.74rem;
    color: var(--lp-muted);
    flex-shrink: 0;
    min-width: 52px;
}

.res-info-value[b-ij70dp84qd] {
    flex: 1;
    color: var(--lp-text);
}

.res-info-prepaid[b-ij70dp84qd] {
    color: var(--res-seated);
    font-weight: 500;
}

/* Inline time badges (shared style defined in Reservations.razor.css via res-item-badge) */
/* /Pages/SettingsGeneral.razor.rz.scp.css */

/* ── Language filter dropdown ─────────────────────────────────────────────── */
.lang-filter[b-e4r5r62a0i] {
    position: relative;
    flex-shrink: 0;
}

/* trigger override: card bg + fixed min-width */
.lang-filter .ui-select-trigger[b-e4r5r62a0i] {
    min-width: 14rem;
    background: var(--lp-bg-card);
}

/* ── Section divider ─────────────────────────────────────────────────────── */
.section-divider[b-e4r5r62a0i] {
    border: none;
    border-top: 1px solid var(--lp-border);
    margin: 0;
}

/* ── Units header ────────────────────────────────────────────────────────── */
.units-header[b-e4r5r62a0i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.units-header-text[b-e4r5r62a0i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.units-section-title[b-e4r5r62a0i] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
    margin: 0;
}

.units-section-desc[b-e4r5r62a0i] {
    font-size: 0.82rem;
    color: var(--lp-muted);
    margin: 0;
    line-height: 1.4;
}

.add-unit-btn[b-e4r5r62a0i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-unit-btn[b-e4r5r62a0i]  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .add-unit-btn:hover[b-e4r5r62a0i]  { opacity: 0.85; } }
.add-unit-btn:active[b-e4r5r62a0i] { opacity: 0.7; }

.add-unit-btn:focus-visible[b-e4r5r62a0i] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
}

/* ── Units card ──────────────────────────────────────────────────────────── */
.units-card[b-e4r5r62a0i] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow-x: auto;
}

.table-state[b-e4r5r62a0i] {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Units table ─────────────────────────────────────────────────────────── */
.units-table[b-e4r5r62a0i] {
    width: 100%;
    border-collapse: collapse;
}

.units-table thead th[b-e4r5r62a0i] {
    padding: 0.85rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--lp-border);
}

.th-actions[b-e4r5r62a0i] {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.td-actions[b-e4r5r62a0i] {
    width: 1%;
    white-space: nowrap;
}

.units-table tbody tr[b-e4r5r62a0i] {
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.units-table tbody tr:last-child[b-e4r5r62a0i] { border-bottom: none; }

@media (hover: hover) { .units-table tbody tr:hover[b-e4r5r62a0i] { background: var(--lp-hover-bg); } }

.units-table tbody td[b-e4r5r62a0i] {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--lp-text);
}

.td-empty[b-e4r5r62a0i] {
    text-align: center;
    color: var(--lp-muted) !important;
    padding: 2.5rem 1.25rem !important;
    font-size: 0.875rem;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.action-btns[b-e4r5r62a0i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.action-btn[b-e4r5r62a0i] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

.action-btn[b-e4r5r62a0i]  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}

.action-btn:focus-visible[b-e4r5r62a0i] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.action-edit[b-e4r5r62a0i] { color: var(--lp-muted); }

@media (hover: hover) {
    .action-edit:hover[b-e4r5r62a0i] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.action-delete[b-e4r5r62a0i] { color: #f87171; }

@media (hover: hover) {
    .action-delete:hover[b-e4r5r62a0i] {
        background: rgba(248, 113, 113, 0.1);
    }
}

/* ── Add/Edit dialog ─────────────────────────────────────────────────────── */
dialog.unit-dialog[b-e4r5r62a0i] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 400px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.unit-dialog[open][b-e4r5r62a0i] {
    display: flex;
    flex-direction: column;
}

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
dialog.confirm-dialog[b-e4r5r62a0i] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

/* ── Modal header ────────────────────────────────────────────────────────── */
.modal-header[b-e4r5r62a0i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
}

.modal-title[b-e4r5r62a0i] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-e4r5r62a0i] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

.modal-close[b-e4r5r62a0i]  svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-e4r5r62a0i]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-e4r5r62a0i] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Modal body ──────────────────────────────────────────────────────────── */
.modal-body[b-e4r5r62a0i] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.confirm-body[b-e4r5r62a0i] { flex-direction: row; align-items: flex-start; gap: 1rem; }

/* ── Confirm icon ────────────────────────────────────────────────────────── */
.confirm-icon[b-e4r5r62a0i] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon[b-e4r5r62a0i]  svg { width: 1rem; height: 1rem; fill: currentColor; }

.confirm-text[b-e4r5r62a0i] { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; }

.confirm-message[b-e4r5r62a0i] { margin: 0; font-size: 0.875rem; color: var(--lp-text); line-height: 1.4; }

.confirm-sub[b-e4r5r62a0i] { margin: 0; font-size: 0.8rem; color: var(--lp-muted); }

/* ── Field group ─────────────────────────────────────────────────────────── */
.field-group[b-e4r5r62a0i] { display: flex; flex-direction: column; gap: 0.4rem; }

.field-label[b-e4r5r62a0i] { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.modal-input[b-e4r5r62a0i] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-e4r5r62a0i]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-e4r5r62a0i]         { border-color: var(--lp-orange); }

/* ── Error banner ────────────────────────────────────────────────────────── */
.modal-error-banner[b-e4r5r62a0i] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

/* ── Modal footer ────────────────────────────────────────────────────────── */
.modal-footer[b-e4r5r62a0i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
}

.modal-btn-cancel[b-e4r5r62a0i] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) {
    .modal-btn-cancel:hover:not(:disabled)[b-e4r5r62a0i] {
        background: var(--lp-hover-bg);
        border-color: var(--lp-muted);
    }
}

.modal-btn-submit[b-e4r5r62a0i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 96px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-e4r5r62a0i]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-e4r5r62a0i] { opacity: 0.7; }

.modal-btn-submit:disabled[b-e4r5r62a0i],
.modal-btn-cancel:disabled[b-e4r5r62a0i] { opacity: 0.45; cursor: not-allowed; }

.modal-btn-submit:focus-visible[b-e4r5r62a0i],
.modal-btn-cancel:focus-visible[b-e4r5r62a0i] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-btn-delete[b-e4r5r62a0i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-e4r5r62a0i]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-e4r5r62a0i] { opacity: 0.7; }
.modal-btn-delete:disabled[b-e4r5r62a0i]              { opacity: 0.45; cursor: not-allowed; }
.modal-btn-delete:focus-visible[b-e4r5r62a0i]         { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.modal-spinner[b-e4r5r62a0i] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

.modal-spinner--light[b-e4r5r62a0i] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* ── Timeout picker ──────────────────────────────────────────────────────── */
.timeout-input-wrap[b-e4r5r62a0i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.timeout-picker[b-e4r5r62a0i] {
    position: relative;
}

.timeout-input[b-e4r5r62a0i] {
    width: 6rem;
    padding: 0.55rem 2rem 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    text-align: left;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.timeout-input:focus[b-e4r5r62a0i]         { border-color: var(--lp-orange); }
.timeout-input[b-e4r5r62a0i]::placeholder  { color: var(--lp-muted); }
.timeout-input:disabled[b-e4r5r62a0i]      { opacity: 0.6; }

.timeout-input[b-e4r5r62a0i]::-webkit-inner-spin-button,
.timeout-input[b-e4r5r62a0i]::-webkit-outer-spin-button { -webkit-appearance: none; }

.timeout-spinners[b-e4r5r62a0i] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 1.75rem;
    border-left: 1px solid var(--lp-border);
}

.timeout-spin-btn[b-e4r5r62a0i] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-orange);
    border: none;
    color: #000;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: opacity 0.15s;
}

.timeout-spin-btn:first-child[b-e4r5r62a0i] {
    border-radius: 0 7px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.timeout-spin-btn:last-child[b-e4r5r62a0i] { border-radius: 0 0 7px 0; }

.timeout-spin-btn[b-e4r5r62a0i]  svg {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .timeout-spin-btn:hover:not(:disabled)[b-e4r5r62a0i]  { opacity: 0.8; } }
.timeout-spin-btn:active:not(:disabled)[b-e4r5r62a0i] { opacity: 0.65; }
.timeout-spin-btn:disabled[b-e4r5r62a0i]              { opacity: 0.4; cursor: not-allowed; }
.timeout-spin-btn:focus-visible[b-e4r5r62a0i]         { outline: 2px solid var(--lp-orange); outline-offset: 1px; }

.timeout-unit[b-e4r5r62a0i] {
    font-size: 0.82rem;
    color: var(--lp-muted);
    white-space: nowrap;
}

/* ── Module visibility ───────────────────────────────────────────────────── */
.module-list[b-e4r5r62a0i] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
}

.module-row[b-e4r5r62a0i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.module-row:last-child[b-e4r5r62a0i] { border-bottom: none; }
@media (hover: hover) { .module-row:hover[b-e4r5r62a0i]      { background: var(--lp-hover-bg); } }

.module-row-text[b-e4r5r62a0i] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.module-row-title[b-e4r5r62a0i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.module-row-desc[b-e4r5r62a0i] {
    font-size: 0.8rem;
    color: var(--lp-muted);
}

.module-error-banner[b-e4r5r62a0i] {
    margin-top: 0.75rem;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.6rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}


/* /Pages/SettingsOrganization.razor.rz.scp.css */
/* ── Organization profile card ────────────────────────────────────────────── */
.org-card[b-inlulepa2i] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

.org-card-header[b-inlulepa2i] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
}

.org-logo[b-inlulepa2i] {
    width: 4rem;
    height: 4rem;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.org-logo-placeholder[b-inlulepa2i] {
    width: 4rem;
    height: 4rem;
    border-radius: 10px;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-muted);
    flex-shrink: 0;
}

.org-logo-placeholder svg[b-inlulepa2i] {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}

.org-info[b-inlulepa2i] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.org-name[b-inlulepa2i] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.org-meta[b-inlulepa2i] {
    font-size: 0.875rem;
    color: var(--lp-muted);
}

.org-slug-badge[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 5px;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-muted);
    font-size: 0.8rem;
    font-family: monospace;
    letter-spacing: 0.02em;
}

.org-edit-btn[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
    transition: opacity 0.15s;
}

.org-edit-btn svg[b-inlulepa2i]             { width: 0.875rem; height: 0.875rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .org-edit-btn:hover[b-inlulepa2i]           { opacity: 0.85; } }
.org-edit-btn:active[b-inlulepa2i]          { opacity: 0.7; }
.org-edit-btn:focus-visible[b-inlulepa2i]   { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.org-card-divider[b-inlulepa2i] {
    border-top: 1px solid var(--lp-border);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.org-fields[b-inlulepa2i] {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.org-fields-row[b-inlulepa2i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.org-field[b-inlulepa2i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.org-field-label[b-inlulepa2i] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    font-weight: 400;
}

.org-field-value[b-inlulepa2i] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lp-text);
    overflow-wrap: break-word;
}

.org-colors[b-inlulepa2i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.1rem;
}

.org-color-dot[b-inlulepa2i] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.25);
    flex-shrink: 0;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */
dialog.org-dialog[b-inlulepa2i] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 520px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.org-dialog[open][b-inlulepa2i] {
    display: flex;
    flex-direction: column;
}

/* ── Shared modal parts (scoped to this component) ───────────────────────── */
.modal-header[b-inlulepa2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title[b-inlulepa2i] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-inlulepa2i] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
}

.modal-close svg[b-inlulepa2i]           { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-inlulepa2i]         { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-inlulepa2i] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-inlulepa2i] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.modal-row[b-inlulepa2i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field-group[b-inlulepa2i]   { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label[b-inlulepa2i]   { font-size: 0.82rem; font-weight: 500; color: var(--lp-text); }

.modal-input[b-inlulepa2i] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-inlulepa2i]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-inlulepa2i]        { border-color: var(--lp-orange); }

.modal-textarea[b-inlulepa2i] {
    resize: none;
    font-family: inherit;
    line-height: 1.5;
}

.field-error[b-inlulepa2i] {
    font-size: 0.78rem;
    color: #f87171;
}

.modal-error-banner[b-inlulepa2i] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

.modal-footer[b-inlulepa2i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-btn-cancel[b-inlulepa2i] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) { .modal-btn-cancel:hover:not(:disabled)[b-inlulepa2i] { background: var(--lp-hover-bg); border-color: var(--lp-muted); } }

.modal-btn-submit[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

.modal-btn-submit:hover:not(:disabled)[b-inlulepa2i]  { opacity: 0.85; }
.modal-btn-submit:active:not(:disabled)[b-inlulepa2i] { opacity: 0.7; }

.modal-btn-submit:disabled[b-inlulepa2i],
.modal-btn-cancel:disabled[b-inlulepa2i] { opacity: 0.45; cursor: not-allowed; }

.modal-btn-submit:focus-visible[b-inlulepa2i],
.modal-btn-cancel:focus-visible[b-inlulepa2i] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-spinner[b-inlulepa2i] {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-inlulepa2i 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-inlulepa2i { to { transform: rotate(360deg); } }

/* ── Drop zone (in dialog) ────────────────────────────────────────────────── */
.img-drop-zone[b-inlulepa2i] {
    position: relative;
    border: 2px dashed var(--lp-border);
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.img-drop-zone--over[b-inlulepa2i] {
    border-color: var(--lp-orange);
    background: rgba(245, 158, 11, 0.05);
}

.img-drop-zone--filled[b-inlulepa2i] {
    border-style: solid;
    border-color: var(--lp-border);
    min-height: 160px;
}

.drop-zone-img[b-inlulepa2i] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.drop-zone-overlay[b-inlulepa2i] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.18s;
    border-radius: 8px;
}

@media (hover: hover) { .img-drop-zone--filled:hover .drop-zone-overlay[b-inlulepa2i] { opacity: 1; } }

.drop-zone-action-btn[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.drop-zone-action-btn svg[b-inlulepa2i] { width: 0.82rem; height: 0.82rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .drop-zone-action-btn:hover[b-inlulepa2i] { background: rgba(255, 255, 255, 0.25); } }
.drop-zone-action-btn--danger:hover[b-inlulepa2i] {
    background: rgba(239, 68, 68, 0.55);
    border-color: rgba(239, 68, 68, 0.6);
}

.drop-zone-empty[b-inlulepa2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.drop-zone-icon[b-inlulepa2i]    { width: 2rem; height: 2rem; fill: currentColor; color: var(--lp-muted); opacity: 0.6; margin-bottom: 0.25rem; }
.drop-zone-title[b-inlulepa2i]   { font-size: 0.875rem; font-weight: 500; color: var(--lp-text); }
.drop-zone-sub[b-inlulepa2i]     { font-size: 0.82rem; color: var(--lp-muted); }
.drop-zone-browse[b-inlulepa2i]  { color: var(--lp-orange); text-decoration: underline; }
.drop-zone-hint[b-inlulepa2i]    { font-size: 0.75rem; color: var(--lp-muted); opacity: 0.7; margin-top: 0.15rem; }

/* ── Color pickers (in dialog) ────────────────────────────────────────────── */
.org-edit-colors[b-inlulepa2i] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.org-edit-color-item[b-inlulepa2i] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    position: relative;
    flex: 1;
    min-width: 140px;
    cursor: pointer;
    transition: border-color 0.15s;
}

@media (hover: hover) { .org-edit-color-item:hover[b-inlulepa2i] { border-color: var(--lp-orange); } }

.org-edit-color-swatch[b-inlulepa2i] {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(128, 128, 128, 0.2);
}

.org-edit-color-info[b-inlulepa2i] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.org-edit-color-name[b-inlulepa2i] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-text);
    line-height: 1.2;
}

.org-edit-color-hex[b-inlulepa2i] {
    font-size: 0.72rem;
    color: var(--lp-muted);
    font-family: monospace;
    letter-spacing: 0.03em;
}

.org-edit-color-input[b-inlulepa2i] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
}

/* ── Currency selector ────────────────────────────────────────────────────── */
.cur-row[b-inlulepa2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cur-desc[b-inlulepa2i] {
    font-size: 0.8rem;
    color: var(--lp-muted);
}

.cur-filter[b-inlulepa2i] {
    position: relative;
    flex-shrink: 0;
}

.cur-filter .ui-select-trigger[b-inlulepa2i] {
    min-width: 14rem;
    background: var(--lp-bg-card);
}

.cur-flag[b-inlulepa2i] {
    font-size: 1rem;
    line-height: 1;
}

.cur-code[b-inlulepa2i] {
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ── Working hours list ───────────────────────────────────────────────────── */
.wh-edit-btn[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.wh-edit-btn svg[b-inlulepa2i] { width: 0.875rem; height: 0.875rem; fill: currentColor; flex-shrink: 0; }

@media (hover: hover) { .wh-edit-btn:hover[b-inlulepa2i]            { opacity: 0.85; } }
.wh-edit-btn:active[b-inlulepa2i]           { opacity: 0.7; }
.wh-edit-btn:disabled[b-inlulepa2i]         { opacity: 0.45; cursor: not-allowed; }
.wh-edit-btn:focus-visible[b-inlulepa2i]    { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.wh-list[b-inlulepa2i] {
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
}

.wh-list-header[b-inlulepa2i] {
    display: grid;
    grid-template-columns: 1fr 6.5rem 7.5rem 7.5rem;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
}

.wh-list-header span[b-inlulepa2i] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wh-list-header .wh-col-open[b-inlulepa2i],
.wh-list-header .wh-col-from[b-inlulepa2i],
.wh-list-header .wh-col-to[b-inlulepa2i] { text-align: center; }

.wh-row[b-inlulepa2i] {
    display: grid;
    grid-template-columns: 1fr 6.5rem 7.5rem 7.5rem;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.wh-row:last-child[b-inlulepa2i] { border-bottom: none; }
@media (hover: hover) { .wh-row:hover[b-inlulepa2i]      { background: var(--lp-hover-bg); } }

.wh-col-day[b-inlulepa2i]  { min-width: 0; }
.wh-col-open[b-inlulepa2i] { text-align: center; }
.wh-col-from[b-inlulepa2i] { text-align: center; }
.wh-col-to[b-inlulepa2i]   { text-align: center; }

.wh-day-name[b-inlulepa2i]            { font-size: 0.875rem; font-weight: 600; color: var(--lp-text); }
.wh-day-name--closed[b-inlulepa2i]    { color: var(--lp-muted); font-weight: 400; }

.wh-badge[b-inlulepa2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.wh-badge--open[b-inlulepa2i]   { background: rgba(245, 158, 11, 0.15); color: var(--lp-orange); border: 1px solid rgba(245, 158, 11, 0.3); }
.wh-badge--closed[b-inlulepa2i] { background: var(--lp-hover-bg); color: var(--lp-muted); border: 1px solid var(--lp-border); }


.wh-time-text[b-inlulepa2i] { font-size: 0.875rem; font-weight: 500; color: var(--lp-text); display: block; text-align: center; }

.ui-select--scrollable .ui-select-trigger[b-inlulepa2i] { padding: 0.4rem 0.6rem; }

.wh-dash[b-inlulepa2i] { font-size: 0.875rem; color: var(--lp-muted); display: block; text-align: center; }

.wh-spinner[b-inlulepa2i] {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-inlulepa2i 0.6s linear infinite;
    flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .org-fields-row[b-inlulepa2i] { grid-template-columns: 1fr; gap: 1rem; }
    .modal-row[b-inlulepa2i]      { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .wh-list-header[b-inlulepa2i],
    .wh-row[b-inlulepa2i] { grid-template-columns: 1fr 3rem 6rem 6rem; padding: 0.65rem 0.875rem; }
}

/* ── Tax settings rows ────────────────────────────────────────────────────── */
.tax-rows[b-inlulepa2i] {
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
}

.tax-row[b-inlulepa2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 1rem;
    transition: background 0.12s;
}

.tax-row:not(:last-child)[b-inlulepa2i] { border-bottom: 1px solid var(--lp-border); }
@media (hover: hover) { .tax-row:hover[b-inlulepa2i]            { background: var(--lp-hover-bg); } }
.tax-row--disabled[b-inlulepa2i]        { opacity: 0.45; pointer-events: none; }

.tax-row-text[b-inlulepa2i] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.tax-row-title[b-inlulepa2i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.tax-row-desc[b-inlulepa2i] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.4;
}

/* /Pages/SignUp.razor.rz.scp.css */
/* ── Page layout ──────────────────────────────────────────────────────── */
.signup-page[b-beif257sia] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Progress bar ─────────────────────────────────────────────────────── */
.signup-progress-wrap[b-beif257sia] {
    padding: 20px 32px 0;
    flex-shrink: 0;
}

.signup-progress-track[b-beif257sia] {
    height: 4px;
    background: var(--lp-border);
    border-radius: 2px;
    overflow: hidden;
}

.signup-progress-fill[b-beif257sia] {
    height: 100%;
    background: var(--lp-orange);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.signup-progress-labels[b-beif257sia] {
    position: relative;
    height: 28px;
    margin-top: 8px;
}

.signup-step-lbl[b-beif257sia] {
    position: absolute;
    font-size: 12px;
    color: var(--lp-muted);
    transform: translateX(-50%);
    white-space: nowrap;
    top: 0;
}

/* Anchor first label to left edge, last to right edge */
.signup-step-lbl.lbl-first[b-beif257sia] { transform: none; }
.signup-step-lbl.lbl-last[b-beif257sia]  { transform: translateX(-100%); }

.signup-step-lbl.lbl-active[b-beif257sia] { color: var(--lp-orange); font-weight: 600; }
.signup-step-lbl.lbl-done[b-beif257sia]   { color: var(--lp-muted); }

/* ── Content area ─────────────────────────────────────────────────────── */
.signup-body[b-beif257sia] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 40px 24px 40px;
}

/* ── Heading ──────────────────────────────────────────────────────────── */
.signup-heading[b-beif257sia] {
    margin-bottom: 36px;
}

/* ── Selection cards ──────────────────────────────────────────────────── */
.sel-card[b-beif257sia] {
    width: 100%;
    aspect-ratio: 1;
    background: var(--lp-bg-card);
    border: 1.5px solid var(--lp-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    gap: 8px;
    cursor: pointer;
    color: var(--lp-text);
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    overflow: hidden;
}

@media (hover: hover) {
    .sel-card:hover[b-beif257sia] {
        border-color: rgba(245, 158, 11, 0.45);
        background: rgba(245, 158, 11, 0.04);
    }
}

.sel-card:active[b-beif257sia] {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.04);
}

.sel-card--active[b-beif257sia] {
    border-color: var(--lp-orange);
    border-width: 2px;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 20px 0 rgba(245, 158, 11, 0.12);
}

.sel-card:focus[b-beif257sia] {
    outline: none;
    box-shadow: 0 0 8px 2px rgba(245,158,11,0.65), 0 0 28px 8px rgba(245,158,11,0.3);
}

.sel-card__icon[b-beif257sia] {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--lp-muted);
}

.sel-card__svg-icon[b-beif257sia] {
    width: 2.5rem;
    height: 2.5rem;
}

.sel-card--active .sel-card__icon[b-beif257sia] {
    color: var(--lp-orange);
}

.sel-card__title[b-beif257sia] {
    font-weight: 700;
    font-size: 0.95rem;
}

.sel-card__desc[b-beif257sia] {
    font-size: 0.78rem;
    color: var(--lp-muted);
}

.sel-card__check[b-beif257sia] {
    font-size: 0.85rem;
    color: var(--lp-orange);
    margin-top: 2px;
}

/* ── Navigation row ───────────────────────────────────────────────────── */
.signup-nav[b-beif257sia] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.signup-nav__back[b-beif257sia] {
    background: none;
    border: 1px solid var(--lp-orange);
    color: var(--lp-orange);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    transition: background 0.15s;
    text-decoration: none;
    display: inline-block;
}

@media (hover: hover) {
    .signup-nav__back:hover[b-beif257sia] { background: rgba(245,158,11,0.1); color: var(--lp-orange); }
}
.signup-nav__back:active[b-beif257sia] { background: rgba(245,158,11,0.1); color: var(--lp-orange); }
.signup-nav__back:disabled[b-beif257sia] { opacity: 0.4; cursor: not-allowed; }

.signup-nav__continue[b-beif257sia] {
    padding: 0.55rem 1.8rem;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Progress bar: hide all labels except active, keep it aligned to bar position */
    .signup-step-lbl[b-beif257sia] { display: none; }
    .signup-step-lbl.lbl-active[b-beif257sia] { display: block; }
}
/* /Pages/StaffRoles.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.roles-toolbar[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* ── Add Role button ─────────────────────────────────────────────────────── */
.add-role-btn[b-qx0qn5ja16] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
}

.add-role-btn[b-qx0qn5ja16]  svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .add-role-btn:hover[b-qx0qn5ja16]  { opacity: 0.85; } }
.add-role-btn:active[b-qx0qn5ja16] { opacity: 0.7;  }
.add-role-btn:focus-visible[b-qx0qn5ja16] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── State (loading / empty / error) ─────────────────────────────────────── */
.roles-state[b-qx0qn5ja16] {
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--lp-muted);
    margin-top: 1.25rem;
}

.roles-state--error[b-qx0qn5ja16] { color: #f87171; }

.roles-spinner[b-qx0qn5ja16] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-orange);
    border-radius: 50%;
    animation: spin-b-qx0qn5ja16 0.6s linear infinite;
}

@keyframes spin-b-qx0qn5ja16 {
    to { transform: rotate(360deg); }
}

/* ── Role list ───────────────────────────────────────────────────────────── */
.role-list[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Role card ───────────────────────────────────────────────────────────── */
.role-card[b-qx0qn5ja16] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Role header row ─────────────────────────────────────────────────────── */
.role-header[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
}

/* ── Shield icon ─────────────────────────────────────────────────────────── */
.role-icon[b-qx0qn5ja16] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.15);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-orange);
}

.role-icon[b-qx0qn5ja16]  svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* ── Role name + permission count ────────────────────────────────────────── */
.role-meta[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.role-name[b-qx0qn5ja16] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-perm-count[b-qx0qn5ja16] {
    font-size: 0.78rem;
    color: var(--lp-muted);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.role-chevron-btn[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lp-muted);
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

@media (hover: hover) { .role-chevron-btn:hover[b-qx0qn5ja16] { background: var(--lp-hover-bg); color: var(--lp-text); } }
.role-chevron-btn:focus-visible[b-qx0qn5ja16] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.role-chevron-btn[b-qx0qn5ja16]  .chevron-icon {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
    transition: transform 0.18s ease;
    transform: rotate(-90deg);
}

.role-chevron-btn--open[b-qx0qn5ja16]  .chevron-icon { transform: rotate(0deg); }

/* ── Action buttons (delete) ─────────────────────────────────────────────── */
.role-action-btn[b-qx0qn5ja16] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
    flex-shrink: 0;
}

.role-action-btn[b-qx0qn5ja16]  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}

.role-action-btn--edit[b-qx0qn5ja16] { color: var(--lp-muted); }
@media (hover: hover) { .role-action-btn--edit:hover:not(:disabled)[b-qx0qn5ja16] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.role-action-btn--delete[b-qx0qn5ja16] { color: #f87171; }
@media (hover: hover) { .role-action-btn--delete:hover:not(:disabled)[b-qx0qn5ja16] { background: rgba(248, 113, 113, 0.1); } }

.role-action-btn:disabled[b-qx0qn5ja16] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.role-action-btn:focus-visible[b-qx0qn5ja16] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ── Permission chips ────────────────────────────────────────────────────── */
.role-perms[b-qx0qn5ja16] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--lp-border);
}

.perm-chip[b-qx0qn5ja16] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    color: var(--lp-text);
    white-space: nowrap;
}

.role-perms-empty[b-qx0qn5ja16] {
    padding: 0.6rem 1.25rem 0.8rem;
    border-top: 1px solid var(--lp-border);
    font-size: 0.8rem;
    color: var(--lp-muted);
}

/* ── Shared modal chrome — mirrors StaffUsers ────────────────────────────── */
.modal-header[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-title[b-qx0qn5ja16] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
}

.modal-close[b-qx0qn5ja16] {
    background: none;
    border: none;
    color: var(--lp-muted);
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    outline: none;
    flex-shrink: 0;
}

.modal-close[b-qx0qn5ja16]  svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .modal-close:hover[b-qx0qn5ja16] { color: var(--lp-text); background: var(--lp-hover-bg); } }
.modal-close:focus-visible[b-qx0qn5ja16] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.modal-body[b-qx0qn5ja16] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-footer[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lp-border);
    flex-shrink: 0;
}

.modal-error-banner[b-qx0qn5ja16] {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    font-size: 0.82rem;
    color: #f87171;
}

.modal-btn-cancel[b-qx0qn5ja16] {
    padding: 0.5rem 1.1rem;
    background: none;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

@media (hover: hover) {
    .modal-btn-cancel:hover:not(:disabled)[b-qx0qn5ja16] {
        background: var(--lp-hover-bg);
        border-color: var(--lp-muted);
    }
}

.modal-btn-cancel:disabled[b-qx0qn5ja16] {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-btn-cancel:focus-visible[b-qx0qn5ja16] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* ── Confirm dialog — mirrors StaffUsers ─────────────────────────────────── */
dialog.confirm-dialog[b-qx0qn5ja16] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    overflow: visible;
    outline: none;
}

.confirm-body[b-qx0qn5ja16] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.confirm-icon[b-qx0qn5ja16] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    border: 1.5px solid rgba(248, 113, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f87171;
}

.confirm-icon[b-qx0qn5ja16]  svg { width: 1rem; height: 1rem; fill: currentColor; }

.confirm-text[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.1rem;
}

.confirm-message[b-qx0qn5ja16] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--lp-text);
    line-height: 1.4;
}

.confirm-sub[b-qx0qn5ja16] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--lp-muted);
}

.modal-btn-delete[b-qx0qn5ja16] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 80px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-delete:hover:not(:disabled)[b-qx0qn5ja16]  { opacity: 0.85; } }
.modal-btn-delete:active:not(:disabled)[b-qx0qn5ja16] { opacity: 0.7; }
.modal-btn-delete:disabled[b-qx0qn5ja16]              { opacity: 0.45; cursor: not-allowed; }

.modal-btn-delete:focus-visible[b-qx0qn5ja16] {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.modal-spinner--light[b-qx0qn5ja16] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* ── Role create / edit dialog ───────────────────────────────────────────── */
dialog.role-dialog[b-qx0qn5ja16] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 480px;
    max-height: calc(100dvh - 4rem);
    overflow: hidden;
    outline: none;
}

dialog.role-dialog[open][b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 4rem);
}

.role-dialog-body[b-qx0qn5ja16] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field-group[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field-label[b-qx0qn5ja16] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lp-text);
}

.field-input[b-qx0qn5ja16] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.field-input:focus[b-qx0qn5ja16]          { border-color: var(--lp-orange); }
.field-input--error[b-qx0qn5ja16]         { border-color: #f87171; }
.field-input:disabled[b-qx0qn5ja16]       { opacity: 0.5; cursor: not-allowed; }

.field-error[b-qx0qn5ja16] {
    font-size: 0.78rem;
    color: #f87171;
}

/* ── Permissions section ─────────────────────────────────────────────────── */
.perm-section[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
}

.perm-section-title[b-qx0qn5ja16] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
    margin: 0 0 0.15rem;
}

.perm-section-sub[b-qx0qn5ja16] {
    font-size: 0.8rem;
    color: var(--lp-muted);
    margin: 0 0 0.75rem;
}

.perm-group[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.perm-group:last-child[b-qx0qn5ja16] { margin-bottom: 0; }

.perm-group-label[b-qx0qn5ja16] {
    padding: 0.45rem 0.875rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lp-muted);
    background: var(--lp-btn-bg);
    border-bottom: 1px solid var(--lp-border);
}

/* ── Permission row ──────────────────────────────────────────────────────── */
.perm-row[b-qx0qn5ja16] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid var(--lp-border);
}

.perm-row:last-child[b-qx0qn5ja16] { border-bottom: none; }

.perm-row-text[b-qx0qn5ja16] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.perm-title[b-qx0qn5ja16] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lp-text);
}

.perm-desc[b-qx0qn5ja16] {
    font-size: 0.77rem;
    color: var(--lp-muted);
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */

/* ── Submit button (role dialog footer) ──────────────────────────────────── */
.modal-btn-submit[b-qx0qn5ja16] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    outline: none;
    min-width: 96px;
    justify-content: center;
}

@media (hover: hover) { .modal-btn-submit:hover:not(:disabled)[b-qx0qn5ja16]  { opacity: 0.85; } }
.modal-btn-submit:active:not(:disabled)[b-qx0qn5ja16] { opacity: 0.7;  }
.modal-btn-submit:disabled[b-qx0qn5ja16]              { opacity: 0.45; cursor: not-allowed; }

.modal-btn-submit:focus-visible[b-qx0qn5ja16] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

/* /Pages/StaffUsers.razor.rz.scp.css */
/* ── Toolbar (search + add button) ──────────────────────────────────────── */
.users-toolbar[b-w5fmuqa9o1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.search-input-wrap[b-w5fmuqa9o1] {
    position: relative;
    flex: 1;
    max-width: 22rem;
}

.add-user-btn[b-w5fmuqa9o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: var(--lp-orange);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    outline: none;
    flex-shrink: 0;
}

.add-user-btn[b-w5fmuqa9o1]  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    flex-shrink: 0;
}

@media (hover: hover) { .add-user-btn:hover[b-w5fmuqa9o1]  { opacity: 0.85; } }
.add-user-btn:active[b-w5fmuqa9o1] { opacity: 0.7; }

.add-user-btn:focus-visible[b-w5fmuqa9o1] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
}

.search-input-wrap[b-w5fmuqa9o1]  .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--lp-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-input[b-w5fmuqa9o1] {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-input[b-w5fmuqa9o1]::placeholder {
    color: var(--lp-muted);
}

.search-input:focus[b-w5fmuqa9o1] {
    border-color: var(--lp-orange);
}

/* ── Card wrapper ────────────────────────────────────────────────────────── */
.users-card[b-w5fmuqa9o1] {
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow-x: auto;   /* horizontal scroll; still clips content to rounded corners */
    margin-top: 1.25rem;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.users-table[b-w5fmuqa9o1] {
    width: 100%;
    min-width: 560px;   /* prevents columns from collapsing before scroll kicks in */
    border-collapse: collapse;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.users-table thead th[b-w5fmuqa9o1] {
    padding: 0.85rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--lp-border);
}

.th-inner[b-w5fmuqa9o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    outline: none;
}

@media (hover: hover) {
    .th-inner:hover[b-w5fmuqa9o1] {
        color: var(--lp-text);
    }
}

.th-inner:focus-visible[b-w5fmuqa9o1] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (hover: hover) {
    .th-inner:hover .sort-icon[b-w5fmuqa9o1] {
        opacity: 0.85;
    }
}

.th-actions[b-w5fmuqa9o1] {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.td-actions[b-w5fmuqa9o1] {
    width: 1%;
    white-space: nowrap;
}

/* ── Column min-widths ───────────────────────────────────────────────────── */
.users-table th:first-child[b-w5fmuqa9o1],
.users-table td:first-child[b-w5fmuqa9o1] { min-width: 200px; }   /* user (avatar + name + email) */

.users-table th:nth-child(2)[b-w5fmuqa9o1],
.users-table td:nth-child(2)[b-w5fmuqa9o1] { min-width: 90px; }   /* role */

.users-table th:nth-child(3)[b-w5fmuqa9o1],
.users-table td:nth-child(3)[b-w5fmuqa9o1] { min-width: 100px; }  /* status */

.users-table th:nth-child(4)[b-w5fmuqa9o1],
.users-table td:nth-child(4)[b-w5fmuqa9o1] { min-width: 110px; }  /* created */

.sort-icon[b-w5fmuqa9o1] {
    width: 0.7rem;
    height: 0.7rem;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s;
}

.sort-icon--active[b-w5fmuqa9o1] {
    opacity: 1;
    color: var(--lp-orange);
}

/* ── Rows ────────────────────────────────────────────────────────────────── */
.users-table tbody tr[b-w5fmuqa9o1] {
    border-bottom: 1px solid var(--lp-border);
    transition: background 0.12s;
}

.users-table tbody tr:last-child[b-w5fmuqa9o1] {
    border-bottom: none;
}

@media (hover: hover) {
    .users-table tbody tr:hover[b-w5fmuqa9o1] {
        background: var(--lp-hover-bg);
    }
}

.users-table tbody td[b-w5fmuqa9o1] {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--lp-text);
}

/* ── User cell ───────────────────────────────────────────────────────────── */
.user-cell[b-w5fmuqa9o1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-w5fmuqa9o1] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-orange);
}

.user-avatar[b-w5fmuqa9o1]  svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.user-info[b-w5fmuqa9o1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.user-name[b-w5fmuqa9o1] {
    font-weight: 600;
    color: var(--lp-text);
    line-height: 1.25;
}

.user-email[b-w5fmuqa9o1] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.25;
}

/* ── Staff ID cell ───────────────────────────────────────────────────────── */
.staffid-cell[b-w5fmuqa9o1] {
    font-family: monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--text-muted, #6c757d);
}

/* ── Role cell ───────────────────────────────────────────────────────────── */
.role-cell[b-w5fmuqa9o1] {
    font-weight: 600;
    white-space: nowrap;
}

/* ── Status badge ────────────────────────────────────────────────────────── */
.status-badge[b-w5fmuqa9o1] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid;
}

.status-active[b-w5fmuqa9o1] {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(74, 222, 128, 0.08);
}

.status-pending[b-w5fmuqa9o1] {
    color: var(--lp-orange);
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.status-blocked[b-w5fmuqa9o1] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
}

.status-revoked[b-w5fmuqa9o1] {
    color: var(--lp-muted);
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.08);
}

.status-request[b-w5fmuqa9o1] {
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.35);
    background: rgba(129, 140, 248, 0.08);
}

/* ── Date cell ───────────────────────────────────────────────────────────── */
.date-cell[b-w5fmuqa9o1] {
    color: var(--lp-muted) !important;
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.action-btns[b-w5fmuqa9o1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.action-btn[b-w5fmuqa9o1] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    outline: none;
}

.action-btn[b-w5fmuqa9o1]  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}

.action-edit[b-w5fmuqa9o1] {
    color: var(--lp-muted);
}

@media (hover: hover) {
    .action-edit:hover[b-w5fmuqa9o1] {
        background: var(--lp-hover-bg);
        color: var(--lp-text);
    }
}

.action-delete[b-w5fmuqa9o1] {
    color: #f87171;
}

@media (hover: hover) {
    .action-delete:hover[b-w5fmuqa9o1] {
        background: rgba(248, 113, 113, 0.1);
    }
}

.action-approve[b-w5fmuqa9o1] {
    color: #4ade80;
}

@media (hover: hover) {
    .action-approve:hover[b-w5fmuqa9o1] {
        background: rgba(74, 222, 128, 0.1);
    }
}

.confirm-icon--success[b-w5fmuqa9o1] {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.action-btn:focus-visible[b-w5fmuqa9o1] {
    outline: 2px solid var(--lp-orange);
    outline-offset: 2px;
}

.action-btn:disabled[b-w5fmuqa9o1] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Native <dialog> element ─────────────────────────────────────────────── */
/* showModal() places the dialog in the browser top-layer — above everything, */
/* immune to z-index, overflow, and stacking-context issues.                  */
/* ::backdrop is styled globally in app.css (scoped CSS can't target it).     */
/* confirm-dialog, modal-header/footer/body, modal-btn-* etc. are global and  */
/* defined in app.css so they work across all components.                     */
dialog.add-user-dialog[b-w5fmuqa9o1] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 440px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    outline: none;
}

dialog.add-user-dialog[open][b-w5fmuqa9o1] {
    display: flex;
    flex-direction: column;
}

/* Two-column row for first/last name */
.modal-row[b-w5fmuqa9o1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ── Field group ─────────────────────────────────────────────────────────── */
.field-group[b-w5fmuqa9o1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field-label[b-w5fmuqa9o1] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--lp-text);
}

/* ── Inputs & selects ────────────────────────────────────────────────────── */
.modal-input[b-w5fmuqa9o1],
.modal-select[b-w5fmuqa9o1] {
    padding: 0.55rem 0.875rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.modal-input[b-w5fmuqa9o1]::placeholder { color: var(--lp-muted); }

.modal-input:focus[b-w5fmuqa9o1]  { border-color: var(--lp-orange); }

.modal-input--error[b-w5fmuqa9o1] { border-color: #f87171 !important; }

.modal-input--placeholder[b-w5fmuqa9o1] {
    color: var(--lp-muted);
    pointer-events: none;
}


/* ── Validation messages ─────────────────────────────────────────────────── */
.field-error[b-w5fmuqa9o1] {
    font-size: 0.78rem;
    color: #f87171;
    line-height: 1.3;
}

/* /Pages/TablesConfiguration.razor.rz.scp.css */
/* ── Page layout ─────────────────────────────────────────────────────────── */

.tc-layout[b-dhhot9gq4v] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ── Left: canvas area (60%) ─────────────────────────────────────────────── */

.tc-main[b-dhhot9gq4v] {
    flex: 6;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Right: properties panel (40%) ──────────────────────────────────────── */

.tc-sidebar[b-dhhot9gq4v] {
    flex: 4;
    min-width: 200px;
    max-width: 320px;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
    overflow: hidden;
}

.tc-sidebar-section[b-dhhot9gq4v] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tc-sidebar-divider[b-dhhot9gq4v] {
    height: 1px;
    background: var(--lp-border);
}

.tc-sidebar-title[b-dhhot9gq4v] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tc-sidebar-sub[b-dhhot9gq4v] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lp-muted);
    opacity: 0.7;
    margin-bottom: -0.4rem;
}

.tc-sidebar-sub--spaced[b-dhhot9gq4v] {
    margin-top: 0.25rem;
}

/* ── Field groups ────────────────────────────────────────────────────────── */

.tc-field-group[b-dhhot9gq4v] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tc-field-label[b-dhhot9gq4v] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--lp-muted);
}

.tc-field-error[b-dhhot9gq4v] {
    font-size: 0.72rem;
    color: #f87171;
    margin-top: -0.2rem;
}

/* ── Type badge ──────────────────────────────────────────────────────────── */

.tc-prop-type[b-dhhot9gq4v] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    color: var(--lp-orange);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

/* ── Shape selector ──────────────────────────────────────────────────────── */

.tc-shape-selector[b-dhhot9gq4v] {
    display: flex;
    gap: 0.3rem;
}

.tc-shape-btn[b-dhhot9gq4v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.2rem;
    background: var(--lp-bg-card2);
    border: 1.5px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-muted);
    font-size: 0.68rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    outline: none;
}

.tc-shape-btn[b-dhhot9gq4v]  svg     { width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .tc-shape-btn:hover:not(:disabled)[b-dhhot9gq4v]   { border-color: var(--lp-orange); color: var(--lp-orange); background: rgba(245, 158, 11, 0.07); } }
.tc-shape-btn:active:not(:disabled)[b-dhhot9gq4v]  { background: rgba(245, 158, 11, 0.14); }
.tc-shape-btn:disabled[b-dhhot9gq4v]               { opacity: 0.38; cursor: not-allowed; }
.tc-shape-btn:focus-visible[b-dhhot9gq4v]          { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Text input ──────────────────────────────────────────────────────────── */

.tc-input[b-dhhot9gq4v] {
    width: 100%;
    padding: 0.48rem 0.7rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.tc-input[b-dhhot9gq4v]::placeholder { color: var(--lp-muted); }
.tc-input:focus[b-dhhot9gq4v]         { border-color: var(--lp-orange); }
.tc-input--error[b-dhhot9gq4v]        { border-color: #f87171 !important; }

/* Small number inputs for coords/size */
.tc-input--sm[b-dhhot9gq4v] {
    padding: 0.38rem 0.5rem;
    font-size: 0.82rem;
    min-width: 0;
    flex: 1;
}

/* ── Coord row (W/H, X/Y pairs) ──────────────────────────────────────────── */

.tc-coord-row[b-dhhot9gq4v] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tc-coord-label[b-dhhot9gq4v] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    width: 0.8rem;
    flex-shrink: 0;
}

/* ── Guest stepper ───────────────────────────────────────────────────────── */

.tc-stepper[b-dhhot9gq4v] {
    display: flex;
    align-items: center;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    overflow: hidden;
}

.tc-stepper-btn[b-dhhot9gq4v] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
    outline: none;
}

.tc-stepper-btn[b-dhhot9gq4v]  svg    { width: 0.8rem; height: 0.8rem; fill: currentColor; }
@media (hover: hover) { .tc-stepper-btn:hover[b-dhhot9gq4v]  { background: var(--lp-hover-bg); color: var(--lp-text); } }

.tc-stepper-val[b-dhhot9gq4v] {
    flex: 1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
    user-select: none;
}

/* ── Properties empty state ──────────────────────────────────────────────── */

.tc-props-empty[b-dhhot9gq4v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    color: var(--lp-muted);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.6;
}

.tc-props-empty[b-dhhot9gq4v]  svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }

/* ── Decor object row ────────────────────────────────────────────────────── */

.tc-decor-grid[b-dhhot9gq4v] {
    display: flex;
    gap: 0.3rem;
}

.tc-decor-btn[b-dhhot9gq4v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.2rem;
    background: var(--lp-bg-card2);
    border: 1.5px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-muted);
    font-size: 0.68rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    outline: none;
}

.tc-decor-btn[b-dhhot9gq4v]  svg    { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; }
@media (hover: hover) { .tc-decor-btn:hover:not(:disabled)[b-dhhot9gq4v]  { border-color: var(--lp-orange); color: var(--lp-orange); background: rgba(245, 158, 11, 0.07); } }
.tc-decor-btn:active:not(:disabled)[b-dhhot9gq4v] { background: rgba(245, 158, 11, 0.14); }
.tc-decor-btn:disabled[b-dhhot9gq4v]              { opacity: 0.35; cursor: not-allowed; }
.tc-decor-btn:focus-visible[b-dhhot9gq4v]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Tabs bar ────────────────────────────────────────────────────────────── */

/* ── Single tab ──────────────────────────────────────────────────────────── */

.tc-tab-name[b-dhhot9gq4v] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.1rem;
    transition: color 0.13s;
}

.tc-tab--active .tc-tab-name[b-dhhot9gq4v] { color: var(--lp-orange); font-weight: 600; }

/* ── Tab icon buttons ────────────────────────────────────────────────────── */

.tc-tab-btn[b-dhhot9gq4v] {
    width: 1.4rem;
    height: 1.4rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--lp-muted);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: background 0.12s, color 0.12s, opacity 0.13s;
    outline: none;
}

.tc-tab--active .tc-tab-btn[b-dhhot9gq4v]       { display: flex; }
@media (hover: hover) { .tc-tab--active:hover .tc-tab-btn[b-dhhot9gq4v] { opacity: 1; } }

.tc-tab-btn[b-dhhot9gq4v]  svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }
@media (hover: hover) { .tc-tab-btn:hover[b-dhhot9gq4v] { background: var(--lp-hover-bg); color: var(--lp-text); } }

.tc-tab-btn--delete:hover[b-dhhot9gq4v] { background: rgba(248, 113, 113, 0.12); color: #f87171; }

.tc-tab-btn:disabled[b-dhhot9gq4v] {
    opacity: 0 !important;
    pointer-events: none;
}

.tc-tab-btn:focus-visible[b-dhhot9gq4v] { outline: 2px solid var(--lp-orange); outline-offset: 2px; opacity: 1; }

/* ── Add room button ─────────────────────────────────────────────────────── */

.tc-tab-add[b-dhhot9gq4v]  svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

/* ── Zoom toolbar ────────────────────────────────────────────────────────── */

.tc-zoom-bar[b-dhhot9gq4v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-top: none;
    border-bottom: none;
    justify-content: flex-end;
}

.tc-zoom-btn[b-dhhot9gq4v] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    border-radius: 6px;
    color: var(--lp-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    outline: none;
    flex-shrink: 0;
}

.tc-zoom-btn[b-dhhot9gq4v]  svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
@media (hover: hover) { .tc-zoom-btn:hover:not(:disabled)[b-dhhot9gq4v]  { background: var(--lp-hover-bg-strong); color: var(--lp-text); border-color: var(--lp-btn-border-hover); } }
.tc-zoom-btn:disabled[b-dhhot9gq4v]              { opacity: 0.35; cursor: not-allowed; }
.tc-zoom-btn:focus-visible[b-dhhot9gq4v]         { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

.tc-zoom-pct[b-dhhot9gq4v] {
    padding: 0.2rem 0.55rem;
    background: var(--lp-btn-bg);
    border: 1px solid var(--lp-btn-border);
    border-radius: 6px;
    color: var(--lp-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: monospace;
    min-width: 3.5rem;
    text-align: center;
    transition: background 0.12s, border-color 0.12s;
    outline: none;
}

@media (hover: hover) { .tc-zoom-pct:hover[b-dhhot9gq4v] { background: var(--lp-hover-bg-strong); border-color: var(--lp-btn-border-hover); } }
.tc-zoom-pct:focus-visible[b-dhhot9gq4v] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Canvas wrapper ──────────────────────────────────────────────────────── */

.tc-canvas-wrap[b-dhhot9gq4v] {
    /* min-width: 0 prevents this flex item from expanding beyond its flex parent.
       Without it, flex default min-width:auto resolves to the spacer's explicit
       pixel width, causing the wrap—and the whole page—to overflow horizontally. */
    min-width: 0;
    border: 1px solid var(--lp-border);
    border-top: none;
    border-radius: 0 0 var(--lp-radius) var(--lp-radius);
    min-height: 550px;
    overflow: auto;
    position: relative;
    background: var(--lp-bg-card2);
    cursor: grab;
    touch-action: none;
}

.tc-canvas-wrap:active[b-dhhot9gq4v] { cursor: grabbing; }

/* ── Canvas (positioned container for items) ─────────────────────────────── */

.tc-canvas[b-dhhot9gq4v] {
    position: absolute;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle, var(--lp-border) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Empty / hint ─────────────────────────────────────────────────────────── */

.tc-canvas-empty[b-dhhot9gq4v] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--lp-muted);
    font-size: 0.875rem;
}

.tc-canvas-empty[b-dhhot9gq4v]  svg { width: 2.5rem; height: 2.5rem; fill: currentColor; opacity: 0.3; }

.tc-canvas-hint[b-dhhot9gq4v] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--lp-muted);
    font-size: 0.82rem;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.45;
}

/* ── Table element ───────────────────────────────────────────────────────── */

.tc-table[b-dhhot9gq4v] {
    position: absolute;
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--lp-bg-card);
    border: 1.5px solid var(--lp-border);
    transition: border-color 0.15s, box-shadow 0.15s;
    padding: 0.35rem;
    gap: 0.15rem;
    z-index: 2;
    overflow: visible;
}

.tc-table--square[b-dhhot9gq4v]    { border-radius: 10px; }
.tc-table--rectangle[b-dhhot9gq4v] { border-radius: 10px; }
.tc-table--circle[b-dhhot9gq4v]    { border-radius: 50%; }

@media (hover: hover) {
    .tc-table:hover[b-dhhot9gq4v] {
        border-color: var(--lp-orange);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
        z-index: 10;
    }
}

.tc-table-name[b-dhhot9gq4v]    { font-size: 1.1rem; font-weight: 700; color: var(--lp-text); line-height: 1; }

.tc-table-guests[b-dhhot9gq4v] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--lp-muted);
    line-height: 1;
}

.tc-table-guests[b-dhhot9gq4v]  svg { width: 0.7rem; height: 0.7rem; fill: currentColor; flex-shrink: 0; }

/* ── Selected state ──────────────────────────────────────────────────────── */

.tc-item--selected[b-dhhot9gq4v] {
    border-color: var(--lp-orange) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
    z-index: 15 !important;
}

/* ── Table delete button ─────────────────────────────────────────────────── */

.tc-table-delete[b-dhhot9gq4v] {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, transform 0.12s;
    outline: none;
    z-index: 3;
}

.tc-table-delete[b-dhhot9gq4v]  svg             { width: 0.55rem; height: 0.55rem; fill: currentColor; }
@media (hover: hover) { .tc-table:hover .tc-table-delete[b-dhhot9gq4v] { opacity: 1; } }
.tc-table-delete:hover[b-dhhot9gq4v]           { transform: scale(1.15); }
.tc-table-delete:focus-visible[b-dhhot9gq4v]   { outline: 2px solid #ef4444; outline-offset: 2px; opacity: 1; }

/* ── Table rotation handle ───────────────────────────────────────────────── */

.tc-table-rotate[b-dhhot9gq4v] {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--lp-orange);
    background: var(--lp-bg-card);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
    z-index: 7;
}

.tc-table-rotate[b-dhhot9gq4v]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: var(--lp-orange);
    opacity: 0.6;
}

@media (hover: hover) { .tc-table:hover .tc-table-rotate[b-dhhot9gq4v] { opacity: 1; } }
.tc-table-rotate:hover[b-dhhot9gq4v]            { background: rgba(245, 158, 11, 0.25); }

/* ── Table resize handles ────────────────────────────────────────────────── */

.tc-table-resize-e[b-dhhot9gq4v] {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 12px;
    height: clamp(20px, 50%, 40px);
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-table-resize-e[b-dhhot9gq4v]::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--lp-orange);
    border-radius: 2px;
    opacity: 0.7;
}

.tc-table-resize-s[b-dhhot9gq4v] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20px, 50%, 40px);
    height: 12px;
    cursor: ns-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-table-resize-s[b-dhhot9gq4v]::before {
    content: '';
    width: 14px;
    height: 3px;
    background: var(--lp-orange);
    border-radius: 2px;
    opacity: 0.7;
}

.tc-table-resize-se[b-dhhot9gq4v] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    background-image:
        linear-gradient(135deg, transparent 40%, var(--lp-orange) 40%, var(--lp-orange) 55%, transparent 55%),
        linear-gradient(135deg, transparent 60%, var(--lp-orange) 60%, var(--lp-orange) 75%, transparent 75%);
}

.tc-table:hover .tc-table-rotate[b-dhhot9gq4v],
.tc-table:hover .tc-table-resize-e[b-dhhot9gq4v],
.tc-table:hover .tc-table-resize-s[b-dhhot9gq4v],
@media (hover: hover)[b-dhhot9gq4v] { .tc-table:hover .tc-table-resize-se { opacity: 1; } }

/* ── Dragging state (tables and decors) ───────────────────────────────────── */

.tc-item--dragging[b-dhhot9gq4v] {
    cursor: grabbing !important;
    opacity: 0.88;
    z-index: 100 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--lp-orange) !important;
}

/* ── Decor element ───────────────────────────────────────────────────────── */

.tc-decor[b-dhhot9gq4v] {
    position: absolute;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
    z-index: 1;
    overflow: visible;
}

.tc-decor-icon[b-dhhot9gq4v] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tc-decor-icon[b-dhhot9gq4v]  svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Kind-specific colors */
.tc-decor--door[b-dhhot9gq4v]   { background: rgba(100,150,200,0.20); border: 1.5px solid rgba(100,150,200,0.65); color: rgba(120,170,220,0.9); }
.tc-decor--window[b-dhhot9gq4v] { background: rgba( 80,180,240,0.15); border: 1.5px solid rgba( 80,180,240,0.60); color: rgba(100,200,255,0.9); }
.tc-decor--plant[b-dhhot9gq4v]  { background: rgba( 70,190,100,0.15); border: 1.5px solid rgba( 70,190,100,0.55); color: rgba( 90,210,120,0.9); }
.tc-decor--bar[b-dhhot9gq4v]    { background: rgba(180, 40, 70,0.18); border: 1.5px solid rgba(180, 40, 70,0.60); color: rgba(220, 80,110,0.95); }

@media (hover: hover) { .tc-decor:hover[b-dhhot9gq4v] { box-shadow: 0 0 0 2px rgba(245,158,11,0.35); z-index: 5; } }

/* ── Decor delete button ─────────────────────────────────────────────────── */

.tc-decor-delete[b-dhhot9gq4v] {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, transform 0.12s;
    outline: none;
    z-index: 6;
}

.tc-decor-delete[b-dhhot9gq4v]  svg             { width: 0.8rem; height: 0.8rem; fill: currentColor; }
@media (hover: hover) { .tc-decor:hover .tc-decor-delete[b-dhhot9gq4v]  { opacity: 1; } }
.tc-decor-delete:hover[b-dhhot9gq4v]            { transform: scale(1.15); }
.tc-decor-delete:focus-visible[b-dhhot9gq4v]    { outline: 2px solid #ef4444; outline-offset: 2px; opacity: 1; }

/* ── Decor rotation handle ────────────────────────────────────────────────── */

.tc-decor-rotate[b-dhhot9gq4v] {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--lp-orange);
    background: var(--lp-bg-card);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
    z-index: 7;
}

.tc-decor-rotate[b-dhhot9gq4v]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: var(--lp-orange);
    opacity: 0.6;
}

@media (hover: hover) { .tc-decor:hover .tc-decor-rotate[b-dhhot9gq4v] { opacity: 1; } }
.tc-decor-rotate:hover[b-dhhot9gq4v]            { background: rgba(245, 158, 11, 0.25); }

/* ── Decor resize handles ──────────────────────────────────────────────────── */

.tc-decor-resize-e[b-dhhot9gq4v] {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 12px;
    height: clamp(24px, 50%, 48px);
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-decor-resize-e[b-dhhot9gq4v]::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--lp-orange);
    border-radius: 2px;
    opacity: 0.7;
}

.tc-decor-resize-s[b-dhhot9gq4v] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(24px, 50%, 48px);
    height: 12px;
    cursor: ns-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-decor-resize-s[b-dhhot9gq4v]::before {
    content: '';
    width: 16px;
    height: 3px;
    background: var(--lp-orange);
    border-radius: 2px;
    opacity: 0.7;
}

.tc-decor-resize-se[b-dhhot9gq4v] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 6;
    background-image:
        linear-gradient(135deg, transparent 40%, var(--lp-orange) 40%, var(--lp-orange) 55%, transparent 55%),
        linear-gradient(135deg, transparent 60%, var(--lp-orange) 60%, var(--lp-orange) 75%, transparent 75%);
}

.tc-decor:hover .tc-decor-resize-e[b-dhhot9gq4v],
.tc-decor:hover .tc-decor-resize-s[b-dhhot9gq4v],
@media (hover: hover)[b-dhhot9gq4v] { .tc-decor:hover .tc-decor-resize-se { opacity: 1; } }

/* ── Room dialogs ────────────────────────────────────────────────────────── */

dialog.tc-dialog[b-dhhot9gq4v] {
    padding: 0;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    background: var(--lp-bg-card);
    color: var(--lp-text);
    width: calc(100% - 2rem);
    max-width: 380px;
    outline: none;
}

dialog.tc-dialog[open][b-dhhot9gq4v] {
    display: flex;
    flex-direction: column;
}

.modal-input[b-dhhot9gq4v] {
    width: 100%;
    padding: 0.48rem 0.7rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.modal-input[b-dhhot9gq4v]::placeholder { color: var(--lp-muted); }
.modal-input:focus[b-dhhot9gq4v]         { border-color: var(--lp-orange); }

.modal-input--error[b-dhhot9gq4v] {
    border-color: #f87171 !important;
}

/* ── Sidebar settings toggle ─────────────────────────────────────────────── */

.tc-setting-row[b-dhhot9gq4v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.tc-setting-text[b-dhhot9gq4v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tc-setting-title[b-dhhot9gq4v] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--lp-text);
    line-height: 1.3;
}

.tc-setting-desc[b-dhhot9gq4v] {
    font-size: 0.73rem;
    color: var(--lp-muted);
    line-height: 1.3;
}

.tc-toggle[b-dhhot9gq4v] {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.tc-toggle input[b-dhhot9gq4v] { display: none; }

.tc-toggle-track[b-dhhot9gq4v] {
    position: absolute;
    inset: 0;
    background: var(--lp-border);
    border-radius: 9999px;
    transition: background 0.2s;
}

.tc-toggle-track[b-dhhot9gq4v]::after {
    content: "";
    position: absolute;
    top: 0.175rem;
    left: 0.175rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}

.tc-toggle input:checked + .tc-toggle-track[b-dhhot9gq4v]        { background: var(--lp-orange); }
.tc-toggle input:checked + .tc-toggle-track[b-dhhot9gq4v]::after { transform: translateX(1rem); }
.tc-toggle--saving .tc-toggle-track[b-dhhot9gq4v]                { opacity: 0.5; cursor: not-allowed; }

/* ── Mobile view (≤1024px) ────────────────────────────────────────────────── */

.tc-mobile-tabs[b-dhhot9gq4v]  { display: none; }
.tc-save-mobile[b-dhhot9gq4v]  { display: none; }

@media (max-width: 1024px) {

    .tc-save-desktop[b-dhhot9gq4v] { display: none; }
    .tc-save-mobile[b-dhhot9gq4v]  { display: inline-flex; }

    .tc-mobile-tabs[b-dhhot9gq4v] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .tc-view-toggle[b-dhhot9gq4v] {
        display: flex;
        border: 1px solid var(--lp-border);
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .tc-view-tab[b-dhhot9gq4v] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border: none;
        background: transparent;
        color: var(--lp-muted);
        cursor: pointer;
        transition: background 0.13s, color 0.13s;
        padding: 0;
    }

    .tc-view-tab:not(:last-child)[b-dhhot9gq4v] { border-right: 1px solid var(--lp-border); }

    @media (hover: hover) {
        .tc-view-tab:hover:not(.tc-view-tab--active)[b-dhhot9gq4v] {
            background: var(--lp-hover-bg);
            color: var(--lp-text);
        }
    }

    .tc-view-tab--active[b-dhhot9gq4v] { background: var(--lp-orange); color: #000; }

    .tc-view-tab[b-dhhot9gq4v]  svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    .tc-m-hidden[b-dhhot9gq4v] { display: none !important; }

    /* flip to column and stretch children to full width */
    .tc-layout[b-dhhot9gq4v] { flex-direction: column; align-items: stretch; }

    .tc-sidebar[b-dhhot9gq4v] {
        max-width: none;
        position: static;
    }
}
/* /Pages/TablesPreview.razor.rz.scp.css */
/* tp-* shared canvas classes live in wwwroot/css/app.css */

/* ── Tab text styling (layout handled by global .lp-tab) ─────────────────── */

.tp-tab[b-4p5v9enmdc] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
}

.tp-tab--active[b-4p5v9enmdc] {
    color: var(--lp-orange);
    font-weight: 600;
}

.tp-tab:focus-visible[b-4p5v9enmdc] { outline: 2px solid var(--lp-orange); outline-offset: -2px; }

/* ── Page layout ──────────────────────────────────────────────────────────── */

.tp-layout[b-4p5v9enmdc] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.tp-main[b-4p5v9enmdc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.tp-sidebar[b-4p5v9enmdc] {
    width: 260px;
    flex-shrink: 0;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
    overflow: hidden;
}

.tp-sidebar-empty[b-4p5v9enmdc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 2rem 1rem;
    color: var(--lp-muted);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.55;
}

.tp-sidebar-empty[b-4p5v9enmdc]  svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }

.tp-sidebar-section[b-4p5v9enmdc] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-sidebar-divider[b-4p5v9enmdc] {
    height: 1px;
    background: var(--lp-border);
}

/* ── Table info ───────────────────────────────────────────────────────────── */

.tp-sb-title-row[b-4p5v9enmdc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-sb-table-name[b-4p5v9enmdc] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-text);
    flex: 1;
}

.tp-sb-shape-badge[b-4p5v9enmdc] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-muted);
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
}

.tp-sb-meta[b-4p5v9enmdc] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--lp-muted);
}

.tp-sb-meta[b-4p5v9enmdc]  svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

/* ── Toggle row ───────────────────────────────────────────────────────────── */

.tp-sb-toggle-row[b-4p5v9enmdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tp-sb-toggle-info[b-4p5v9enmdc] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tp-sb-toggle-label[b-4p5v9enmdc] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lp-text);
}

.tp-sb-toggle-desc[b-4p5v9enmdc] {
    font-size: 0.72rem;
    color: var(--lp-muted);
}


/* ── Section header ───────────────────────────────────────────────────────── */

.tp-sb-section-header[b-4p5v9enmdc] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.7;
}

/* ── Section label ────────────────────────────────────────────────────────── */

.tp-sb-section-label[b-4p5v9enmdc] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Mode selector ────────────────────────────────────────────────────────── */

.tp-sb-mode-group[b-4p5v9enmdc] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tp-sb-mode-btn[b-4p5v9enmdc] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: var(--lp-bg-card2);
    border: 1.5px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    outline: none;
}

@media (hover: hover) { .tp-sb-mode-btn:hover[b-4p5v9enmdc] { border-color: var(--lp-orange); color: var(--lp-orange); background: rgba(245,158,11,0.06); } }
.tp-sb-mode-btn--active[b-4p5v9enmdc] { border-color: var(--lp-orange); color: var(--lp-orange); background: rgba(245,158,11,0.1); font-weight: 600; }
.tp-sb-mode-btn:focus-visible[b-4p5v9enmdc] { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Field inputs ─────────────────────────────────────────────────────────── */

.tp-sb-field-group[b-4p5v9enmdc] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tp-sb-field-label[b-4p5v9enmdc] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lp-muted);
}

.tp-sb-input[b-4p5v9enmdc] {
    width: 100%;
    padding: 0.45rem 0.65rem;
    background: var(--lp-bg-card2);
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    color: var(--lp-text);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    color-scheme: dark;
}

.tp-sb-input:focus[b-4p5v9enmdc] { border-color: var(--lp-orange); }

/* ── Save button ──────────────────────────────────────────────────────────── */

.tp-sb-save-btn[b-4p5v9enmdc] {
    width: 100%;
    padding: 0.5rem;
    background: var(--lp-orange);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    outline: none;
}

@media (hover: hover) { .tp-sb-save-btn:hover:not(:disabled)[b-4p5v9enmdc] { background: #d97706; } }
.tp-sb-save-btn:disabled[b-4p5v9enmdc]             { opacity: 0.45; cursor: not-allowed; }
.tp-sb-save-btn--dim[b-4p5v9enmdc]                 { opacity: 0.45; }
.tp-sb-save-btn:focus-visible[b-4p5v9enmdc]        { outline: 2px solid var(--lp-orange); outline-offset: 2px; }

/* ── Mobile view (≤1024px) ────────────────────────────────────────────────── */

.tp-mobile-tabs[b-4p5v9enmdc] { display: none; }

@media (max-width: 1024px) {

    .tp-mobile-tabs[b-4p5v9enmdc] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .tp-order-action-btn[b-4p5v9enmdc] { flex-shrink: 0; }

    .tp-view-toggle[b-4p5v9enmdc] {
        display: flex;
        border: 1px solid var(--lp-border);
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .tp-view-tab[b-4p5v9enmdc] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border: none;
        background: transparent;
        color: var(--lp-muted);
        cursor: pointer;
        transition: background 0.13s, color 0.13s;
        padding: 0;
    }

    .tp-view-tab:not(:last-child)[b-4p5v9enmdc] { border-right: 1px solid var(--lp-border); }

    @media (hover: hover) {
        .tp-view-tab:hover:not(.tp-view-tab--active)[b-4p5v9enmdc] {
            background: var(--lp-hover-bg);
            color: var(--lp-text);
        }
    }

    .tp-view-tab--active[b-4p5v9enmdc] { background: var(--lp-orange); color: #000; }

    .tp-view-tab[b-4p5v9enmdc]  svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    .tp-m-hidden[b-4p5v9enmdc] { display: none !important; }

    /* flip to column and stretch children to full width */
    .tp-layout[b-4p5v9enmdc]   { flex-direction: column; align-items: stretch; }

    .tp-sidebar[b-4p5v9enmdc] {
        width: 100%;
        max-width: none;
        position: static;
    }
}
/* /Pages/TablesQrCodes.razor.rz.scp.css */
.qrc-card[b-rvcu1t5o03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
}

.qrc-print-area[b-rvcu1t5o03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: white;
    /* force dark text inside the white print area regardless of theme */
    color: #111827;
}

.qrc-org-name[b-rvcu1t5o03] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    text-align: center;
}

.qrc-qr-box[b-rvcu1t5o03] {
    width: 280px;
    height: 280px;
}

.qrc-url[b-rvcu1t5o03] {
    font-size: 0.75rem;
    color: #6b7280;
    word-break: break-all;
    text-align: center;
    max-width: 300px;
    text-decoration: underline;
}

.qrc-info[b-rvcu1t5o03] {
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

.qrc-url-label[b-rvcu1t5o03] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.qrc-url-value[b-rvcu1t5o03] {
    color: var(--text-primary, #111827);
    font-family: monospace;
}

.qrc-print-btn[b-rvcu1t5o03] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* /Pages/TablesSettings.razor.rz.scp.css */
/* ── Rows container ───────────────────────────────────────────────────────── */

.tset-rows[b-b2xr11ws2m] {
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Row ──────────────────────────────────────────────────────────────────── */

.tset-row[b-b2xr11ws2m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.1rem;
    transition: background 0.12s;
}

.tset-row:not(:last-child)[b-b2xr11ws2m] { border-bottom: 1px solid var(--lp-border); }
@media (hover: hover) { .tset-row:hover[b-b2xr11ws2m]            { background: var(--lp-hover-bg); } }

.tset-row-text[b-b2xr11ws2m] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.tset-row-title[b-b2xr11ws2m] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-text);
}

.tset-row-desc[b-b2xr11ws2m] {
    font-size: 0.78rem;
    color: var(--lp-muted);
    line-height: 1.4;
}


/* ── Error banner ─────────────────────────────────────────────────────────── */

.tset-error[b-b2xr11ws2m] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #f87171;
}