:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1a2230;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #1f4e78;      /* matches the GAS pivot header blue */
  --accent-soft: #eaf1f8;
  --pos: #0f7a4d;
  --zero: #98a2b3;
  --subtotal: #eef3fb;
  --grand: #e4efe1;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141b; --panel: #161c25; --ink: #e7ecf3; --muted: #98a2b3;
    --line: #2a323d; --accent: #6ea8dc; --accent-soft: #1b2733;
    --pos: #4ade80; --zero: #6b7280; --subtotal: #1b2431; --grand: #1b2a22;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

/* access gate (Cloudflare deploy) */
.loginwrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.loginbox { width: 340px; max-width: 92vw; margin-top: 12vh; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.loginbox h1 { font-size: 19px; margin: 0 0 4px; }
.loginbox p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.loginbox input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; margin-bottom: 10px; background: var(--panel); color: var(--ink); }
.loginbox button { width: 100%; padding: 11px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.loginbox button:hover { filter: brightness(1.05); }
.pwerr { color: #b3261e; font-size: 13px; min-height: 18px; margin-top: 6px; }
@media (prefers-color-scheme: dark) { .pwerr { color: #ff938b; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* top-level app bar: Payroll | Wheel | VPG */
.appbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px; background: var(--accent); color: #fff;
}
.appbar .brand { font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding: 12px 0; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.appbar .paydate { display: flex; align-items: center; gap: 8px; }
.appbar .paydate label { color: rgba(255,255,255,.8); font-size: 12px; }
.appbar .paydate select { padding: 6px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; }
.appbar .paydate select option { color: var(--ink); }
.appbar .badge { color: #fff; border-color: rgba(255,255,255,.4); }
.appbar .badge.live { color: #fff; border-color: #fff; }
.topnav { display: flex; gap: 2px; }
.tnav {
  background: none; border: none; color: rgba(255,255,255,.72); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 15px 16px; border-bottom: 3px solid transparent;
}
.tnav:hover { color: #fff; }
.tnav.on { color: #fff; border-bottom-color: #fff; }

.topbar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 20px 28px; background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.titles h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.titles .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.topbar .paydate { display: flex; align-items: center; gap: 9px; }
.topbar .paydate label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.topbar .paydate select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600;
}
.controls { display: flex; align-items: center; gap: 10px; }
.controls label { color: var(--muted); font-size: 13px; }
.controls select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 14px;
}
.badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.badge.live { color: var(--pos); border-color: var(--pos); }

main { padding: 24px 28px 60px; max-width: 1120px; margin: 0 auto; }
.loading { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.card .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.card .v { font-size: 22px; font-weight: 650; margin-top: 4px; letter-spacing: -.01em; }

section { margin-bottom: 30px; }
section > h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
section > h2 .count { color: var(--muted); font-weight: 400; font-size: 13px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.tablewrap { overflow-x: auto; }
/* a real grid: uniform cells, gridlines on all sides */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
th, td { padding: 9px 13px; text-align: left; white-space: nowrap; border: 1px solid var(--line); }
thead th { background: var(--accent-soft); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
td.num, th.num { text-align: right; }
.money { font-weight: 600; }
.money.zero { color: var(--zero); font-weight: 400; }
td:first-child, td.rowhead { font-weight: 600; }

/* pivot */
.pivot tr.total td { background: var(--grand); font-weight: 700; }
.lvl { color: var(--accent); font-weight: 600; }
.dash { color: var(--zero); }

/* top pivot consumer drill-down */
.pivot-person { cursor: pointer; }
.pivot-person td { background: var(--subtotal); font-weight: 700; }
.pivot-person .chev { display: inline-block; margin-right: 7px; color: var(--muted); transition: transform .15s; }
.pgroup.open .pivot-person .chev { transform: rotate(90deg); }
.pivot-consumer { display: none; }
.pgroup.open .pivot-consumer { display: table-row; }
.pivot-consumer .rowhead.sub { padding-left: 26px; font-weight: 400; color: var(--muted); }

/* forecast banner */
.forecast {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.rowhead.ftblvl { color: #c47f17; }

/* money check */
.moneybar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.moneybar strong { font-size: 13px; }
.moneybar .mmode { color: var(--muted); font-size: 12px; margin-right: 6px; }
.mpill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; cursor: default; }
.mpill.m-crit { background: #fde2e1; color: #b3261e; }
.mpill.m-err  { background: #f3e1fd; color: #6b21a8; }
.mpill.m-warn { background: #fff2cc; color: #8a5a00; }
.mpill.m-unv  { background: #e9edf2; color: #667085; }
.mpill.m-ok   { background: #d9ead3; color: #276738; }
@media (prefers-color-scheme: dark) {
  .mpill.m-crit { background: #3a1513; color: #ff938b; }
  .mpill.m-err  { background: #2a1436; color: #d6a8f5; }
  .mpill.m-warn { background: #2a2412; color: #e6cf95; }
  .mpill.m-unv  { background: #232a33; color: #9aa5b1; }
  .mpill.m-ok   { background: #16281a; color: #7fd694; }
}

/* full-width grid tables that flow with the page (no inner scrollbar) */
table.grid { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
table.grid td, table.grid th { white-space: normal; }
td.mcol { min-width: 320px; }

/* money check detail cell (Deal Review) */
.mcell { border-left: 3px solid currentColor; padding-left: 8px; }
.mcell .mhead { display: block; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.mcell .mtext { display: block; color: var(--ink); font-size: 12px; margin-top: 2px; }
.mcell.m-crit { color: #b3261e; } .mcell.m-err { color: #6b21a8; } .mcell.m-warn { color: #8a5a00; }
.mcell.m-unv { color: #667085; } .mcell.m-ok { color: #276738; }
@media (prefers-color-scheme: dark) {
  .mcell.m-crit { color: #ff938b; } .mcell.m-err { color: #d6a8f5; } .mcell.m-warn { color: #e6cf95; }
  .mcell.m-unv { color: #9aa5b1; } .mcell.m-ok { color: #7fd694; }
}

.placeholder { background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; }
.placeholder h3 { margin: 0 0 6px; }

/* section header + controls (Wheel, etc.) */
.sechead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.secctl { display: flex; align-items: center; gap: 12px; }
.secctl label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.secctl select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 14px; }
.btn { padding: 7px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn:hover { filter: brightness(1.05); }

/* ---- Club Travelo Volume Report (Wheel) ---- */
.volhead { margin-bottom: 20px; }
.crumb { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.crumb-dim { color: var(--muted); font-weight: 600; }
.crumb-sep { color: var(--zero); font-weight: 400; }
.crumb-cur { color: var(--ink); }
.volfilters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fpill {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 11px center;
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
}
.fpill:hover { border-color: var(--accent); }
.freset { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 6px; }
.freset:hover { text-decoration: underline; }

.volcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.volcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.vc-k { font-size: 15px; font-weight: 700; color: var(--ink); }
.vc-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.vc-v { font-size: 34px; font-weight: 650; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }

.wpanel { padding: 0; margin-bottom: 24px; }
.wpanel-h { font-size: 15px; font-weight: 700; padding: 16px 20px 0; }
.wpanel .tablewrap { padding: 6px 12px 14px; }
.wc-grid { stroke: var(--line); stroke-width: 1; }
.wc-axis { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.wc-val { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.wc-name { font-size: 11.5px; fill: var(--ink); }
.wc-bar { fill: var(--accent); }

.voldeth { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.voldetail { padding: 0; }
.wrep { border-top: 1px solid var(--line); }
.wrep:first-child { border-top: none; }
.wrep > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.wrep[open] > summary { background: var(--subtotal); }
.wrep > summary::-webkit-details-marker { display: none; }
.wrep .wr-name { font-weight: 700; font-size: 14px; }
.wrep .wr-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; }
.wrep .wr-tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.voltable td.rpcell { display: flex; align-items: center; gap: 8px; }
.voltable .rep-in { font-weight: 600; }

/* team / brand pills ("Sales Rep Payable") */
.tpill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tpill.tp-club { background: #e0e7ff; color: #3730a3; }
.tpill.tp-exit { background: #d9ead3; color: #276738; }
.tpill.tp-az { background: #d7ecf5; color: #185a7d; }
.tpill.tp-phone { background: #fff2cc; color: #8a5a00; }
.tpill.tp-def { background: #e9edf2; color: #667085; }
@media (prefers-color-scheme: dark) {
  .tpill.tp-club { background: #232a54; color: #b7c0ff; }
  .tpill.tp-exit { background: #16281a; color: #7fd694; }
  .tpill.tp-az { background: #12313f; color: #8fd0ea; }
  .tpill.tp-phone { background: #2a2412; color: #e6cf95; }
  .tpill.tp-def { background: #232a33; color: #9aa5b1; }
}

/* expenses */
.exp-person td { background: var(--subtotal); font-weight: 700; }
.exp-item td:nth-child(4) { white-space: normal; min-width: 220px; color: var(--muted); font-size: 12.5px; }

/* deal status pill */
.stpill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.stpill.st-good { background: #d9ead3; color: #276738; }
.stpill.st-bad { background: #fde2e1; color: #b3261e; }
.stpill.st-neutral { background: #e9edf2; color: #667085; }
@media (prefers-color-scheme: dark) {
  .stpill.st-good { background: #16281a; color: #7fd694; }
  .stpill.st-bad { background: #3a1513; color: #ff938b; }
  .stpill.st-neutral { background: #232a33; color: #9aa5b1; }
}
.penderrow td { background: color-mix(in srgb, #b3261e 6%, transparent); }
.pendsec { margin-top: 22px; }
.subh { font-size: 14px; margin: 0 0 10px; }

/* forecast chip + rules */
.fchip { margin-left: auto; align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #276738; background: #d9ead3; padding: 3px 10px; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .fchip { background: #16281a; color: #7fd694; } }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.rulecard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.rulecard h4 { margin: 0 0 6px; font-size: 14px; }
.rulecard ul { margin: 6px 0 0; padding-left: 18px; }
.rulecard li { margin: 3px 0; }
.rules .note { grid-column: 1 / -1; }
.note { color: var(--muted); font-size: 12.5px; }
.note code { background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

/* main tabs (Summary | Pay Stubs | Deal Review | Rules) */
.maintabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.mtab {
  padding: 9px 18px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.mtab:hover { color: var(--ink); }
.mtab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* person sub-nav (left to right) */
.subnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 16px; }
.stab {
  white-space: nowrap; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600;
}
.stab:hover { border-color: var(--accent); }
.stab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ftbdot { font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #fff; background: #c47f17; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.stab.on .ftbdot { background: rgba(255,255,255,.28); }

/* pay stub */
.stub { }
.stubhead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.sh-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.sh-k { color: var(--muted); font-size: 13px; }
.sh-v { font-variant-numeric: tabular-nums; }
.sh-v.strong { font-weight: 700; font-size: 15px; }
.sh-v.muted { color: var(--muted); }
.sh-note { color: var(--muted); font-size: 12px; font-style: italic; margin-top: 6px; text-align: right; }
.sh-ftb { margin-top: 8px; font-size: 12.5px; color: #8a5a00; background: #fff7e6; border: 1px solid #f0d693; border-radius: 8px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { .sh-ftb { background: #2a2412; border-color: #5c4f22; color: #e6cf95; } }

.dh { font-weight: 700; margin: 4px 0 8px; }
.stubtable td.cmt { white-space: normal; min-width: 180px; color: var(--muted); font-size: 12.5px; }
.stubtable tfoot .total td { background: var(--grand); font-weight: 700; }
/* customer grouping cue: a soft divider where the consumer changes */
.stubtable tbody tr.grp td { border-top: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 720px) { .stubhead { grid-template-columns: 1fr; } }

/* zero / skipped */
.muted-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
details.zeros summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); font-size: 11px; }

.foot { color: var(--muted); font-size: 12px; padding: 16px 28px 30px; text-align: center; }