/* =============================================================================================
   Web Office — application stylesheet.

   MID-MIGRATION. The SHELL (sidebar, nav, top bar) is on the shared design system and reads
   --c-* / --glass-* from _content/AdvDeli.Catalog.UI/theme.css, which Components/App.razor now
   links AFTER this file so it wins html and body. Everything below the shell section is still on
   the legacy palette declared immediately below.

   DO NOT DELETE THE LEGACY :root BLOCK YET. Around twenty pages — tables, badges, buttons,
   forms, the reference-data dialogs — still style themselves from --navy/--copper/--ink/--line.
   Removing it is the LAST step of the migration; do it early and every one of those pages
   renders with unresolved colours and no error anywhere. The names do not collide with the
   theme's, so the two can coexist for as long as the conversion takes.
   ============================================================================================= */

:root {
    /* LEGACY. Consumed by the not-yet-converted pages only. Nothing in the shell reads these. */
    --navy: #16324f;
    --navy2: #1f4b74;
    --copper: #b5651d;
    --copper2: #d98324;
    --ink: #22303c;
    --muted: #6b7785;
    --line: #e6e9ee;
    --bg: #f4f6f9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Font, background and text colour now come from theme.css, which is linked after this file.
   The old body rule set Segoe UI on a #f4f6f9 ground; the token values are near-identical greys,
   so what actually changed is the typeface. */
a { color: var(--c-accent-text); text-decoration: none; }
h1, h2, h3 { margin: 0; }
h1:focus { outline: none; }

/* =============================================================================================
   SHELL — converted to the shared design system.

   Was a navy gradient sidebar with a copper logo and a white top bar. It now uses the same glass
   and the same saffron accent as the till, so the two products read as one.

   MOUSE, NOT TOUCH. The Cashier sizes every control to 44px minimum because it runs on a
   touchscreen. This is a browser application; that sizing here just reads as oversized and
   pushes content down the page. Nav links are ~38px, which is right for a pointer.
   ============================================================================================= */

.bo { display: flex; min-height: 100vh; isolation: isolate; }

/* The colour ground, behind everything. Fixed so the content scrolls over it rather than
   dragging it along, and on .bo rather than a page so every screen inherits it. */
.bo::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        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%);
}

/* PANE glass: this is a full-height surface, so --glass-fill (.70 white) would flatten the mesh
   behind it. No backdrop-filter either — an element with one becomes a backdrop root and kills
   the blur on anything rendered inside it. */
.bo-side {
    width: 264px; flex: 0 0 264px;
    background: var(--glass-fill-pane);
    border-right: 1px solid var(--glass-line);
    color: var(--c-text);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.bo-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.1rem; border-bottom: 1px solid var(--glass-line); }

/* Holds the AE mark, sized by font-size because the mark is 1em tall. Was the letters "AK" on a
   copper gradient, which named nothing. */
.bo-logo {
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-size: 23px;
    color: var(--c-accent-ink);
    background: var(--c-accent);
    box-shadow: 0 6px 18px -6px rgba(245, 165, 36, .45);
}
.bo-title { font-weight: 800; font-size: 1.05rem; letter-spacing: var(--track-display); color: var(--c-text); }
.bo-sub { font-size: 0.74rem; color: var(--c-text-faint); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; }

.bo-nav { padding: 0.5rem 0.6rem 2rem; }
.nav-group {
    display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0.7rem 0.35rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track-label);
    text-transform: uppercase; color: var(--c-text-faint);
}
/* Holds a BoIcon. Sized here rather than in the component so the nav owns its own scale — the
   icons are stroked paths at currentColor, so they take the group heading's colour for free. */
.ng-ic { display: inline-flex; align-items: center; }
.ng-ic .bo-ico { width: 15px; height: 15px; }
.nav-link {
    display: block; padding: 0.55rem 0.75rem; margin: 1px 0;
    border-radius: var(--r-sm);
    color: var(--c-text-dim); font-size: 0.9rem;
    border-left: 3px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s ease, color .12s ease;
}
.nav-link:hover { background: var(--glass-fill-hi); color: var(--c-text); }
.nav-link.active {
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    border-left-color: var(--c-accent);
    font-weight: 600;
}
.nav-link.dash { margin: 0.5rem 0 0.2rem; font-weight: 600; }

