/* =============================================================================
   Sign-in and the forced password change (BUILD-11)

   The two pages that sit outside the application. A signed-out visitor should be able
   to tell at a glance which application they have reached, so the frame is warmer
   than the operator console on purpose: espresso and bronze for the retailer's own
   back office, never to be mistaken for the platform's.

   Built on the design system's tokens (aeretail.css), so the form side follows the
   viewer's light or dark theme. The story panel is dark in both, deliberately.
   ============================================================================= */

.bare { min-height: 100vh; background: var(--canvas); }

.auth {
    --auth-ground: #1c140e;
    --auth-ground-2: #2e2016;
    --auth-ink: #f5ede3;
    --auth-ink-2: #cdbba7;
    --auth-ink-3: #9c8672;
    --auth-bronze: #e0ad62;

    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
}

/* ---- the story panel ------------------------------------------------------ */

.auth-story {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: clamp(32px, 5vw, 64px);
    color: var(--auth-ink);
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(224, 173, 98, .20), transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(160, 104, 43, .22), transparent 65%),
        linear-gradient(165deg, var(--auth-ground-2) 0%, var(--auth-ground) 70%);
}

/* A fine rule grid, like the ruling on a stock sheet. Faint enough to be felt
   rather than seen. */
.auth-story::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245, 237, 227, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 237, 227, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}

.auth-story > * { position: relative; }

.auth-mark { display: flex; align-items: center; gap: 12px; }

.auth-glyph {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(150deg, #efc489, #c9903f 60%, #a0682b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(224, 173, 98, .7);
    color: #2a1a08;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.02em;
}

.auth-wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.auth-name { font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
.auth-name b { font-weight: 700; }
.auth-product {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-bronze);
}

.auth-pitch { max-width: 30rem; }

.auth-eyebrow {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-ink-3);
}

.auth-headline {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.018em;
    color: var(--auth-ink);
}

.auth-points {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.auth-points li {
    display: grid;
    gap: 3px;
    padding-left: 22px;
    position: relative;
}

.auth-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--auth-bronze);
    box-shadow: 0 0 0 4px rgba(224, 173, 98, .14);
}

.auth-points strong { font-size: 15px; font-weight: 600; color: var(--auth-ink); }
.auth-points span { font-size: 14px; line-height: 1.5; color: var(--auth-ink-2); max-width: 44ch; }

.auth-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    color: var(--auth-ink-3);
}

.auth-foot small { font-size: 12px; }

/* Bars of four widths, as a real symbology has. */
.auth-barcode {
    width: 150px;
    height: 30px;
    opacity: .45;
    background: repeating-linear-gradient(90deg,
        var(--auth-ink-3) 0 2px, transparent 2px 4px,
        var(--auth-ink-3) 4px 5px, transparent 5px 8px,
        var(--auth-ink-3) 8px 11px, transparent 11px 12px,
        var(--auth-ink-3) 12px 13px, transparent 13px 16px,
        var(--auth-ink-3) 16px 20px, transparent 20px 22px,
        var(--auth-ink-3) 22px 23px, transparent 23px 26px);
}

/* ---- the form panel ------------------------------------------------------- */

.auth-panel {
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 64px) 20px;
    background:
        radial-gradient(80% 50% at 100% 0%, var(--brand-tint), transparent 70%),
        var(--canvas);
}

.auth-card {
    width: min(400px, 100%);
    display: flex;
    flex-direction: column;
}

.auth-mark-compact { display: none; margin-bottom: 28px; }
.auth-mark-compact .auth-glyph { width: 38px; height: 38px; font-size: 15px; }
.auth-mark-compact .auth-name { font-size: 17px; color: var(--ink); }
.auth-mark-compact .auth-product { color: var(--brand-2); }

.auth-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--ink);
}

.auth-lead { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.auth-lead b { color: var(--ink); font-weight: 600; }

.auth-form { display: grid; gap: 18px; margin-top: 28px; }

.auth-field { display: grid; gap: 7px; }

.auth-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.auth-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--rule-2);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    box-shadow: var(--shadow-1);
    transition: border-color .15s, box-shadow .15s;
}

.auth-field input:hover { border-color: var(--ink-3); }

.auth-field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint), var(--shadow-1);
}

.auth-secret { position: relative; }
.auth-secret input { padding-right: 72px; }

.auth-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--brand-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.auth-reveal:hover { background: var(--brand-tint); }

/* The sign-in security check: the picture, and the way to ask for a clearer one. */
.auth-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.auth-captcha img {
    border: 1px solid var(--rule);
    border-radius: 7px;
    background: var(--surface);
    /* Its own size, whatever the page's font does: the characters are pixels, and a picture the
       browser has scaled is one more thing between a person and reading it. */
    width: 200px;
    height: 64px;
}

.auth-newpic { font-size: 12.5px; color: var(--brand); }

/* "Forgot your password?" under the sign-in button, and the steps on its own page (24 October 2026). */
.auth-forgot { justify-self: center; font-size: 13.5px; font-weight: 600; color: var(--brand-2, var(--brand)); }
.auth-forgot:hover { text-decoration: underline; }
.auth-steps { display: grid; gap: 14px; margin: 26px 0 28px; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.auth-steps strong { display: block; color: var(--ink); font-weight: 600; }

.auth-hint { font-size: 12.5px; color: var(--ink-3); }
.auth-hint.met { color: var(--good); }
.auth-hint.bad { color: var(--bad); }

.auth-go {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    justify-content: center;
    font-size: 15px;
    border-radius: 9px;
}

/* While the sign-in is with the server. Sign-in is a form that posts, so the page sits there
   with nothing moving until the answer arrives - and on a slow link that reads as a page that
   ignored the button, which is exactly when somebody presses it again. The wait cursor is over
   the whole page because the whole page is waiting, and the button says so in words as well:
   nothing here is told by appearance alone (CLAUDE.md section 12). */
.auth-busy, .auth-busy .auth-go { cursor: wait; }

.auth-busy .auth-form input,
.auth-busy .auth-reveal { cursor: wait; }

/* Dimmed rather than restyled, so it is plainly the same button and plainly not pressable.
   The browser's own disabled styling is not relied on: it differs per engine, and on the
   primary button it can wash the white label out against the navy. */
.auth-go[disabled] { opacity: .72; }

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid var(--bad);
    border-radius: 9px;
    background: var(--bad-tint);
    color: var(--bad);
    font-size: 14px;
    line-height: 1.45;
}

