:root {
  color-scheme: light dark;
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f0f3f6;
  --border: #d0d7de;
  --border-soft: #eaeef2;
  --text: #1f2328;
  --muted: #6e7781;
  --pos: #1a7f37;
  --neg: #cf222e;
  --accent: #1f6feb;
  --accent-soft: #4493f8;
  /* Warning (amber) and info (blue): one of each, replacing five hand-picked ambers
     and two blues. --warn-fill is the solid swatch, --warn the readable text colour. */
  --warn: var(--warn);
  --warn-fill: #d4a72c;
  --info: #0969da;
  /* Chart colours: the neutral bar, and beverage in the food / beverage / sundry split. */
  --chart-neutral: #7d8590;
  --cat-beverage: #8250df;

  /* One type scale for all four sites (dashboard, /report, /admin, /payments). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.72rem;    /* 11.5px — chips, table captions, fine print */
  --fs-sm: 0.8125rem;  /* 13px — secondary text, labels, dense tables */
  --fs-base: 0.875rem; /* 14px — body copy, table cells, controls */
  --fs-md: 1rem;       /* 16px — section headings, prominent controls */
  --fs-lg: 1.15rem;    /* card totals, store headings */
  --fs-xl: 1.25rem;    /* page heading */
  --fs-2xl: 1.5rem;    /* headline figures */
  --fs-3xl: 1.8rem;    /* Coldwatch temperatures */

  /* One page width everywhere: fills a desktop screen up to 1560px, shrinks below. */
  --page-max: 1560px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2230;
    --border: #30363d;
    --border-soft: #21262d;
    --text: #e6edf3;
    --muted: #8b949e;
    --pos: #3fb950;
    --neg: #f85149;
    --accent: #4493f8;
    --accent-soft: #388bfd;
    --warn: #d29922;
    --warn-fill: #bb8009;
    --info: #58a6ff;
    --cat-beverage: #a371f7;
  }
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  margin: 0;
  padding: 1rem;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 700px) { body { padding: 1.5rem; } }

/* Buttons and form controls take the page font. Browsers otherwise draw them in
   their own default (Arial 13.3px, monospace digits in date fields), which is
   why every tab, button and input used to look slightly off. */
button, input, select, textarea { font: inherit; color: inherit; }

header, nav#tabs, nav#subtabs, main#panel { max-width: var(--page-max); margin-inline: auto; }

/* --- Header --- */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.logo { height: 36px; width: 36px; flex-shrink: 0; }
h1 { font-size: var(--fs-xl); margin: 0; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: var(--fs-base); color: var(--muted); }

#refresh {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}
#refresh:hover { border-color: var(--accent); }
#refresh:disabled { opacity: 0.6; cursor: default; }
#refresh .refresh-arrow { display: inline-block; } /* inline spans can't rotate */
#refresh.spinning .refresh-arrow, .spinning .refresh-arrow { animation: spin 0.8s linear infinite; }
/* Loading states: a turning arrow so a wait reads as live, not stuck. */
.live-spin { display: inline-block; animation: spin 0.9s linear infinite; margin-right: 0.35rem; }
.refresh-arrow { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

#status { font-size: var(--fs-sm); }
#status.error { color: var(--neg); }

.toggle { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 34px; height: 20px; flex-shrink: 0; margin: 0;
  background: var(--border); border-radius: 999px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.toggle input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.toggle input[type="checkbox"]:checked { background: var(--pos); }
.toggle input[type="checkbox"]:checked::before { transform: translateX(14px); }

/* --- Tabs --- */
nav#tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
nav#tabs::-webkit-scrollbar { display: none; }
/* Period pills under the Trading tab — the same strip, one size down. */
nav#subtabs { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; margin: -0.5rem auto 1rem; padding: 0 0 0.25rem; }
nav#subtabs[hidden] { display: none; }
nav#subtabs::-webkit-scrollbar { display: none; }
.subtab {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 0.25rem 0.7rem; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.subtab:hover { color: var(--text); background: var(--surface-2); }
.subtab.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* Ten tabs fit one row on a desktop; should more arrive, wrap them rather than
   hide Complaints and Coldwatch behind a scrollbar nobody can see. Phones
   keep the swipeable strip. */
@media (min-width: 900px) { nav#tabs { flex-wrap: wrap; row-gap: 0.3rem; } }
.tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.tab-alert {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-left: 0.4rem;
  border-radius: 999px; background: var(--neg); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}

/* --- Stores + cards --- */
.store {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.store h2 { margin: 0 0 0.85rem; font-size: var(--fs-lg); }
.store h2 .muted { font-weight: 400; font-size: var(--fs-base); color: var(--muted); }

.cards {
  display: grid;
  /* 180px lets all six cards (turnover, covers, spend, bookings, labour,
     projection) sit on one row from a 1280px screen up; narrower screens wrap. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.card {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card .label { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The comparison line sits at the foot of every card, so SDLY lines up across a row. */
.card > .delta:first-of-type { margin-top: auto; padding-top: 0.4rem; }
.card .delta { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The full six-card row (with labour): the bookings table gets a little more room than the rest. */
@media (min-width: 1200px) { .cards:has(> .card:nth-child(6):last-child) { grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr 1fr; } }
.card .value { font-size: var(--fs-2xl); font-weight: 700; }

.split-rows { display: flex; flex-direction: column; gap: 0.15rem; }
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: var(--fs-base); line-height: 1.3rem; white-space: nowrap; }
.srow .sk { color: var(--muted); font-size: var(--fs-sm); }
.srow .sv { font-weight: 600; font-variant-numeric: tabular-nums; }
.srow.total { margin-top: 0.2rem; padding-top: 0.3rem; border-top: 1px solid var(--border-soft); }
.srow.total .sk { color: var(--text); font-weight: 600; }
.srow.total .sv { font-size: var(--fs-lg); font-weight: 700; }

.delta { display: block; font-size: var(--fs-sm); margin-top: 0.4rem; color: var(--muted); }
.delta.good { color: var(--pos); }
.delta.bad { color: var(--neg); }
/* Compact inline SDLY chip trailing a row value. */
.sd { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.sd.good { color: var(--pos); }
.sd.bad { color: var(--neg); }

/* Bookings rows share the Lunch / Dinner rows' pitch (1.3rem + the 0.15rem gap), and the
   card label sits in the header row, so the first rows line up with the neighbouring cards. */
.bk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; table-layout: fixed; }
/* 2.5rem holds a year's "1 185" / "22.3k" with no left padding (the figures are
   right-aligned, so the gap comes from the cell to their left); any wider and the
   labels ("Cancelled") clip in a 1280px card, which is 189px across. */
.bk-table col.bk-n { width: 2.5rem; }
.bk-table th { color: var(--muted); font-weight: 600; text-align: right; padding: 0 0.18rem 0.5rem; font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; vertical-align: top; }
.bk-table th:first-child { text-align: left; padding-left: 0; }
.bk-table th.bk-label { text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; }
.bk-table td.bk-k { overflow: hidden; text-overflow: ellipsis; }
.bk-table td { text-align: right; padding: 0 0.18rem; height: 1.45rem; white-space: nowrap; }
.bk-table td:first-child { padding-left: 0; }
.bk-table td:not(:first-child), .bk-table th:not(:first-child) { padding-left: 0; }
.bk-table td.bk-k { padding-right: 0.35rem; }
.bk-table td.bk-k { text-align: left; color: var(--muted); }
.bk-table td.bk-t { font-weight: 700; }
.bk-table tr.bk-total td { border-top: 1px solid var(--border-soft); padding-top: 0.3rem; font-weight: 600; }
.bk-table tr.bk-total td.bk-k { color: var(--text); }
.bk-table tr.bk-neg td { color: var(--muted); }

/* Financials table (report form + display) */
.fin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 340px; }
.fin-table th { text-align: right; color: var(--muted); font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.fin-table th:first-child { text-align: left; }
.fin-table td { text-align: right; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.fin-table td.fin-row { text-align: left; color: var(--muted); font-weight: 600; }
.fin-table input { width: 100%; min-width: 70px; padding: 0.4rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); text-align: right; }
.rand-input { display: flex; align-items: center; gap: 0.25rem; }
.rand-input .rand-pre { color: var(--muted); font-size: var(--fs-base); }
.rand-input input { min-width: 60px; }
/* APH is computed from covers and turnover, never typed — styled so it reads as
   a result rather than an empty field waiting for a number. */
.fin-table input.derived { background: var(--surface-2); color: var(--muted); cursor: default; }

.projection-card { background: var(--surface-2); }
.projection-card .value { margin: 0.1rem 0 0.1rem; font-size: var(--fs-xl); white-space: nowrap; }
.projection-card .delta { margin-top: 0.15rem; }
.sub-metric + .sub-metric { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }

.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); font-size: var(--fs-md); }
.empty.error { color: var(--neg); }
.muted { color: var(--muted); }

/* --- Forecast --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.forecast-chart { margin: 0.5rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc-svg { width: 100%; height: auto; display: block; min-width: 480px; }
.fc-bar { fill: var(--chart-neutral); }
.fc-bar.fc-weekend { fill: var(--accent-soft); }
.fc-bar:hover { fill: var(--accent); }
.fc-bar.fc-closed { fill: var(--border); opacity: 0.5; }
.fc-x { fill: var(--muted); font-size: 10px; }
.forecast-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); margin-top: 0.25rem; min-width: 520px; }
.forecast-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.forecast-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-soft); }
.forecast-table th.num, .forecast-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-dim { color: var(--muted); font-size: var(--fs-sm); }
.forecast-accuracy { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.acc-history { margin-top: 1rem; }
.acc-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.3rem; }
.acc-title.acc-sub { margin-top: 0.6rem; }
.acc-note { font-size: var(--fs-xs); margin-top: 0.3rem; }
.acc-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acc-svg { width: 100%; height: auto; display: block; min-width: 480px; }
.acc-line { stroke: var(--accent); stroke-width: 2; }
.acc-svg circle { fill: var(--accent); }
.acc-grid { stroke: var(--border-soft); stroke-width: 1; }
.acc-lbl { fill: var(--muted); font-size: 9px; }
.fc-drivers { font-size: var(--fs-sm); }
.fc-driver { white-space: nowrap; }
.fc-driver.good { color: var(--pos); }
.fc-driver.bad { color: var(--neg); }
.fc-closed-row td { color: var(--muted); }
.fc-closed-tag { display: inline-block; padding: 0 0.4rem; border-radius: 3px; background: var(--border); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hol-tag { display: inline-block; padding: 0 0.35rem; border-radius: 3px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.hol-tag.public { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
.hol-tag.school { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.fc-holiday-row > td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.fc-school-row > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* --- Monthly turnover --- */
.section-note { color: var(--muted); font-size: var(--fs-base); margin: 0 0 1rem; }
.monthly-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 520px; }
.monthly-table th { text-align: right; color: var(--muted); font-weight: 600; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.monthly-table th:first-child { text-align: left; }
.monthly-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border-soft); text-align: right; }
.monthly-table td.mlabel { text-align: left; color: var(--muted); font-weight: 600; }
.monthly-table td.mono { font-variant-numeric: tabular-nums; }
.monthly-table .mnum { font-weight: 600; }
.monthly-table .yoy { display: block; font-size: var(--fs-xs); }
.monthly-table .yoy.good { color: var(--pos); }
.monthly-table .yoy.bad { color: var(--neg); }
.monthly-table .yoy.mtd { color: var(--muted); font-style: italic; }
.monthly-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; }

/* KPI tab — reuses the monthly-table look, plus click-to-expand month rows. */
/* Fixed layout so the four metric columns stay equal width and their numbers
   line up down the card, rather than each column sizing to its own content. */
/* Day-of-week filter above the KPI cards. */
.kpi-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}
.kpi-filter-label {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-right: 0.25rem;
}
.dow-chip, .store-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap; /* a chip never breaks inside itself; its row wraps instead */
}
.dow-chip:hover, .store-chip:hover { color: var(--text); background: var(--surface-2); }
.dow-chip.active, .store-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.kpi-filter-note { margin-top: -0.4rem; }

