@import '_content/AdvDeli.Catalog.UI/AdvDeli.Catalog.UI.74qjeo0g76.bundle.scp.css';

/* _content/AdvDeli.WebOffice/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-20omsymqj0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-20omsymqj0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/AdvDeli.WebOffice/Components/Pages/Home.razor.rz.scp.css */
/* =============================================================================================
   Back Office dashboard.

   WAS AN INLINE <style> BLOCK IN Home.razor. That is worth knowing about rather than just
   fixing: a <style> element inside a component is emitted into the document verbatim. It is not
   scoped, so every rule in it is global and leaks to every other page; and it was written before
   the design system arrived, so it carried its own hex literals and never picked up a token
   change. The same trap took out the ModifierPicker dialog on the till, which stayed dark for a
   week after everything around it went light. Scoped stylesheet, shared tokens.

   MOUSE, NOT TOUCH — this is a browser application. The Cashier's 44px floor does not apply.
   ============================================================================================= */

.dash-home[b-37f38bk5dg] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 4px;
    color: var(--c-text);
}

.dash-head[b-37f38bk5dg] { padding: 12px 6px 24px; }
.dash-head h1[b-37f38bk5dg] {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.018em;
    margin: 0 0 .35rem;
    color: var(--c-text);
}
.dash-lead[b-37f38bk5dg] { color: var(--c-text-dim); font-size: 1.02rem; margin: 0; }

.dash-cards[b-37f38bk5dg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* Glass, no backdrop-filter: these sit over the mesh that .bo::before paints, and blurring a
   smooth gradient returns the same gradient. The fill and the edge highlight do the work. */
.dash-card[b-37f38bk5dg] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-edge);
    text-decoration: none;
    color: inherit;
    transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
a.dash-card:hover[b-37f38bk5dg] {
    transform: translateY(-2px);
    border-color: var(--glass-line-hi);
    box-shadow: 0 10px 28px rgba(20, 30, 50, .12), var(--glass-edge);
}

/* Not a link — the screen does not exist yet. It keeps its shape so the grid stays even, but
   loses the hover and the arrow so it never looks clickable. */
.dash-card.soon[b-37f38bk5dg] { opacity: .66; }