.bo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The top bar KEEPS its backdrop-filter. It is the one surface content scrolls underneath, so
   the blur does real work here, and nothing inside it needs a backdrop of its own. */
.bo-top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--glass-fill);
    border-bottom: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    padding: 0.8rem 1.4rem;
    position: sticky; top: 0; z-index: 10;
}
.bo-store { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; color: var(--c-text); }
.bo-user { display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-dim); font-size: 0.9rem; }

.bo-storepick {
    display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;
    border: 1px solid var(--glass-line-hi); border-radius: var(--r-sm);
    padding: 5px 11px; font-size: 0.82rem; font-weight: 700;
    color: var(--c-text); background: var(--c-s2);
}
.bo-storepick:hover { border-color: var(--c-accent); background: var(--c-accent-wash); color: var(--c-accent-text); }
/* Amber rather than red: no store selected is a state to resolve, not a failure. */
.bo-nostore { color: var(--c-warn); font-style: italic; font-weight: 600; }
.bo-caret { font-size: 0.7rem; color: var(--c-text-faint); }

.bo-signout {
    margin-left: 0.5rem; font-weight: 700; font-size: 0.82rem; text-decoration: none;
    color: var(--c-text); background: var(--c-s2);
    border: 1px solid var(--glass-line-hi); border-radius: var(--r-sm);
    padding: 6px 12px;
}
.bo-signout:hover { border-color: var(--c-accent); background: var(--c-accent-wash); color: var(--c-accent-text); }

.bo-avatar {
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent); color: var(--c-accent-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem;
}
.bo-content { padding: 1.5rem 1.6rem; flex: 1; min-width: 0; }