.kpi-table, .kpi-daily { table-layout: fixed; }
.kpi-table { min-width: 860px; }
.kpi-table th:first-child, .kpi-daily th:first-child { width: 16%; }
.kpi-table th:not(:first-child) { width: 21%; }
.kpi-daily th:not(:first-child) { width: 28%; }
/* Weekday-filtered: no Food & Bev column, so the rest widen. */
.kpi-table.kpi-nofnb { min-width: 700px; }
.kpi-table.kpi-nofnb th:first-child { width: 19%; }
.kpi-table.kpi-nofnb th:not(:first-child) { width: 27%; }
/* COGS working, count to count — narrower columns, seven of them. */
.kpi-stock { min-width: 780px; font-size: var(--fs-sm); margin-bottom: 0.9rem; }
.kpi-stock th, .kpi-stock td { padding: 0.3rem 0.5rem; }
.basis {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.3rem;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: var(--fs-xs); color: var(--muted); vertical-align: middle;
}
.kpi-table tr.kpi-row, .kpi-table tr.kpi-year { cursor: pointer; }
.kpi-table tr.kpi-row:hover td, .kpi-table tr.kpi-year:hover td { background: rgba(127, 127, 127, 0.08); }
/* Each year collapses to a totals line; its months indent when opened. */
.kpi-table tr.kpi-year > td { border-top: 1px solid var(--border); }
.kpi-table tbody tr.kpi-year:first-child > td { border-top: none; }
.kpi-table tr.kpi-year td.mlabel { color: var(--text); }
.kpi-table tr.kpi-nested td.mlabel { padding-left: 1.9rem; font-weight: 500; }
.kpi-table td.mlabel { white-space: nowrap; }
.kpi-arrow { display: inline-block; width: 1em; color: var(--muted); font-size: 0.8em; }
.kpi-table .sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kpi-table .delta { margin-top: 0.15rem; font-size: var(--fs-xs); }
tr.kpi-drill > td { padding: 0.25rem 0.6rem 1rem; background: rgba(127, 127, 127, 0.04); }
.kpi-daily { min-width: 740px; font-size: var(--fs-sm); }
.kpi-daily-note { margin: 0.35rem 0 0.5rem; }

/* --- Coldwatch --- */
/* auto-fill, not auto-fit: every store's cards share one column width, so the two stores line up; 135px fits nine a row from 1440px. */
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0.75rem; } /* 145, not 135: a freezer's "-17.8°C" needs 111px inside the card's padding */
.cw-unit { border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.75rem 0.9rem; position: relative; min-width: 0; }
/* Over the limit but inside the alert window is amber (as its badge); only an alerting unit is red. */
.cw-unit.over { border-color: var(--warn-fill); background: color-mix(in srgb, var(--warn-fill) 8%, transparent); }
.cw-unit.alert { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 6%, transparent); }
.cw-unit.alert { box-shadow: 0 0 0 2px color-mix(in srgb, var(--neg) 25%, transparent); }
.cw-unit.warn { border-color: var(--warn-fill); background: color-mix(in srgb, var(--warn-fill) 7%, transparent); }
.cw-unit.warn .cw-temp { color: var(--warn); }
.cw-unit.snoozed { border-color: var(--border); opacity: 0.8; }
.cw-unit.stale .cw-temp { color: var(--muted); }
/* Name in two lines' height (clamped; full name on hover) and the kind beneath it, so every temperature sits at the same height. */
.cw-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cw-kind { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); text-transform: capitalize; }
.cw-temp { font-size: var(--fs-3xl); font-weight: 700; margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.cw-unit.alert .cw-temp, .cw-unit.snoozed .cw-temp { color: var(--neg); }
.cw-unit.over .cw-temp { color: var(--warn); }
.cw-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; font-size: var(--fs-xs); color: var(--muted); }
.cw-meta > span { white-space: nowrap; }
.cw-stale { color: var(--neg); }
.cw-badge { margin-top: 0.4rem; display: inline-block; background: var(--neg); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; letter-spacing: 0.04em; }
.cw-badge.warn { background: var(--warn-fill); color: #222; }
.cw-badge.muted { background: var(--muted); }
.cw-warn-count { font-size: var(--fs-xs); font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn-fill) 15%, transparent); padding: 0.1rem 0.5rem; border-radius: 999px; }
.cw-stale-count { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 0.1rem 0.5rem; border-radius: 999px; }
.cw-over-count { font-size: var(--fs-xs); font-weight: 600; color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); padding: 0.1rem 0.5rem; border-radius: 999px; }
.cw-all-ok { font-size: var(--fs-xs); font-weight: 600; color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); padding: 0.1rem 0.5rem; border-radius: 999px; }

/* --- Shop report form (standalone /report page) --- */
.report-main { max-width: var(--page-max); margin: 0 auto; }
.report-page header { max-width: var(--page-max); margin-inline: auto; }
#report-form fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; background: var(--surface); }
#report-form legend { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); padding: 0 0.4rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-sm); color: var(--muted); }
.field.wide { margin-top: 0.75rem; }
.field input, .field select, .field textarea {
  padding: 0.5rem 0.6rem; font-size: var(--fs-md); border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit;
}
.field textarea { resize: vertical; }
.submit-btn { padding: 0.6rem 1.2rem; font-size: var(--fs-md); font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; cursor: pointer; }
.submit-btn:hover { filter: brightness(1.05); }
.submit-btn:disabled { opacity: 0.5; cursor: default; }
.submit-btn.as-link { display: inline-block; text-decoration: none; }
.submit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.finalize-btn { background: var(--pos); }
.next-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.submit-hint { font-size: var(--fs-sm); margin: 0.5rem 0 0; }
.lock-note { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); border: 1px solid var(--neg); color: var(--neg); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 1rem; font-weight: 600; font-size: var(--fs-base); }

/* --- Report prompt screen --- */
/* The first-step screens (/report's venue-date-role prompt, /login) are a centred card,
   so their narrow column reads as a dialog on the full-width page. */
.prompt { max-width: 640px; margin: 1rem auto 0; padding: 1.5rem 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.prompt .prompt-step:last-of-type { margin-bottom: 1.25rem; }
.prompt-step { margin-bottom: 1.5rem; }
.prompt-q { font-size: var(--fs-md); font-weight: 700; margin-bottom: 0.6rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.choice {
  display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start;
  padding: 0.9rem 1rem; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left;
}
.choice:hover { border-color: var(--accent-soft); }
.choice.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.choice-title { font-size: var(--fs-md); font-weight: 700; }
.choice-sub { font-size: var(--fs-sm); color: var(--muted); }
.big-date { padding: 0.7rem 0.8rem; font-size: var(--fs-md); border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.date-weekday { margin-left: 0.75rem; font-weight: 700; color: var(--accent); }
#prompt-continue:disabled { opacity: 0.5; cursor: default; }
.form-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem; margin-bottom: 1rem; background: var(--surface-2); border-radius: 10px; font-weight: 600; }

/* --- Discounts / wastage rows --- */
.disc-head, .disc-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr 2rem; gap: 0.4rem; align-items: center; }
.disc-head { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; padding: 0 0.1rem; }
.disc-row { margin-bottom: 0.4rem; }
.disc-row input { padding: 0.45rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.disc-del { border: 1px solid var(--border); background: transparent; color: var(--neg); border-radius: 6px; cursor: pointer; padding: 0.35rem; font-size: var(--fs-base); }
.disc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 360px; }
.disc-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.2rem 0.5rem; border-bottom: 1px solid var(--border); }
.disc-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-soft); }
.rep-status { white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 0.1rem 0.5rem; border-radius: 999px; }