.dash-ic[b-37f38bk5dg] {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.dash-ic svg[b-37f38bk5dg] { width: 22px; height: 22px; }

/* Tinted glass rather than flat pastel fills, so the chips sit in the same material as the card.
   One hue per destination — the only place on this screen colour carries any meaning. */
.dash-ic.cat[b-37f38bk5dg]   { background: var(--c-accent-wash);                              color: var(--c-accent-text); }
.dash-ic.menu[b-37f38bk5dg]  { background: color-mix(in srgb, var(--c-go) 15%, transparent);  color: var(--c-go-text); }
.dash-ic.sys[b-37f38bk5dg]   { background: color-mix(in srgb, #2B62C9 14%, transparent);      color: #1E4C9E; }
.dash-ic.store[b-37f38bk5dg] { background: color-mix(in srgb, #7C5CD6 15%, transparent);      color: #5B3FB0; }

.dash-ct[b-37f38bk5dg] {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    margin-top: 6px;
    color: var(--c-text);
}
.dash-cd[b-37f38bk5dg] { color: var(--c-text-dim); font-size: .9rem; line-height: 1.55; }

.dash-go[b-37f38bk5dg] {
    color: var(--c-accent-text);
    font-weight: 700;
    font-size: .9rem;
    margin-top: auto;
    padding-top: 8px;
}
.dash-soon[b-37f38bk5dg] {
    color: var(--c-text-faint);
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    margin-top: auto;
    padding-top: 8px;
}

/* =============================================================================================
   Your shortcuts — the customisable half of the dashboard.
   ============================================================================================= */

.dash-sechead[b-37f38bk5dg] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 34px 6px 14px;
}
.dash-sechead h2[b-37f38bk5dg] {
    font-size: .78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: var(--track-label);
    color: var(--c-text-faint);
}
.dash-edit[b-37f38bk5dg] {
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    cursor: pointer;
}
.dash-edit:hover[b-37f38bk5dg] { background: var(--c-s4); }

.dash-ic.pin[b-37f38bk5dg] { background: var(--well-fill-strong); color: var(--c-text-dim); }

/* A pinned card is a link wrapping the whole tile, plus a tool row that only exists in edit mode.
   The <a> is a grid child rather than the card itself so the tools are not inside the link — a
   Remove button inside an anchor navigates as well as removing. */
.dash-card.sc[b-37f38bk5dg] { padding: 0; }
.sc-hit[b-37f38bk5dg] {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px;
    text-decoration: none; color: inherit;
    border-radius: var(--r-lg);
    height: 100%;
}
.dash-card.sc.editing .sc-hit[b-37f38bk5dg] { cursor: default; }

.sc-tools[b-37f38bk5dg] {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px 16px;
}
.sc-tool[b-37f38bk5dg] {
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    border-radius: var(--r-sm);
    min-height: 32px; padding: 0 11px;
    font-family: var(--font); font-size: .8rem; font-weight: 700;
    cursor: pointer;
}
.sc-tool:hover:not(:disabled)[b-37f38bk5dg] { background: var(--c-s4); }
.sc-tool:disabled[b-37f38bk5dg] { opacity: .4; cursor: default; }
.sc-tool.danger[b-37f38bk5dg] {
    margin-left: auto;
    color: var(--c-stop-text);
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
    background: color-mix(in srgb, var(--c-stop) 9%, var(--c-s2));
}
.sc-tool.danger:hover[b-37f38bk5dg] { background: color-mix(in srgb, var(--c-stop) 16%, var(--c-s2)); }

/* The add tile. Dashed and unfilled so it reads as a slot rather than as a card with content —
   the one place on the screen where "this is empty on purpose" has to be obvious. */
.dash-card.add[b-37f38bk5dg] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 22px;
    background: transparent;
    border: 1px dashed var(--c-line-strong);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    min-height: 168px;
    justify-content: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.dash-card.add:hover[b-37f38bk5dg] {
    border-color: var(--c-accent);
    background: var(--c-accent-wash);
    transform: none;
}
.add-plus[b-37f38bk5dg] {
    font-size: 1.5rem; font-weight: 800; line-height: 1;
    color: var(--c-accent-text);
}
.add-lbl[b-37f38bk5dg] { font-size: 1.02rem; font-weight: 800; color: var(--c-text); }
.add-hint[b-37f38bk5dg] { font-size: .86rem; color: var(--c-text-faint); }

/* ---------------------------------------------------------------------------------------------
   Picker dialog.
   --------------------------------------------------------------------------------------------- */
.pk-ov[b-37f38bk5dg] {
    position: fixed; inset: 0; z-index: 200;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
    display: grid; place-items: center; padding: 20px;
}
.pk[b-37f38bk5dg] {
    width: min(520px, 100%); max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
}
.pk-head[b-37f38bk5dg] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--glass-line);
}
.pk-head h3[b-37f38bk5dg] { font-size: 1.05rem; font-weight: 800; letter-spacing: var(--track-tight); }
.pk-x[b-37f38bk5dg] {
    width: 34px; height: 34px; flex: 0 0 auto;
    border: 1px solid var(--glass-line-hi);
    background: var(--glass-fill-hi);
    color: var(--c-text-dim);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.pk-x:hover[b-37f38bk5dg] { background: var(--glass-fill-hover); color: var(--c-text); }

.pk-search[b-37f38bk5dg] { padding: 14px 20px 8px; }
.pk-search input[b-37f38bk5dg] {
    width: 100%; min-height: 42px;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-sm);
    background: var(--c-s2);
    color: var(--c-text);
    padding: 0 14px;
    font-family: var(--font); font-size: .94rem;
    outline: none;
}
.pk-search input:focus[b-37f38bk5dg] { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }

.pk-body[b-37f38bk5dg] { overflow-y: auto; padding: 6px 12px 16px; }
.pk-group[b-37f38bk5dg] { margin-bottom: 10px; }
.pk-group-ttl[b-37f38bk5dg] {
    font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: var(--track-label);
    color: var(--c-text-faint);
    padding: 10px 8px 6px;
}
.pk-opt[b-37f38bk5dg] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 40px; padding: 0 8px;
    border: 0; background: transparent;
    border-radius: var(--r-sm);
    font-family: var(--font); font-size: .92rem;
    color: var(--c-text);
    cursor: pointer; text-align: left;
}
.pk-opt:hover[b-37f38bk5dg] { background: var(--glass-fill-hi); }
.pk-opt-add[b-37f38bk5dg] {
    opacity: 0;
    font-size: .78rem; font-weight: 700;
    color: var(--c-accent-text);
}
/* Revealed on hover AND on focus — keyboard users never trigger :hover, and a control that only
   appears under a pointer is invisible to them. */
.pk-opt:hover .pk-opt-add[b-37f38bk5dg], .pk-opt:focus-visible .pk-opt-add[b-37f38bk5dg] { opacity: 1; }

.pk-empty[b-37f38bk5dg] { color: var(--c-text-faint); font-size: .9rem; padding: 18px 10px; margin: 0; }
/* _content/AdvDeli.WebOffice/Components/Pages/Login.razor.rz.scp.css */
/* =============================================================================================
   Back Office sign-in.

   FIRST WEB OFFICE SCREEN ON THE SHARED DESIGN SYSTEM. Everything here comes from
   _content/AdvDeli.Catalog.UI/theme.css, which this host links in Components/App.razor.

   ONE THING DIFFERS FROM THE CASHIER, and it is the reason for the two explicit font-family
   declarations below. In the Cashier heads theme.css is linked AFTER app.css so it wins html
   and body; here it is linked BEFORE, deliberately, so the Web Office keeps its own navy/copper
   chrome on every screen that has not been redesigned yet. The consequence is that theme.css's
   base rules do NOT apply — its tokens resolve, but body is still Segoe UI from app.css. So a
   converted page has to opt into the typeface itself. Do the same on the next screen you
   convert, or it will inherit the old face and look subtly wrong next to this one.

   When the whole Web Office is on the system, move that link below app.css and every one of
   these font-family lines becomes redundant.

   THE 44px TOUCH FLOOR DOES NOT APPLY HERE. The Cashier runs on a touchscreen till, so every
   control there is 44px minimum and most are 48-52px. The Web Office is a browser application
   driven by a mouse, where that sizing just reads as oversized and pushes the form down the
   page. Fields are 42px and the button 44px — conventional web scale. Do not "fix" these to
   match the till; the two apps have different input devices and should have different metrics.
   ============================================================================================= */

.lg[b-6gskzh4euz] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    isolation: isolate;
    background: var(--c-s0);
    color: var(--c-text);
    font-family: var(--font);
}

