/*
  A business's own admin console — the onboarding surface (design/mockups/03-admin-console.html),
  on top of the shared design system (/shared/retail-engaige.css, loaded first). Internal tool: no
  retailer theming, no brand tokens. A LIGHT UI — declare color-scheme so OS dark mode can't darken
  it. Keep comment prose free of a slash-immediately-after-a-star sequence (it would close the
  comment early and the browser would then eat the next rule).
*/
html, body { color-scheme: light; }
body { background: var(--paper-50); }
html { scroll-behavior: smooth; }

.app { display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
section { scroll-margin-top: 76px; margin-bottom: 44px; }

/* SECTIONS ARE PAGES, not stops on one long scroll (changed 20 Aug 2026 on Andrew's review, to
   match the sibling console: engaigenow/public/dashboard.html .page/.page.active). The sidebar
   picks one and the rest are not rendered — a console that scrolls past six other people's jobs to
   reach yours is the thing being fixed. A CLASS, not the hidden attribute: every one of these
   sections carries author display rules, and `[hidden]` is a user-agent rule any of them beats.
   (The global [hidden] guard further down is still there for everything else.) */
.content > section { display:none; margin-bottom:0; }
.content > section.active { display:block; }

/* ---------- sidebar ---------- */
.sidebar { background: var(--ink-950); color:#fff; padding:20px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1rem; padding: 4px 6px 22px; }
.side-section { font-size:0.625rem; text-transform:uppercase; letter-spacing:.08em; color:#6B7684; padding:14px 10px 6px; }
.side-link { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:9px; font-size:0.875rem; font-weight:500; color:#C6CBD2; cursor:pointer; }
.side-link svg { width:17px; height:17px; flex:none; opacity:.85; }
.side-link.active { background: rgba(255,255,255,.08); color:#fff; }
.side-link.active svg { color: var(--teal-400); opacity:1; }
.side-link:hover:not(.active) { color:#fff; }
.side-business { font-size:0.75rem; color:#9AA3AF; padding:2px 10px 0; }
.side-signout { margin-top:auto; font-size:0.8125rem; color:#9AA3AF; padding:10px; cursor:pointer; }
.side-signout:hover { color:#fff; }
.badge-count { margin-left:auto; background:var(--ember-600); color:#fff; font-size:0.625rem; font-weight:700; border-radius:var(--radius-pill); padding:1px 7px; min-width:18px; text-align:center; }
.badge-count[data-count="0"] { display:none; }

/* ---------- top bar + content ---------- */
.topbar { background:#fff; border-bottom:1px solid var(--ink-150); padding:16px 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:1.25rem; }
.content { padding: 26px 32px 80px; max-width: 1180px; }

.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; gap:16px; }
.section-head h2 { font-size:1.375rem; }
.section-head p { color:var(--ink-500); font-size:0.875rem; margin-top:4px; max-width:560px; }

/* ---------- data table ---------- */
table.dtable { width:100%; border-collapse: collapse; font-size:0.8125rem; }
.dtable th { text-align:left; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); font-weight:700; padding:0 12px 10px; border-bottom:1px solid var(--ink-150); }
.dtable td { padding:12px; border-bottom:1px solid var(--ink-100); vertical-align:middle; }
.dtable tr:last-child td { border-bottom:none; }
.name-cell b { display:block; font-size:0.8125rem; }
.name-cell span { font-size:0.75rem; color:var(--ink-500); }

/* MATCHES public/supplier/styles.css's .pill (built to the owner-approved
   design/mockups/04-supplier-catalogues.html) rather than inventing a second pill shape in this
   repo: same size, same rounding, same inline-flex + gap recipe for when a pill carries an icon
   next to its label. The one addition beyond that recipe is white-space:nowrap — this pill sits
   inside a <table> cell, where supplier's sits inside a flex row (.file-top); a flex ITEM gets a
   free "never shrink below your content" floor from its parent that a table cell never gives,
   which is what let "In stock" wrap onto two lines and look cramped (Andrew, 21 Aug 2026). */
.status-pill { font-size:0.6875rem; font-weight:700; padding:4px 11px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.st-live, .status-approved { color:#146C2E; background:#E7F7EC; }
.st-pilot { color:var(--teal-700); background:var(--teal-100); }
.st-prospect, .status-review { color:#92400E; background:#FFF6E8; }
.status-changes { color:#B42318; background:#FDEEEC; }
.st-none { color:var(--ink-500); background:var(--ink-100); }
.st-chem { color:#7A3B00; background:#FFF4E5; }

/* ---------- onboarding stepper ---------- */
.stepper { display:flex; padding: 18px 4px 4px; }
/* Each step is a BUTTON that opens the section it names — see the note in index.html. The reset is
   here rather than inline because these were <div>s until 20 Aug 2026 and everything below styles
   them by class. */
.step { flex:1; text-align:center; position:relative; background:none; border:none; font:inherit; padding:0; cursor:pointer; }
.step:hover .step-label { color:var(--teal-700); }
.step:focus-visible { outline:2px solid var(--teal-600); outline-offset:4px; border-radius:8px; }
.step:not(:last-child)::after { content:""; position:absolute; top:15px; left:56%; width:88%; height:2px; background:var(--ink-150); z-index:0; }
.step.done:not(:last-child)::after { background:var(--teal-500); }
.step-dot { width:30px; height:30px; border-radius:50%; background:var(--paper-0); border:2px solid var(--ink-200); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; position:relative; z-index:1; font-family:var(--font-mono); font-size:0.75rem; font-weight:700; color:var(--ink-400); }
.step.done .step-dot { background:var(--teal-600); border-color:var(--teal-600); color:#fff; }
.step.current .step-dot { border-color:var(--teal-600); color:var(--teal-700); box-shadow:0 0 0 4px var(--teal-100); }
.step-label { font-size:0.75rem; font-weight:600; color:var(--ink-700); max-width:100px; margin:0 auto; line-height:1.3; }
.step.current .step-label { color:var(--teal-700); }

.claim-box { background: var(--ink-950); color:#fff; border-radius:14px; padding:16px 20px; margin-top:6px; display:flex; align-items:center; gap:16px; }
.claim-box svg { width:26px; height:26px; color:var(--teal-400); flex:none; }
.claim-box .t { font-family:var(--font-display); font-weight:600; font-size:0.9375rem; }
.claim-box .s { font-size:0.8125rem; color:#9AA3AF; margin-top:2px; }

/* ---------- review queue ---------- */
.review-layout { display:grid; grid-template-columns: 1.5fr 1fr; gap:16px; align-items:start; }
.review-row { cursor:pointer; }
.review-row.selected td { background:var(--teal-50); }
.risk-flag-row td:first-child { box-shadow: inset 3px 0 0 var(--safety-border); }
.review-detail { padding:18px; }
.review-detail h3 { font-size:1rem; margin-bottom:4px; }
.review-detail .sub { font-size:0.75rem; color:var(--ink-500); margin-bottom:16px; }
.compare-col { margin-bottom:14px; }
.compare-col .lbl { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500); margin-bottom:6px; }
.ai-box { background:var(--teal-50); border:1px solid var(--teal-100); border-radius:10px; padding:11px 13px; font-size:0.8125rem; line-height:1.5; color:var(--ink-800); }
.src-box { background:var(--paper-100); border:1px dashed var(--ink-200); border-radius:10px; padding:11px 13px; font-size:0.78125rem; line-height:1.5; color:var(--ink-600); font-family:var(--font-mono); }
.review-actions { display:flex; gap:8px; }
.review-actions .btn { flex:1; font-size:0.8125rem; }
.review-empty { padding:26px 18px; text-align:center; color:var(--ink-500); font-size:0.875rem; }

/* ---------- branding ---------- */
.brand-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.swatch-row { display:flex; gap:10px; margin-top:12px; }
.swatch { flex:1; border-radius:10px; height:56px; display:flex; align-items:flex-end; padding:6px 8px; font-family:var(--font-mono); font-size:0.6875rem; font-weight:600; color:#fff; }
.token-list { margin-top:14px; font-size:0.8125rem; }
.token-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ink-100); }
.token-row:last-child { border-bottom:none; }
.token-row .k { color:var(--ink-500); }
.token-row .v { font-family:var(--font-mono); font-weight:600; }
/* The "what shoppers see first" card holds prose and links, not hex codes — it shares .token-row's
   layout but not its monospace, and its values wrap and sit left-aligned against the label. */
#copyGreetingValue, #copyQuestionsValue, #copyPrivacyValue, #copyRetailerName {
  font-family:var(--font-body); font-weight:500; text-align:right; max-width:62%; word-break:break-word;
}
#copyQuestionsValue { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.q-chip { background:var(--paper-100); border:1px solid var(--ink-200); border-radius:999px; padding:2px 10px; font-size:0.75rem; font-weight:500; }
/* Readability corrections, stated where the colours are chosen. Informational, not an error —
   nothing was rejected, the text colour was adjusted so the brand colour could be kept. */
.contrast-notes { margin-top:12px; padding:10px 12px; background:var(--paper-100); border-left:3px solid var(--re-accent); border-radius:6px; }
.contrast-notes p { font-size:0.75rem; color:var(--ink-600); line-height:1.5; margin:0; }
.contrast-notes p + p { margin-top:6px; }
.persona-preview { background:var(--paper-100); border-radius:12px; padding:14px; margin-top:16px; }
.pp-row { display:flex; gap:10px; align-items:flex-start; }
.pp-avatar { width:34px; height:34px; border-radius:50%; flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-display); }
.pp-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-bubble { background:#fff; border:1px solid var(--ink-150); border-radius:12px 12px 12px 3px; padding:10px 12px; font-size:0.8125rem; }

/* THE ASSISTANT'S PHOTO — its own control, its own circle, deliberately unlike the masthead
   logo's wide preview strip below: a retailer once put a face meant for HERE into that wide
   strip, because this one didn't exist. Drawing this preview as an actual circle (not a
   rectangle) is the point — it shows the crop a shopper will really see, not an idealised one. */
.avatar-upload-row { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.avatar-circle { width:56px; height:56px; border-radius:50%; flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-display); font-size:1.25rem; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.avatar-actions label.btn { margin:0; cursor:pointer; }
.avatar-actions .field-note { margin-top:0; }
.avatar-distinguish-note { margin-top:8px; }

/* ---------- QR codes ---------- */
.qr-layout { display:grid; grid-template-columns: 1fr 320px; gap:16px; align-items:start; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:14px; }
.qr-card { background: var(--paper-0); border:1px solid var(--ink-150); border-radius:16px; padding:20px; text-align:center; }
.qr-card .kh { font-family:var(--font-display); font-weight:700; color:var(--teal-700); font-size:0.9375rem; margin-bottom:10px; }
.qr-card .cta { font-size:0.8125rem; color:var(--ink-700); margin-top:10px; font-weight:600; }
.qr-card .code { font-family:var(--font-mono); font-size:0.6875rem; color:var(--ink-400); margin-top:8px; word-break:break-all; }
.qr-svg-wrap { display:flex; justify-content:center; align-items:center; min-height:180px; }
.qr-svg-wrap img { width:180px; height:180px; }
.qr-preview-actions { display:flex; gap:8px; justify-content:center; margin-top:14px; }

.staff-status { display:flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:600; }
.dot-on { width:8px; height:8px; border-radius:50%; background:#22a55e; }
.dot-off { width:8px; height:8px; border-radius:50%; background:var(--ink-300); }

/* ---------- inline forms (add/edit cards) ---------- */
.form-actions { display:flex; gap:8px; margin-top:4px; }
.form-err { color:#B42318; font-size:0.8125rem; margin-top:10px; min-height:1.1em; }
.card-head-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
/* A note that explains what a field is about to do, sitting under the field itself. */
.field-note { font-size:0.75rem; color:var(--ink-500); margin-top:6px; line-height:1.4; }
.inline-add { display:flex; gap:8px; margin-top:8px; }
.inline-add .input { min-width:0; }
.input-prefix { position:relative; }
.input-prefix span { position:absolute; left:14px; top:0; height:44px; display:flex; align-items:center; color:var(--ink-500); font-size:0.9375rem; pointer-events:none; }
.input-prefix input { padding-left:28px; }
.color-field { display:flex; align-items:center; gap:8px; }
.color-field input[type="color"] { width:44px; height:44px; border-radius:var(--radius-md); border:1px solid var(--ink-200); padding:2px; background:var(--paper-0); cursor:pointer; }
.color-field .input { flex:1; }
.dial-row { display:flex; align-items:center; gap:12px; margin-top:10px; }
.dial-row .field-label { flex:0 0 140px; margin:0; }
.dial-row input[type="range"] { flex:1; }
.dial-row .dial-value { font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-500); width:32px; text-align:right; }

/* ---------- row-level actions (table cells) ---------- */
.row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.row-actions .btn-tertiary { padding:0 4px; height:auto; font-size:0.8125rem; }
/* UNSCOPED (review, 21 Aug 2026): this rule used to be .row-actions .btn-danger-text, so the
   Remove-photo (#avatarRemoveBtn) and Remove-logo (#logoRemoveBtn) buttons — both OUTSIDE any
   .row-actions cell — never matched it and rendered shared/retail-engaige.css's plain
   .btn-tertiary teal instead of red. Same specificity as that shared .btn-tertiary rule (one
   class each); this still wins because /shared/retail-engaige.css loads BEFORE /admin/styles.css
   in every console (see index.html's <link> order) and equal specificity falls to source order. */
.btn-danger-text { color:#B42318; }
.btn-danger-text:hover { color:#8f1c12; }
.edit-row td { background:var(--paper-100); padding:16px 14px; }
.edit-row .field-row { margin-bottom:12px; }

/* ---------- stores & departments ---------- */
.store-card { padding:18px; margin-bottom:14px; }
.store-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.store-card-title b { display:block; font-size:0.9375rem; }
.store-card-title span { font-size:0.75rem; color:var(--ink-500); font-family:var(--font-mono); }
.zone-list { margin-top:14px; }
.zone-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--ink-100); }
.zone-row:last-child { border-bottom:none; }
.zone-row .zone-label-display { font-size:0.875rem; font-weight:500; }
.zone-add-toggle { margin-top:10px; }
.zone-inline-form, .store-inline-form { background:var(--paper-100); border-radius:10px; padding:12px 14px; margin-top:10px; }

/* ---------- opening hours ---------- */
/* Seven rows on one grid so the day names, the state and both time boxes line up down the column —
   a week is read vertically, and ragged rows make "which day is that?" a scanning problem. */
.hours-grid { display:grid; gap:8px; }
.hours-row { display:grid; grid-template-columns: 96px 150px 1fr auto 1fr; gap:10px; align-items:center; }
.hours-row .hours-day { font-size:0.875rem; font-weight:600; }
.hours-row .input { height:38px; font-size:0.875rem; }
.hours-row .hours-sep { font-size:0.8125rem; color:var(--ink-500); }
/* A disabled time box still holds a value the person typed before marking the day closed. Muting
   it says "not in use" without wiping what they had. */
.hours-row .input:disabled { background:var(--ink-100); color:var(--ink-400); }
@media (max-width: 720px) {
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-row .hours-day { grid-column: 1 / -1; }
  .hours-row .hours-sep { display:none; }
}

/* ---------- helpers ---------- */
.muted { color:var(--ink-500); }
.loading-row { padding:16px 12px; color:var(--ink-400); font-size:0.8125rem; }

/* ---------- dashboard (the Overview section) ----------
   Ported in shape from the sibling console's #page-overview (engaigenow/public/dashboard.html):
   figure tiles with a tinted icon square, then a chart card, then the cards that carry a job.
   Same grammar, this platform's tokens. */

/* Figure tiles. The number leads, the icon identifies the subject, the label reads as a sentence
   fragment rather than a shouted database column ("Products", not "CATALOGUE"). */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--paper-0); border:1px solid var(--ink-150); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.stat-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.stat-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.stat-ico svg { width:17px; height:17px; }
.stat-ico-teal { background:var(--teal-100); color:var(--teal-700); }
.stat-ico-ink { background:var(--ink-100); color:var(--ink-600); }
.stat-ico-amber { background:var(--safety-bg); color:var(--safety-fg); }
.stat-ico-green { background:var(--fact-verified-bg); color:var(--fact-verified-fg); }
.stat-v { font-size:1.75rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.stat-l { font-size:0.8125rem; color:var(--ink-500); margin-top:3px; }
.stat-note { font-size:0.75rem; color:var(--ink-400); margin-top:8px; }

.card-sub { font-size:0.8125rem; color:var(--ink-500); margin-top:3px; }

/* ONE PADDING FOR EVERY CARD ON THIS DASHBOARD.
   Andrew, 20 Aug 2026, looking at the deployed console: "text so close to the frame and boxes the
   same thing." He is right, and the cause is worth writing down: the SHARED `.card` (shared/
   retail-engaige.css) sets a background, a border and a radius and NO PADDING AT ALL, so every use
   site has to remember its own. The chart and the task cards remembered; the stores card did not,
   and its rows ran to the frame.
   Setting it once, here, on the id — rather than adding padding to the shared `.card`, which every
   other surface on the platform draws on and none of them asked to be changed. */
#overview .card { padding:22px 24px; }
.chart-card, .setup-card { padding:22px 24px; }
.split-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin-bottom:16px; }

/* Seven hand-drawn columns. Each column is a stack: answered on the spot at the bottom in teal,
   sent to a person above it in ember, so the eye reads the good part as the base. */
.chart-legend { display:flex; gap:14px; align-items:center; }
.chart-legend .lg { font-size:0.75rem; color:var(--ink-500); display:flex; align-items:center; gap:6px; }
.chart-legend .lg::before { content:""; width:10px; height:10px; border-radius:3px; }
.chart-legend .lg-answered::before { background:var(--teal-500); }
.chart-legend .lg-escalated::before { background:var(--ember-500); }
.bars { display:flex; align-items:flex-end; gap:10px; height:132px; margin:20px 0 0; }
/* A week with nothing in it still shows its seven days, but does not reserve a chart's worth of
   empty height to do it. */
.bars.is-empty { height:44px; }
.bars .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:3px; }
.bars .stack { width:100%; max-width:44px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.bars .seg { width:100%; }
.bars .seg-escalated { background:var(--ember-500); border-radius:5px 5px 0 0; }
.bars .seg-answered { background:var(--teal-500); }
.bars .stack .seg-answered:first-child { border-radius:5px 5px 0 0; }
.bars .stack .seg:last-child { border-radius:0 0 5px 5px; }
.bars .empty-col { width:100%; max-width:44px; height:3px; background:var(--ink-150); border-radius:2px; }
.bar-days { display:flex; gap:10px; margin-top:8px; }
.bar-days span { flex:1; text-align:center; font-size:0.6875rem; color:var(--ink-400); }
.chart-figures { display:flex; gap:28px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--ink-100); }
.chart-figures div { min-width:96px; }
.chart-figures .f-v { font-size:1.25rem; font-weight:700; }
.chart-figures .f-l { font-size:0.75rem; color:var(--ink-500); margin-top:2px; }
.chart-note { margin-top:14px; color:var(--ink-500); font-size:0.8125rem; line-height:1.5; max-width:560px; }

/* "This needs you" cards. A count, one sentence saying what it means, one button that opens it. */
.task-card { display:flex; align-items:flex-start; gap:14px; }
.task-card .task-body { flex:1; min-width:0; }
.task-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.task-ico svg { width:17px; height:17px; }
.task-ico-amber { background:var(--safety-bg); color:var(--safety-fg); }
.task-ico-teal { background:var(--teal-100); color:var(--teal-700); }
.task-title { font-weight:600; font-size:0.9375rem; }
.task-note { font-size:0.8125rem; color:var(--ink-500); margin-top:4px; line-height:1.45; }
.task-card.is-clear .task-note { color:var(--fact-verified-fg); }

/* Store rows on the dashboard — a read-only summary; the editing lives in its own section. */
.ov-store { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--ink-100); }
#overviewStores { margin-top:16px; }
.ov-store:first-child { padding-top:0; }
.ov-store:last-child { border-bottom:none; padding-bottom:0; }
.ov-store b { font-size:0.9375rem; }
.ov-store small { display:block; color:var(--ink-500); font-size:0.75rem; margin-top:2px; }
.ov-store .ov-fig { flex:none; font-size:0.75rem; font-weight:600; color:var(--ink-600); background:var(--paper-100); border:1px solid var(--ink-150); border-radius:var(--radius-pill); padding:4px 11px; white-space:nowrap; }

/* ---------- setup card ---------- */
.setup-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.setup-next { font-size:1.0625rem; font-weight:700; }
.setup-next em { font-style:normal; color:var(--teal-700); }
.setup-count { font-size:0.75rem; font-weight:600; color:var(--ink-500); white-space:nowrap; padding-top:4px; }
.setup-bar { height:6px; background:var(--ink-100); border-radius:99px; overflow:hidden; margin:14px 0 4px; }
.setup-bar span { display:block; height:100%; background:var(--teal-500); border-radius:99px; transition:width .3s; }

/* ---------- topbar ---------- */
.topbar-meta { display:flex; align-items:center; gap:10px; }
.topbar-biz { font-size:0.8125rem; font-weight:600; color:var(--ink-600); background:var(--paper-100); border:1px solid var(--ink-150); border-radius:var(--radius-pill); padding:5px 13px; }

/* Login gate styles live in /shared/retail-engaige.css (§4 SIGN-IN / GATE CARD) — one copy for
   every gate on the platform, identical to the EngaigeNow hospitality sign-in. Nothing here. */

.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink-950); color:#fff; font-size:0.875rem; font-weight:500; padding:11px 18px; border-radius:10px; box-shadow:var(--shadow-lg); z-index:50; }

[hidden] { display:none !important; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; gap:4px; }
  .side-signout { margin-top:0; }
  .review-layout, .brand-grid, .qr-layout { grid-template-columns: 1fr; }
}

/* ---- New supplier products: the first-load gate -------------------------------------------
   Layout only. Every colour comes from the shared token set — a reviewer should not be able to
   tell this screen was built later than the ones beside it. */
.gate-supplier { margin: 0 0 14px; }
.gate-supplier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gate-supplier-name { font-size: 16px; font-weight: 600; color: var(--ink-900); }
.gate-supplier-sub { font-size: 13px; color: var(--ink-500); line-height: 1.6; margin-top: 2px; }
.gate-count { font-size: 13px; color: var(--ink-500); white-space: nowrap; }
.gate-bar { height: 4px; background: var(--ink-100); border-radius: 4px; overflow: hidden; margin: 10px 0 0; }
.gate-bar span { display: block; height: 100%; background: var(--teal-600); }
.gate-status { font-size: 13px; margin-top: 8px; line-height: 1.6; }
.gate-status-good { color: var(--teal-700); }
.gate-status-bad { color: var(--ember-700, #9A3412); }
.gate-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gate-bulk-note { font-size: 12px; color: var(--ink-400); }

.gate-record { padding: 16px 18px; margin: 0 0 10px; }
.gate-head { display: flex; gap: 14px; }
.gate-photo { width: 88px; height: 88px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--ink-100); }
.gate-photo-empty { background: var(--ink-100); }
.gate-title { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.gate-desc { font-size: 13px; color: var(--ink-500); line-height: 1.5; margin: 3px 0 6px; }
.gate-link { font-size: 12px; color: var(--teal-700); text-decoration: none; }
.gate-link:hover { text-decoration: underline; }

.gate-facts { width: 100%; font-size: 13px; margin-top: 12px; border-top: 1px solid var(--ink-100); }
.gate-facts td { padding: 4px 0; }
.gate-facts td:first-child { color: var(--ink-500); width: 42%; }
.gate-facts .muted { color: var(--ink-400); }

.gate-actions { display: flex; gap: 8px; margin-top: 14px; }
.gate-actions .btn { flex: 1; }
.gate-reasons { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-100); display: grid; gap: 6px; }
.gate-reasons[hidden] { display: none; }
.gate-reasons-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.gate-reasons-sub { font-size: 13px; color: var(--ink-500); line-height: 1.6; margin-bottom: 4px; }
.gate-reasons .btn { justify-content: flex-start; text-align: left; }
.gate-reasons-note { font-size: 12px; color: var(--ink-400); line-height: 1.6; margin-top: 4px; }
.gate-empty { padding: 18px; font-size: 14px; color: var(--ink-500); }

/* SIGN-IN LINK. This block left with the Suppliers section on 7 Aug 2026, and came BACK on 20 Aug
   when the Super Admin console's duplicate Users list was deleted from its business panel (Andrew:
   "delete the stuff in the side panel"). Inviting somebody into a business belongs in that
   business's own console — CLAUDE.md §0.1 — and the panel was the only place showing the link the
   API has always returned. Invite EMAIL is blocked-external on this platform, so a console that
   creates an account and shows no link creates an account nobody can sign into.
   Same component, same wording as public/super-admin/styles.css's copy. */
.invite-link { background: var(--paper-100); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--ink-150); }
.invite-link-title { font-size: 0.875rem; font-weight: 700; color: var(--ink-900); }
.invite-link-note { font-size: 0.8125rem; color: var(--ink-500); line-height: 1.6; margin: 6px 0 0; }
.invite-link-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.invite-link-value { flex: 1; font-size: 0.75rem; }
.invite-link-row .btn { white-space: nowrap; }
.invite-link-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; }
.invite-link-mail { font-size: 0.75rem; color: var(--ink-500); line-height: 1.6; }


/* ---------- managing a business as the platform team ----------
   See the banner's own note in index.html. Loud on purpose: it is a safety affordance, not
   decoration, and it must survive scrolling because the console below it is long. */
/* Colour comes from the DASHBOARD's own palette (owner, 8 Aug 2026: "change the colour to the
   dashboard colour — I think this colour came from the Karoo hardware demo"). He was right that it
   did not belong to this platform: it was a hardcoded #7c2d12 that matched no token in
   shared/retail-engaige.css. Not literally Karoo's either — that tenant's seeded brand primary is
   #B5502F — so it was an off-palette value answering to nobody. --ink-950 is the sidebar's own
   colour, so the banner now reads as part of the console rather than an alert from somewhere else.
   The amber dot and the sticky position stay: this is still a safety affordance, and it still has
   to be noticed. */
.acting-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--ink-950); color: #fff;
  font-size: 0.8125rem; line-height: 1.4;
}
.acting-bar .acting-text { flex: 1; min-width: 0; }
.acting-bar b { font-weight: 700; }
.acting-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: none;
}
.acting-bar .btn { flex: none; background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.acting-bar .btn:hover { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- who we buy from (docs/22 §5, increment B) ---------- */
/* A tick-list, not a table: the retailer is answering one question per row ("do we buy from
   them?"), and a table implies columns of facts they are meant to compare. */
.stocking-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--ink-100); font-size:0.8125rem; cursor:pointer; }
.stocking-row:last-child { border-bottom:none; }
.stocking-row input[type="checkbox"] { width:16px; height:16px; accent-color:var(--teal-700); flex:none; }
/* A derived supplier is locked ON — the tick states a fact about the shelves, not a preference.
   Dimming the CONTROL rather than the row keeps the supplier's name at full contrast: it is still
   a live supplier, it just is not the retailer's to switch off. */
.stocking-row input[type="checkbox"]:disabled { cursor:not-allowed; opacity:.55; }
.stocking-row input[type="checkbox"]:disabled + .stocking-name { cursor:default; }
.stocking-name { font-weight:600; color:var(--ink-900); }
.stocking-row .field-note { margin-left:auto; }

/* ---------- THE MASTHEAD EDITOR (what shoppers see first) ----------
   The preview is a real strip, painted with the tenant's own corrected colours, so a retailer
   judges their logo against the header it will actually sit in rather than against a white card. */
.masthead-editor { margin-top:14px; }
.masthead-preview {
  display:flex; align-items:center; gap:10px;
  padding:0 14px; height:52px; border-radius:10px;
  background:var(--ink-950); color:#fff; overflow:hidden;
}
.masthead-preview img { object-fit:contain; width:auto; }
.masthead-preview span { font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.masthead-controls { margin-top:14px; }
.logo-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.logo-actions label.btn { margin:0; cursor:pointer; }
.logo-actions .field-note { margin-top:0; }

/* ---------- Collapsible list sections ---------- */
/* A long list keeps only its heading until asked (owner, 20 Aug 2026). <details> rather than a
   scripted accordion — native keyboard and screen-reader behaviour, and this console loads no
   third-party script. */
.list-collapse { }
.list-collapse__toggle {
  cursor: pointer;
  list-style: none;
  padding: 10px 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent, #1f6f5c);
  user-select: none;
}
.list-collapse__toggle::-webkit-details-marker { display: none; }
/* The chevron is drawn here rather than left to the browser's default marker, which differs across
   engines and cannot be positioned. */
.list-collapse__toggle::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: 8px;
  vertical-align: middle;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
}
.list-collapse[open] > .list-collapse__toggle::before { transform: rotate(90deg); }
.list-collapse[open] > .list-collapse__toggle { color: var(--muted, #6b7280); font-weight: 500; }
.list-collapse__toggle:focus-visible { outline: 2px solid var(--accent, #1f6f5c); outline-offset: 2px; }
/* Short list: nothing to hide, so the control is not offered at all rather than left as a dead
   affordance the reader has to test. */
.list-collapse--always-open > .list-collapse__toggle { display: none; }