/* --- Shop reports display tab --- */
.reports-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.reports-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: center; }
.reports-filters label { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }
.reports-filters select, .reports-filters input { padding: 0.4rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: inherit; }
/* A select sizes to its longest option ("Aurtumn / Noxolo…" on Chef), which pushed Shift onto a second row at 1280px. */
.reports-filters select { max-width: 11rem; }
#rep-q { min-width: 200px; }
.reports-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.reports-actions > * { white-space: nowrap; }
.danger-btn { padding: 0.5rem 0.9rem; font-size: var(--fs-base); font-weight: 600; color: var(--neg); background: transparent; border: 1px solid var(--neg); border-radius: 8px; cursor: pointer; }
.danger-btn:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: var(--fs-sm); }
.rep-check { margin-right: 0.15rem; }
.rep-final { font-size: var(--fs-xs); font-weight: 700; color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); padding: 0.1rem 0.5rem; border-radius: 999px; }
.rep-pdf { font-size: var(--fs-sm); color: var(--accent); text-decoration: none; margin-left: 0.4rem; }
.rep-pdf:hover { text-decoration: underline; }
.rec-editor { border: 1px solid var(--accent); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; background: var(--surface); }
.rec-title { font-weight: 700; margin-bottom: 0.75rem; }
.rec-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.rec-row label { width: 170px; flex-shrink: 0; font-size: var(--fs-base); color: var(--muted); }
.rec-row input { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.rec-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.report-card .rep-meta { color: var(--muted); font-size: var(--fs-base); margin-bottom: 0.6rem; }
.rep-fin { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0.6rem 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: 0.75rem; }
.rep-fin > div { display: flex; flex-direction: column; }
.rep-fin .rk { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.rep-fin .rv { font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-block { margin-top: 0.6rem; }
.rep-block .rep-h { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.rep-block .rep-t { font-size: var(--fs-base); line-height: 1.45; }

/* --- Closures admin --- */
.admin { margin: 1rem 0 0; }
.admin summary { cursor: pointer; color: var(--muted); font-size: var(--fs-base); font-weight: 600; }
.admin-body { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.admin-note { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 0.75rem; }
.closure-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.closure-form select, .closure-form input, .closure-form button { padding: 0.4rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: inherit; }
.closure-form label { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; gap: 0.3rem; align-items: center; }
.closure-form button { cursor: pointer; font-weight: 600; border-color: var(--accent); }
.cl-msg { min-height: 1.1rem; font-size: var(--fs-sm); margin: 0.5rem 0; }
.cl-msg.good { color: var(--pos); }
.cl-msg.bad { color: var(--neg); }
.cl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
.cl-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.cl-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-soft); }
.cl-del { cursor: pointer; font-size: var(--fs-xs); padding: 0.15rem 0.5rem; border: 1px solid var(--neg); color: var(--neg); background: transparent; border-radius: 4px; }

/* --- Cashup step (FOH report) --- */
.step-h { font-size: var(--fs-md); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 1.25rem 0 0.6rem; }
.step-h:first-child { margin-top: 0; }
.cu-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.6rem; }
.cu-banner.warn, .cu-banner.ok { padding: 0.5rem 0.7rem; border-radius: 8px; }
.cu-banner.warn { border: 1px solid color-mix(in srgb, var(--neg) 45%, var(--border)); background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.cu-banner.ok { border: 1px solid color-mix(in srgb, var(--pos) 45%, var(--border)); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.cu-banner .cu-note { flex-basis: 100%; color: var(--text); font-weight: 600; }
.cu-banner .cu-note.ok { color: var(--pos); font-weight: 500; }
.cu-unity td { white-space: nowrap; }
.cu-unity tr.cu-strong td { font-weight: 700; }
.cu-unity tr.cu-dim td { color: var(--muted); }
.cu-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.cu-row { display: grid; grid-template-columns: 1.4fr 1fr 2rem; gap: 0.4rem; align-items: center; }
.cu-rows.with-till .cu-row { grid-template-columns: 1.4fr 1fr 1fr 2rem; }
.cu-row input, .cu-row select { padding: 0.5rem 0.6rem; font-size: var(--fs-md); border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; }
.cu-row .rand-input { display: flex; align-items: center; gap: 0.3rem; }
.cu-row .rand-input input { text-align: right; }
.rand-pre { color: var(--muted); font-size: var(--fs-base); }
.cu-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border-soft); font-size: var(--fs-base); color: var(--muted); }
.cu-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.cu-chip { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: var(--fs-base); }
.cu-chip.good { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.cu-chip.bad { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.cu-till-block + .cu-till-block { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.cu-till-h { font-weight: 700; font-size: var(--fs-base); margin-bottom: 0.4rem; }
.cu-other-table td:nth-child(2), .cu-other-table td:nth-child(4) { white-space: nowrap; }
/* Fixed column widths so the Bo-Vine and Attic tables (one under the other in
   the same section) put Unity, Declared and Variance at the same x. The label
   column takes the remainder and wraps. */
.cu-other-table { table-layout: fixed; }
.cu-other-table th:nth-child(2) { width: 130px; }
.cu-other-table th:nth-child(3) { width: 180px; }
.cu-other-table th:nth-child(4) { width: 130px; }
.cu-other-table td:first-child { overflow-wrap: break-word; }
.cu-other-table .rand-input { display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.cu-other-table .rand-input input { max-width: 140px; }
.cu-list td.cu-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.disc-table th.cu-amt, .disc-table td.cu-amt { text-align: right; }
.cu-list input { width: 100%; min-width: 200px; padding: 0.4rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.cu-list input:placeholder-shown { border-color: color-mix(in srgb, var(--neg) 55%, var(--border)); }
.cu-var-reason:placeholder-shown { border-color: color-mix(in srgb, var(--neg) 55%, var(--border)); }

/* --- Cashups tab --- */
.cu-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.cu-strip .tile { border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem; background: var(--surface); }
.cu-strip .tile h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); }
.cu-strip .tile .kv { display: flex; justify-content: space-between; font-size: var(--fs-base); padding: 0.1rem 0; }
.cu-strip .tile .kv span:first-child { color: var(--muted); }
.cu-strip .tile .kv b { white-space: nowrap; margin-left: 0.5rem; } /* the figure never wraps; a long label wraps instead */
.cu-card .cu-meta { color: var(--muted); font-size: var(--fs-base); margin-bottom: 0.6rem; }
.cu-card details { margin-top: 0.5rem; }
.cu-card summary { cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.cu-card .cu-reasons { font-size: var(--fs-base); line-height: 1.45; margin-top: 0.4rem; }
.cu-card .cu-reasons b { color: var(--neg); }
.rep-xlsx { font-size: var(--fs-sm); color: var(--accent); text-decoration: none; margin-left: 0.4rem; }
.rep-xlsx:hover { text-decoration: underline; }

/* --- Discount bill bubble (bubble.js, fixed-position popover) --- */
.cu-bubble-btn { font-size: var(--fs-xs); padding: 0.05rem 0.5rem; margin-left: 0.3rem; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; cursor: pointer; vertical-align: middle; }
.cu-bubble-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cu-pop { position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 320px; max-width: min(92vw, 560px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); font-size: var(--fs-sm); --arrow-x: 14px; }
.cu-pop::before { content: ''; position: absolute; top: -6px; left: var(--arrow-x); width: 10px; height: 10px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.cu-pop.above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.cu-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; font-weight: 700; color: var(--muted); font-size: var(--fs-xs); border-bottom: 1px solid var(--border-soft); }
.cu-pop-close { border: none; background: transparent; color: var(--muted); font-size: var(--fs-lg); line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.cu-pop-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 0.75rem 0.6rem; }
.cu-pop-head { flex-shrink: 0; }
.cu-pop table { width: 100%; border-collapse: collapse; }
.cu-pop th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.15rem 0.3rem; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
.cu-pop th:not(:first-child) { text-align: right; }
.cu-pop td { padding: 0.15rem 0.3rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.cu-pop td.cu-amt { text-align: right; font-variant-numeric: tabular-nums; }
.cu-pop tr.cu-disc-line td { font-weight: 600; }
.cu-pop tr.cu-disc-line td:last-child { color: var(--neg); }

/* --- Outstanding cashups --- */
.cu-outstanding ul { margin: 0; padding-left: 1.1rem; }
.cu-outstanding li { margin: 0.3rem 0; font-size: var(--fs-base); }
.cu-outstanding .rep-status { margin: 0 0.4rem; }

/* --- Read-only Attic column on the Camps Bay cashup --- */
.cu-ro-block input:disabled, .cu-list input:disabled { background: var(--surface-2); color: var(--muted); border-style: dashed; cursor: not-allowed; }
.cu-ro-reason { padding: 0.5rem 0.6rem; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2); font-size: var(--fs-base); color: var(--text); }

/* --- Complaints / table issues (report step + dashboard tab) --- */
.cx-row { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; background: var(--surface); }
.cx-head { display: grid; grid-template-columns: 6rem 8rem 1fr 2rem; gap: 0.6rem; align-items: start; }
.cx-head .cx-del { height: 2.3rem; align-self: end; }
/* Kitchen returns: Section | Who | Shift | × then Dish | Table | Reason. */
.kr-head { display: grid; grid-template-columns: 1fr 1fr 8rem 2rem; gap: 0.6rem; align-items: start; }
.kr-head2 { display: grid; grid-template-columns: 1fr 7rem 1fr; gap: 0.6rem; align-items: end; margin-top: 0.5rem; }
.kr-head, .kr-head2 { align-items: end; }
.kr-head .field, .kr-head2 .field { white-space: nowrap; }
.kr-head .kr-del { height: 2.3rem; align-self: end; }
.kr-head .field input, .kr-head .field select, .kr-head2 .field input, .kr-head2 .field select { height: 2.3rem; box-sizing: border-box; }
.kr-link { margin-top: 0.6rem; font-size: var(--fs-base); }
.cx-row.kr-row { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border)); }
.cx-head .field input, .cx-head .field select { height: 2.3rem; box-sizing: border-box; }
.cx-waiter-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.cx-lookup { margin-top: 0.6rem; font-size: var(--fs-base); }
.cx-bills { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.cx-bills > .fc-dim { margin-bottom: 0.1rem; }
.cx-bill, .cx-cand { display: block; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.cx-bill { min-width: min(100%, 28rem); }
.cx-bill.on, .cx-cand:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cx-bill input, .cx-cand input { margin-right: 0.4rem; }
.cx-cand-notes { margin-left: 1.4rem; }
.cx-guest { margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); }
.cx-guest.on { border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.cx-guest.ask { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); display: flex; flex-direction: column; gap: 0.4rem; }
.cx-warn { color: var(--neg); font-weight: 600; margin-top: 0.4rem; }
.cx-logged { margin-top: 0.6rem; font-size: var(--fs-base); }
.cx-logged .cx-tag { display: inline-block; font-size: var(--fs-xs); padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); margin-right: 0.3rem; }
.cx-guest-btns { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.cu-hint { display: block; margin-top: 0.3rem; font-weight: 400; color: var(--text); font-size: var(--fs-base); border-left: 2px solid var(--accent); padding-left: 0.5rem; }
.cx-wo { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.cx-wo .cx-wo-line { font-size: var(--fs-base); }
/* The write-off question, boxed like the Dineplan one (.cx-guest.ask): a
   question, the candidates as cards, and a "nothing here" answer. Loads
   unticked on purpose. */
.cx-wo.ask { padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); gap: 0.4rem; align-items: stretch; }
.cx-wo.ask .cx-cand { background: var(--surface); }
.cx-wo.ask .cx-cand:has(input:checked) { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cx-wo.on { display: block; padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pos) 45%, var(--border)); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); font-size: var(--fs-base); }
.cx-wo-none { margin-top: 0.4rem; font-size: var(--fs-base); }
.sm-recon { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; margin: 0.6rem 0 0.2rem; font-size: var(--fs-base); }
.sm-recon b, .sm-recon .neg { font-variant-numeric: tabular-nums; }
.pc-opening { margin-top: 0.6rem; }
.pc-opening > summary { cursor: pointer; list-style: none; }
.pc-opening[open] > summary { margin-bottom: 0.5rem; }
tr.pc-float td { color: var(--muted); }
.cx-guest-btns .submit-btn { padding: 0.4rem 0.9rem; font-size: var(--fs-base); }
.cx-cands { display: flex; flex-direction: column; gap: 0.3rem; max-height: 22rem; overflow-y: auto; }
.cx-cand.suggested { border-style: dashed; }
.cx-sugg { font-size: var(--fs-xs); color: var(--accent); }
@media (max-width: 640px) {
  /* Table | Shift | × on the first row, Waiter across the second — the
     columns may shrink below the selects' natural width instead of pushing
     the × off the card. */
  .cx-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem; }
  .cx-head > * { min-width: 0; }
  .cx-head .field:nth-child(3) { grid-column: 1 / 3; }
  .cx-head .cx-del { grid-row: 1; grid-column: 3; justify-self: end; }
  .kr-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem; }
  .kr-head > * { min-width: 0; }
  .kr-head .field:nth-child(3) { grid-column: 1 / 3; }
  .kr-head .kr-del { grid-row: 1; grid-column: 3; justify-self: end; }
  .kr-head2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kr-head2 .field:nth-child(3) { grid-column: 1 / 3; }
}
/* dashboard tab */
.rec-pair { display: grid; gap: 0.35rem; flex: 1; }
.rec-pair .rec-kind { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 0.15rem; }
.rec-pair input { width: 100%; box-sizing: border-box; }
.cx-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.cx-boards .tile { border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem; background: var(--surface); }
.cx-boards .tile h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); }
.cx-boards .kv { display: flex; justify-content: space-between; font-size: var(--fs-base); padding: 0.1rem 0; }
.cx-boards .kv span:first-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-card .cx-who { color: var(--muted); font-size: var(--fs-base); margin-bottom: 0.4rem; }
.cx-card.kr-card { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border)); }
.cx-card .cx-tag { display: inline-block; font-size: var(--fs-xs); padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); margin-right: 0.3rem; }
.cx-card .cx-summary { font-weight: 700; margin-top: 0.2rem; }
.cx-card .rep-block .rep-t { white-space: pre-wrap; }
.cx-card .cx-guestline { font-size: var(--fs-base); color: var(--muted); margin-top: 0.4rem; }
.cx-rep { margin-top: 0.6rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; font-size: var(--fs-base); }
.cx-rep .cx-rep-h { font-weight: 700; color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.cx-rep li { margin-bottom: 0.3rem; }

/* /report: Shop Report | Cashup tabs (reuses the dashboard's .tab pills) */
.rtabs { display: flex; gap: 0.4rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* --- Admin portal (/admin) --- */
.av-grid h4 { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.av-grid h4 label { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 0.35rem; }
.av-verify .av-mirror { color: var(--muted); }
.ar-run { margin-bottom: 1rem; }
.ar-run h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); }
.admin-who { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-base); color: var(--muted); }
.admin-who[hidden] { display: none; }
.admin-tabs { flex-wrap: wrap; }
.admin-filters { margin-top: 0.25rem; }
.av-card .cu-meta { color: var(--muted); font-size: var(--fs-base); margin-bottom: 0.6rem; }
.av-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.av-grid h4 { margin: 0.4rem 0 0.3rem; font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.av-list { margin: 0 0 0.4rem; padding-left: 1.1rem; font-size: var(--fs-base); }
.av-list li { margin-bottom: 0.15rem; }
.av-reasons { margin-top: 0.5rem; }
.av-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.av-verify input[type="text"] { flex: 1 1 220px; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.av-verify .submit-btn { padding: 0.45rem 1rem; font-size: var(--fs-base); }
td.neg { color: var(--neg); font-weight: 600; }
.ab-collect .field { margin-top: 0.4rem; }
.ab-collect .submit-btn { margin-top: 0.6rem; }
.ab-row.collected td { color: var(--muted); }
.av-lines > td { background: var(--surface-2); padding: 0.5rem; }
.pc-form .form-grid { margin-bottom: 0.6rem; }
@media (max-width: 720px) { .av-grid { grid-template-columns: 1fr; } }
.admin-filters[hidden] { display: none; }
.av-ticks { list-style: none; padding-left: 0; }
.av-ticks label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; cursor: pointer; line-height: 1.35; }
.av-verify .submit-btn:disabled { opacity: 0.45; }
.neg { color: var(--neg); }
.ar-bag input[type="date"] { padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: var(--fs-base); }
/* The admin store picker is the dashboard's filter-chip row (same as the KPI weekday filter). */
.admin-store-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.9rem; }