/* The colour ground. A glass card over a flat page is just a lighter rectangle — the material
   needs something with hue and shape behind it to refract. Same four-point mesh as the till, so
   the two products read as one. */
.lg[b-6gskzh4euz]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62% 58% at 8% 6%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 94% 16%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 16% 92%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 88%, var(--mesh-d), transparent 70%);
}

/* The card KEEPS its backdrop-filter, unlike the full-page panes elsewhere in the system.

   The rule there is that a pane covering the whole screen gets fill only, because blurring a
   smooth gradient returns the same gradient and the filter costs every popover inside it its
   own blur. Neither applies here: this card is 420px wide with real ground visible around it,
   so the blur has an edge to work against and reads as frosted glass — and nothing inside it
   needs a backdrop of its own. */
.lg-card[b-6gskzh4euz] {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 34px 30px 30px;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
}

/* ---------------------------------------------------------------------------------------------
   Brand block — mark on top, product name under it, centred.
   --------------------------------------------------------------------------------------------- */
.lg-brand[b-6gskzh4euz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin-bottom: 10px;
}

/* Saffron tile with the æ knocked out in ink — the same lockup as the till's sign-in screen.
   Sized by font-size because the mark is 1em tall; there is no width rule on the svg. */
.lg-logo[b-6gskzh4euz] {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-size: 34px;
    box-shadow: 0 10px 26px -8px rgba(245, 165, 36, .5);
}

/* Set as signage rather than as a heading, matching the Cashier's wordmark: heaviest weight,
   negative tracking (display type wants tighter fit than text type), and a soft saffron halo
   that ties it to the mark above. The sub-line deliberately stays light and normally tracked —
   if both are display-set, neither reads as the title. */
