:root{
  --ink:#16202c; --muted:#5b6b7c; --line:#dfe5ec; --bg:#f4f6f9; --card:#fff;
  --brand:#0b5cab; --brand-d:#084a8a; --ok:#0d7a4a; --warn:#a15c00; --bad:#b3261e;
  --chip:#eef3f9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- chrome ---- */
.topbar{background:var(--brand);color:#fff}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:56px}
.brand{color:#fff;font-weight:700;font-size:19px;letter-spacing:.2px}
.brand span{font-weight:300;opacity:.9}
.modules{display:flex;gap:6px;flex:1}
.modules a{color:#dce9f8;padding:6px 12px;border-radius:6px;font-weight:600;font-size:14px}
.modules a.on{background:rgba(255,255,255,.18);color:#fff}
.who{display:flex;align-items:center;gap:12px;font-size:13px}
.who a{color:#dce9f8}
.whoname{font-weight:600}
.whocode{background:rgba(255,255,255,.15);padding:2px 8px;border-radius:20px;
  font-variant-numeric:tabular-nums}
.subnav{background:var(--card);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px}
.subnav a{padding:12px 14px;color:var(--muted);font-weight:600;font-size:14px;
  border-bottom:2px solid transparent}
.subnav a.on{color:var(--brand);border-bottom-color:var(--brand)}
main{padding:22px 18px 40px}
.foot{color:var(--muted);font-size:12px;padding:0 18px 28px}

/* ---- blocks ---- */
h1{font-size:21px;margin:0 0 4px}
h2{font-size:16px;margin:26px 0 10px}
.sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tile .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:23px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.tile .n{color:var(--muted);font-size:12px;margin-top:2px}
.tile.accent .v{color:var(--brand)}
.tile.warn .v{color:var(--warn)}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{background:#f7f9fc;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcff}
.num{text-align:right;font-variant-numeric:tabular-nums}
.hint2{display:block;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:11px;color:#8a97a5;margin-top:3px;white-space:normal;max-width:150px}
thead th{vertical-align:top}
.dim{color:var(--muted)}

.badge{display:inline-block;background:var(--bad);color:#fff;border-radius:20px;
  padding:1px 7px;font-size:11px;font-weight:700;margin-left:4px;vertical-align:middle}
.subnav a.on .badge{background:var(--bad)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.ok{background:#e4f5ec;color:var(--ok)}
.pill.no{background:#fdeceb;color:var(--bad)}
.pill.draft{background:#fff3e0;color:var(--warn)}
.pill.dealer{background:#fdeceb;color:var(--bad)}
.pill.bld{background:#e8f0fb;color:var(--brand)}

/* ---- forms ---- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd5f0;border-color:var(--brand)}
td input,td select{min-width:110px;padding:6px 8px;font-size:13px}
td input.money{min-width:104px;text-align:right;font-variant-numeric:tabular-nums}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:7px;
  padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.row>div{min-width:180px}
.actions{display:flex;gap:10px;margin-top:16px;position:sticky;bottom:0;
  background:var(--bg);padding:12px 0}

.note{background:#eef3f9;border-left:3px solid var(--brand);padding:10px 14px;
  border-radius:0 7px 7px 0;font-size:13px;color:var(--muted);margin:14px 0}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash.ok{background:#e4f5ec;color:var(--ok)}
.flash.bad{background:#fdeceb;color:var(--bad)}
.flash ul{margin:6px 0 0 18px;padding:0}

/* ---- login ---- */
.loginpage{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:30px;width:100%;max-width:392px;box-shadow:0 2px 14px rgba(20,40,70,.07)}
.loginbox .brand{color:var(--brand);font-size:25px;display:block;margin-bottom:5px}
.loginbox .tag{color:var(--muted);font-size:13px;margin-bottom:22px}
.loginbox .field{margin-bottom:15px}
.loginbox .btn{width:100%;padding:11px}
.hint{color:var(--muted);font-size:12px;margin-top:5px}

@media(max-width:720px){
  .topbar .wrap{height:auto;padding:10px 18px;flex-wrap:wrap;gap:10px}
  .modules{order:3;width:100%}
  th,td{padding:8px 10px}
}

/* ---- on-screen report (works inside browser isolation: nothing downloads) ---- */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--brand);padding-bottom:12px;margin-bottom:6px}
table.rep{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:4px}
table.rep th,table.rep td{border:1px solid var(--line);padding:6px 9px;text-align:left}
table.rep thead th{background:#eef3f9;color:var(--ink);font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;position:static}
table.rep tfoot th{background:#f7f9fc;font-size:12px}
table.rep .num{text-align:right;font-variant-numeric:tabular-nums}

@media print{
  @page{size:A4 landscape;margin:11mm}
  .topbar,.subnav,.foot,.noprint,.actions{display:none!important}
  body{background:#fff;font-size:11px}
  main{padding:0}
  .wrap{max-width:none;padding:0}
  .sheet{border:0;border-radius:0;padding:0;box-shadow:none}
  .tiles{grid-template-columns:repeat(4,1fr);gap:8px}
  .tile{border:1px solid #bbb;padding:8px}
  .tile .v{font-size:17px}
  h2{margin:14px 0 6px;font-size:13px;page-break-after:avoid}
  table.rep{font-size:10px;page-break-inside:auto}
  table.rep thead{display:table-header-group}   /* repeat headers on every page */
  table.rep tr{page-break-inside:avoid}
  table.rep th,table.rep td{padding:3px 5px;border:1px solid #999}
  .pill{border:1px solid #999;padding:0 4px}
  a[href]:after{content:""}
}

/* ---- ageing bands ---- */
.bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.band .bl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.band .bv{font-size:20px;font-weight:700;margin:3px 0 6px;font-variant-numeric:tabular-nums}
.band .bu{font-size:12px;font-weight:400;color:var(--muted)}
.band .bp{font-size:11px;color:var(--muted);margin-top:4px}
.bbar{height:6px;background:#eef1f5;border-radius:4px;overflow:hidden}
.bbar span{display:block;height:100%;border-radius:4px;background:var(--ok)}
.band.b1 .bbar span{background:#4a9d5f}
.band.b2 .bbar span{background:#d3a017}
.band.b3 .bbar span{background:#d1710f}
.band.b4 .bbar span{background:var(--bad)}
.band.b3 .bv,.band.b4 .bv{color:var(--bad)}
.bandfoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
@media print{.bbar{border:1px solid #999}.bbar span{background:#666!important}}

/* ---- required fields + live row check on the entry grid ---- */
.rq{color:var(--bad);font-weight:700;margin-left:2px}
.rowmsg{display:block;font-size:11px;color:var(--bad);margin-top:3px;white-space:normal;max-width:150px}
.rowmsg.ok{color:var(--ok)}
tr.rowbad td{background:#fdf4f3}
tr.rowbad input.money{border-color:var(--bad)}

/* ---- wide report tables must scroll inside their card, never past it ---- */
.repwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px;
  border:1px solid var(--line);border-radius:8px;max-width:100%}
.repwrap table.rep{margin-bottom:0;min-width:100%}
.repwrap table.rep th,.repwrap table.rep td{border-left:0;border-right:0}
.repwrap table.rep th:first-child,.repwrap table.rep td:first-child{border-left:0}
.sheet{overflow:hidden}                 /* stop any child pushing the card wider */
.sheet .tiles{max-width:100%}
@media print{
  .repwrap{overflow:visible;border:0;max-width:none}
  .repwrap table.rep{min-width:0;width:100%}
}

/* a required cell that Submit will reject, flagged the moment a total is typed */
td input.needed,td select.needed{border:1px solid var(--bad);background:#fdeceb;
  box-shadow:0 0 0 2px rgba(179,38,30,.12)}
td input.needed:focus{outline:2px solid #f0b3ae}

/* 'this dealer owes nothing' - a complete answer, not a blank row */
/* thumb-sized: most BLDs fill this on a phone */
button.nilbtn,span.nilbtn{margin-left:6px;padding:6px 12px;font-size:12px;
  line-height:16px;min-height:32px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--dim);cursor:pointer;display:inline-block}
button.nilbtn:hover{background:#f2f2f2;color:var(--ink)}

/* the total is added up, never typed - see entry.html */
td input.computed{background:var(--bg,#f6f7f9);color:var(--ink);
  font-weight:600;border-style:dashed;cursor:default}
td input.computed:focus{outline:none}