.auth-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.auth-alert-good { border-color: var(--good); background: var(--good-tint); color: var(--good); }
.auth-alert-warn { border-color: #d9b45a; background: #fff8e6; color: #6b4e0a; }

.auth-note {
    display: flex;
    gap: 10px;
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}

.auth-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ---- narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-story { display: none; }
    .auth-mark-compact { display: flex; }
    .auth-panel { place-items: start center; padding-top: 48px; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-alert-warn { border-color: #6b5320; background: #2a2210; color: #e6c883; }
}

/* A warning about consequence rather than error: the reader is entitled to be here
   and needs to understand what happens next. */
.alert-warn {
    background: #fff8e6;
    border: 1px solid #e5c66b;
    color: #6b4e0a;
}

/* =============================================================================
   Item maintenance (BUILD-19 to BUILD-22)

   Five parts of one record, and they are genuinely different kinds of thing: what
   the item is, how it is packed, how it scans, what it cost, what it sells for.
   Each tab carries its own hue so a glance tells you where you are without reading
   the label - the same reasoning as the coloured groups on the dashboard.
   ============================================================================= */

.itemhead {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6ddd1;
    margin-bottom: 16px;
}

.itemhead h2 { margin: 2px 0 0; font-size: 1.35rem; letter-spacing: -.02em; }
.itemhead .toolbar { margin-left: auto; }

.itemtabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: -1px;
}

.itemtab {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #e6ddd1;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background: #faf7f2;
    color: #5b5147;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

.itemtab:hover:not(.off) { background: #fff; }
.itemtab .c { font-size: .78rem; font-weight: 500; opacity: .65; }

/* The tab that is open joins the pane below it, so the two read as one surface
   rather than as a button above a box. */
.itemtab.on {
    background: #fff;
    color: #221a12;
    box-shadow: inset 0 3px 0 var(--tab-hue, #8a6d3b);
}

/* A tab that cannot be used yet says so by looking unavailable rather than by
   failing when it is pressed. */
.itemtab.off { opacity: .4; cursor: not-allowed; }

.itemtab[data-hue="bronze"] { --tab-hue: #8a6d3b; }
.itemtab[data-hue="teal"]   { --tab-hue: #2f7d76; }
.itemtab[data-hue="indigo"] { --tab-hue: #4a55a8; }
.itemtab[data-hue="clay"]   { --tab-hue: #a35a3c; }
.itemtab[data-hue="amber"]  { --tab-hue: #b1802a; }
.itemtab[data-hue="violet"] { --tab-hue: #6b4fa0; }

.itempane {
    position: relative;
    background: #fff;
    border: 1px solid #e6ddd1;
    border-radius: 0 10px 10px 10px;
    padding: 20px;
    border-top: 3px solid var(--tab-hue, #8a6d3b);
}

/* The tab's help key, in the corner of the pane. Absolute, so the tab's own fields start at the
   top of the pane as they would with no key at all: the point of moving these words off the page
   was the height they took, and a key in the flow would give some of it back. */
.panehelp {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

.itempane[data-hue="bronze"] { --tab-hue: #8a6d3b; }
.itempane[data-hue="teal"]   { --tab-hue: #2f7d76; }
.itempane[data-hue="indigo"] { --tab-hue: #4a55a8; }
.itempane[data-hue="clay"]   { --tab-hue: #a35a3c; }
.itempane[data-hue="amber"]  { --tab-hue: #b1802a; }
.itempane[data-hue="violet"] { --tab-hue: #6b4fa0; }

.itempane .card { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   Stock (BUILD-24)

   A negative balance is not an error, it is a store that refills the shelf before
   the invoice is entered (Appendix C). It is marked rather than flagged: the row
   still reads as data, because it is data, but it should be findable by eye in a
   list of two hundred.
   --------------------------------------------------------------------------- */
/* Through the theme tokens, which already resolve per theme. The dark values used to be
   set here under :root:not([data-theme="light"]) with no media query around them, which
   also matched a light-mode viewer on the default theme and painted the row near-black. */
tbody tr.row-bad td { background: color-mix(in srgb, var(--bad-tint) 70%, var(--surface)); }
tbody tr.row-bad td.num { color: var(--bad); font-weight: 600; }

/* A number entered inside a table cell. Full width would push the columns apart and
   turn a countable sheet into something that has to be scrolled sideways. */
.fld.tight { width: 6.5em; text-align: right; padding: 3px 6px; }

/* ---------------------------------------------------------------------------
   Offer editors (BUILD-34): promotions and add-ons are edited section by section,
   with tables of small inline fields. Everything takes its colour from the theme
   tokens so both themes resolve as a set.
   --------------------------------------------------------------------------- */
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); color: var(--ink-2); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button.on { background: var(--h-tint-2); color: var(--h-ink); }
.seg button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }

.card-body h3.sub { margin: 22px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.card-body h3.sub:first-of-type { margin-top: 14px; }
.card-body .lead-line { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; background: var(--h-tint); color: var(--ink); font-size: 14px; line-height: 1.5; }
.card-body .alert-info { background: var(--h-tint); color: var(--ink-2); border-color: var(--h-line); margin: 0 0 12px; }
.card-body .problems { margin: 0 0 12px; padding: 10px 14px 10px 30px; border-radius: 8px; border: 1px solid var(--bad); background: var(--bad-tint); color: var(--bad); font-size: 13px; line-height: 1.5; }
.card-body .formgrid.boxed { padding: 12px; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 8px; }
.formgrid > label.wide { grid-column: 1 / -1; }
/* A field's hint is read as a sentence, not as the label's uppercase caption (DESIGN.md "Field hint"). */
.formgrid > label > .hint { font-size: 11.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink-3); line-height: 1.5; }
table.grid td.r { text-align: right; }
.card-body .tablewrap { margin: 6px 0 8px; }
.card-body table input.fld, .card-body table select.fld { padding: 5px 8px; font-size: 13px; min-width: 0; width: 100%; }
.card-body table input.fld.num { width: 90px; text-align: right; }
.card-body td.days { white-space: nowrap; }
.card-body td.days label { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-size: 12px; color: var(--ink-2); }
.card-body > .btn { margin-top: 2px; }
/* ---- System Settings (SET-01, BUILD-46) ------------------------------------------------
   Sixteen categories do not fit a row of tabs, so they stand in a rail down the left, as
   they do in the settings of most point of sale systems. The scope bar stays in view while
   the settings scroll, because every value on the page is the value for that scope. */
.setwrap { flex: 1 0 auto; display: grid; grid-template-columns: 236px minmax(0, 1fr);
           background: linear-gradient(90deg, var(--surface-2) 0 236px, var(--h-line) 236px 237px, transparent 237px); }
.settabs { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 16px 11px 16px 10px; }
.settabs button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: transparent;
                  color: var(--ink-2); padding: 8px 12px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.settabs button:hover { background: var(--surface-3); color: var(--ink); }
.settabs button.on { background: var(--h-tint-2); color: var(--h-ink); }
.settabs button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.settabs .dot { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--h-accent);
                color: var(--surface); font-size: 10.5px; line-height: 18px; text-align: center; }
.setpane { padding: 0 24px 28px; min-width: 0; }
.setbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
          padding: 12px 0; background: var(--h-tint); border-bottom: 1px solid var(--h-line); }
.setbar .spacer { flex: 1; }
.setbar-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.setpick { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
           background: var(--surface); color: var(--ink); max-width: 280px; }
.setalert { margin-top: 12px; }
.setmove { align-items: center; background: var(--h-tint-2); color: var(--h-ink); border-color: var(--h-line); font-size: 13px; }
.setone { font-size: 13px; font-weight: 600; color: var(--ink); }
.sethead { padding: 18px 0 2px; }
.sethead h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.sethead p { margin: 0; color: var(--ink-2); font-size: 13px; max-width: 72ch; line-height: 1.5; }
.sethead .setfor { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.setgroup { margin-top: 16px; background: var(--surface); border: 1px solid var(--h-line); border-radius: var(--r-card); overflow: hidden; }
.setgroup h3 { margin: 0; padding: 8px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
               color: var(--h-ink); background: var(--h-tint-2); border-bottom: 1px solid var(--h-line); }
.setrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(190px, 1fr) minmax(150px, .75fr); gap: 8px 22px;
          align-items: start; padding: 12px 16px; }
.setrow + .setrow { border-top: 1px solid var(--rule); }
.setrow.changed { background: var(--h-tint); }
.setrow.bad { background: var(--bad-tint); }
.setrow .lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.setrow .err { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bad); }
.setrow .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.setrow .range { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.setfld { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
          background: var(--surface); color: var(--ink); }
.setfld:focus { outline: none; border-color: var(--h-accent); box-shadow: 0 0 0 3px var(--h-tint-2); }
.setfld:disabled { background: var(--surface-3); color: var(--ink-2); cursor: not-allowed; }
.setfld.num { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.setfld.time { width: 150px; }
textarea.setfld { resize: vertical; font-size: 12px; }
.setchecks { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.setchecks label, .settoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.setchecks input, .settoggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--h-accent); cursor: pointer; }
.setchecks input:disabled, .settoggle input:disabled { cursor: not-allowed; }
.setsrc { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.setsrc .here { font-weight: 700; color: var(--h-ink); }
.linkbtn { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--h-ink);
           text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkbtn:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
@media (max-width: 960px) {
  .setwrap { grid-template-columns: 1fr; }
  .setwrap { background: none; }
  .settabs { position: static; flex-direction: row; overflow-x: auto; background: var(--surface-2); border-bottom: 1px solid var(--h-line); }
  .settabs button { white-space: nowrap; }
  .setrow { grid-template-columns: 1fr; }
}
/* ---- eWIC: the authorised product list (WIC-08 to WIC-13, BUILD-36) --------------------
   The list is the agency's, not the retailer's: nothing here edits a food. What the screen
   has to make plain is which list is in force and how old it is, because a list more than
   forty-eight hours old puts every WIC sale rung against it at the store's risk. */
.aplwrap { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 8px; }
.aplbar { display: flex; align-items: flex-end; gap: 12px; }
.aplbar .fldwrap { display: flex; flex-direction: column; gap: 4px; min-width: 380px; }
.aplbar label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.aplwrap section { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.aplwrap section h3 { margin: 0 0 6px; font-size: 15px; }
.aplwrap section > p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

.aplforce.good { border-left: 3px solid var(--good); }
.aplforce.stale { border-left: 3px solid var(--brand-line); }
.aplforce.none { border-left: 3px solid var(--rule); }
.aplforce dl { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.aplforce dl div { display: flex; flex-direction: column; gap: 2px; }
.aplforce dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.aplforce dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.aplwarn { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--brand-tint);
           color: var(--ink); font-size: 13px; line-height: 1.5; }

.aplloadrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aplloadrow .fld { min-width: 260px; }
.aplcheck { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.aplproblems { margin: 0; padding: 10px 14px 10px 30px; border-radius: 8px; border: 1px solid var(--rule);
               background: var(--surface-2); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.aplwrap tr.inforce td { font-weight: 600; }

/* INV-21 and INV-23: a short label beside a figure, saying where the figure came from -
   the state or the retailer, the maximum retail price now printed or one superseded. It
   is read at a glance beside a number, so it has to be quieter than the number. */
.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.pill-hue { color: #2f5d3a; background: #e3f1e6; }
.pill-bad { color: #7a3226; background: #f7e3de; }

/* A checkbox that switches a behaviour on rather than editing a value. */
label.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 14px;
    font-size: 13px;
    font-weight: 600;
}

/* A row still on the record but no longer in use. */
tbody tr.off td { opacity: .55; }

/* UI-42. The Item Manager takes the whole dialog body and keeps it: the grid scrolls inside
   a frame that does not resize when a filter narrows it. */
.dlg-body > .im-host { flex: 1 1 auto; min-height: 0; display: flex; margin: 16px 20px; }
.dlg-body > .im-host > * { flex: 1 1 auto; min-width: 0; }

/* The dialog itself never scrolls around Item Manager: the frame fits the window and only the
   item list inside it scrolls. Without this the body's own scrollbar appeared whenever the
   frame's margins and the body's trailing spacer came to a few pixels more than the window. */
.dlg-body:has(> .im-host) { overflow: hidden; }

/* Item Manager is a light screen in either theme; the dialog around it matches rather than
   framing it in the dark theme's ground. */
.dlg-body:has(> .im-host),
.dlg-body:has(> .ig-host) { background: #e9edf2; color: #1f2937; color-scheme: light; }
.dlg-body:has(> .im-host)::after { content: none; }

/* The same screen as the page of Items > Items: a box the height of the window, as Item Groups
   has, so the grid scrolls inside it and the page does not grow to the list's length. Light in
   either theme, as it is in the dialog. */
/* The Items page is the screen and nothing else: the main column's width cap and padding come off
   for it, and it is the height of the window under the top bar (58px). */
.main:has(.imx) { max-width: none; padding: 8px 10px; }
.imx {
    height: calc(100vh - 76px);
    min-height: 520px;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    background: #e9edf2;
    color: #1f2937;
    color-scheme: light;
}
.imx > .im-host { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; margin: 6px 8px; }
.imx > .im-host > * { flex: 1 1 auto; min-width: 0; }

/* An area's tab strip with workspace buttons at the right-hand end of the same row (Kiosk). The
   row carries the rule the strip would have drawn, so the tabs still sit on one line with the
   button. */
.area-tabrow { display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.area-tabrow > .tabstrip { flex: 0 1 auto; border-bottom: none; margin-bottom: 0; }
.area-tabrow > .spacer { flex: 1; }
.area-launch { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; white-space: nowrap; }
.area-launch svg { width: 17px; height: 17px; flex: none; }

/* INV-02. The item groups screen, the same way: two grids that scroll inside a frame
   whose height does not move as a filter narrows them. */
.dlg-body > .ig-host { flex: 1 1 auto; min-height: 0; display: flex; margin: 16px 20px; }
.dlg-body > .ig-host > * { flex: 1 1 auto; min-width: 0; }

/* ---- Card processing, store by store (PAY-01, BUILD-48) --------------------------------
   These settings are read together, not one at a time: whether cash back is offered means
   nothing without the ceiling beside it, and a surcharge means nothing without the add-on it
   is recorded against. So they sit in two columns of related switches rather than in the
   one-per-row list System Settings uses, and a setting that depends on another is indented
   under it and dimmed while that other is off - dimmed rather than hidden, because a control
   that vanishes leaves nobody any idea why. */

.cpwrap { display: flex; flex-direction: column; padding: 0 24px 28px; }

.cpsec { margin-top: 16px; background: var(--surface); border: 1px solid var(--h-line); border-radius: var(--r-card); overflow: hidden; }
.cpsec > h3 { margin: 0; padding: 8px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
              color: var(--h-ink); background: var(--h-tint-2); border-bottom: 1px solid var(--h-line); }

.cpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px 36px; padding: 16px; align-items: start; }
.cpcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* flex-start, not stretch: a segmented control is as wide as its options, and one stretched
   to the column left a half-empty box beside the option that was picked. */
.cpfield { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.cpfield .seg { max-width: 100%; flex-wrap: wrap; }
.cplbl { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* Anything that only applies while the switch above it is on. */
.cpsub { display: flex; flex-direction: column; gap: 8px; margin: -2px 0 2px 26px; padding-left: 12px; border-left: 2px solid var(--h-line); }

.cpcheck { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The description sits under the box, indented to the label so the column of text lines up
   with the column of labels rather than with the checkboxes. */
.cpcheck > .cpnote { margin-left: 23px; max-width: 54ch; }
.cptext > .cpnote { max-width: 54ch; }
.cpcheck .settoggle { font-weight: 600; }

.cpamount, .cptext { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cpamount > span, .cptext > span { font-size: 12.5px; color: var(--ink-2); }
.cptext textarea.setfld { font-size: 12.5px; line-height: 1.5; }

.cpnote { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); max-width: 72ch; }
.cpsec > .cpnote { padding: 0 16px 14px; }
.cppanel .cpnote { padding: 0 16px 10px; }
.cppanel .cpnote:last-child { padding-bottom: 16px; }

.cpwarn { margin: 0; padding: 8px 11px; border-radius: 7px; border-left: 3px solid var(--brand-line);
          background: var(--brand-tint); color: var(--ink); font-size: 12px; line-height: 1.45; }
.cpbad { margin: 0; font-size: 12px; font-weight: 600; color: var(--bad); }

/* Off, not gone: the control stays where it is and stops responding, so that its label still
   explains what turning the switch above it on would give you. */
.cpsub .off, .cpcheck.off, .cpamount.off, .cptext.off, .seg.off { opacity: .5; }
.cpcheck.off .settoggle, .cpamount.off, .cptext.off { cursor: not-allowed; }

/* One make of terminal is in use at a store at a time. The tabs do not change which - that is
   Terminal type above - they only say whose options are on screen. */
.cptabs { display: flex; gap: 4px; margin: 18px 0 0; padding: 0 2px; }
.cptabs button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--h-line); border-bottom: 0;
                 border-radius: 9px 9px 0 0; background: var(--surface-2); color: var(--ink-2);
                 padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cptabs button:hover { background: var(--surface-3); color: var(--ink); }
.cptabs button.on { background: var(--surface); color: var(--h-ink); position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: 9px; }
.cptabs button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.cptabs .cpsoon { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.cppanel { margin-top: 0; border-top-left-radius: 0; }
.cppanel .emptystate { padding: 26px 18px; }
.cppanel .emptystate p { margin: 0 auto 8px; max-width: 64ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 720px) {
  .cpwrap { padding: 0 14px 22px; }
  .cpgrid { grid-template-columns: 1fr; }
}
/* ---- Currency Shortcut Button Setup (Spec 4.10, POS-08) -------------------------------- */
/* Laid out as the specification's own dialog draws it. The preview coins are round because
   that is how the lane actually draws the notes - a preview shaped differently from the thing
   it previews is worth less than no preview. */

.cb-wrap{display:flex;flex-direction:column;gap:14px;max-width:1120px}

.cb-store{display:flex;align-items:center;gap:12px}
.cb-store-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cb-store select{min-width:340px}

/* the switch */
.cb-switch{
  display:flex;align-items:center;gap:20px;
  padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.cb-switch > div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.cb-switch strong{font-size:15px;font-weight:700;color:var(--ink)}
.cb-switch span{font-size:13px;color:var(--ink-2);line-height:1.5}

.cb-toggle{
  flex:none;width:62px;height:34px;padding:0;
  border:none;border-radius:999px;background:var(--rule-2);
  cursor:pointer;position:relative;transition:background .15s ease;
}
.cb-toggle.on{background:#10b981}
.cb-knob{
  position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s ease;
}
.cb-toggle.on .cb-knob{transform:translateX(28px)}

/* the six cards */
.cb-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:2px}
.cb-head h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.cb-hint{flex:1 1 auto;text-align:right;font-size:13px;color:var(--ink-3)}

.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cb-card{border:1px solid var(--rule);border-radius:12px;padding:14px 16px 16px}
/* Alternating tints, as the dialog draws them: the eye finds "button 4" faster in a
   chequered grid than in six identical boxes. */
.cb-card.a{background:#eff6fd;border-color:#cfe2f5}
.cb-card.b{background:#f0f8ef;border-color:#d3e8d0}

.cb-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cb-badge{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.07);color:var(--ink-2);
}
.cb-role{flex:1 1 auto;text-align:right;font-size:13px;font-weight:600;color:var(--ink-2)}

.cb-field{display:flex;flex-direction:column;gap:5px}
.cb-field > span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cb-field > input{
  min-height:46px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:8px;
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
}
.cb-field > input:focus{outline:none;border-color:var(--h-accent);box-shadow:0 0 0 3px var(--h-tint)}

/* the preview */
.cb-display{border-radius:14px;padding:18px 20px 22px;background:linear-gradient(180deg,#1e3a5f,#152c49);color:#fff}
.cb-display-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.cb-display-head > div{flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.cb-display-head strong{font-size:15px;font-weight:700}
.cb-display-head span{font-size:12.5px;color:rgba(255,255,255,.66)}
.cb-live{
  flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;
}

.cb-coins{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cb-coin{
  display:grid;place-items:center;
  width:96px;height:96px;border-radius:50%;
  background:#fff;border:3px solid #9dc3e6;
  color:#14324f;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;
}
.cb-coin.off{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.5);font-weight:600}

.cb-says{
  margin:0;padding:11px 15px;border-radius:9px;
  background:var(--brand-tint);border:1px solid var(--brand-line);
  font-size:13px;color:var(--ink-2);line-height:1.55;
}

.cb-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--rule);
}
.cb-foot-say{flex:1 1 auto;font-size:13px;color:var(--ink-3)}

@media (max-width:980px){
  .cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-coin{width:78px;height:78px;font-size:16px}
}
@media (max-width:660px){
  .cb-grid{grid-template-columns:minmax(0,1fr)}
  .cb-hint{text-align:left}
}
/* ---- Menu Builder (POS-07) -------------------------------------------------------------------
   The classes down the left, the chosen class's groups and the ways to add more on the right. */

.mb-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start;max-width:1200px}
.mb-classes{display:flex;flex-direction:column;gap:6px}
.mb-col-head{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:0 2px 4px}
.mb-class{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;
  align-items:center;text-align:left;padding:9px 12px;border:1px solid var(--rule);border-radius:10px;
  background:var(--surface);color:var(--ink);cursor:pointer
}
.mb-class:hover{border-color:var(--rule-2)}
.mb-class.on{border-color:var(--h-accent);box-shadow:inset 3px 0 0 var(--h-accent);background:var(--h-tint)}
.mb-class.off{opacity:.6}
.mb-class .mb-swatch{grid-row:1 / span 2}
.mb-class-name{font-weight:700}
.mb-class-meta{grid-column:2;font-size:12px;color:var(--ink-3)}
.mb-count{grid-column:3;grid-row:1 / span 2;font-size:12px;font-weight:700;color:var(--ink-2);
  background:var(--surface-2);border-radius:999px;padding:2px 9px}
.mb-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--rule-2);
  vertical-align:-2px;margin-right:8px}
.mb-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.mb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mb-pad{padding:12px 16px}
.mb-order{white-space:nowrap}
.mb-order .btn{padding:2px 8px}
.mb-tabs{display:flex;gap:4px;padding-bottom:0}
.mb-tabs button{border:0;background:none;padding:8px 12px;font:inherit;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;cursor:pointer}
.mb-tabs button.on{color:var(--ink);border-bottom-color:var(--h-accent)}
.mb-pick{max-height:360px;overflow:auto}
.mb-ticked{background:var(--h-tint)}
.mb-lines{width:100%;font-family:var(--mono, ui-monospace, monospace)}
.mb-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 16px;border-top:1px solid var(--rule)}
.mb-foot .muted{flex:1 1 auto}
@media (max-width:820px){ .mb-wrap{grid-template-columns:minmax(0,1fr)} }

/* =============================================================================================
   OFFICE LIGHT - the AdvEntDeli Web Office's theme.

   AdvEntDeli's Web Office draws everything from its design system (AdvDeli.Catalog.UI theme.css)
   in that file's light palette: a pale grey page under a faint four-colour wash, frosted white
   panels, near-black ink, and amber as the one accent - with dark ink ON the amber, as its logo,
   avatar and buttons have it. The selected item in its menu is a pale amber wash with dark amber
   text and an amber edge.

   This office already carries the same design system (KioskMenu.Ui theme.css - the same tokens,
   ported), so the catalog screens - Menu Designer, Modifier Groups, Open Modifiers - need nothing
   from here: data-theme="light" alone puts them on that palette. What this block does is map the
   office's OWN tokens (aeretail.css: --canvas, --surface, --ink, --brand, --h-*) onto the same
   values, so the tabs, buttons, cards and the Kiosk Items window match them.

   Turned on by the class office-light on <html>, which the theme script in App.razor sets -
   for every page of the office - together with data-theme="light". Narrow the list there to take
   a section back to the old look; nothing here changes.
   ============================================================================================= */
:root.office-light {
    color-scheme: light;

    /* surfaces, lines and ink - theme.css's --c-s*, --c-line*, --c-text* */
    --canvas: #F4F4F6;  --surface: #FFFFFF;  --surface-2: #FAFAFB;  --surface-3: #EFEFF2;
    --rule: #E3E3E7;    --rule-2: #C9C9D0;
    --ink: #17171A;     --ink-2: #55555F;    --ink-3: #7A7A85;

    /* the accent - theme.css's amber, with its dark ink */
    --brand: #F5A524;   --brand-2: #D98D14;  --brand-ink: #17120A;
    --brand-tint: #FEF1DA; --brand-line: #F6CF8A;

    --good: #146B41;    --good-tint: #DDF3E7;
    --bad: #A81F24;     --bad-tint: #FCE4E4;

    --shadow-1: 0 1px 2px rgba(23, 23, 26, .06), 0 1px 1px rgba(23, 23, 26, .04);
    --shadow-2: 0 2px 4px rgba(23, 23, 26, .05), 0 12px 28px -14px rgba(23, 23, 26, .22);
    --shadow-3: 0 24px 60px -30px rgba(23, 23, 26, .40);
}

/* Every area's hue becomes the amber while this theme is on - the selected tab, card heads, dialog
   bars - drawn the way AdvEntDeli draws its selected menu item. More specific than aeretail.css's
   [data-hue="..."] rules. */
:root.office-light [data-hue] {
    --h-tint: #FAFAFB;
    --h-tint-2: #FEF1DA;
    --h-accent: #F5A524;
    --h-line: #E3E3E7;
    --h-ink: #8A5A02;
}

/* The page: pale grey under the same faint wash AdvEntDeli's pages sit on (its .bo::before). */
:root.office-light body {
    color: var(--ink);
    background-color: var(--canvas);
    background-image:
        radial-gradient(62% 58% at 6% 4%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 95% 14%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 14% 94%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 90%, var(--mesh-d), transparent 70%);
    background-attachment: fixed;
}

/* Dark ink on the amber, never white: white on #F5A524 is under 2:1. */
:root.office-light .btn-primary {
    background: var(--brand);
    color: var(--brand-ink);
    border-color: var(--brand);
    box-shadow: 0 6px 18px -8px rgba(245, 165, 36, .55);
}
:root.office-light .btn-primary:hover:not(:disabled) { background: var(--brand-2); border-color: var(--brand-2); filter: none; }
:root.office-light .pager button.on,
:root.office-light .tabstrip-badge { color: var(--brand-ink); }

/* The selected tab: the menu item's look - wash, dark amber text, amber underline. */
:root.office-light .tabstrip-tab.on { background: var(--h-tint-2); color: var(--h-ink); border-bottom-color: var(--h-accent); }
:root.office-light .tabstrip-tab:hover:not(:disabled):not(.on) { background: rgba(255, 255, 255, .9); color: var(--ink); }

/* The Kiosk Items button: a quiet white key that turns amber on hover, like AdvEntDeli's top-bar
   buttons (bo-storepick, bo-signout). */
:root.office-light .area-launch {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule-2);
}
:root.office-light .area-launch:hover { background: var(--h-tint-2); color: var(--h-ink); border-color: var(--h-accent); filter: none; }

/* ---- the frame: top bar, rail, dashboard banner, dialog bars ------------------------------
   AdvEntDeli's frame is light: a frosted white top bar (its .bo-top), a frosted rail (.bo-side)
   whose selected entry is an amber wash with dark amber text and an amber left edge
   (.nav-link.active), and an amber mark with dark ink (.bo-logo). The plum "chrome" tokens are
   turned light first, so anything else drawn with them follows; the pieces below are the ones
   whose shape changes too. */
:root.office-light {
    --chrome: #FFFFFF;  --chrome-2: #FFFFFF;  --chrome-3: #F4F4F6;
    --chrome-ink: #17171A;  --chrome-ink-2: #55555F;  --chrome-ink-3: #7A7A85;
    --chrome-rule: rgba(0, 0, 0, .09);  --chrome-rule-2: rgba(0, 0, 0, .16);
    --brand-on-dark: #8A5A02;
}

/* DARK, like the rail: the two together frame the light page. The rail's charcoal, a hairline of
   light along the foot, and light ink. */
:root.office-light .topbar {
    background: linear-gradient(180deg, #23232A 0%, #1B1B21 100%);
    border-bottom: 1px solid #0E0E12;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04), 0 2px 10px -4px rgba(0, 0, 0, .35);
    color: #E4E4EA;
    position: sticky; top: 0; z-index: 30;
}
:root.office-light .brandmark .name { color: #FFFFFF; }
:root.office-light .brandmark .sub { color: #8C8C99; }
:root.office-light .session { color: #B4B4BF; }
:root.office-light .session b { color: #FFFFFF; }
:root.office-light .session .sep { color: rgba(255, 255, 255, .18); }

/* Sign out: a quiet outlined key on the dark bar, amber when hovered. */
:root.office-light .topbar .btn-quiet {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: #E4E4EA;
}
:root.office-light .topbar .btn-quiet:hover {
    background: rgba(245, 165, 36, .16);
    border-color: #F5A524;
    color: #FFC25A;
}

:root.office-light .sidenav {
    /* DARK, in a light office: a charcoal rail beside the light page, so the sections read as the
       frame and the work as the page. The selected section keeps the theme's amber. */
    background: linear-gradient(180deg, #1E1E24 0%, #16161B 100%);
    border-right: 1px solid #0E0E12;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
    color: #E4E4EA;
}
:root.office-light .sidenav-item { color: #C4C4CE; border: 1px solid transparent; }
:root.office-light .sidenav-item:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
:root.office-light .sidenav-item.on {
    background: rgba(245, 165, 36, .16);
    border-color: transparent;
    color: #FFC25A;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #F5A524;
}
:root.office-light .sidenav-item.on .sidenav-ico { color: #F5A524; }
:root.office-light .sidenav-ico { color: #8C8C99; }
:root.office-light .sidenav-item:hover .sidenav-ico { color: #E4E4EA; }
:root.office-light .sidenav-toggle { border-color: rgba(255, 255, 255, .12); color: #9A9AA6; background: transparent; }
:root.office-light .sidenav-toggle:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }

/* The dashboard's banner: a frosted card with the figures in dark amber, not a plum slab. */
:root.office-light .dashhead {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
    border: 1px solid var(--glass-line);
    color: var(--c-text);
    box-shadow: var(--glass-edge), 0 10px 30px -18px rgba(23, 23, 26, .35);
}
:root.office-light .dashhead p { color: var(--c-text-dim); }
:root.office-light .stat dt { color: var(--c-text-faint); }
:root.office-light .stat dd { color: var(--c-accent-text); }

/* Dialog bars: white with dark ink and a hairline under them, as the catalog dialogs are. */
:root.office-light .dlg-bar {
    background: var(--surface);
    color: var(--c-text);
    border-bottom: 1px solid var(--rule);
}
:root.office-light .dlg-sub { color: var(--c-text-faint); }
:root.office-light .dlg-x { color: var(--c-text-dim); }
:root.office-light .dlg { box-shadow: var(--shadow-modal), 0 0 0 1px var(--glass-line-hi); }
:root.office-light .scrim-1,
:root.office-light .scrim-2,
:root.office-light .scrim-3 { background: var(--scrim); }

/* Section cards on the dashboard sit on white, as AdvEntDeli's cards do, not on the page's wash. */
:root.office-light .group { background: var(--surface); }

/* ---- the notification bell in the top bar (Layout/OfficeNotifications.razor) ---------------- */
.ntf { position: relative; }
.ntf-btn {
    position: relative;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-ctl);
    border: 1px solid var(--chrome-rule-2);
    background: transparent;
    color: var(--chrome-ink-2);
    cursor: pointer;
}
.ntf-btn svg { width: 20px; height: 20px; }
.ntf-btn:hover, .ntf-btn.on { color: var(--chrome-ink); background: var(--chrome-3); }
.ntf-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--bad); color: #FFFFFF;
    font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--chrome);
}
.ntf-away { position: fixed; inset: 0; z-index: 40; }
.ntf-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 41;
    width: 300px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.ntf-head {
    padding: 12px 16px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
}
.ntf-empty { padding: 18px 16px; font-size: 13px; color: var(--ink-3); }
.ntf-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    color: var(--ink); text-decoration: none;
    border-left: 3px solid var(--h-accent);
}
.ntf-item + .ntf-item { border-top: 1px solid var(--rule); }
.ntf-item:hover { background: var(--h-tint-2); text-decoration: none; }
.ntf-n { min-width: 28px; font-size: 18px; font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.ntf-what { flex: 1; font-size: 13.5px; }
.ntf-go { color: var(--ink-3); font-size: 18px; }

/* In the light theme the bell sits on the frosted bar like AdvEntDeli's top-bar keys. */
:root.office-light .ntf-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #E4E4EA; }
:root.office-light .ntf-btn:hover,
:root.office-light .ntf-btn.on { border-color: #F5A524; background: rgba(245, 165, 36, .16); color: #FFC25A; }
:root.office-light .ntf-badge { background: var(--c-stop); box-shadow: 0 0 0 2px #1E1E24; }

/* ---- the dashboard's section cards, raised (Views/DashboardView.razor) -------------------------
   Each card stands off the page: a white-to-pearl face lit from above (a bright top edge, a darker
   lower one), three layers of shadow - a contact shadow, a soft drop and a faint amber glow - and
   an amber icon tile that stands off the card in turn. On hover the card lifts and leans back a
   few degrees and the tile rises further, so the depth is felt as well as seen. */
:root.office-light .arearow { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); perspective: 1200px; }

:root.office-light .areacard {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px 20px 16px;
    border-radius: 18px;
    border: 1px solid rgba(23, 23, 26, .06);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(245, 165, 36, .10), transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #FCFCFD 55%, #F3F3F6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -2px 0 rgba(23, 23, 26, .035),
        0 1px 2px rgba(23, 23, 26, .06),
        0 10px 22px -12px rgba(23, 23, 26, .22),
        0 22px 40px -26px rgba(245, 165, 36, .35);
    color: var(--c-text);
    text-decoration: none;
    transform-style: preserve-3d;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
    overflow: visible;
}
:root.office-light .areacard:hover {
    text-decoration: none;
    transform: translateY(-6px) rotateX(5deg);
    border-color: rgba(245, 165, 36, .35);
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 0 -2px 0 rgba(23, 23, 26, .04),
        0 2px 4px rgba(23, 23, 26, .06),
        0 22px 40px -16px rgba(23, 23, 26, .30),
        0 30px 60px -30px rgba(245, 165, 36, .55);
}
:root.office-light .areacard:active { transform: translateY(-2px) rotateX(2deg); }
:root.office-light .areacard:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

:root.office-light .areacard-top { display: flex; align-items: center; gap: 14px; }

/* The icon tile: an amber block lit from the top-left, with a glow beneath it. */
:root.office-light .areacard-icon {
    flex: none;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(150deg, #FFD27A 0%, #F5A524 55%, #E08A0B 100%);
    color: #3A2600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -3px 0 rgba(120, 70, 0, .22),
        0 6px 14px -4px rgba(224, 138, 11, .55),
        0 2px 3px rgba(23, 23, 26, .12);
    transform: translateZ(20px);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}
:root.office-light .areacard:hover .areacard-icon {
    transform: translateZ(40px) translateY(-2px) rotate(-4deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -3px 0 rgba(120, 70, 0, .22),
        0 12px 22px -6px rgba(224, 138, 11, .65),
        0 3px 5px rgba(23, 23, 26, .14);
}
:root.office-light .areacard-ico { width: 24px; height: 24px; padding: 0; border: none; border-radius: 0; background: none; color: inherit; }

:root.office-light .areacard-name { font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; color: var(--c-text); }
:root.office-light .areacard-blurb { flex: 1; font-size: 13px; line-height: 1.55; color: var(--c-text-dim); }

@media (prefers-reduced-motion: reduce) {
    :root.office-light .areacard,
    :root.office-light .areacard:hover,
    :root.office-light .areacard-icon,
    :root.office-light .areacard:hover .areacard-icon { transform: none; transition: none; }
}

/* ---- the sign-in panel (Layout/AuthShell.razor) ------------------------------------------------
   The right-hand side of sign-in and change-password. The story panel on the left is untouched.

   A light ground that moves: four large, heavily blurred colour fields - amber, peach, lavender,
   sky - drifting on long, offset loops over a faint dot grid, so the page is never quite still
   but nothing on it draws the eye from the form. The form sits on a frosted card above them. */
:root.office-light .auth-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #F7F6F9;
}

.auth-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* The dot grid, fading towards the foot. */
.auth-bg::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(23, 23, 26, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 30%, transparent 80%);
    mask-image: radial-gradient(120% 90% at 50% 20%, #000 30%, transparent 80%);
}

.auth-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}
.auth-blob.a { width: 46vmax; height: 46vmax; left: -12%; top: -18%; background: radial-gradient(circle at 35% 35%, #FFD27A, #F5A524 60%, transparent 70%); animation: auth-drift-a 26s ease-in-out infinite alternate; }
.auth-blob.b { width: 38vmax; height: 38vmax; right: -14%; top: 8%;  background: radial-gradient(circle at 50% 50%, #FFC2A8, #FF9A76 55%, transparent 70%); opacity: .55; animation: auth-drift-b 32s ease-in-out infinite alternate; }
.auth-blob.c { width: 42vmax; height: 42vmax; left: 10%;  bottom: -24%; background: radial-gradient(circle at 50% 50%, #D7CCFF, #A996F2 55%, transparent 70%); opacity: .5; animation: auth-drift-c 36s ease-in-out infinite alternate; }
.auth-blob.d { width: 30vmax; height: 30vmax; right: 4%;  bottom: -10%; background: radial-gradient(circle at 50% 50%, #BFE3FF, #7FB8EE 55%, transparent 70%); opacity: .45; animation: auth-drift-d 28s ease-in-out infinite alternate; }

@keyframes auth-drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 10%) scale(1.08); } 100% { transform: translate(14%, -4%) scale(.96); } }
@keyframes auth-drift-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, 12%) scale(1.1); } 100% { transform: translate(-4%, 22%) scale(.94); } }
@keyframes auth-drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, -10%) scale(1.06); } 100% { transform: translate(-6%, -16%) scale(1.02); } }
@keyframes auth-drift-d { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14%, -8%) scale(1.12); } 100% { transform: translate(-22%, 4%) scale(.95); } }

/* The card: frosted white, an amber line along its top, and depth from three shadows. */
:root.office-light .auth-card {
    position: relative;
    width: min(440px, 100%);
    padding: 40px 38px 34px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 2px 4px rgba(23, 23, 26, .04),
        0 24px 48px -20px rgba(23, 23, 26, .25),
        0 40px 80px -40px rgba(245, 165, 36, .45);
    animation: auth-card-in .6s cubic-bezier(.2, .7, .3, 1) both;
}
:root.office-light .auth-card::before {
    content: "";
    position: absolute; left: 28px; right: 28px; top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, #F5A524 20%, #FFC25A 50%, #F5A524 80%, transparent);
}
@keyframes auth-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

:root.office-light .auth-title { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); }
:root.office-light .auth-lead { color: var(--c-text-dim); }

:root.office-light .auth-field label { color: var(--c-text-dim); font-weight: 600; letter-spacing: .01em; }
:root.office-light .auth-field input {
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(23, 23, 26, .12);
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 2px rgba(23, 23, 26, .05);
}
:root.office-light .auth-field input:hover { border-color: rgba(23, 23, 26, .25); }
:root.office-light .auth-field input:focus {
    border-color: var(--c-accent);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(245, 165, 36, .20), inset 0 1px 2px rgba(23, 23, 26, .04);
}
:root.office-light .auth-reveal { color: var(--c-accent-text); border-radius: 10px; }
:root.office-light .auth-reveal:hover { background: var(--c-accent-wash); }

/* Sign in: amber with dark ink, lit from above, lifting a little under the pointer. */
:root.office-light .auth-go {
    height: 54px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(180deg, #FFC25A 0%, #F5A524 55%, #E8960F 100%);
    color: #17120A;
    font-size: 16px; font-weight: 700; letter-spacing: .01em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -2px 0 rgba(120, 70, 0, .18),
        0 12px 24px -10px rgba(224, 138, 11, .65);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
:root.office-light .auth-go:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -2px 0 rgba(120, 70, 0, .18),
        0 18px 30px -12px rgba(224, 138, 11, .75);
}
:root.office-light .auth-go:active:not(:disabled) { transform: translateY(0); }

:root.office-light .auth-note { border-top-color: rgba(23, 23, 26, .08); color: var(--c-text-faint); }
:root.office-light .auth-alert { border-radius: 12px; }

@media (max-width: 900px) {
    :root.office-light .auth-card { padding: 30px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-blob, :root.office-light .auth-card { animation: none; }
}