.lg-title[b-6gskzh4euz] {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.1;
    color: var(--c-text);
    text-shadow:
        0 0 18px rgba(245, 165, 36, .26),
        0 0 46px rgba(245, 165, 36, .14);
}
.lg-sub[b-6gskzh4euz] {
    font-size: .82rem;
    font-weight: 500;
    color: var(--c-text-dim);
    margin-top: 3px;
}

/* ---------------------------------------------------------------------------------------------
   Form.
   --------------------------------------------------------------------------------------------- */
.lg-err[b-6gskzh4euz] {
    background: color-mix(in srgb, var(--c-stop) 13%, var(--c-s2));
    border: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent);
    color: var(--c-stop-text);
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.45;
}

.lg-fld[b-6gskzh4euz] { display: flex; flex-direction: column; gap: 7px; }
.lg-fld > span[b-6gskzh4euz] {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--c-text-faint);
}

/* ::deep IS LOAD-BEARING, AND THIS RULE HAS NEVER WORKED WITHOUT IT.

   The fields are <InputText>, a component, not a bare <input>. Blazor's CSS isolation stamps its
   scope attribute onto elements THIS component renders directly; markup rendered by a child
   component never gets it. So a plain `.lg-in { … }` compiles to `.lg-in[b-xxx]`, the actual
   <input> InputText emits carries no b-xxx, and the rule matches nothing at all. It fails
   silently — the class is on the element, the CSS is in the bundle, and the field just renders
   with browser defaults.

   That was true of the original stylesheet too: these fields have been unstyled since the page
   was written. ::deep drops the scope requirement for everything below .lg-fld, which is what
   lets the rule reach into InputText's output.

   Solid, not glass, for the usual reason: a translucent field inside a translucent card over a
   gradient has no stable contrast, and this is where a password gets typed. */
.lg-fld[b-6gskzh4euz]  .lg-in {
    min-height: 42px;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-sm);
    padding: 0 14px;
    font-family: var(--font);
    font-size: .95rem;
    background: var(--c-s2);
    color: var(--c-text);
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-fld[b-6gskzh4euz]  .lg-in:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-wash);
}
.lg-fld[b-6gskzh4euz]  .lg-in::placeholder { color: var(--c-text-faint); }

/* Saffron here, unlike the back-office screens where the primary is ink.

   The argument against saffron there was that a settings page is calm data entry and a saffron
   slab in the footer reads as an alert. This is the opposite situation: one card, one action,
   nothing else on the screen to compete with. Saffron is doing exactly what it is for — naming
   the single thing to act on — and it ties the button to the mark at the top of the card. */
.lg-btn[b-6gskzh4euz] {
    margin-top: 6px;
    min-height: 44px;
    border: 1px solid var(--c-accent);
    border-radius: var(--r-sm);
    padding: 0 18px;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: var(--track-tight);
    cursor: pointer;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: 0 6px 18px -6px rgba(245, 165, 36, .5);
    transition: background-color .15s ease, transform .08s ease;
}
.lg-btn:hover[b-6gskzh4euz] { background: var(--c-accent-press); border-color: var(--c-accent-press); }
.lg-btn:active[b-6gskzh4euz] { transform: translateY(1px); }