/* --- Review fixes (14 Sep): no sideways scroll on phones --- */
/* A fieldset's default min-inline-size is min-content, so a wide table inside
   it stretches the whole page; let the .table-scroll wrapper do the scrolling. */
#report-form fieldset, #login-form fieldset { min-inline-size: 0; }
.table-scroll { max-width: 100%; }
.av-grid > div { min-width: 0; }
.cu-other-table .rand-input input { min-width: 96px; }
@media (max-width: 640px) {
}
.prefill-note { margin: -0.2rem 0 0.6rem; }

/* Phone: the card tables (cashup, shop report) fit 4 columns in ~320px once
   the desktop min-width and cell padding relax, instead of clipping the last
   column behind a sideways scroll. */
@media (max-width: 480px) {
  .fin-table { min-width: 0; font-size: var(--fs-sm); }
  .fin-table th, .fin-table td { padding-inline: 0.25rem; }
}

/* Validation toast (report page): the message near the Save button is often
   a screen away from the field that was focused. */
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); max-width: min(92vw, 40rem); padding: 0.7rem 1rem; border-radius: 10px; font-size: var(--fs-base); font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,0.18); opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 1000; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--neg); color: #fff; }
.toast.good { background: var(--pos); color: #fff; }

/* The logo is a dark line drawing on a transparent PNG; give it a disc in dark mode. */
@media (prefers-color-scheme: dark) { .logo { background: #fff; border-radius: 50%; } }

/* Phone and narrow tablet: the cashup's Unity / Other tenders tables fit their three
   numeric columns at a smaller size instead of hiding the last one behind a scroll.
   640, not 480: between the two the 130/180/130px columns left the tender name ~100px
   and "Dineplan Deposit" stacked over six lines. */
@media (max-width: 640px) {
  #cashup-step table { font-size: var(--fs-sm); }
  #cashup-step th, #cashup-step td { padding-inline: 0.2rem; }
  .cu-other-table .rand-input input { min-width: 72px; }
  .cu-unity td:first-child { white-space: normal; } /* let the row label wrap so the three money columns fit */
  .cu-other-table th:nth-child(2) { width: 74px; }
  .cu-other-table th:nth-child(3) { width: 104px; }
  .cu-other-table th:nth-child(4) { width: 72px; }
}
/* Phone: admin tables scroll sideways at a readable width rather than
   wrapping every cell one word per line. */
@media (max-width: 640px) { .admin-page .table-scroll > table { min-width: 720px; } }

.cu-bubble-btn { white-space: nowrap; } /* 'Bookings' / 'Items' pills never break mid-word in a narrow label column */

/* The Discounts / Voids / Comps / Ops tables sit one under the other with
   different middle columns; a fixed grid keeps Till, Order, Table, Amount,
   Time and Reason at the same x in every one of them. */
.cu-grid { table-layout: fixed; }
.cu-grid td { vertical-align: middle; overflow-wrap: break-word; }
.cu-grid th.c-till { width: 88px; }
.cu-grid th.c-order { width: 132px; }
.cu-grid th.c-table { width: 72px; }
.cu-grid th.c-amt { width: 112px; }
.cu-grid th.c-time, .cu-grid th.c-pct { width: 64px; }
.cu-grid th.c-kind { width: 70px; }
.cu-grid th.c-by { width: 84px; }
.cu-grid th.c-reason { width: 28%; }
.cu-list.cu-grid input { min-width: 0; }
/* Below 640 the grid scrolls sideways at a readable width: with the 200px reason inputs
   an auto layout otherwise squeezed Item to one word per line ("Carafe / La / Brune…"). */
@media (max-width: 640px) { .cu-grid { table-layout: auto; min-width: 620px; } .cu-list.cu-grid input { min-width: 200px; } }

/* Verify tab: a verified cashup folds to its heading. */
.av-card.collapsed .av-body { display: none; }
.av-card.collapsed { padding-bottom: 0.6rem; }
.av-card.collapsed h2 { margin-bottom: 0; }
.av-card h2 .av-toggle { margin-left: auto; font-size: var(--fs-base); font-weight: 600; }
.av-card h2 .av-headmsg { font-size: var(--fs-sm); font-weight: 400; }
.av-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }

/* Admin forms: every control the same height whatever the browser draws a
   <select> as (Safari's native menu is shorter than a text input), labels on
   one line, the rand field filling its column like its neighbours. */
.admin-page .field input, .admin-page .field select { height: 2.6rem; box-sizing: border-box; }
.admin-page .field select {
  -webkit-appearance: none; appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238b949e' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}
.pc-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.pc-form .field { white-space: nowrap; }
/* `.field` and `.form-grid` set display themselves, which beats the browser's
   [hidden] rule — so a hidden field or row still showed ("Float held by" on a
   purchase, the bag fields on a drawer draw; caught in the 17 Sep 2026 admin
   alignment audit). */
.field[hidden], .form-grid[hidden] { display: none; }
/* CIT bags: the date never breaks across lines; on a wide screen neither do the store and bag. */
.ab-table td:nth-child(2) { white-space: nowrap; }
@media (min-width: 900px) { .ab-table td:nth-child(3), .ab-table td:nth-child(6) { white-space: nowrap; } }
/* The two tiles on the bags tab differ in height by design; don't stretch the summary to the form's height. */
.cu-strip:has(.ab-collect) { align-items: start; }
/* CIT recon: every run's table shares one column grid, so the columns line up down the page. */
.ar-run .disc-table { table-layout: fixed; min-width: 880px; }
/* Store gets the width to hold "Bo-Vine Camps Bay + The Attic" on one line at 1280px. */
.ar-run .disc-table th:nth-child(1) { width: 11%; } .ar-run .disc-table th:nth-child(2) { width: 21%; } .ar-run .disc-table th:nth-child(3) { width: 7%; }
.ar-run .disc-table th:nth-child(4) { width: 10%; } .ar-run .disc-table th:nth-child(5) { width: 11%; } .ar-run .disc-table th:nth-child(6) { width: 9%; }
.ar-run .disc-table th:nth-child(7) { width: 7%; } .ar-run .disc-table th:nth-child(8) { width: 18%; } .ar-run .disc-table th:nth-child(9) { width: 6%; }
.ar-run .ar-dep-by { display: block; font-size: var(--fs-xs); } /* who ticked it, under the date rather than wrapping beside it */
.pc-table td:first-child, .pc-table td:last-child { white-space: nowrap; } /* dates never break at the hyphen */
.ar-run .disc-table td { overflow-wrap: break-word; }
.ar-undo-cell { text-align: right; }
/* A small round icon button (the undo on a collected bag); the explanation lives in its title and aria-label. */
.icon-btn { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); font-size: var(--fs-md); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: var(--accent); }
.pc-form .rand-input { display: flex; align-items: center; gap: 0.35rem; }
.pc-form .rand-input input { flex: 1; min-width: 0; }
.pc-form .submit-row { margin-top: 0.4rem; }

/* Number fields without spinners: figures are typed, never nudged. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* ---- Weekly Shape (Forecast tab) ------------------------------------------
   Median turnover per weekday over the trailing 8 weeks, from real trading.
   Columns read from zero so the money is the message; the dashed line is the
   venue's own average day. The cards sit on ONE row and re-flow to fill it when
   the combine toggle drops three venues to two — --ws-n carries the count. */
.weekly-shape { margin-bottom: 1.2rem; }
.weekly-shape .ws-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.2rem;
}
.weekly-shape .ws-head h2 { font-size: var(--fs-md); margin: 0; }
.weekly-shape .ws-win {
  font-variant-numeric: tabular-nums; font-size: var(--fs-xs);
  color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.4rem;
}
.weekly-shape .ws-sub {
  margin: 0 0 0.7rem; color: var(--muted); font-size: var(--fs-sm); max-width: 80ch;
}
.weekly-shape .ws-cards {
  display: grid; grid-template-columns: repeat(var(--ws-n, 3), minmax(0, 1fr)); gap: 0.6rem;
}
.weekly-shape .ws-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.7rem 0.45rem; min-width: 0;
}
.weekly-shape .ws-name {
  font-size: var(--fs-sm); font-weight: 600; margin: 0 0 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.weekly-shape .ws-meta {
  font-variant-numeric: tabular-nums; font-size: var(--fs-xs);
  color: var(--muted); margin: 0 0 0.35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.weekly-shape .ws-meta b { color: var(--text); font-weight: 500; }
.ws-svg { display: block; width: 100%; height: auto; }
.ws-svg .ws-bar { fill: var(--accent-soft); }
.ws-svg .ws-avgline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.ws-svg .ws-axis { stroke: var(--border); stroke-width: 1; }
.ws-svg .ws-day { fill: var(--text); font-size: 10px; font-weight: 600; }
.ws-svg .ws-val { fill: var(--accent); font-size: 9px; font-weight: 600; }
.weekly-shape .ws-note {
  margin-top: 0.4rem; font-size: var(--fs-xs); line-height: 1.35; color: var(--muted);
  border-left: 2px solid var(--accent-soft); padding: 0.15rem 0 0.15rem 0.4rem;
}
/* Phones: three charts across a 400px screen is unreadable, so stack there.
   Everything from a small tablet up keeps the single row. */
@media (max-width: 640px) {
  .weekly-shape .ws-cards { grid-template-columns: 1fr; }
}

/* --- Sign-in, header chip and the Admin tab (docs/auth-plan.md) --- */
.login-page .login-box { margin-top: 2rem; max-width: 460px; }
.login-box fieldset { border: 0; padding: 0; margin: 0; }
.login-box legend { font-size: var(--fs-lg); font-weight: 700; padding: 0; margin-bottom: 0.5rem; }
.login-grid { grid-template-columns: 1fr; }
.login-box .submit-row { margin-top: 1rem; }
.prompt > .cl-msg:empty { min-height: 0; margin: 0; }
.login-foot { margin-top: 1rem; font-size: var(--fs-sm); }
/* The user menu: one chip, a dropdown with who / where else / sign out. */
.user-menu { position: relative; }
.um-chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem 0.25rem 0.3rem; background: var(--surface); font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.um-chip:hover { background: var(--surface-2); }
.um-av { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.um-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.um-caret { color: var(--muted); font-size: var(--fs-xs); }
.um-dd { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 0.35rem; font-size: var(--fs-base); z-index: 50; }
.um-dd[hidden] { display: none; }
.um-who { padding: 0.4rem 0.7rem 0.3rem; color: var(--muted); font-size: var(--fs-xs); }
.um-who b { color: var(--text); font-weight: 600; }
.um-dd hr { border: 0; border-top: 1px solid var(--border-soft); margin: 0.3rem 0; }
.um-item { display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem; border-radius: 6px; color: var(--text); text-decoration: none; background: none; border: none; font: inherit; font-size: var(--fs-base); cursor: pointer; }
.um-item:hover { background: var(--surface-2); }
.um-signout { color: var(--neg); }
@media (max-width: 640px) { .um-name { max-width: 7rem; } }
.admin-who .who-link { color: var(--accent); text-decoration: none; font-size: var(--fs-base); font-weight: 600; padding: 0.2rem 0.55rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; }
.admin-who .who-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
header .controls .admin-who { margin-left: 0.75rem; }
.ua-intro { max-width: 80ch; }
.ua-section { margin-top: 1.25rem; }
.ua-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.ua-head h2 { margin: 0; font-size: var(--fs-md); }
.ua-small { padding: 0.35rem 0.8rem; font-size: var(--fs-base); }
.ua-form { padding: 0.75rem 0.5rem; }
.ua-form .form-grid { align-items: start; } /* the session hint under one field otherwise pushes its neighbours' inputs down */
.ua-hint { font-size: var(--fs-xs); margin-top: 0.15rem; }
.ua-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.ua-danger { color: var(--neg); }
.ua-table td, .ua-table th { vertical-align: top; }
.ua-table .ua-perms { max-width: 34rem; }
.ua-table .ua-perms .cx-tag { margin: 0.1rem 0.2rem 0.1rem 0; }
.ua .cx-tag { display: inline-block; font-size: var(--fs-xs); padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.ua-actions { white-space: nowrap; }
.ua-actions .link-btn { display: block; text-align: left; padding: 0.1rem 0; }
tr.ua-disabled td { color: var(--muted); }
.perm-grids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.perm-group { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.perm-group-h { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.perm-tick { font-size: var(--fs-base); display: flex; gap: 0.4rem; align-items: baseline; cursor: pointer; }
.ua-invite { margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pos) 45%, var(--border)); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); font-size: var(--fs-base); }
.ua-invite-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.ua-invite-row input { flex: 1; min-width: 240px; padding: 0.4rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
@media (max-width: 640px) { .ua-actions { white-space: normal; } }

/* Admin portal — Monthly recon */
.mr-bar { margin-bottom: 1rem; }
/* Month stepper (Monthly recon, Money in) */
.mp { position: relative; display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.mp > button { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.mp .mp-prev, .mp .mp-next { font-size: var(--fs-md); padding: 0 0.7rem; }
.mp .mp-prev { border-right: 1px solid var(--border-soft); }
.mp .mp-next { border-left: 1px solid var(--border-soft); }
.mp > button[disabled] { color: var(--border); cursor: default; }
.mp .mp-cur { display: flex; flex-direction: column; align-items: center; padding: 0.38rem 0.9rem; min-width: 10rem; color: var(--text); line-height: 1.1; }
.mp .mp-cur span { font-weight: 600; font-size: var(--fs-md); }
.mp .mp-cur small { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.mp .mp-cur:hover span { color: var(--accent); }
.mp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 17rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 0.6rem 0.75rem; }
.mp-yr { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 0.5rem; }
.mp-yr button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-md); padding: 0 0.3rem; }
.mp-yr button[disabled] { color: var(--border); cursor: default; }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-m { position: relative; border: 1px solid var(--border-soft); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: var(--fs-base); padding: 0.45rem 0; cursor: pointer; }
.mp-m:hover { border-color: var(--accent); }
.mp-m.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mp-m.off { color: var(--border); border-color: transparent; }
.mp-m[disabled] { cursor: default; }
.mp-m.rec::after { content: ''; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.mp-m.sel.rec::after { background: #fff; }
.mp-legend { display: flex; gap: 0.9rem; font-size: var(--fs-xs); color: var(--muted); margin-top: 0.5rem; }
.mp-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); margin-right: 4px; }
@media (max-width: 600px) { .mp .mp-cur { min-width: 8rem; } .mp-pop { width: 15rem; } }
.mr-store { margin-bottom: 1.5rem; }
.mr-store h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.mr-store h2 .cu-chip { font-size: var(--fs-xs); font-weight: 600; }
.mr-h { margin: 1rem 0 0.35rem; font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mr-table { min-width: 560px; }
.mr-table tr.mr-sub td { color: var(--muted); }
.mr-table tr.mr-sub td:first-child { color: var(--text); }
.mr-table tr.mr-dep-head td { padding-top: 0.7rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: color-mix(in srgb, var(--border) 12%, var(--surface)); }
.mr-table tr.mr-dep-head td.cu-amt { text-transform: none; letter-spacing: 0; }
.mr-table .mr-dep-toggle { cursor: pointer; border: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; }
.mr-table tr.mr-night td { font-size: var(--fs-sm); color: var(--muted); padding-top: 0.22rem; padding-bottom: 0.22rem; border-bottom: 1px dashed var(--border-soft); background: color-mix(in srgb, var(--neg) 3%, var(--surface)); }
.mr-table tr.mr-night td:first-child { padding-left: 1.6rem; color: var(--text); white-space: normal; vertical-align: top; }
.mr-table tr.mr-night td.cu-amt { vertical-align: top; }
.mr-table tr.mr-night .mr-reason { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.1rem; max-width: 40rem; }
.mr-table tr.mr-night .mr-reason.none { color: var(--neg); }
.mr-table .cu-amt b.pos { color: var(--pos); }
.mr-table .cu-amt b.neg { color: var(--neg); }
.mr-in { width: 9.5rem; text-align: right; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; }
.mr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.mr-actions input[type="text"] { flex: 1 1 260px; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }

/* Admin portal — Money in (bank reconciliation) */
.mi-src { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); padding: 0.05rem 0.45rem; border-radius: 999px; }
.cu-chip.warn { color: var(--warn); background: color-mix(in srgb, var(--warn-fill) 18%, transparent); }
.cu-chip.info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.mi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.mi-head h2 { margin: 0; }
.mi-head .cu-chip { font-size: var(--fs-xs); font-weight: 600; }
.mi-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0.4rem 0 1.1rem; }
.mi-lane { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0.75rem 0.85rem; position: relative; cursor: pointer; }
.mi-lane:hover, .mi-lane.open { border-color: var(--accent); }
.mi-lane h3 { margin: 0 0 0.45rem; font-size: var(--fs-md); display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.mi-lane h3 .cu-chip { font-size: var(--fs-xs); }
.mi-lane .mi-open { position: absolute; right: 0.85rem; bottom: 0.55rem; font-size: var(--fs-xs); color: var(--accent); }
.mi-steps { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 1.1rem; }
.mi-step { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center; font-size: var(--fs-sm); }
.mi-step .lab { color: var(--muted); }
.mi-step .amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-step .bar { grid-column: 1 / 3; height: 0.5rem; border-radius: 4px; background: color-mix(in srgb, var(--border) 60%, transparent); overflow: hidden; }
.mi-step .bar i { display: block; height: 100%; background: var(--info); opacity: 0.7; }
.mi-step.bank .bar i { background: var(--pos); }
.mi-leak { grid-column: 1 / 3; font-size: var(--fs-xs); color: var(--muted); display: flex; justify-content: space-between; gap: 0.5rem; }
.mi-leak b { color: var(--text); white-space: nowrap; }
.mi-leak.bad b { color: var(--neg); }
.mi-qh { margin-top: 0.9rem; }
.mi-other { margin: 0 0 1rem; font-size: var(--fs-sm); }
.mi-q { display: flex; flex-direction: column; gap: 0.5rem; }
.mi-qi { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 0.8rem; align-items: center; border: 1px solid var(--border); border-left: 4px solid var(--neg); border-radius: 10px; padding: 0.55rem 0.8rem; background: var(--surface); }
.mi-qi.warn { border-left-color: var(--warn-fill); }
.mi-qi.ok { border-left-color: var(--pos); }
.mi-qi.wait { border-left-color: var(--muted); }
.mi-qi .amt { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-md); text-align: right; }
.mi-qi .amt small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.mi-qi .what b { display: block; font-size: var(--fs-base); }
.mi-qi .what span { font-size: var(--fs-sm); color: var(--muted); }
.mi-qi .act { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.mi-qi .act button, .mi-dt td.act button { font-size: var(--fs-sm); padding: 0.33rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; white-space: nowrap; }
.mi-qi .act button.primary, .mi-dt td.act button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mi-dd { border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); padding: 0.9rem 1rem; margin: 0.4rem 0 1rem; }
.mi-dd .hd { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.mi-dd .hd h3 { margin: 0; font-size: var(--fs-md); }
.mi-dd .rule { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.5rem; }
.mi-dt { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mi-dt th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.28rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mi-dt td { padding: 0.28rem 0.5rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.mi-dt .amt { text-align: right; font-variant-numeric: tabular-nums; }
.mi-dt tr.bad td { background: color-mix(in srgb, var(--neg) 6%, transparent); }
.mi-dt tr.warn td { background: color-mix(in srgb, var(--warn-fill) 8%, transparent); }
.mi-dt tr.tot td { border-top: 2px solid var(--border); font-weight: 700; }
.mi-dt td.act { text-align: right; white-space: nowrap; }
.mi-dt td.act button { font-size: var(--fs-xs); padding: 0.2rem 0.55rem; margin-left: 0.3rem; }
.mi-dt td em { color: var(--muted); font-style: normal; font-size: var(--fs-xs); }
.mi-sp { display: inline-block; height: 0.5rem; border-radius: 3px; background: color-mix(in srgb, var(--info) 45%, transparent); vertical-align: middle; }
.mi-sp.hi { background: color-mix(in srgb, var(--neg) 55%, transparent); }
@media (max-width: 900px) { .mi-lanes { grid-template-columns: 1fr; } .mi-qi { grid-template-columns: 1fr; } .mi-qi .amt { text-align: left; } }

/* ---- Purchases tab (docs/purchases-plan.md) ---- */
.pu-bar .pu-range { margin-left: auto; font-size: var(--fs-sm); }
.pu-bar .pu-gap { margin-left: 1rem; }
.pu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pu-card { margin: 0; }
/* One store picked: its card keeps the half width it has beside the other store (Chase, 24 Sep 2026). */
.pu-cards:has(> .pu-card:only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pu-cards:has(> .pu-card:only-child) { grid-template-columns: 1fr; } }
.pu-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.7rem; }
.pu-fig .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pu-fig .value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.pu-fig .sub { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.pu-split-bar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.pu-split-bar i { display: block; height: 100%; }
.pu-split-bar i.food, .pu-legend .food::before, .pu-tag.food { --c: var(--accent); }
.pu-split-bar i.beverage, .pu-legend .beverage::before, .pu-tag.beverage { --c: var(--cat-beverage); }
.pu-split-bar i.sundry, .pu-legend .sundry::before, .pu-tag.sundry { --c: var(--muted); }
.pu-split-bar i { background: var(--c); }
.pu-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: var(--fs-sm); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.pu-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--c); }
.pu-sundry { font-size: var(--fs-sm); margin-top: 0.6rem; }
.pu-stamp { font-size: var(--fs-xs); margin-top: 0.35rem; }
.pu-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; border-radius: 4px; padding: 0 0.4rem; border: 1px solid var(--c, var(--border)); color: var(--c, var(--muted)); white-space: nowrap; }
.pu-tag.unknown, .pu-tag.check { --c: var(--warn); }
.pu-tag.up { --c: var(--neg); } .pu-tag.down { --c: var(--pos); } .pu-tag.info { --c: var(--muted); }
.pu-subtabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; }
.pu-badge { display: inline-block; min-width: 1.2rem; text-align: center; font-size: var(--fs-xs); border-radius: 999px; background: color-mix(in srgb, var(--warn-fill) 22%, transparent); color: var(--warn); padding: 0 0.35rem; margin-left: 0.25rem; }
.pu-panel { margin: 0; }
.pu-table { min-width: 760px; }
.pu-table td, .pu-table th { padding: 0.4rem 0.6rem; }
.pu-table td.mlabel { white-space: normal; }
.pu-table tr.pu-sup { cursor: pointer; }
.pu-table tr.pu-sup:hover td { background: rgba(127, 127, 127, 0.08); }
.pu-table tr.pu-sup-drill td { background: color-mix(in srgb, var(--border) 12%, var(--surface)); padding: 0.4rem 0.6rem 0.6rem 1.8rem; }
.pu-inv { min-width: 0; }
/* It sits in a right-aligned cell of the supplier table; without this its cells inherit that. */
.pu-inv td { text-align: left; }
.pu-inv tr.warn td { background: color-mix(in srgb, var(--warn-fill) 10%, transparent); }
.pu-inv tr.rev td { color: var(--muted); font-style: italic; }
.pu-meta { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.pu-share { display: inline-flex; align-items: center; gap: 0.4rem; }
.pu-share i { display: inline-block; height: 6px; border-radius: 2px; background: var(--accent); }
.pu-select, .pu-search { border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 0.25rem 0.7rem; }
.pu-search { min-width: 12rem; }
.pu-spark { width: 110px; height: 28px; vertical-align: middle; }
.pu-spark path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.pu-spark circle { stroke: var(--surface); stroke-width: 1.5; }
.pu-spark circle.up { fill: var(--neg); } .pu-spark circle.down { fill: var(--pos); }
.pu-findings { display: grid; gap: 0; }
/* Fixed tag and amount columns, so every finding's title and text start at the same x whatever its tag says. */
.pu-find { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 17rem; gap: 0.9rem; align-items: start; padding: 0.7rem 0; border-bottom: 1px solid var(--border-soft); }
.pu-find > .pu-tag { justify-self: start; margin-top: 0.1rem; }
.pu-find .what strong { font-size: var(--fs-md); }
.pu-find:last-child { border-bottom: none; }
.pu-find .what { display: grid; gap: 0.1rem; font-size: var(--fs-base); }
.pu-find .save { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pu-find .save .pu-meta { font-weight: 400; white-space: normal; }
.pu-find .warn { color: var(--warn); }
.pu-inv-refs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; margin-top: 0.2rem; }
.pu-inv-ref { font-size: var(--fs-xs); color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; padding: 0 0.35rem; }
.pu-note { margin-top: 0.7rem; }
@media (max-width: 600px) { .pu-figs { grid-template-columns: 1fr; } .pu-find { grid-template-columns: 1fr; } .pu-find .save { text-align: left; } .pu-table { min-width: 640px; } }

/* --- Admin portal: Payment run (docs/payment-run-plan.md §5) --- */
/* Payment Recon follows the rest of the project (Chase, 24 Sep 2026): a plain filter row, the sheet in a
   card with borderless disc-table-style rows, supplier headings and ruled totals, and a row's state as the
   4px left-edge bar the Capture Checks queue uses rather than a fill. */
.pr-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin: 0.25rem 0 0.9rem; }
.pr-left, .pr-right, .pr-conn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pr-tabsel { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--muted); margin-left: 0.5rem; }
.pr-tabsel select { padding: 0.45rem 0.5rem; font-size: var(--fs-base); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); max-width: 22rem; }
.pr-connect { max-width: 40rem; margin: 2rem auto; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pr-connect h3 { margin: 0 0 0.5rem; }
.pr-connect p { color: var(--muted); font-size: var(--fs-base); line-height: 1.5; }
.pr-proceed { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; font-size: var(--fs-base); color: var(--muted); margin-bottom: 0.4rem; }
.pr-sumline { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: var(--fs-base); color: var(--muted); }
.pr-sumline b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.pr-key { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: var(--fs-sm); color: var(--muted); margin: 0.5rem 0; }
.pr-key .cu-chip { font-size: var(--fs-xs); }
.pr-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0; }
.pr-btn { font-size: var(--fs-sm); font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; white-space: nowrap; }
.pr-btn:hover { border-color: var(--accent); }
.pr-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pr-sheet table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: var(--fs-base); }
.pr-sheet col.w-cb { width: 34px; } .pr-sheet col.w-dt { width: 62px; } .pr-sheet col.w-ref { width: 12%; } .pr-sheet col.w-amt { width: 92px; }
.pr-sheet col.w-c { width: 13%; } .pr-sheet col.w-ch { width: 11%; } .pr-sheet col.w-chk { width: 20%; } .pr-sheet col.w-q { width: auto; }
.pr-sheet th { position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: normal; }
.pr-sheet th.pr-num, .pr-sheet td.pr-num { text-align: right; }
.pr-sheet td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; overflow-wrap: break-word; }
/* An invoice reference stays on one line (full text on hover) rather than breaking mid-number. */
@media (min-width: 901px) { .pr-sheet td.pr-ref { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.pr-sheet td.pr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-sheet td.pr-ref { font-variant-numeric: tabular-nums; }
.pr-sheet td.pr-dt { white-space: nowrap; font-size: var(--fs-sm); }
/* A supplier is its own block: a grey header band with name, invoice count and total, a gap before the next. */
.pr-sheet tr.pr-sup td { font-weight: 700; font-size: var(--fs-md); padding: 0.6rem; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pr-sheet tr.pr-sup td.pr-c { font-weight: 400; font-size: var(--fs-sm); }
.pr-sheet tr.pr-sup .pr-supn { margin-left: 0.5rem; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.pr-sheet tr.pr-gap td { height: 18px; padding: 0; border: 0; background: var(--bg); }
.pr-sheet tr.pr-note + tr.pr-sup td, .pr-sheet tbody > tr.pr-sup:first-child td { border-top: 0; }
.pr-sheet tr.pr-tot td { font-weight: 700; border-top: 1px solid var(--border); border-bottom: 0; }
.pr-sheet tr.pr-tot td.pr-c { font-weight: 400; font-size: var(--fs-sm); }
.pr-sheet tr.pr-tot.grand td { border-top: 2px solid var(--border); }
.pr-sheet tr.pr-ln.bad td:first-child { box-shadow: inset 4px 0 0 var(--neg); }
.pr-sheet tr.pr-ln.warn td:first-child { box-shadow: inset 4px 0 0 var(--warn-fill); }
.pr-sheet tr.pr-ln.info td:first-child { box-shadow: inset 4px 0 0 var(--accent-soft); }
.pr-sheet tr.pr-ln.picked td { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); }
.pr-sheet tr.pr-ln.picked td:first-child { box-shadow: inset 4px 0 0 var(--pos); }
.pr-sheet tr.pr-ln.unity td { font-style: italic; }
.pr-sheet td.pr-num .pr-nit { display: block; font-style: italic; font-size: var(--fs-xs); color: var(--muted); }
.pr-sheet td.pr-chk { font-size: var(--fs-sm); }
.pr-sheet td.pr-chk .cu-chip { white-space: normal; font-size: var(--fs-xs); }
.pr-sheet td.pr-cb input { width: 1.05rem; height: 1.05rem; }
.pr-q { display: flex; gap: 0.4rem; align-items: flex-start; margin-bottom: 0.25rem; }
.pr-q span { flex: 0 0 64px; font-size: var(--fs-xs); color: var(--muted); padding-top: 0.35rem; }
.pr-q textarea { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); line-height: 1.4; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.45rem; background: var(--bg); color: var(--text); resize: vertical; min-height: 1.9rem; overflow: hidden; }
.pr-reo { display: block; margin-bottom: 0.25rem; }
.pr-was { color: var(--muted); }
.pr-sheet tr.pr-note td { font-size: var(--fs-sm); }
.pr-sheet tr.pr-note td.pr-ntext { color: var(--muted); font-style: italic; }
.pr-sheet tr.pr-note td.pr-c { font-style: italic; color: var(--muted); }
.pr-sheet tr.pr-spacer td { height: 10px; padding: 0; background: var(--bg); }
.pr-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; padding: 0.9rem 1rem; margin: 0.9rem 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pr-preview h3 { margin: 0 0 0.3rem; font-size: var(--fs-md); }
.pr-preview p { margin: 0 0 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.pr-preview pre { margin: 0; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 6px; padding: 0.6rem; min-height: 3.5rem; }
.pr-foot { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
.pr-counts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: var(--fs-sm); color: var(--muted); }
.pr-counts b { color: var(--text); font-variant-numeric: tabular-nums; }
.pr-copyfallback { width: 100%; min-height: 8rem; margin-top: 0.5rem; font: inherit; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  /* The list picker takes its own line and shrinks with the screen: at 390px its label + select were 411px wide. */
  .pr-left { flex: 1 1 100%; min-width: 0; } .pr-tabsel { flex: 1 1 100%; margin-left: 0; min-width: 0; } .pr-tabsel select { flex: 1; min-width: 0; max-width: none; }
  .pr-sheet table, .pr-sheet tbody, .pr-sheet tr, .pr-sheet td { display: block; width: auto; }
  .pr-sheet colgroup, .pr-sheet thead { display: none; }
  .pr-sheet tr.pr-sup { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.75rem; padding: 0.6rem 0.75rem; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .pr-sheet tr.pr-sup td { padding: 0; border: 0; } .pr-sheet tr.pr-sup td:empty { display: none; } .pr-sheet tr.pr-sup td.pr-c { flex-basis: 100%; }
  .pr-sheet tr.pr-gap td { height: 12px; }
  .pr-sheet tr.pr-sup td:first-child, .pr-sheet tr.pr-tot td:first-child { display: none; }
  .pr-sheet tr.pr-tot { display: flex; justify-content: space-between; border-top: 1px solid var(--border); } .pr-sheet tr.pr-tot td { border-right: 0; border-top: 0; } .pr-sheet tr.pr-tot td:empty { display: none; } /* the row draws the rule: its hidden empty cells broke it into pieces */
  .pr-sheet tr.pr-tot.grand { border-top-width: 2px; }
  .pr-sheet tr.pr-ln { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-soft); }
  .pr-sheet tr.pr-ln td { border: 0; padding: 0; background: none !important; }
  .pr-sheet tr.pr-ln td:first-child { box-shadow: none !important; } /* the bar moves to the whole card-row */
  .pr-sheet tr.pr-ln.bad { box-shadow: inset 4px 0 0 var(--neg); } .pr-sheet tr.pr-ln.warn { box-shadow: inset 4px 0 0 var(--warn-fill); }
  .pr-sheet tr.pr-ln.info { box-shadow: inset 4px 0 0 var(--accent-soft); } .pr-sheet tr.pr-ln.picked { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); box-shadow: inset 4px 0 0 var(--pos); }
  .pr-sheet tr.pr-ln td.pr-cb { grid-row: 1 / span 2; }
  .pr-sheet tr.pr-ln td.pr-ref { grid-column: 2; grid-row: 1; font-weight: 600; }
  .pr-sheet tr.pr-ln td.pr-num { grid-column: 3; grid-row: 1; }
  .pr-sheet tr.pr-ln td.pr-dt { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--muted); }
  .pr-sheet tr.pr-ln td.pr-dt:not(:empty)::before { content: attr(data-l) " "; font-weight: 500; }
  .pr-sheet tr.pr-ln td.pr-empty, .pr-sheet tr.pr-ln td.pr-c:empty { display: none; }
  .pr-sheet tr.pr-ln td.pr-c, .pr-sheet tr.pr-ln td.pr-chk, .pr-sheet tr.pr-ln td.pr-qc { grid-column: 2 / -1; }
  .pr-sheet tr.pr-ln td.pr-qc { margin-top: 0.4rem; }
  .pr-sheet tr.pr-note { display: grid; grid-template-columns: 1fr; padding: 0.5rem 0.75rem; gap: 2px; } .pr-sheet tr.pr-note td { border: 0; padding: 0; } .pr-sheet tr.pr-note td:empty { display: none; }
  .pr-sheet tr.pr-spacer { display: none; }
}
.admin-store-bar[hidden] { display: none; }

/* --- Status pills: one shape for every badge that states a status or a count
   (report status, finalized, Coldwatch counts, cashup chips, complaint tags,
   Money in source, purchase badges). Compound selectors elsewhere still adjust
   colour or size in context. */
.rep-status, .rep-final, .cw-warn-count, .cw-stale-count, .cw-over-count, .cw-all-ok,
.cu-chip, .cx-tag, .mi-src, .pu-badge, .cw-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  padding: 0 0.55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.cu-chip { font-size: var(--fs-sm); font-weight: 700; }
/* A Coldwatch badge can be long (snoozed till …): it wraps inside its card rather than spilling out. */
.cw-badge { margin-top: 0.4rem; letter-spacing: 0.04em; white-space: normal; max-width: 100%; border-radius: 6px; }

/* --- Loading: one look on every site. A CSS ring replaces the ↻ glyph (whose
   shape changed with the font); the markup keeps the glyph for old copies. */
.live-spin {
  display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.45rem; vertical-align: -0.12em;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent);
  border-radius: 50%; overflow: hidden; text-indent: 2em; white-space: nowrap; color: transparent;
  animation: spin 0.8s linear infinite;
}
.empty .live-spin { width: 1.1em; height: 1.1em; }
/* Placeholder cards drawn in the final layout while the Trading figures load. */
.skel { position: relative; overflow: hidden; }
.skel-bar { display: block; height: 0.8rem; border-radius: 4px; background: var(--surface-2); margin: 0.45rem 0; }
.skel-bar.w40 { width: 40%; } .skel-bar.w60 { width: 60%; } .skel-bar.w80 { width: 80%; } .skel-bar.big { height: 1.2rem; }
.skel h2 .skel-bar { display: inline-block; width: 14rem; height: 1.1rem; margin: 0; }
.skel .card { min-height: 10.5rem; }
@keyframes skel-pulse { 50% { opacity: 0.55; } }
.skel .skel-bar { animation: skel-pulse 1.4s ease-in-out infinite; }
/* A fetch-every-visit tab (Shop Reports, Cashups, Complaints) shows its last copy,
   dimmed and inert, while the fresh one loads — instead of a blank screen. */