/* ---- Page header ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.55rem; font-weight: 800; color: var(--navy); }
.page-head .sub { color: var(--muted); margin-top: 0.2rem; font-size: 0.95rem; }
.page-actions { display: flex; gap: 0.6rem; }

/* ---- Cards ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,40,70,0.05); }
.card-pad { padding: 1.2rem 1.3rem; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 3px rgba(20,40,70,0.05); }
.kpi .k-label { color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.kpi .k-value { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin-top: 0.3rem; }
.kpi .k-foot { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.kpi.copper { border-left: 4px solid var(--copper2); }
.kpi.navy { border-left: 4px solid var(--navy2); }
.kpi.green { border-left: 4px solid #2f9e44; }
.kpi.violet { border-left: 4px solid #7048e8; }

/* ---- Toolbar ---- */
.toolbar { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.search input { width: 100%; height: 2.6rem; border: 1px solid var(--line); border-radius: 9px; padding: 0 0.9rem; font-size: 0.95rem; outline: none; }
.search input:focus { border-color: var(--copper2); box-shadow: 0 0 0 3px rgba(217,131,36,0.14); }
.muted-count { color: var(--muted); font-size: 0.9rem; }

/* ---- Tables ---- */
.grid-wrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.grid thead th { text-align: left; background: #f7f9fb; color: var(--muted); font-weight: 700;
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.4px; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid tbody td { padding: 0.7rem 0.9rem; border-bottom: 1px solid #eef1f5; }
table.grid tbody tr:hover { background: #fafbfd; }
table.grid tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: 'Consolas', monospace; }

/* grid toolbar */
.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.gt-left { display: flex; gap: 0.6rem; }

/* sortable headers */
table.grid thead th.sortable { cursor: pointer; user-select: none; }
table.grid thead th.sortable:hover { color: var(--copper); }
table.grid thead th .arw { color: var(--copper2); font-size: 0.7rem; }
table.grid thead th.act { width: 1%; text-align: center; }

/* per-column filter row */
tr.filter-row th { padding: 0.35rem 0.5rem 0.5rem; background: #f7f9fb; border-bottom: 1px solid var(--line); }
tr.filter-row input { width: 100%; min-width: 70px; height: 1.9rem; border: 1px solid var(--line); border-radius: 6px;
    padding: 0 0.45rem; font-size: 0.8rem; font-weight: 400; outline: none; }
tr.filter-row input:focus { border-color: var(--copper2); }
td.act { text-align: center; white-space: nowrap; }

/* confirm modal */
.ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.confirm { background: #fff; border-radius: 14px; padding: 1.4rem 1.5rem; max-width: 400px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.confirm h3 { color: var(--navy); margin-bottom: 0.5rem; }
.confirm p { color: var(--muted); margin: 0 0 1.2rem; }
.confirm-actions { display: flex; gap: 0.7rem; justify-content: flex-end; }

/* badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.badge.food { background: #fff0e6; color: #b5651d; }
.badge.modifier { background: #ede7ff; color: #6741d9; }
.badge.ingredient { background: #e6f4ea; color: #2f9e44; }
.badge.on { background: #e6f4ea; color: #2f9e44; }
.badge.off { background: #f1f3f5; color: #868e96; }
.badge.active { background: #e6f4ea; color: #2f9e44; }
.badge.inactive { background: #f1f3f5; color: #868e96; }
.badge.yes { background: #e7f0fb; color: #1f6fd6; }
.badge.no { background: #f1f3f5; color: #868e96; }
.badge.settled { background: #e6f4ea; color: #2f9e44; }
.badge.open { background: #e7f0fb; color: #1f6fd6; }
.badge.void { background: #ffe9e9; color: #e03131; }
.badge.asset { background: #e7f0fb; color: #1f6fd6; }
.badge.liability { background: #fff0e6; color: #b5651d; }
.badge.equity { background: #ede7ff; color: #6741d9; }
.badge.revenue { background: #e6f4ea; color: #2f9e44; }
.badge.expense { background: #ffe9e9; color: #e03131; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 9px;
    padding: 0.55rem 1rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--copper), var(--copper2)); color: #fff; box-shadow: 0 4px 12px rgba(181,101,29,0.25); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--copper2); color: var(--copper); }
.btn-danger { background: #fff; color: #e03131; border-color: #f5c2c2; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.3rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: #47525e; margin-bottom: 0.35rem; }
.field input[type=text], .field input[type=number], .field select, .field textarea {
    width: 100%; height: 2.7rem; border: 1px solid var(--line); border-radius: 9px; padding: 0 0.8rem; font-size: 0.95rem; outline: none; background: #fff; }
.field textarea { height: auto; padding: 0.6rem 0.8rem; min-height: 4.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper2); box-shadow: 0 0 0 3px rgba(217,131,36,0.14); }
.checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: #47525e; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--copper2); }
.form-actions { display: flex; gap: 0.7rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* ---- States ---- */
.state { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.state.err { color: #b3261e; }
.alert { background: #fdecec; border: 1px solid #f5c2c2; color: #b3261e; border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-size: 0.92rem; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(31,75,116,0.2); border-top-color: var(--navy2);
    animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
tr.total-row td { font-weight: 800; border-top: 2px solid var(--line); background: #fbfcfe; }

/* ---- Coming soon ---- */
.soon { text-align: center; padding: 3.5rem 1.5rem; }
.soon .soon-ic { font-size: 3rem; }
.soon h2 { font-size: 1.5rem; color: var(--navy); margin: 0.6rem 0 0.3rem; }
.soon p { color: var(--muted); max-width: 480px; margin: 0.3rem auto; }
.soon .pattern { display: inline-flex; gap: 0.6rem; margin-top: 1.4rem; flex-wrap: wrap; justify-content: center; }
.soon .tag { background: #eef2f6; color: var(--muted); border-radius: 20px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; }

/* ---- Reference-data entry fields ----
   Global rather than scoped to RefDialog: the dialog takes its body as a RenderFragment, so the
   markup belongs to the page that supplies it and a scoped stylesheet would never reach it. */
.rf-row { display: flex; flex-direction: column; gap: 6px; }
.rf-row > label { font-size: .82rem; font-weight: 700; color: #3d4756; }
.rf-in { border: 1px solid #d6dce6; border-radius: 10px; padding: 9px 12px; font-size: .94rem;
    background: #fff; color: #1f2733; width: 100%; }
.rf-in:focus { outline: 2px solid #c6ccf7; border-color: #4f5bd5; }
.rf-in.short { max-width: 170px; }
.rf-hint { color: #8a94a2; font-size: .78rem; line-height: 1.45; }

/* Reveal toggle on the credential fields (Employees).
   The button overlays the right of the input rather than sitting beside it, so the field keeps
   its full width and the row does not reflow when the icon swaps. Padding-right on the input
   reserves the space, otherwise a long password runs under the button. */
.rf-reveal { position: relative; display: block; }
.rf-reveal.short { max-width: 170px; }
.rf-reveal .rf-in { width: 100%; padding-right: 44px; }
.rf-eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    /* 36px painted, but the whole control is a comfortable target — the app's rule of
       paint small, hit large. */
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    color: #8a94a2; border-radius: 8px;
}
.rf-eye:hover:not(:disabled) { color: #4f5bd5; background: #f1f3fe; }
.rf-eye:focus-visible { outline: 2px solid #c6ccf7; outline-offset: 1px; }
.rf-eye .bo-ico { width: 18px; height: 18px; }

/* Empty box: the toggle has nothing to reveal. Faded rather than hidden, so the control does not
   appear and disappear as you type — and it keeps its tooltip, which is where the explanation is. */
.rf-eye:disabled { opacity: .35; cursor: not-allowed; }
.rf-pair { display: flex; gap: 10px; flex-wrap: wrap; }
.rf-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: #3d4756; }
.rf-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.rf-swt { width: 42px; height: 24px; border-radius: 999px; background: #cfd6e0; position: relative; transition: background .15s; }
.rf-swt::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform .15s; }
.rf-sw input:checked + .rf-swt { background: #2e9e63; }
.rf-sw input:checked + .rf-swt::after { transform: translateX(18px); }
.rf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 6px 18px; }
.rf-head h1 { font-size: 1.7rem; margin: 0 0 .3rem; color: #1f2733; }
.rf-lead { color: #5c6674; font-size: 1.02rem; margin: 0; max-width: 70ch; }
.rf-page { max-width: 1100px; margin: 0 auto; padding: 8px 4px; }

/* ---- Tax groups: ordered members ---- */
.tg-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: tgm; }
.tg-members li { background: #f6f8fc; border: 1px solid #e6ecf3; border-radius: 9px; padding: 9px 11px;
    display: flex; flex-direction: column; gap: 8px; }
.tg-m-hd { display: flex; align-items: center; gap: 10px; }
.tg-m-seq { width: 22px; height: 22px; border-radius: 50%; background: #4f5bd5; color: #fff;
    display: grid; place-items: center; font-size: .72rem; font-weight: 800; flex: none; }
.tg-m-nm { flex: 1; font-size: .9rem; font-weight: 650; color: #24313f; }
.tg-m-cd { font-size: .72rem; color: #8a94a2; font-weight: 700; margin-left: 6px; }
.tg-m-rate { font-size: .88rem; font-weight: 700; color: #1f2733; font-variant-numeric: tabular-nums; }
.tg-m-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px dashed #dbe3ee; }
.tg-m-acts .rf-sw { font-size: .82rem; margin-right: auto; }
.tg-total { font-size: .88rem; color: #3d4756; padding: 8px 2px; }

.sts-warn { margin: 14px 6px 0; background: #fdf3e3; border: 1px solid #e8d3a8; color: #8a5a12;
    padding: 10px 14px; border-radius: 10px; font-size: .88rem; }

/* ---- Scheduled pricing: the bulk pricing grid ---- */
.sp2 { max-width: 1280px; margin: 0 auto; padding: 8px 4px; color: #1f2733; }

/* Filter and action bars. Wrap rather than scroll — these are all equally important and hiding
   one behind an overflow is how a filter gets left set without anyone noticing. */
.sp2-bar, .sp2-apply { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 14px 16px; margin: 0 6px 12px; }
.sp2-apply { background: #f7f9fc; }
.sp2-f { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.sp2-f.grow { flex: 1; min-width: 220px; }
.sp2-f.narrow { min-width: 110px; }
.sp2-f > label { font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #8a94a2; }
.sp2-acts { display: flex; gap: 8px; margin-left: auto; }
.sp2-empty p { margin: 0 0 14px; }
/* The zone shown as a fact, not a control — it comes from the schedule and cannot be overridden. */
.sp2-fixed { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px;
    border: 1px dashed #d6dce6; border-radius: 10px; background: #f7f9fc;
    font-size: .92rem; font-weight: 700; color: #1f2733; }
.sp2-fixed-note { font-size: .72rem; font-weight: 600; color: #8a94a2; text-transform: uppercase; letter-spacing: .3px; }
.sp2-basis { display: block; font-size: .66rem; font-weight: 600; color: #8a94a2;
    text-transform: none; letter-spacing: 0; margin-top: 1px; }

.sp2-empty { margin: 0 6px; padding: 48px 20px; text-align: center; color: #8a94a2;
    font-style: italic; background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; }

/* Unsaved work is stated, counted, and reversible. One click here can change fifty prices. */
.sp2-dirty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 6px 12px; padding: 11px 16px; border-radius: 10px;
    background: #fdf3e3; border: 1px solid #e8d3a8; color: #8a5a12; font-size: .88rem; }

.sp2-grid th.chk, .sp2-grid td.chk { width: 34px; text-align: center; }
.sp2-grid tr.sp2-changed { background: #fff8e8; }
.sp2-grid tr.sp2-changed td { border-bottom-color: #e8d3a8; }
.sp2-price { width: 92px; border: 1px solid #d7dfe9; border-radius: 7px; padding: 5px 8px;
    font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums;
    color: #1f2733; background: #fff; }
.sp2-price:focus { outline: 2px solid #c6ccf7; border-color: #4f5bd5; }

/* Buttons shared by the reference screens. */
.rf-btn { border: 1px solid #d6dce6; background: #fff; color: #1f2733; border-radius: 10px;
    padding: 9px 16px; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.rf-btn:hover:not(:disabled) { background: #f1f4f9; }
.rf-btn:disabled { opacity: .5; cursor: default; }
.rf-btn.primary { background: #4f5bd5; border-color: #4f5bd5; color: #fff; }
.rf-btn.primary:hover:not(:disabled) { background: #4450c4; }
.rf-btn.ghost { background: transparent; }
.rf-btn.sm { padding: 6px 12px; font-size: .82rem; }

/* ---- Scheduled pricing: weekday picker ---- */
.sp-days { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-day { border: 1px solid #d6dce6; border-radius: 8px; padding: 5px 10px; font-size: .8rem;
    font-weight: 700; color: #55636f; cursor: pointer; user-select: none; background: #fff; }
.sp-day.on { background: #4f5bd5; border-color: #4f5bd5; color: #fff; }
.sp-day input { display: none; }

/* ---- Purchase order lines ---- */
.po-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.po-lines li { background: #f6f8fc; border: 1px solid #e6ecf3; border-radius: 9px; padding: 9px 11px;
    display: flex; flex-direction: column; gap: 8px; }
.po-l-hd { display: flex; align-items: center; gap: 10px; }
.po-l-seq { width: 22px; height: 22px; border-radius: 50%; background: #4f5bd5; color: #fff;
    display: grid; place-items: center; font-size: .72rem; font-weight: 800; flex: none; }
.po-l-nm { flex: 1; font-size: .9rem; font-weight: 650; color: #24313f; }
.po-l-cd { font-size: .72rem; color: #8a94a2; font-weight: 700; margin-left: 6px; }
.po-l-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px dashed #dbe3ee; }
.po-l-f { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: #6b7684; font-weight: 600; }
.po-l-f input, .po-l-f select { width: 96px; border: 1px solid #d7dfe9; border-radius: 7px;
    padding: 5px 8px; font-size: .85rem; color: #24313f; background: #fff; }
.po-l-tot { margin-left: auto; font-weight: 700; font-size: .9rem; color: #1f2733; }
.po-l-rec { font-size: .72rem; color: #2f9e44; font-weight: 700; }
.po-total { padding: 10px 2px; font-size: .92rem; color: #3d4756; }

/* ---- Receipt settings ---- */
.rc-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 16px; padding: 22px;
    display: flex; flex-direction: column; gap: 14px; max-width: 640px;
    box-shadow: 0 1px 3px rgba(20,30,50,.05), 0 12px 30px rgba(20,30,50,.04); }
.rc-card h4 { margin: 8px 0 0; font-size: 1rem; color: #1f2733; }
.rc-card h4:first-child { margin-top: 0; }
.rc-meta { font-size: .76rem; color: #8a94a2; border-top: 1px solid #eef1f6; padding-top: 12px; }

/* ---- Reports ---- */
.rp-ok { margin-top: 14px; background: #eaf7f0; color: #1c6b45; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.rp-warn { margin-top: 14px; background: #fdf3e3; color: #8a5a12; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }

/* ---- Employees & roles ---- */
.emp-role { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 11px; background: #f6f8fc; border: 1px solid #e6ecf3; border-radius: 9px; }
.emp-role-nm { font-size: .9rem; font-weight: 650; color: #24313f; }
.emp-role-cd { font-size: .72rem; color: #8a94a2; font-weight: 700; margin-left: 6px; }
.emp-sys { font-size: .68rem; color: #b5651d; background: #fff0e6; border-radius: 999px;
    padding: 1px 7px; font-weight: 700; margin-left: 6px; text-transform: uppercase; }
.emp-storegrants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.emp-storegrants li { font-size: .85rem; color: #55636f; }

.rl-module { border: 1px solid #e6ecf3; border-radius: 10px; overflow: hidden; }
.rl-module-hd { background: #f6f8fc; padding: 7px 11px; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; color: #55636f; border-bottom: 1px solid #e6ecf3; }
.rl-perm { display: flex; align-items: center; gap: 9px; padding: 7px 11px; cursor: pointer; }
.rl-perm:hover { background: #f5f8ff; }
.rl-perm-nm { flex: 1; font-size: .88rem; color: #24313f; }
.rl-perm-cd { font-size: .72rem; color: #8a94a2; font-weight: 700; }

/* validation (framework) */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #b32121; color: #fff; padding: 0.7rem 1rem; z-index: 1000; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: 0.6rem; cursor: pointer; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .bo { flex-direction: column; }
    .bo-side { width: 100%; flex: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--glass-line); }
    .form-grid { grid-template-columns: 1fr; }
}

/* =============================================================================================
   Status messages — the ✅ / ⚠️ replacements.

   THE WHOLE POINT IS THAT COLOUR IS NOW OURS TO DECIDE. An emoji carries its own colour baked
   into the font: a warning triangle is yellow-and-black on Windows, flat grey on some Linux
   builds, Apple orange on macOS. That made the colour of a status indicator a property of the
   operating system rather than of whether anything was actually wrong — and on a screen that
   reports whether a ledger balances, that is not a cosmetic problem.

   These are stroked paths at currentColor, so the icon takes the colour of the message it sits
   in: --c-go-text when things are fine, --c-warn when they are not. One decision, one place.
   ============================================================================================= */

.st-msg { display: inline-flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.st-msg .bo-ico { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.st-msg.ok   { color: var(--c-go-text); }
.st-msg.warn { color: var(--c-warn); }

/* The unmapped-tax-class banner sets its own colour on .sts-warn, so the icon only needs sizing
   and a baseline nudge — it inherits the rest. */
.sts-warn .bo-ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }

/* Close buttons. Sized here rather than in the component so each caller keeps control. */
.rd-x .bo-ico { width: 15px; height: 15px; }
#blazor-error-ui .dismiss .bo-ico { width: 14px; height: 14px; vertical-align: -2px; }

/* The access-denied padlock is the one decorative use, and it is big. */
.dn-ic .bo-ico { width: 44px; height: 44px; color: var(--c-text-faint); }