.lg-note[b-6gskzh4euz] {
    margin: 6px 0 0;
    color: var(--c-text-faint);
    font-size: .78rem;
    line-height: 1.55;
}
/* _content/AdvDeli.WebOffice/Components/Pages/ModifierGroups.razor.rz.scp.css */
.mg[b-9r9zmrfb6w] { max-width: 1240px; margin: 0 auto; padding: 8px 4px; color: #1f2733; }

.mg-err[b-9r9zmrfb6w] { background: #fbe4e2; border: 1px solid #e6a9a3; color: #8a1f18; padding: 9px 12px;
    border-radius: 8px; font-size: .85rem; margin: 0 6px 14px; }

/* Three panes that narrow together: classes and groups are short lists, options is a table. */
.mg-cols[b-9r9zmrfb6w] { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .mg-cols[b-9r9zmrfb6w] { grid-template-columns: 1fr; } }

.mg-col[b-9r9zmrfb6w] { background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 50, .05), 0 12px 30px rgba(20, 30, 50, .04); }
.mg-colhd[b-9r9zmrfb6w] { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid #e4e9f0; background: #f7f9fc; }
.mg-colhd h3[b-9r9zmrfb6w] { margin: 0; font-size: .95rem; font-weight: 800; }

.mg-add[b-9r9zmrfb6w] { border: 1px solid #4f5bd5; background: #4f5bd5; color: #fff; border-radius: 8px;
    padding: 5px 12px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.mg-add:disabled[b-9r9zmrfb6w] { opacity: .45; cursor: default; }
.mg-add.sm[b-9r9zmrfb6w] { padding: 3px 10px; font-size: .78rem; }

.mg-state[b-9r9zmrfb6w] { padding: 26px 14px; color: #8a94a2; font-size: .88rem; font-style: italic; }

.mg-list[b-9r9zmrfb6w] { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mg-list li[b-9r9zmrfb6w] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px;
    padding: 9px 11px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.mg-list li:hover[b-9r9zmrfb6w] { background: #f5f8ff; }
.mg-list li.on[b-9r9zmrfb6w] { background: #edf0fe; border-color: #c6ccf7; }
.mg-nm[b-9r9zmrfb6w] { font-size: .9rem; font-weight: 650; color: #24313f; }
.mg-sub[b-9r9zmrfb6w] { grid-column: 1; font-size: .76rem; color: #8a94a2; }
.mg-off[b-9r9zmrfb6w] { grid-column: 1; font-size: .72rem; color: #b5651d; font-weight: 700; text-transform: uppercase; }

.mg-edit[b-9r9zmrfb6w], .mg-del[b-9r9zmrfb6w] { grid-column: 2; grid-row: 1 / span 2; border: 1px solid #d7dfe9; background: #fff;
    border-radius: 7px; padding: 4px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; color: #55636f; }
.mg-edit:hover[b-9r9zmrfb6w] { border-color: #4f5bd5; color: #4f5bd5; }
.mg-del[b-9r9zmrfb6w] { color: #b3261e; }
.mg-del:hover[b-9r9zmrfb6w] { border-color: #b3261e; }

.mg-tbl[b-9r9zmrfb6w] { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mg-tbl thead th[b-9r9zmrfb6w] { text-align: left; background: #f7f9fc; color: #55636f; font-weight: 700;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px;
    border-bottom: 1px solid #e4e9f0; }
.mg-tbl thead th.num[b-9r9zmrfb6w], .mg-tbl tbody td.num[b-9r9zmrfb6w] { text-align: right; }
.mg-tbl tbody td[b-9r9zmrfb6w] { padding: 9px 12px; border-bottom: 1px solid #eef1f6; }
.mg-tbl tbody tr:last-child td[b-9r9zmrfb6w] { border-bottom: none; }
.mg-tbl td.act[b-9r9zmrfb6w] { text-align: right; white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; }
.mg-tbl td.act button[b-9r9zmrfb6w] { position: static; }

.mg-pick[b-9r9zmrfb6w] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px;
    max-height: 340px; overflow-y: auto; }
.mg-pick li[b-9r9zmrfb6w] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
    padding: 8px 10px; background: #f6f8fc; border: 1px solid #e6ecf3; border-radius: 9px; }
.mg-pick .mg-sub[b-9r9zmrfb6w] { grid-column: 1; }
.mg-pick button[b-9r9zmrfb6w] { grid-column: 2; grid-row: 1 / span 2; }
/* _content/AdvDeli.WebOffice/Components/Pages/SwitchStore.razor.rz.scp.css */
.sw[b-pnjin10u40] { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f2f5f9; }
.sw-card[b-pnjin10u40] { width: min(460px, 100%); background: #fff; border: 1px solid #e4e9f0; border-radius: 16px;
    padding: 28px; box-shadow: 0 16px 44px rgba(20, 30, 50, .12); display: flex; flex-direction: column; gap: 16px; }
.sw-card h1[b-pnjin10u40] { font-size: 1.3rem; margin: 0; color: #1f2733; }
.sw-lead[b-pnjin10u40] { margin: 0; color: #64707e; font-size: .9rem; line-height: 1.6; }

.sw-err[b-pnjin10u40] { background: #fbe4e2; border: 1px solid #e6a9a3; color: #8a1f18;
    padding: 10px 12px; border-radius: 9px; font-size: .85rem; font-weight: 600; }
.sw-empty[b-pnjin10u40] { background: #fdf3e3; border: 1px solid #e8d3a8; color: #8a5a12;
    padding: 12px 14px; border-radius: 9px; font-size: .88rem; line-height: 1.55; }

.sw-list[b-pnjin10u40] { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.sw-opt[b-pnjin10u40] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
    border: 1px solid #d6dce6; border-radius: 10px; padding: 11px 13px; cursor: pointer; }
.sw-opt:hover[b-pnjin10u40] { background: #f5f8ff; }
.sw-opt.on[b-pnjin10u40] { border-color: #4f5bd5; background: #edf0fe; }
.sw-opt input[b-pnjin10u40] { display: none; }
.sw-opt-nm[b-pnjin10u40] { font-size: .94rem; font-weight: 650; color: #24313f; }
.sw-opt-cd[b-pnjin10u40] { grid-column: 1; font-size: .76rem; color: #8a94a2; font-weight: 700; }
.sw-cur[b-pnjin10u40] { grid-column: 2; grid-row: 1 / span 2; font-size: .68rem; font-weight: 800; color: #2f9e44;
    background: #e6f4ea; border-radius: 999px; padding: 2px 9px; text-transform: uppercase; }

.sw-acts[b-pnjin10u40] { display: flex; justify-content: flex-end; gap: 10px; }
.sw-btn[b-pnjin10u40] { border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: .9rem;
    cursor: pointer; text-decoration: none; display: inline-block; border: 1px solid #d6dce6; background: #fff; color: #1f2733; }
.sw-btn.primary[b-pnjin10u40] { background: #4f5bd5; border-color: #4f5bd5; color: #fff; }
.sw-btn.primary:disabled[b-pnjin10u40] { opacity: .5; cursor: default; }
.sw-btn.ghost:hover[b-pnjin10u40] { background: #f1f4f9; }
/* _content/AdvDeli.WebOffice/Components/Shared/RefDialog.razor.rz.scp.css */
.rd-ov[b-1wl1gfz9b4] { position: fixed; inset: 0; background: rgba(16, 24, 38, .45); display: grid; place-items: center;
    z-index: 60; padding: 20px; }
.rd[b-1wl1gfz9b4] { width: min(460px, 96vw); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }

.rd-head[b-1wl1gfz9b4] { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px;
    font-weight: 800; font-size: 1.05rem; color: #1f2733; border-bottom: 1px solid #e4e9f0;
    background: linear-gradient(180deg, #f8fafc, #f1f4f9); }
.rd-x[b-1wl1gfz9b4] { border: 0; background: none; font-size: 1rem; color: #8a94a2; cursor: pointer; padding: 2px 4px; }
.rd-x:hover[b-1wl1gfz9b4] { color: #1f2733; }

.rd-body[b-1wl1gfz9b4] { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* Sticky so it cannot be scrolled away from the field it refers to. Negative margins cancel the
   body padding so it reads as a banner rather than a floating box. */
.rd-err[b-1wl1gfz9b4] { position: sticky; top: -16px; z-index: 3; margin: -16px -18px 0; padding: 10px 18px;
    background: #fbe4e2; border-bottom: 1px solid #e6a9a3; color: #8a1f18; font-size: .85rem; font-weight: 600; }

.rd-foot[b-1wl1gfz9b4] { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 13px 18px;
    border-top: 1px solid #e4e9f0; background: #f8fafc; }
.rd-btn[b-1wl1gfz9b4] { border: 1px solid #d6dce6; background: #fff; border-radius: 10px; padding: 9px 18px;
    font-weight: 700; font-size: .9rem; cursor: pointer; color: #1f2733; }
.rd-btn.primary[b-1wl1gfz9b4] { background: #4f5bd5; border-color: #4f5bd5; color: #fff; }
.rd-btn.primary:disabled[b-1wl1gfz9b4] { opacity: .6; cursor: default; }
.rd-btn.ghost:hover[b-1wl1gfz9b4] { background: #f1f4f9; }