#panel.stale { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }

/* --- Complaints tab: Layout 1 with the log rows (Card B), Chase 24 Sep 2026 --- */
.cx-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.cx-fbar[hidden] { display: none; }
.cx-fbar.cx-more { padding: 0.6rem 0.8rem; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
.cx-fgrp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cx-inp { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0.32rem 0.55rem; font-size: var(--fs-sm); }
.cx-search { flex: 1 1 12rem; min-width: 10rem; }
.cx-new { margin-left: auto; padding: 0.4rem 0.95rem; font-size: var(--fs-sm); white-space: nowrap; }
.cx-empty-new { justify-content: center; }
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.cx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; min-width: 0; }
.cx-stat .k { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cx-stat .v { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stat .s { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-brk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.cx-bk { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; min-width: 0; }
.cx-bk h3 { margin: 0 0 0.5rem; font-size: var(--fs-base); display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cx-bk h3 .link-btn { font-size: var(--fs-xs); font-weight: 500; padding: 0; }
.cx-bar { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem; align-items: center; gap: 0.1rem 0.6rem; font-size: var(--fs-sm); margin-bottom: 0.3rem; }
.cx-bar .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bar .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-bar i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cx-bar i::after { content: ''; display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--muted); }
.cx-bar.foh i::after { background: var(--warn-fill); }
.cx-bar.boh i::after { background: var(--accent-soft); }
.cx-listhead { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.cx-listhead h2 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.cx-log { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: var(--fs-base); min-width: 900px; }
.cx-log col.c-arr { width: 2rem; } .cx-log col.c-when { width: 7.5rem; } .cx-log col.c-where { width: 11rem; }
/* People and Written Off sized to their content (measured on real names, 24 Sep 2026) so the Complaint column gets the rest. */
.cx-log col.c-cat { width: 12rem; } .cx-log col.c-ppl { width: 6.75rem; } .cx-log col.c-amt { width: 5rem; }
.cx-log th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0.55rem 0.6rem; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cx-log td { padding: 0.6rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.cx-log tr:last-child td { border-bottom: 0; }
.cx-log .cu-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cx-log tr.cx-sum { cursor: pointer; }
.cx-log tr.cx-sum:hover td, .cx-log tr.cx-sum:focus-visible td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cx-log tr.cx-sum.open td, .cx-log tr.cx-detail td { background: var(--surface-2); }
.cx-log tr.cx-sum.open td { border-bottom-color: transparent; }
.cx-log .cx-arr { color: var(--muted); }
.cx-log .cx-when { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-log .cx-when b { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; }
.cx-log .cx-what { overflow: hidden; }
.cx-log .cx-what .cx-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-log .cx-what b { font-weight: 600; }
.cx-log .cx-first { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-log .cx-ppl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-log .cx-tag { display: inline-flex; margin: 0 0.2rem 0.2rem 0; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } /* a chip broken over two lines reads as two chips */
.cx-side { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: 4px; padding: 0 0.35rem; margin-right: 0.4rem; vertical-align: 0.05em; }
.cx-side.foh { background: color-mix(in srgb, var(--warn-fill) 20%, transparent); color: var(--warn); }
.cx-side.boh { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cx-log tr.cx-detail td { padding: 0 0.6rem 1rem; }
.cx-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cx-dgrid .rep-block { margin-top: 0; }
@media (max-width: 1100px) { .cx-brk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cx-stats, .cx-brk, .cx-dgrid { grid-template-columns: 1fr; } .cx-search { min-width: 0; flex: 1 1 100%; } .cx-new { margin-left: 0; } }

/* --- Admin portal: Capture Checks (Version B, queue and detail — Chase 24 Sep 2026) --- */
.store-chip .cc-n { display: inline-block; min-width: 1.1rem; margin-left: 0.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); text-align: center; }
.store-chip.active .cc-n { background: color-mix(in srgb, #fff 25%, transparent); color: #fff; }
.cc-mini { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin-bottom: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.cc-mini b { color: var(--text); font-variant-numeric: tabular-nums; }
.cc-mini .sep { color: var(--border); }
.cc-qb { display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.cc-queue { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.cc-store { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0.9rem 0.5rem; font-size: var(--fs-base); font-weight: 700; background: var(--surface); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1; }
.cc-store span:last-child { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.cc-store:not(:first-child) { border-top: 6px solid var(--bg); }
.cc-queue h4 { margin: 0; padding: 0.55rem 0.9rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; }
.cc-qi { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 0.2rem 0.7rem; width: 100%; text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; border: 0; border-bottom: 1px solid var(--border-soft); background: none; color: var(--text); cursor: pointer; }
.cc-qi .bar { grid-row: 1 / span 2; border-radius: 0 3px 3px 0; background: var(--neg); }
.cc-qi.warn .bar { background: var(--warn-fill); } .cc-qi.info .bar { background: var(--accent-soft); }
.cc-qi .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-qi .a { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-qi .m { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-qi.sel { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset -3px 0 0 var(--accent); }
.cc-qi.q .m::before { content: 'Queried · '; color: var(--warn); font-weight: 600; }
.cc-qi:hover:not(.sel) { background: var(--surface-2); }
.cc-det { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; min-width: 0; }
.cc-top { display: flex; align-items: flex-start; gap: 1rem; }
.cc-top h2 { margin: 0; font-size: var(--fs-xl); }
.cc-top .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.15rem; }
.cc-top .acts { margin-left: auto; display: flex; gap: 0.4rem; flex-shrink: 0; }
.cc-btn { font-size: var(--fs-sm); padding: 0.3rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-weight: 600; white-space: nowrap; }
.cc-btn:hover:not([disabled]) { border-color: var(--accent); }
.cc-btn[disabled] { opacity: 0.45; cursor: default; }
.cc-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cc-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.cc-fact { border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.55rem 0.75rem; background: var(--surface-2); min-width: 0; }
.cc-fact .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-fact .v { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-fact.bad .v { color: var(--neg); }
.cc-sec { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 1rem 0 0.4rem; }
.cc-issues { display: flex; flex-direction: column; gap: 0.5rem; }
.cc-issue { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--neg) 35%, var(--border)); background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.cc-issue.warn { border-color: color-mix(in srgb, var(--warn-fill) 45%, var(--border)); background: color-mix(in srgb, var(--warn-fill) 7%, var(--surface)); }
.cc-issue.info { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.cc-issue > .cc-tag { justify-self: start; }
.cc-issue b { display: block; } .cc-issue span { color: var(--muted); font-size: var(--fs-sm); }
.cc-issue .cc-dec { display: block; margin-top: 0.25rem; color: var(--warn); font-weight: 600; }
.cc-issue .amt { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-issue .amt small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.cc-tag { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; border-radius: 6px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.cc-tag.bad { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); }
.cc-tag.warn { background: color-mix(in srgb, var(--warn-fill) 22%, transparent); color: var(--warn); }
.cc-tag.info { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cc-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cc-lines th { text-align: left; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cc-lines td { padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.cc-lines .r { text-align: right; white-space: nowrap; }
.cc-lines tr.hit td { background: color-mix(in srgb, var(--neg) 7%, var(--surface)); font-weight: 600; }
.cc-qbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; }
.cc-qbox textarea { width: 100%; min-height: 5.5rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; background: var(--bg); color: var(--text); resize: vertical; font-size: var(--fs-sm); line-height: 1.45; }
.cc-qacts { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-decided { display: flex; gap: 0.6rem; align-items: center; }
.cc-trail { font-size: var(--fs-sm); color: var(--muted); margin: 0.6rem 0 0; padding-left: 1rem; }
.cc-trail li { margin: 0.15rem 0; }
@media (max-width: 1100px) { .cc-qb { grid-template-columns: 1fr; } .cc-queue { position: static; max-height: none; } .cc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cc-issue { grid-template-columns: 1fr; } .cc-issue .amt { text-align: left; } }