@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Syne:wght@400;600;700;800&display=swap');

:root {
  --bg: #0d0f14; --surface: #13161e; --surface2: #1a1e28; --surface3: #181b25;
  --border: #252a38; --hover: #1e2230;
  --accent: #f0b429; --accent2: #e8734a; --text: #e8eaf0; --muted: #6b7280;
  --green: #34d399; --red: #f87171; --blue: #60a5fa;
  /* chart colours (read by dashboard.js so charts follow the theme) */
  --chart-text: #9aa3b2; --chart-muted: #6b7280;
  --chart-grid: rgba(255,255,255,0.05); --chart-border: #13161e;
}
body.light {
  --bg: #f4f5f7; --surface: #ffffff; --surface2: #eef1f5; --surface3: #e9edf3;
  --border: #dfe3e9; --hover: #e6eaf0;
  --accent: #b07d0a; --accent2: #d05f33; --text: #1b2030; --muted: #737b8a;
  --green: #0f9d6b; --red: #d64545; --blue: #2f6fd6;
  --chart-text: #5a6373; --chart-muted: #737b8a;
  --chart-grid: rgba(0,0,0,0.07); --chart-border: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Mono', monospace; min-height: 100vh; }
a { color: var(--blue); }

/* ── Header ── */
.header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.logo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 19px; color: var(--accent); }
.logo span { color: var(--accent2); }
.tabs { display: flex; gap: 6px; }
.tab-btn { background: transparent; color: var(--muted); font-family: 'Syne', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid transparent; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all .2s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-color: var(--border); background: var(--surface2); }
#auth-area { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.auth-muted { font-size: 11px; color: var(--muted); }
.btn-mini { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; font-size: 11px; padding: 6px 12px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; transition: all .2s; }
.btn-mini:hover { color: var(--text); border-color: var(--muted); }
.btn-mini.accent { color: #000; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn-mini.accent:hover { background: #f5c842; }

/* ── Tab panels ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Upload ── */
.upload-zone { padding: 28px; max-width: 1800px; margin: 0 auto; }
.upload-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.upload-card { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 14px; cursor: pointer; transition: border-color .2s; position: relative; }
.upload-card:hover { border-color: var(--accent); }
.upload-card.loaded { border-color: var(--green); }
.upload-card.loaded::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--green); font-size: 13px; font-weight: 700; }
.upload-card input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.card-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-family: 'Syne', sans-serif; font-weight: 600; margin-bottom: 5px; }
.card-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.card-desc { font-size: 10px; color: var(--muted); line-height: 1.5; }
.card-filename { font-size: 9px; color: var(--green); margin-top: 7px; word-break: break-all; }

