/* /Components/Common/Pages/HelpTip.razor.rz.scp.css */
/*
    The "?" help bubble. See HelpTip.razor.

    CSS isolation rather than a <style> block in the component: a style block
    inside a component is injected on every render, and a form carrying a
    dozen of these would inject it a dozen times.

    Everything is driven by the design tokens, so the bubble follows the theme
    rather than freezing one copy of it. The fallbacks are only for the case
    where a token is missing.
*/

.help-tip[b-l3rf4yr0xc] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
}

/* ---------------------------------------------------------------- the "?" */

.help-tip__btn[b-l3rf4yr0xc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--c-ink-3, #8b7f82);
    font-size: 12px;
    line-height: 1;
    cursor: help;
    border-radius: 50%;
}

.help-tip__btn:hover[b-l3rf4yr0xc],
.help-tip__btn:focus-visible[b-l3rf4yr0xc] {
    color: var(--c-primary, #a8394a);
}

.help-tip__btn:focus-visible[b-l3rf4yr0xc] {
    outline: 2px solid var(--c-primary, #a8394a);
    outline-offset: 1px;
}

/* ------------------------------------------------------------- the bubble */

.help-tip__bubble[b-l3rf4yr0xc] {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid var(--c-line, #eae4dd);
    border-radius: 8px;
    background: var(--c-surface, #fff);
    box-shadow: 0 8px 24px -6px rgba(17, 24, 39, .28);
    color: var(--c-ink-2, #4a3f42);
    font-size: var(--fs-xs, 11px);
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;

    /* Hidden by opacity rather than display, so the fade works and so the
       text stays in the accessibility tree for a screen reader. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease-out, visibility .12s ease-out;
    pointer-events: none;
}

/* Hover for a mouse, focus-within for a keyboard and for a tap on a touch
   screen - a hover-only tooltip does not exist on a tablet. */
.help-tip:hover .help-tip__bubble[b-l3rf4yr0xc],
.help-tip:focus-within .help-tip__bubble[b-l3rf4yr0xc] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --------------------------------------------------------------- placement

   Shifted 10px back from the icon's edge rather than centred, so a bubble on
   a field at the right-hand edge of a two-column form does not hang off it.
*/

.help-tip__bubble--bottom[b-l3rf4yr0xc] {
    top: calc(100% + 6px);
    left: -10px;
}

.help-tip__bubble--top[b-l3rf4yr0xc] {
    bottom: calc(100% + 6px);
    left: -10px;
}

.help-tip__bubble--right[b-l3rf4yr0xc] {
    top: -8px;
    left: calc(100% + 6px);
}

.help-tip__bubble--left[b-l3rf4yr0xc] {
    top: -8px;
    right: calc(100% + 6px);
}

/* A bubble opening down-left on a field near the right edge would still
   overflow a narrow screen, so on a phone every bubble opens below and is
   pinned to the field rather than to the icon. */
@media (max-width: 575.98px) {
    .help-tip__bubble[b-l3rf4yr0xc] {
        max-width: min(240px, calc(100vw - 48px));
    }

    .help-tip__bubble--left[b-l3rf4yr0xc],
    .help-tip__bubble--right[b-l3rf4yr0xc] {
        top: calc(100% + 6px);
        bottom: auto;
        left: -10px;
        right: auto;
    }
}

/* ------------------------------------------------------------- the content */

.help-tip__title[b-l3rf4yr0xc] {
    font-weight: 700;
    color: var(--c-ink, #241a1c);
}

.help-tip__text[b-l3rf4yr0xc] {
    display: block;
}

.help-tip__eg[b-l3rf4yr0xc] {
    display: block;
    padding-top: 3px;
    border-top: 1px dashed var(--c-line, #eae4dd);
    color: var(--c-ink-3, #8b7f82);
}

/* A label is often bold and uppercase; the bubble must not inherit either,
   and the "?" must not inherit the label's weight. */
.help-tip__bubble[b-l3rf4yr0xc]  p {
    margin: 0;
}
/* /Components/Common/Pages/SortableTh.razor.rz.scp.css */
/*
See SortableTh.razor.

CSS isolation rather than a <style> block in the component: a style block
inside a component is injected on every render, and a table with eight
sortable headings would inject it eight times, on every re-sort.
*/

.sortable-th[b-1kotoa3oeo] { padding: 0 !important; }

.sortable-th__btn[b-1kotoa3oeo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: 0;
    padding: 8px 12px;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.sortable-th__btn--end[b-1kotoa3oeo] { justify-content: flex-end; }

.sortable-th__btn:hover[b-1kotoa3oeo] { color: var(--c-ink, #1f2430); }

.sortable-th__btn:focus-visible[b-1kotoa3oeo] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--c-accent, #a8394a);
    border-radius: var(--r-sm, 4px);
}

/* Visible but quiet until the column is the one in use, so the headings
   do not read as a row of icons. */
.sortable-th__caret[b-1kotoa3oeo] { font-size: 11px; opacity: .35; }

.sortable-th__btn:hover .sortable-th__caret[b-1kotoa3oeo] { opacity: .7; }

.sortable-th.is-sorted .sortable-th__btn[b-1kotoa3oeo] { color: var(--c-accent, #a8394a); }
.sortable-th.is-sorted .sortable-th__caret[b-1kotoa3oeo] { opacity: 1; }
/* /Components/Common/Pages/WorkspaceNav.razor.rz.scp.css */
/*
    See WorkspaceNav.razor.

    CSS isolation rather than a <style> block: this renders inside a layout,
    on every page of a section, and a style block would be injected on every
    one of those renders.

    Everything is a design token with a fallback, so the list follows the
    theme instead of freezing one copy of it.
*/

.wsnav[b-br0ua1roky] {
    position: sticky;
    top: var(--app-chrome-height, 96px);
    align-self: start;
    max-height: calc(100vh - var(--app-chrome-height, 96px) - 24px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--c-line, #e6e8ee);
    border-radius: var(--r-lg, 12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* ---------------------------------------------------------------- head -- */

.wsnav__head[b-br0ua1roky] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-line, #e6e8ee);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-ink-3, #77716d);
}

.wsnav__head i[b-br0ua1roky] { color: var(--c-accent, #a8394a); }

.wsnav__count[b-br0ua1roky] {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--r-full, 999px);
    background: var(--c-surface-2, #f2f4f7);
    color: var(--c-ink-3, #77716d);
}

/* -------------------------------------------------------------- groups -- */

.wsnav__group[b-br0ua1roky] { padding: 8px 0; }

.wsnav__group + .wsnav__group[b-br0ua1roky] { border-top: 1px solid var(--c-line, #eef0f4); }

.wsnav__group-title[b-br0ua1roky] {
    padding: 4px 14px 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-ink-3, #77716d);
}

.wsnav__list[b-br0ua1roky] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wsnav__link[b-br0ua1roky] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    font-size: var(--fs-sm);
    color: var(--c-ink-2, #4a5160);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.wsnav__link:hover[b-br0ua1roky] {
    background: var(--c-surface-2, #f6f7fa);
    color: var(--c-ink, #1f2430);
}

.wsnav__link:focus-visible[b-br0ua1roky] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--c-accent, #a8394a);
}

/* Where you are. Named, coloured and marked on the edge, because a single
   background tint is the first thing lost on a dim screen in a kitchen. */
.wsnav__link.is-active[b-br0ua1roky] {
    background: var(--c-accent-soft, #fdf1f3);
    border-left-color: var(--c-accent, #a8394a);
    color: var(--c-accent, #a8394a);
    font-weight: 700;
}

.wsnav__icon[b-br0ua1roky] {
    width: 16px;
    text-align: center;
    font-size: 12px;
    opacity: .75;
    flex: 0 0 auto;
}

.wsnav__link.is-active .wsnav__icon[b-br0ua1roky] { opacity: 1; }

/* -------------------------------------------------- the narrow version -- */

.wsnav__toggle[b-br0ua1roky] { display: none; }

@media (max-width: 991.98px) {
    .wsnav[b-br0ua1roky] {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .wsnav__toggle[b-br0ua1roky] {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 14px;
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;
        color: var(--c-ink, #1f2430);
    }

    .wsnav__toggle > i:first-child[b-br0ua1roky] { color: var(--c-accent, #a8394a); }

    .wsnav__toggle-text[b-br0ua1roky] {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        min-width: 0;
    }

    .wsnav__toggle-section[b-br0ua1roky] {
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--c-ink-3, #77716d);
    }

    .wsnav__toggle-current[b-br0ua1roky] {
        font-size: var(--fs-sm);
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wsnav__toggle-caret[b-br0ua1roky] {
        margin-left: auto;
        font-size: 12px;
        color: var(--c-ink-3, #77716d);
        transition: transform .15s ease;
    }

    .wsnav.is-open .wsnav__toggle-caret[b-br0ua1roky] { transform: rotate(180deg); }

    /* Shut by default on a narrow screen: the list is the page otherwise. */
    .wsnav__panel[b-br0ua1roky] { display: none; }

    .wsnav.is-open .wsnav__panel[b-br0ua1roky] {
        display: block;
        border-top: 1px solid var(--c-line, #e6e8ee);
        max-height: 60vh;
        overflow-y: auto;
    }

    /* The section name is already in the toggle above it. */
    .wsnav.is-open .wsnav__head[b-br0ua1roky] { display: none; }
}
/* /Components/Common/RecycleBin/UndoBar.razor.rz.scp.css */
/*
    See UndoBar.razor.

    CSS isolation rather than a <style> block: this is rendered by the layout,
    so a style block would be injected on every page and on every tick of the
    countdown.

    Fixed to the bottom centre, above everything except a modal backdrop. It
    has to be reachable without scrolling - an undo you have to go and find is
    not an undo - and it must not cover the row the user was working on, which
    is why it sits at the bottom rather than over the toolbar.
*/

.undo-bar[b-03ew52hs4c] {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1070;

    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(620px, calc(100vw - 32px));
    padding: 10px 12px 10px 16px;

    border-radius: var(--r-full, 999px);
    background: #1f2430;
    color: #f4f5f7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    font-size: var(--fs-sm);
}

.undo-bar--error[b-03ew52hs4c] { background: #7f1d1d; }

.undo-bar__icon[b-03ew52hs4c] { opacity: .8; flex: 0 0 auto; }

.undo-bar__text[b-03ew52hs4c] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.undo-bar__hint[b-03ew52hs4c] {
    opacity: .7;
    /* Hidden on a narrow bar rather than wrapped: the name and the Undo
       button are what matter, and three lines of chrome over the page is
       worse than a sentence the recycle-bin link already implies. */
    display: inline;
}

.undo-bar__undo[b-03ew52hs4c] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 14px;
    border: 0;
    border-radius: var(--r-full, 999px);
    background: #f4f5f7;
    color: #1f2430;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.undo-bar__undo:hover:not(:disabled)[b-03ew52hs4c] { background: #fff; }

.undo-bar__undo:disabled[b-03ew52hs4c] { opacity: .7; cursor: default; }

.undo-bar__count[b-03ew52hs4c] {
    margin-left: 6px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: var(--r-full, 999px);
    background: rgba(31, 36, 48, .12);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.undo-bar__link[b-03ew52hs4c] {
    flex: 0 0 auto;
    color: #cfd4dd;
    font-size: var(--fs-xs);
    text-decoration: underline;
    white-space: nowrap;
}

.undo-bar__link:hover[b-03ew52hs4c] { color: #fff; }

.undo-bar__close[b-03ew52hs4c] {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: #9aa1ad;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
}

.undo-bar__close:hover[b-03ew52hs4c] { color: #fff; }

@media (max-width: 575.98px) {
    .undo-bar[b-03ew52hs4c] {
        left: 16px;
        right: 16px;
        bottom: 16px;
        transform: none;
        max-width: none;
        border-radius: var(--r-lg, 12px);
        flex-wrap: wrap;
    }

    .undo-bar__hint[b-03ew52hs4c] { display: none; }

    .undo-bar__text[b-03ew52hs4c] { flex: 1 1 100%; }
}
/* /Components/Order/Pages/Order/Order.razor.rz.scp.css */
/* ============================================================
   ORDER PAGE — floor plan + menu layout
   Palette tokens (--ord-*) are declared once in Order.razor's
   <style> block; scoped rules here just consume them.
   ============================================================ */

/* ===== GRID LAYOUT ===== */
.grid-layout[b-1ktrtn5q1c] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    background: var(--ord-bg, #fbf7f4);
    min-height: calc(100vh - 106px);
}

/* ===== SECTIONS ===== */
.section[b-1ktrtn5q1c] {
    overflow: visible;
}

.tables-section[b-1ktrtn5q1c] {
    grid-column: span 4;
    background: var(--ord-surface, #fff);
    border-right: 1px solid var(--ord-line, #ecdfd6);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Four columns, not five: the fifth went to the bill panel, which renders a
   fixed-width receipt and was wrapping item names at ordinary screen sizes.
   This panel is an auto-filling grid of square category cards and absorbs the
   loss by laying out one card fewer per row. See .billing-section in
   OrderSampleBill.razor. */
.items-section[b-1ktrtn5q1c] {
    grid-column: span 4;
    background: var(--ord-surface, #fff);
    border-right: 1px solid var(--ord-line, #ecdfd6);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* No bill to show - no table picked, or a table with nothing ordered on it.
   The bill panel is not rendered at all in that state, so without this its
   four columns were simply left empty and the two panels that remain sat
   squashed into two thirds of the screen with a blank third beside them.
   Six and six is the whole grid.

   Confined to the width where the twelve-column grid is actually in use. The
   1024px breakpoint below stacks these panels with `grid-column: 1 / -1`, and
   that rule is a single class - less specific than this pair - so an
   unqualified rule here would win on a phone and hand a one-column grid a
   six-column span, which creates implicit columns rather than a stack. */
@media (min-width: 1025px) {
    .grid-layout--full .tables-section[b-1ktrtn5q1c],
    .grid-layout--full .items-section[b-1ktrtn5q1c] {
        grid-column: span 6;
    }

    /* The menu panel is the right-hand edge in this state, so its divider
       would otherwise draw a line down open space. */
    .grid-layout--full .items-section[b-1ktrtn5q1c] {
        border-right: none;
    }
}

/* ===== PANEL HEADER ===== */
.panel-header[b-1ktrtn5q1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--ord-surface, #fff);
    border-bottom: 1px solid var(--ord-line, #ecdfd6);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ord-ink, #2b1a1f);
    letter-spacing: .01em;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.panel-header-icon[b-1ktrtn5q1c] {
    color: var(--ord-maroon, #800020);
    font-size: var(--fs-base);
}

.panel-badge[b-1ktrtn5q1c] {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    background: var(--ord-maroon-tint, #f7ecef);
    color: var(--ord-maroon, #800020);
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT AREA ===== */
.scroll-area[b-1ktrtn5q1c] {
    padding: 12px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

/* ===== LOCATION GROUP ===== */
.location-group[b-1ktrtn5q1c] {
    margin-bottom: 16px;
}

.location-header[b-1ktrtn5q1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--ord-line-soft, #f5efe9);
    border-radius: 8px;
    margin-bottom: 8px;
}

.location-name[b-1ktrtn5q1c] {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ord-ink, #2b1a1f);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

    .location-name i[b-1ktrtn5q1c] {
        font-size: var(--fs-xs);
        color: var(--ord-maroon, #800020);
        opacity: .75;
    }

.location-count[b-1ktrtn5q1c] {
    font-size: var(--fs-xs);
    color: var(--ord-ink-soft, #6d5b60);
    background: var(--ord-surface, #fff);
    border: 1px solid var(--ord-line, #ecdfd6);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* ===== TABLE CARDS GRID ===== */
/* minmax(0, 1fr), not 1fr: a bare 1fr track has an automatic minimum of
   min-content, so one long table name would force its column open and push
   the whole grid past its container - the "long name breaks the layout"
   report. With a 0 minimum the tracks stay equal and the name truncates
   inside the card instead. Every breakpoint below does the same. */
.table-cards-grid[b-1ktrtn5q1c] {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), minmax(0, 1fr));
    gap: 8px;
}

/* ===== TABLE CARD ===== */
.tbl-card[b-1ktrtn5q1c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Lets the card shrink to its track instead of to its longest word - the
       other half of the long-name fix, since a grid item's automatic minimum
       size would otherwise keep the card as wide as the name. */
    min-width: 0;
    gap: 4px;
    padding: 8px 6px 6px;
    border-radius: 10px;
    border: 1px solid var(--ord-line, #ecdfd6);
    background: var(--ord-surface, #fff);
    color: var(--ord-ink, #2b1a1f);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    text-align: center;
    min-height: 64px;
}

    /* Hover is a lift only. It used to repaint the border maroon, which meant
       pointing at a green "available" card turned its border red - the one
       colour that means the opposite. The status border now survives hover. */
    .tbl-card:hover[b-1ktrtn5q1c] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(31, 41, 55, 0.14);
    }

.tbl-card-img[b-1ktrtn5q1c] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.tbl-card-icon[b-1ktrtn5q1c] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    color: var(--ord-ink-soft, #6d5b60);
    background: var(--ord-line-soft, #f5efe9);
    flex-shrink: 0;
}

/* Long names wrap to two lines and then ellipsis, rather than truncating on
   the first line. A single line turned "Rooftop Terrace 12" into "Roofto…",
   which tells you nothing and makes two different tables look identical; two
   lines is usually the whole name. overflow-wrap handles the pathological
   case of one unbroken string with nowhere to break. The card's title
   attribute still carries the full name on hover. */
.tbl-card-name[b-1ktrtn5q1c] {
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.tbl-card-cap[b-1ktrtn5q1c] {
    font-size: var(--fs-xs);
    font-weight: 600;
    opacity: .72;
}

/* ===== TABLE STATUS =====
   Each state is a soft tinted fill with a dark, same-hue border and text, so
   the colour carries the meaning and the text still passes contrast against
   it. Muted tints rather than saturated fills: a floor plan is mostly status
   cards, and a wall of strong colour is harder to scan, not easier.

   Available   = gold    #FBF3E0 on #7a5416 (was a green #fbf3e0 - the
                         product has two hues, and a free table is a good
                         thing, which is what the gold says here)
   Occupied    = red     #FEE2E2 on #991B1B
   Needs clean = amber   #FEF3C7 on #92400E
   Booked      = neutral slate, dashed (not a floor state, a future one)

   Selection is NOT in this list. It is an overlay - a base-red ring, a lift
   and a badge - applied on top of whichever status the table already has, so
   clicking a table never hides whether it is free, busy or dirty. */

.tbl-card.status-available[b-1ktrtn5q1c] {
    background: #fbf3e0;
    border-color: #7a5416;
    color: #7a5416;
}

    .tbl-card.status-available .tbl-card-icon[b-1ktrtn5q1c] {
        background: rgba(255, 255, 255, 0.55);
        color: #7a5416;
    }

.tbl-card.status-occupied[b-1ktrtn5q1c],
.tbl-card.status-running[b-1ktrtn5q1c] {
    background: #fee2e2;
    border-color: #991b1b;
    color: #991b1b;
}

    .tbl-card.status-occupied .tbl-card-icon[b-1ktrtn5q1c],
    .tbl-card.status-running .tbl-card-icon[b-1ktrtn5q1c] {
        background: rgba(255, 255, 255, 0.55);
        color: #991b1b;
    }

/* Needs cleaning - a dirty table blocks seating, so it has to be readable at a
   glance across the floor plan. It deliberately does NOT use --ord-gold-tint:
   theme.css remaps that name to the neutral --c-surface-2, which is the same
   near-white as --ord-slate-tint (Booked), so the two states became
   indistinguishable and both read as "nothing here". Fixed amber instead. */
.tbl-card.status-billed[b-1ktrtn5q1c] {
    background: #fef3c7;
    border-color: #92400e;
    color: #92400e;
}

    .tbl-card.status-billed .tbl-card-icon[b-1ktrtn5q1c] {
        background: rgba(255, 255, 255, 0.55);
        color: #92400e;
    }

.tbl-card.status-booked[b-1ktrtn5q1c] {
    background: var(--ord-slate-tint, #f1f2f4);
    border-color: #a39790;
    border-style: dashed;
    color: #574b48;
}

    .tbl-card.status-booked .tbl-card-icon[b-1ktrtn5q1c] {
        background: #eae4dd;
        color: #6f6560;
    }

.tbl-card.status-available .tbl-card-cap[b-1ktrtn5q1c],
.tbl-card.status-occupied .tbl-card-cap[b-1ktrtn5q1c],
.tbl-card.status-running .tbl-card-cap[b-1ktrtn5q1c],
.tbl-card.status-billed .tbl-card-cap[b-1ktrtn5q1c],
.tbl-card.status-booked .tbl-card-cap[b-1ktrtn5q1c] { opacity: .85; }

/* ===== SELECTED — an overlay, not a status =====
   Deliberately adds no fill of its own. The ring is the system base red
   (--c-primary), drawn with box-shadow rather than a thicker border so the
   card's own size never changes (a 1px -> 4px border would jog every
   neighbour on selection), and the lift plus the badge give two more
   non-colour cues - which is what keeps the state readable for anyone who
   does not separate the tint colours.

   The white layer between the card and the ring is load-bearing, not
   decoration: Occupied is itself red (#FEE2E2 on #991B1B), so a red ring laid
   straight against a red border would smear into it and selection would be
   hardest to see on the status you most often select. The gap separates the
   two reds, and costs nothing on the green and amber cards. */
.tbl-card.tbl-selected[b-1ktrtn5q1c] {
    border-color: var(--c-primary, #a8394a);
    border-style: solid;
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 0 0 2px var(--ord-surface, #fff),
                0 0 0 4px var(--c-primary, #a8394a),
                0 0 0 7px color-mix(in srgb, var(--c-primary, #a8394a) 20%, transparent),
                0 8px 18px color-mix(in srgb, var(--c-primary, #a8394a) 30%, transparent);
}

    /* Hover must not cancel the selected lift: the plain .tbl-card:hover rule
       above sets its own transform, and last-one-wins would drop the scale
       the moment the pointer landed on the card you just picked. */
    .tbl-card.tbl-selected:hover[b-1ktrtn5q1c] {
        transform: scale(1.05) translateY(-2px);
        border-color: var(--c-primary, #a8394a);
    }

    .tbl-card.tbl-selected .tbl-card-name[b-1ktrtn5q1c] { font-weight: 800; }

/* The badge sits INSIDE the top-right corner, in the same red as the ring so
   the two read as one treatment. Inside, not overhanging: .scroll-area clips
   (overflow:hidden) and its padding falls to 10px on small screens, so a
   badge hung outside the card would be shaved off the edge column there. */
.tbl-card-parties[b-1ktrtn5q1c] {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #8a5f18;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 0 0 1.5px var(--ord-surface, #fff);
    pointer-events: none;
}

.tbl-card-check[b-1ktrtn5q1c] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary, #a8394a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    box-shadow: 0 0 0 1.5px var(--ord-surface, #fff);
    pointer-events: none;
}

/* untyped / unknown status → quiet neutral */
.tbl-card:not(.status-available):not(.status-occupied):not(.status-billed):not(.status-running):not(.status-booked)[b-1ktrtn5q1c] {
    color: var(--ord-ink-soft, #6d5b60);
}

/* ===== SEARCH BAR ===== */
.cat-search-bar[b-1ktrtn5q1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ord-surface, #fff);
    border-bottom: 1px solid var(--ord-line, #ecdfd6);
    flex-shrink: 0;
    position: relative;
}

.cat-search-icon[b-1ktrtn5q1c] {
    color: var(--ord-ink-soft, #6d5b60);
    opacity: .55;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

.cat-search-input[b-1ktrtn5q1c] {
    flex: 1;
    border: 1.5px solid var(--ord-line, #ecdfd6);
    border-radius: 8px;
    padding: 7px 28px 7px 10px;
    font-size: var(--fs-sm);
    color: var(--ord-ink, #2b1a1f);
    background: #fff;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
    height: 34px;
}

    .cat-search-input[b-1ktrtn5q1c]::placeholder {
        color: #b9a9ae;
    }

    .cat-search-input:focus[b-1ktrtn5q1c] {
        border-color: var(--ord-gold, #ffc107);
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.20);
    }

.cat-search-clear[b-1ktrtn5q1c] {
    position: absolute;
    right: 18px;
    background: none;
    border: none;
    color: var(--ord-ink-soft, #6d5b60);
    opacity: .6;
    cursor: pointer;
    font-size: var(--fs-xs);
    padding: 4px;
    display: flex;
    align-items: center;
}

    .cat-search-clear:hover[b-1ktrtn5q1c] {
        opacity: 1;
        color: var(--ord-maroon, #800020);
    }

/* Category search bar standing in for the old "Menu Categories" panel-header:
   sticky like that header was, plus a category-count badge pinned to the
   right the same way panel-badge sat in it. The input keeps its own wrap so
   the clear button anchors to the input's edge, not the whole bar's, now
   that the badge follows it in the row. */
.cat-search-bar--header[b-1ktrtn5q1c] {
    position: sticky;
    top: 0;
    z-index: 5;
}

.cat-search-bar--header .cat-search-input-wrap[b-1ktrtn5q1c] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cat-search-bar--header .cat-search-clear[b-1ktrtn5q1c] {
    right: 8px;
}

.cat-search-bar--header .panel-badge[b-1ktrtn5q1c] {
    flex-shrink: 0;
}

/* ===== CATEGORY GRID ===== */
.cat-grid[b-1ktrtn5q1c] {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ===== CATEGORY CARD ===== */
.cat-card[b-1ktrtn5q1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 6px;
    padding: 8px 6px 8px;
    background: var(--ord-surface, #fff);
    border: 1px solid var(--ord-line, #ecdfd6);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    text-align: center;
    min-height: 78px;
}

    .cat-card:hover[b-1ktrtn5q1c] {
        border-color: var(--ord-maroon-light, #a3002a);
        box-shadow: 0 6px 16px rgba(128, 0, 32, 0.10);
        transform: translateY(-2px);
    }

    .cat-card:active[b-1ktrtn5q1c] {
        transform: translateY(0);
    }


.cat-card-visual[b-1ktrtn5q1c] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ord-maroon-tint, #f7ecef);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-card-thumb[b-1ktrtn5q1c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-card-icon-fallback[b-1ktrtn5q1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ord-maroon, #800020);
    font-size: var(--fs-lg);
}

.cat-card-body[b-1ktrtn5q1c] {
    min-width: 0;
    max-width: 100%;
}

.cat-card-name[b-1ktrtn5q1c] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ord-ink, #2b1a1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    max-width: 100%;
}

.cat-card-count[b-1ktrtn5q1c] {
    font-size: var(--fs-xs);
    color: var(--ord-ink-soft, #6d5b60);
    opacity: .8;
    margin-top: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .table-cards-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cat-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .grid-layout[b-1ktrtn5q1c] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .tables-section[b-1ktrtn5q1c],
    .items-section[b-1ktrtn5q1c] {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--ord-line, #ecdfd6);
    }

    .table-cards-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }

    .cat-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media (max-width: 560px) {
    .scroll-area[b-1ktrtn5q1c] {
        padding: 10px;
    }

    .table-cards-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .cat-grid[b-1ktrtn5q1c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    /* Cards and gaps are tighter here and .scroll-area clips at 10px padding,
       so the selected card lifts less and wears a thinner glow. The red ring,
       its white separator and the badge - the parts that actually carry the
       state - survive, so selection stays as obvious as on desktop. */
    .tbl-card.tbl-selected[b-1ktrtn5q1c] {
        transform: scale(1.03);
        box-shadow: 0 0 0 1.5px var(--ord-surface, #fff),
                    0 0 0 3.5px var(--c-primary, #a8394a),
                    0 0 0 5.5px color-mix(in srgb, var(--c-primary, #a8394a) 20%, transparent),
                    0 6px 14px color-mix(in srgb, var(--c-primary, #a8394a) 26%, transparent);
    }

    .tbl-card.tbl-selected:hover[b-1ktrtn5q1c] {
        transform: scale(1.03) translateY(-2px);
    }
}
/* /Components/Order/Pages/Order/OrderHelp.razor.rz.scp.css */
/* ============================================================
   ORDER VIEW GUIDE
   Colours, radius and z-index come from theme.css tokens; the
   fallbacks are only there so the popup is legible if a token
   is ever renamed.
   ============================================================ */

.oh-overlay[b-v1n37jbe5n] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 2000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(40, 28, 22, .48);
    outline: none;
}

.oh-dialog[b-v1n37jbe5n] {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: min(90vh, 900px);
    background: var(--c-surface, #fff);
    color: var(--c-ink-2, #3b302a);
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(40, 28, 22, .28);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.oh-head[b-v1n37jbe5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-line, #ecdfd6);
}

.oh-head-icon[b-v1n37jbe5n] {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-primary-soft, #f7e6e9);
    color: var(--c-primary, #a8394a);
    font-size: var(--fs-md, 15px);
}

.oh-head-text[b-v1n37jbe5n] {
    flex: 1 1 auto;
    min-width: 0;
}

.oh-title[b-v1n37jbe5n] {
    margin: 0;
    font-size: var(--fs-lg, 17px);
    font-weight: 700;
    color: var(--c-ink, #2b1f19);
    line-height: 1.25;
}

.oh-subtitle[b-v1n37jbe5n] {
    margin: 2px 0 0;
    font-size: var(--fs-sm, 13px);
    color: var(--c-ink-3, #7a6d65);
}

.oh-lang[b-v1n37jbe5n] {
    flex: none;
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 999px;
    background: var(--c-surface-2, #faf5f0);
}

.oh-lang-btn[b-v1n37jbe5n] {
    border: 0;
    background: transparent;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    color: var(--c-ink-3, #7a6d65);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .oh-lang-btn:hover[b-v1n37jbe5n] {
        color: var(--c-ink, #2b1f19);
    }

    .oh-lang-btn.is-on[b-v1n37jbe5n] {
        background: var(--c-primary, #a8394a);
        color: var(--c-on-primary, #fff);
    }

    .oh-lang-btn:focus-visible[b-v1n37jbe5n],
    .oh-close:focus-visible[b-v1n37jbe5n],
    .oh-btn:focus-visible[b-v1n37jbe5n],
    .oh-section > summary:focus-visible[b-v1n37jbe5n] {
        outline: 2px solid var(--c-ring, #a8394a);
        outline-offset: 2px;
    }

.oh-close[b-v1n37jbe5n] {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 8px;
    background: var(--c-surface, #fff);
    color: var(--c-ink-3, #7a6d65);
    cursor: pointer;
}

    .oh-close:hover[b-v1n37jbe5n] {
        background: var(--c-surface-2, #faf5f0);
        color: var(--c-ink, #2b1f19);
    }

/* ── Body ───────────────────────────────────────────────── */
.oh-body[b-v1n37jbe5n] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px 8px;
    background: var(--c-bg, #fdfaf4);
    font-size: var(--fs-base, 14px);
    line-height: 1.6;
}

.oh-h3[b-v1n37jbe5n] {
    margin: 0 0 10px;
    font-size: var(--fs-md, 15px);
    font-weight: 700;
    color: var(--c-ink, #2b1f19);
}

/* Quick start: numbered steps */
.oh-quick[b-v1n37jbe5n] {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 12px;
}

.oh-steps[b-v1n37jbe5n] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: oh-step;
    display: grid;
    gap: 10px;
}

    .oh-steps li[b-v1n37jbe5n] {
        counter-increment: oh-step;
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

        .oh-steps li[b-v1n37jbe5n]::before {
            content: counter(oh-step);
            flex: none;
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
            margin-top: 1px;
            border-radius: 50%;
            background: var(--c-primary, #a8394a);
            color: var(--c-on-primary, #fff);
            font-size: var(--fs-xs, 12px);
            font-weight: 700;
        }

.oh-step-text[b-v1n37jbe5n] {
    min-width: 0;
}

/* Sections: native <details>, open by default, so all of it is readable and
   any part can be folded away. */
.oh-section[b-v1n37jbe5n] {
    margin-bottom: 10px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 12px;
    overflow: hidden;
}

    .oh-section > summary[b-v1n37jbe5n] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

        .oh-section > summary[b-v1n37jbe5n]::-webkit-details-marker {
            display: none;
        }

        .oh-section > summary:hover[b-v1n37jbe5n] {
            background: var(--c-surface-2, #faf5f0);
        }

.oh-section-icon[b-v1n37jbe5n] {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--c-primary-soft, #f7e6e9);
    color: var(--c-primary, #a8394a);
    font-size: var(--fs-sm, 13px);
}

.oh-section-title[b-v1n37jbe5n] {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--c-ink, #2b1f19);
}

.oh-chevron[b-v1n37jbe5n] {
    color: var(--c-ink-4, #b3a69d);
    font-size: var(--fs-xs, 12px);
    transition: transform .18s ease;
}

.oh-section[open] .oh-chevron[b-v1n37jbe5n] {
    transform: rotate(180deg);
}

.oh-points[b-v1n37jbe5n] {
    margin: 0;
    padding: 4px 16px 14px 42px;
}

    .oh-points li[b-v1n37jbe5n] {
        margin-top: 8px;
        padding-left: 2px;
    }

        .oh-points li[b-v1n37jbe5n]::marker {
            color: var(--c-primary, #a8394a);
        }

/* Key caps */
.oh-key[b-v1n37jbe5n] {
    display: inline-block;
    min-width: 24px;
    padding: 1px 7px;
    margin: 0 1px;
    border: 1px solid var(--c-line-strong, #d9c8bc);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--c-surface, #fff);
    color: var(--c-ink, #2b1f19);
    font-family: inherit;
    font-size: var(--fs-xs, 12px);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.oh-plus[b-v1n37jbe5n] {
    margin: 0 2px;
    color: var(--c-ink-4, #b3a69d);
}

/* Shortcut table */
.oh-keys[b-v1n37jbe5n] {
    margin: 18px 0 10px;
    padding: 16px 18px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-line, #ecdfd6);
    border-radius: 12px;
}

.oh-table[b-v1n37jbe5n] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm, 13px);
}

    .oh-table th[b-v1n37jbe5n] {
        padding: 6px 8px;
        text-align: left;
        font-size: var(--fs-xs, 12px);
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--c-ink-3, #7a6d65);
        border-bottom: 1px solid var(--c-line, #ecdfd6);
    }

    .oh-table td[b-v1n37jbe5n] {
        padding: 7px 8px;
        border-bottom: 1px solid var(--c-line-soft, #f3ebe4);
        vertical-align: middle;
    }

    .oh-table tbody tr:last-child td[b-v1n37jbe5n] {
        border-bottom: 0;
    }

.oh-col-key[b-v1n37jbe5n] {
    width: 170px;
    white-space: nowrap;
}

/* ── Footer ─────────────────────────────────────────────── */
.oh-foot[b-v1n37jbe5n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--c-line, #ecdfd6);
    background: var(--c-surface, #fff);
}

.oh-foot-note[b-v1n37jbe5n] {
    font-size: var(--fs-sm, 13px);
    color: var(--c-ink-3, #7a6d65);
}

.oh-btn[b-v1n37jbe5n] {
    border: 0;
    padding: 7px 18px;
    border-radius: 8px;
    background: var(--c-primary, #a8394a);
    color: var(--c-on-primary, #fff);
    font-size: var(--fs-base, 14px);
    font-weight: 600;
    cursor: pointer;
}

    .oh-btn:hover[b-v1n37jbe5n] {
        background: var(--c-primary-hover, #8f2f3e);
    }

/* Devanagari needs a face that has it. Segoe UI does not, and the browser's
   fallback picks something different on every machine; naming one keeps the
   Nepali text consistent. */
.oh-dialog[lang="ne"][b-v1n37jbe5n] {
    font-family: "Nirmala UI", "Noto Sans Devanagari", "Mangal", "Segoe UI", sans-serif;
}

    .oh-dialog[lang="ne"] .oh-body[b-v1n37jbe5n] {
        line-height: 1.75;
    }

/* ── Narrow screens ─────────────────────────────────────── */
@media (max-width: 640px) {
    .oh-overlay[b-v1n37jbe5n] {
        padding: 8px;
    }

    .oh-head[b-v1n37jbe5n] {
        flex-wrap: wrap;
        padding: 14px 14px 12px;
    }

    .oh-head-text[b-v1n37jbe5n] {
        flex-basis: calc(100% - 100px);
    }

    .oh-lang[b-v1n37jbe5n] {
        order: 3;
    }

    .oh-body[b-v1n37jbe5n] {
        padding: 14px 12px 6px;
    }

    .oh-points[b-v1n37jbe5n] {
        padding-left: 30px;
    }

    .oh-col-key[b-v1n37jbe5n] {
        width: auto;
        white-space: normal;
    }

    .oh-foot-note[b-v1n37jbe5n] {
        display: none;
    }

    .oh-foot[b-v1n37jbe5n] {
        justify-content: flex-end;
    }
}
/* /Components/Order/Pages/Order/OrderTableList.razor.rz.scp.css */
.table-card[b-fwfop168w1] {
    background: #fff;
    border: 1px solid #ecdfd6;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(128, 0, 32, 0.06);
    position: relative;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    height: 120px;
}

    .table-card:hover[b-fwfop168w1] {
        transform: translateY(-2px);
        border-color: #a3002a;
        box-shadow: 0 6px 16px rgba(128, 0, 32, 0.12);
    }

.table-image[b-fwfop168w1] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.selected[b-fwfop168w1] {
    border-color: #800020;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.4);
}

.table-text[b-fwfop168w1] {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #2b1a1f;
    margin-top: 6px;
}

.seat-info[b-fwfop168w1] {
    font-size: var(--fs-xs);
    color: #6d5b60;
}
/* /Components/SetupComponent/Layout/SetupWorkspaceLayout.razor.rz.scp.css */
/*
    See SetupWorkspaceLayout.razor.

    Two columns on a desktop - the section list and the screen - and one
    column below the list on anything narrower, where WorkspaceNav collapses
    itself into a single disclosure row.
*/

.setup-ws[b-hh2xj0s9sy] {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* minmax(0, 1fr) above and this below: without them a wide table inside a
   grid column refuses to shrink - a grid item's default min-width is its
   content - and the whole page scrolls sideways instead of the table. */
.setup-ws__body[b-hh2xj0s9sy] { min-width: 0; }

@media (max-width: 991.98px) {
    .setup-ws[b-hh2xj0s9sy] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
*[b-4rwf533cby] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--f-sans);
}

body[b-4rwf533cby] {
    background-color: #f0f0f0;
    color: #222;
}

.row[b-4rwf533cby] {
    display: flex;
    flex-wrap: wrap;
}

.main[b-4rwf533cby] {
    padding: 0;
}