.btn-convert { background: var(--accent); color: #000; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; border: none; padding: 13px 28px; border-radius: 6px; cursor: pointer; transition: all .2s; width: 100%; }
.btn-convert:hover:not(:disabled) { background: #f5c842; }
.btn-convert:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

.post-actions { display: none; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.post-actions.show { display: flex; }
.btn-action { background: transparent; color: var(--accent2); font-family: 'Syne', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--accent2); padding: 9px 18px; border-radius: 5px; cursor: pointer; transition: all .2s; }
.btn-action:hover { background: var(--accent2); color: #fff; }
.btn-action.save { color: var(--green); border-color: var(--green); }
.btn-action.save:hover:not(:disabled) { background: var(--green); color: #04130c; }
.btn-action:disabled { opacity: .45; cursor: not-allowed; }
.save-note { font-size: 11px; color: var(--muted); }

.hist-card { margin-top: 22px; background: var(--surface); border: 1px dashed var(--border); border-radius: 8px; padding: 16px 18px; }
.hist-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.hist-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.hist-desc { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 560px; line-height: 1.5; }
.hist-btn { cursor: pointer; }
.hist-file { font-size: 12px; color: var(--text); margin-top: 12px; }
.hist-meta { font-size: 11px; color: var(--muted); }
.hist-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.output-section { max-width: 1800px; margin: 0 auto; padding: 8px 28px 48px; }

/* ── Status / messages ── */
.status-bar { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin-bottom: 20px; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.error-msg { background: rgba(248,113,113,.08); border: 1px solid var(--red); color: var(--red); border-radius: 6px; padding: 12px 16px; font-size: 12px; }
.warn-msg { background: rgba(240,180,41,.08); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 10px 14px; font-size: 11.5px; margin-bottom: 16px; }

/* ── Tables (preview) ── */
.block { margin-bottom: 32px; }
.block-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.block-title small { color: var(--muted); font-size: 10px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0; text-transform: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
table { border-collapse: collapse; font-size: 11.5px; }
th.lbl, td.lbl { position: sticky; left: 0; z-index: 2; min-width: 128px; max-width: 128px; padding: 8px 12px; text-align: left; white-space: nowrap; border-right: 2px solid var(--border); }
th.lbl { background: var(--surface2); color: var(--muted); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--border); }
td.lbl { background: var(--surface2); color: var(--accent); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--border); }
td.lbl.tr { color: var(--accent2); font-weight: 700; font-size: 12px; background: var(--surface3); }
th.ch { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: right; white-space: nowrap; font-size: 9px; letter-spacing: .5px; color: var(--muted); font-weight: 500; min-width: 96px; }
th.ch .n { color: var(--text); font-size: 10px; font-weight: 600; display: block; margin-bottom: 2px; letter-spacing: 0; }
th.ch .t { color: var(--accent); font-size: 10px; font-weight: 600; }
th.ch.gc { background: var(--surface3); border-left: 2px solid var(--border); }
td.v { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.v.z { color: var(--muted); }
td.v.nz { color: var(--text); }
td.v.tr { font-weight: 700; color: var(--accent2); background: var(--surface3); }
td.v.gc { background: var(--surface3); border-left: 2px solid var(--border); font-weight: 600; color: var(--accent); }
td.v.gc.tr { color: var(--accent); font-size: 12px; }
tr:hover td.v:not(.tr) { background: rgba(240,180,41,.045); }
tr:hover td.v.gc { background: var(--surface3); }
tr:hover td.lbl:not(.tr) { background: var(--hover); }
tr.section-hdr td { padding: 5px 12px; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
td.sec-lbl.dine { color: var(--blue); background: rgba(96,165,250,.07); border-left: 2px solid var(--blue); }
td.sec-lbl.deliv { color: var(--accent2); background: rgba(232,115,74,.07); border-left: 2px solid var(--accent2); }
tr.sub-total td { background: var(--surface3); }
td.str { font-weight: 600; font-size: 11px; }
td.str.dine-str { color: var(--blue); }
td.str.deliv-str { color: var(--accent2); }
tr.grand-total td { background: var(--surface3); border-top: 2px solid var(--border); }
tr.acc-row td { padding: 3px 10px; background: var(--surface2); border-bottom: 1px solid var(--border); }
td.acc-lbl { font-size: 8px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
td.acc-cell { text-align: center; }
.acc-tag { display: inline-block; background: var(--border); color: var(--muted); border-radius: 3px; font-size: 8px; padding: 1px 4px; margin: 0 1px; }
.card-panels { display: flex; gap: 16px; flex-wrap: wrap; }
.card-panel { flex: 1; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); padding: 14px 14px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; }
.panel-total { font-size: 12px; color: var(--accent); font-weight: 600; }
.card-panel table { width: 100%; }
.card-panel td.lbl { min-width: 120px; max-width: none; position: static; border-right: none; }
.card-panel td.v { min-width: 80px; }

/* ── Dashboard ── */
.dash-zone { max-width: 1800px; margin: 0 auto; padding: 24px 28px 56px; }
.dash-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.date-field { display: flex; flex-direction: column; gap: 4px; }
.date-field label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.date-field input { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color-scheme: dark; }
.date-field input:focus { outline: none; border-color: var(--accent); }
.date-step { display: flex; align-items: center; gap: 4px; }
.date-arrow { background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 26px; height: 35px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .2s; }
.date-arrow:hover { color: var(--text); border-color: var(--accent); background: var(--surface2); }
.date-arrow:active { background: var(--accent); color: #000; }
.range-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; cursor: pointer; height: 35px; color-scheme: dark; min-width: 130px; }
.range-select:focus { outline: none; border-color: var(--accent); }
body.light .range-select { color-scheme: light; }
.preset-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.btn-preset { background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; padding: 8px 12px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; transition: all .2s; }
.btn-preset:hover { color: var(--text); border-color: var(--muted); }
.btn-preset.active { color: #000; background: var(--accent); border-color: var(--accent); font-weight: 600; }
body.light .date-field input, body.light .mini-select { color-scheme: light; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px; }
.kpi .k-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-family: 'Syne', sans-serif; font-weight: 600; }
.kpi .k-val { font-size: 24px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 10px; color: var(--muted); margin-top: 3px; }
.kpi.accent .k-val { color: var(--accent); }
.kpi.green .k-val { color: var(--green); }
.kpi.blue .k-val { color: var(--blue); }

.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart-grid.two { grid-template-columns: 1fr 1fr; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px; }
.chart-card h3 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 360px; }
/* horizontal scroll for date-based charts with many bars */
.chart-scroll { overflow-x: auto; overflow-y: hidden; }
.chart-inner { position: relative; height: 100%; min-width: 100%; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h3 { margin-bottom: 0; }
.mini-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; color-scheme: dark; max-width: 170px; }
.mini-select:focus { outline: none; border-color: var(--accent); }
.ovo-selects { display: flex; align-items: center; gap: 6px; }
.ovo-selects .mini-select { max-width: 120px; }
.ovo-vs { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.hr-sub { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 10px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.hr-caption { font-size: 11px; color: var(--muted); margin: -4px 0 12px; }
.last-saved { font-size: 11px; color: var(--muted); margin-left: auto; align-self: center; }

.rank-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px; margin-top: 14px; }
.rank-card h3 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rank-table th { text-align: left; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.rank-table th:last-child, .rank-table td:last-child, .rank-table .r-val { text-align: right; }
.rank-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.rank-table .r-num { color: var(--muted); width: 36px; }
.rank-table .r-name { color: var(--text); }
.rank-table .r-val { color: var(--accent); font-weight: 600; }
.rank-table .r-pct { color: var(--muted); width: 70px; text-align: right; }
.rank-table tr.r-grand td { border-top: 2px solid var(--border); border-bottom: none; color: var(--accent2); font-weight: 700; }

.dash-empty { display: none; text-align: center; color: var(--muted); padding: 60px 20px; font-size: 13px; }

/* ── Item report (card outlets) ── */
.it-search { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; height: 35px; min-width: 200px; }
.it-search:focus { outline: none; border-color: var(--accent); }

.it-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.it-table th { text-align: left; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-family: 'Syne', sans-serif; font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.it-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.it-table tbody tr:hover td { background: var(--hover); }
/* The item name is pinned left: with 30 day-columns the table scrolls inside
   its card, and an unpinned name column would scroll away, leaving rows of
   numbers you can't identify. Needs an opaque background to cover what slides
   under it, and must out-stack the sticky header at the corner. */
.it-table .c-item { color: var(--text); position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 240px; }
.it-table th.c-item { z-index: 3; }
.it-table tbody tr:hover .c-item { background: var(--hover); }
/* category groups — collapsible */
/* A collapsed main hides everything under it — subcategory bands and expanded
   variant rows included, not just the item rows. Listing only .it-item here
   left the SUB headers on screen under a closed category. */
.it-grp.collapsed .it-item,
.it-grp.collapsed .it-sub-hdr,
.it-grp.collapsed .it-var { display: none; }
.it-grp-hdr { cursor: pointer; }
.it-grp-hdr td { background: var(--surface3); border-bottom: 1px solid var(--border); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px; color: var(--accent); }
.it-grp-hdr .c-item { background: var(--surface3); z-index: 2; }
/* Subcategory band: quieter than the main category above it, louder than the
   item rows below, and indented so the hierarchy reads at a glance. */
/* ─── Item report: save / reopen from the database ─── */
.it-db-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.it-db-lbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.it-db-date { padding: 7px 10px; font-size: 12px; }
.it-db-note { font-size: 11px; color: var(--muted); }
.it-db-note.ok  { color: var(--green); }
.it-db-note.bad { color: var(--red); }

/* ─── Outlet tick-list ─── */
.it-outlet-field { position: relative; }
.it-outlet-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; }
.it-outlet-caret { opacity: .6; font-size: 10px; }
.it-outlet-menu { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 4px;
  min-width: 260px; max-height: 340px; overflow-y: auto;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px; }
.it-outlet-menu[hidden] { display: none; }
.it-opt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12px; color: var(--text); white-space: nowrap; }
.it-opt:hover { background: var(--surface3); }
.it-opt.on { color: var(--accent); }
.it-opt-box { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: var(--bg); }
.it-opt.on .it-opt-box { background: var(--accent); border-color: var(--accent); }
.it-opt-n { margin-left: auto; padding-left: 14px; opacity: .5; font-size: 10px; }
/* A business row is single-select, so it reads as a radio rather than a tick */
.it-opt.solo .it-opt-box { border-radius: 50%; }
.it-opt-head { padding: 8px 10px 4px; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); }
.it-opt-sep { height: 1px; margin: 4px 6px; background: var(--border); }
/* Select all / Clear are actions, not branches: muted, and their tick box is
   left hollow so a glance down the list never counts them as outlets. */
.it-opt-act { color: var(--muted); }
.it-opt-act:hover { color: var(--text); }
.it-opt-act .it-opt-box { border-style: dashed; opacity: .55; }

/* The dashboard's own pickers (Payment Breakdown, Sales by Hour) reuse every
   .it-opt* rule above so the two lists stay identical. Only the trigger and the
   anchoring differ: these sit at the RIGHT of a .card-head, so the menu hangs
   from the right edge — anchored left it runs off the card on a narrow pane. */
.pick-field { position: relative; display: inline-block; }
.pick-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 152px; max-width: 210px; text-align: left; }
.pick-menu { left: auto; right: 0; }

.it-sub-hdr { cursor: pointer; }
.it-sub-hdr td { background: var(--surface2); border-bottom: 1px solid var(--border);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .5px; color: var(--text); }
.it-sub-hdr .c-item { background: var(--surface2); z-index: 2; padding-left: 22px; }
.it-sub-tag { display: inline-block; margin-right: 8px; padding: 1px 5px; border-radius: 3px;
  background: var(--border); color: var(--muted); font-size: 8px; letter-spacing: 1px; vertical-align: middle; }
.it-grp:not(.collapsed) .it-sub-hdr + .it-item .c-item { padding-left: 34px; }
.it-sub-hdr + .it-item ~ .it-item .c-item { padding-left: 34px; }
.it-grp-hdr:hover td, .it-grp-hdr:hover .c-item { background: var(--hover); }
.it-table tfoot .c-item { background: var(--surface); z-index: 2; }
.it-blocked .c-item { background: #1e1b12; }
body.light .it-blocked .c-item { background: #fdf6e3; }
.it-grp-hdr .c-n { color: var(--accent); font-weight: 600; }
.it-grp-hdr .it-tw { display: inline-block; width: 13px; color: var(--muted); font-size: 9px; }
.it-grp-n { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 9.5px; letter-spacing: 0; color: var(--muted); margin-left: 9px; text-transform: none; }
.it-table .it-item .c-item { padding-left: 33px; }
.it-table .c-n { text-align: right; font-variant-numeric: tabular-nums; width: 80px; white-space: nowrap; }
.it-table .c-day { width: 62px; color: var(--text); }
.it-table th.c-day { color: var(--blue); }
.it-table .it-grp-hdr .c-day { color: var(--accent); }
/* Branch columns. Wider than a date because the labels are names ("Ara
   Damansara"), and 11 of them overflow the card — .table-wrap already scrolls
   horizontally and .c-item is sticky, so the item name stays pinned while the
   branches scroll under it. Green, to read as a different axis from the days. */
.it-table .c-branch { width: 92px; color: var(--text); }
.it-table th.c-branch { color: var(--green); white-space: normal; line-height: 1.3; }
.it-table .it-grp-hdr .c-branch { color: var(--accent); }
.it-table .it-var .c-branch { color: var(--muted); font-size: 11px; }
.it-table th.c-n { text-align: right; }
.it-table .c-n.z { color: var(--muted); }
.it-table .c-total { color: var(--accent); font-weight: 600; }
.it-table .c-pf { width: 60px; }
.it-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; color: var(--accent2); font-weight: 700; font-size: 11px; }

.pf { font-size: 8px; letter-spacing: 1px; font-family: 'Syne', sans-serif; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
.pf-D { color: var(--blue); background: rgba(96,165,250,.12); }
.pf-S { color: var(--accent2); background: rgba(232,115,74,.12); }
.pf-DS { color: var(--green); background: rgba(52,211,153,.12); }

/* variant rows under an item — e.g. TK Signature 1+1 › Cold / Hot */
.it-item.has-vars { cursor: pointer; }
.it-item .it-tw { display: inline-block; width: 13px; color: var(--muted); font-size: 9px; }
.it-vsum { font-size: 9.5px; color: var(--muted); margin-left: 9px; }
.it-var td { background: var(--surface2); border-bottom: 1px solid var(--border); }
.it-var .c-item { background: var(--surface2); padding-left: 33px; }
.it-vname { color: var(--muted); font-style: italic; font-size: 11px; }
.it-var .c-total.v { color: var(--blue); font-weight: 600; }
.it-var .c-day { color: var(--muted); font-size: 11px; }

.it-blocked td { background: rgba(240,180,41,.05); }
.it-flag { font-size: 8px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: rgba(240,180,41,.14); border-radius: 3px; padding: 2px 5px; margin-left: 7px; cursor: help; font-family: 'Syne', sans-serif; font-weight: 600; }
.it-note-inline { font-size: 9.5px; color: var(--muted); margin-left: 7px; }

/* Collapsed-by-default header for the notes block. Muted until hovered; the
   count (and any ⚠) sits to the right so a warning shows even while hidden. */
.it-notes-head { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--muted); font-size: 11px; margin-bottom: 8px; transition: color .15s, border-color .15s; }
.it-notes-head:hover { color: var(--text); border-color: var(--accent); }
.it-notes-head strong { color: var(--text); font-weight: 600; letter-spacing: .3px; }
.it-notes-tw { font-size: 10px; opacity: .7; width: 9px; }
.it-notes-n { color: var(--muted); font-size: 10px; opacity: .85; }
.it-note { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--blue); border-radius: 6px; padding: 9px 13px; font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.it-note strong { color: var(--text); }
.it-note code { background: var(--surface2); border-radius: 3px; padding: 1px 4px; color: var(--accent); font-size: 10.5px; }

/* ── Gate cards (setup / login prompt) ── */
.gate-card { max-width: 640px; margin: 30px auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px 30px; }
.gate-card h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; color: var(--accent); margin-bottom: 12px; }
.gate-card p { font-size: 12.5px; color: var(--text); line-height: 1.6; margin-bottom: 12px; }
.gate-card ol { margin: 0 0 12px 20px; }
.gate-card li { font-size: 12.5px; color: var(--text); line-height: 1.8; }
.gate-card code { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--accent); }
.gate-foot { font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }

/* ── Login modal ── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 26px 28px; width: 340px; }
.modal-box h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; color: var(--accent); margin-bottom: 16px; }
.modal-box label { display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; margin-top: 12px; }
.modal-box input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 9px 11px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.modal-box input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.modal-actions .btn-convert { flex: 1; }
.login-err { color: var(--red); font-size: 11px; margin-top: 10px; min-height: 14px; }

@media (max-width: 1000px) {
  .upload-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid, .chart-grid.two { grid-template-columns: 1fr; }
}

/* ── Settings / Dinlr sync panel (js/sync.js) ──────────────────────────
   Wider than the login modal, and scrollable: the recent-activity table
   grows and must not push the buttons off a laptop screen. */
.modal-box.wide { width: min(620px, calc(100vw - 40px)); max-height: 86vh; overflow-y: auto; }

.sync-banner { border-radius: 6px; padding: 9px 12px; font-size: 12px; margin-bottom: 14px; border: 1px solid; }
.sync-banner.good { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.sync-banner.warn { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sync-banner.bad  { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }

.sync-err { color: var(--red); font-size: 12px; line-height: 1.6; border: 1px solid var(--red); border-radius: 6px; padding: 11px 13px; }

.sync-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.sync-table th { text-align: left; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 500; }
.sync-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sync-table tr:last-child td { border-bottom: none; }
.sync-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sync-table.small td, .sync-table.small th { padding: 5px 8px; font-size: 11px; }

.sync-pill { display: inline-block; font-size: 10px; letter-spacing: .5px; padding: 3px 8px; border-radius: 999px; border: 1px solid; }
.sync-pill.good   { color: var(--green); border-color: var(--green); }
.sync-pill.warn   { color: var(--accent); border-color: var(--accent); }
.sync-pill.bad    { color: var(--red); border-color: var(--red); }
.sync-pill.manual { color: var(--muted); border-color: var(--border); }

.sync-sub { font-size: 10px; color: var(--muted); margin-top: 3px; }
.sync-sub.err { color: var(--red); }
.sync-when { color: var(--muted); white-space: nowrap; }
.sync-h { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.sync-h .sync-sub { display: inline; margin: 0; text-transform: none; letter-spacing: 0; }
.sync-foot { font-size: 10px; color: var(--muted); line-height: 1.7; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }

/* ── Payment breakdown table (dashboard.js renderBreakdown) ──────────── */
.pb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pb-table th { text-align: left; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--border); font-weight: 500; }
.pb-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.pb-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-table .pb-sub td { font-weight: 600; color: var(--accent); border-top: 1px solid var(--border); border-bottom: 2px solid var(--border); }
.pb-table .pb-grand td { font-weight: 700; color: var(--blue); font-size: 13px; border-bottom: none; }
.pb-table .pb-gap td { padding: 5px; border: none; }
.pb-table .pb-tot { color: var(--text); font-weight: 600; }
.pb-none { color: var(--muted); font-size: 12px; padding: 14px 4px; }
/* Narrow panes: let the table scroll rather than the page. */
#pb-body { overflow-x: auto; }

/* ── Payment breakdown doughnuts (dashboard.js renderBreakdownCharts) ──
   Three views of the rows in the table above. Replaced the standalone
   "Dine In vs Delivery" card, which only restated two of its numbers. */
.pb-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pb-chart h4 { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 8px; text-align: center; }
.pb-chart .chart-box { height: 230px; }
/* Three doughnuts side by side stop being readable well before the page does. */
@media (max-width: 900px) { .pb-charts { grid-template-columns: 1fr; } }
.chart-grid.one { grid-template-columns: 1fr; }

/* Upload lives beside Settings now — it is a utility, not a primary tab. It
   keeps .tab-btn so showTab()'s active-state wiring works untouched, so the
   mini styling has to win over the tab rules. */
.btn-mini.tab-btn { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; padding: 6px 12px; border: 1px solid var(--border); color: var(--muted); }
.btn-mini.tab-btn:hover { color: var(--text); border-color: var(--muted); }
.btn-mini.tab-btn.active { color: #000; background: var(--accent); border-color: var(--accent); font-weight: 600; }
/* Push Upload/Settings/theme to the right, away from the primary tabs. */
.header .tabs { margin-right: auto; }

/* ── Chart colour picker (js/sync.js) ─────────────────────────────────── */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cc-title { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cc-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text); padding: 3px 0; cursor: pointer; }
.cc-row input[type=color] { width: 26px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; flex: none; }
.cc-custom { font-size: 9px; color: var(--accent); font-style: normal; }
.cc-actions { margin-top: 12px; }

/* The channel-coverage banner: above the table, always visible. It explains a
   total that is legitimately lower than the period's real trade, and the notes
   block below is collapsed by default — so this cannot live there. */
.it-cover-warn {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--amber, #d9a441);
  background: color-mix(in srgb, var(--amber, #d9a441) 12%, transparent);
  font-size: 12.5px; line-height: 1.45;
}

/* A channel the owner has but which sold nothing in this period: shown, and
   tickable, so "FoodPanda 0" is a fact rather than a missing row — but dimmed
   so the eye still goes to the channels that traded. */
.it-opt.it-opt-zero { opacity: .55; }

/* The "no access yet" card. Deliberately looks like a message, not an error and
   not an empty report — someone seeing this must not report it as the sync
   being down, which is what a blank dashboard would be read as. */
.noaccess-card {
  max-width: 560px; margin: 48px auto; padding: 28px 32px;
  border: 1px solid var(--line, #ddd); border-radius: 12px;
  background: var(--card, #fff); text-align: center;
}
.noaccess-card h2 { margin: 0 0 12px; font-size: 20px; }
.noaccess-card p { margin: 8px 0; font-size: 13.5px; line-height: 1.55; }
.noaccess-sub { opacity: .7; }

/* The permission ticks in ⚙ Settings. A box, not a checkbox input: the pane is
   re-rendered after every save (so a refused write snaps the tick back), and a
   native input would fight that. */
.perm-tick {
  display: inline-block; width: 20px; height: 20px; line-height: 19px;
  border: 1px solid var(--line, #ccc); border-radius: 5px; cursor: pointer;
  text-align: center; font-size: 12px; user-select: none;
}
.perm-tick:hover { border-color: var(--accent, #8a6d3b); }
.perm-tick.on { background: var(--accent, #8a6d3b); border-color: var(--accent, #8a6d3b); color: #fff; }

/* The branch limit in ⚙ Settings. The trigger looks like a value, not a
   button, because "All branches" IS the current state — an admin reads the
   column before he clicks anything in it. `.set` marks a real restriction so a
   limited account is visible at a glance down the column. */
.perm-branch {
  display: inline-block; cursor: pointer; user-select: none;
  border-bottom: 1px dashed var(--line, #ccc); padding-bottom: 1px;
}
.perm-branch:hover { border-bottom-color: var(--accent, #8a6d3b); }
.perm-branch.set { color: var(--accent, #8a6d3b); }
.perm-branch-caret { opacity: .5; font-size: 9px; }

/* The tick-list reuses `.it-opt*` from the Items branch picker rather than
   cloning it, exactly as outletpick.js does — one set of rules, so the three
   lists cannot drift apart visually. */
.perm-branch-row > td { padding-top: 0 !important; }
.perm-branch-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border, var(--line, #ddd)); border-radius: 6px;
  padding: 4px; margin: 2px 0 6px;
}