:root {
  --bg: #f6f7f9; --card: #fff; --line: #e3e6ea; --ink: #1b2330; --muted: #6b7480;
  --ok: #1a7f4b; --okbg: #e6f5ec; --warn: #9a6b00; --warnbg: #fdf2d8;
  --err: #b3261e; --errbg: #fdecea; --accent: #2456c2; --scc: #8a4b00; --ours: #0f6b3c;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
main { padding: 20px 24px; }
h1 { margin: 0 0 12px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 24px; }
.brand { font-weight: 700; }
.topbar nav a { margin-left: 16px; }

.pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.ok { background: var(--okbg); color: var(--ok); }
.pill.warn { background: var(--warnbg); color: var(--warn); }
.pill.mini { font-size: 11px; padding: 1px 7px; }

/* upload */
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 32px;
  text-align: center; background: var(--card); margin: 12px 0; }
.dropzone.drag { border-color: var(--accent); background: #eef3ff; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--card);
  padding: 7px 14px; border-radius: 8px; font-weight: 600; }
button.primary, #upload-form button[type=submit] { background: var(--accent); color: #fff; border-color: var(--accent); }
button.approve { background: var(--okbg); color: var(--ok); border-color: var(--ok); }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }
tr.inactive td { opacity: .5; }
.result { margin-top: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; }
.result.ok { border-color: var(--ok); }
.result.err { border-color: var(--err); background: var(--errbg); }
pre { background: #0d1117; color: #d7e0ea; padding: 12px; border-radius: 8px; overflow:auto; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 12px; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.banner { padding: 10px 12px; border-radius: 8px; }
.banner.warn { background: var(--warnbg); color: var(--warn); }

/* grid */
table.grid { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.grid th { background: #eef1f5; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.grid td.num, .grid th.num { text-align: right; white-space: nowrap; }
.invoice-row td { background: #f0f4ff; }
.row-actions { float: right; display: flex; gap: 8px; }
.inline { display: inline; }

.scc { color: var(--scc); }
.ours { color: var(--ours); }
.delta { color: var(--ours); font-weight: 600; }
.src { font-size: 10px; }

/* status colours */
.status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; display: inline-block; }
.status.EXTRACTED { background:#eef1f5; color:#445; }
.status.PRICED { background: var(--okbg); color: var(--ok); }
.status.APPROVED { background:#dceffe; color:#0a4fa0; }
.status.PUSHED { background:#e7e0fb; color:#5a3bb0; }
.status.NEEDS_REVIEW, .status.UNMATCHED_CUSTOMER, .status.AMOUNT_CONFLICT, .status.TOTAL_MISMATCH, .status.ERROR {
  background: var(--warnbg); color: var(--warn); }
.status.AMOUNT_CONFLICT, .status.ERROR { background: var(--errbg); color: var(--err); }
.status.ALREADY_INVOICED { background:#fdecc8; color:#8a5a00; }
.err-note { font-size: 11px; color: var(--err); }

/* customers page */
.card { border:1px solid #e2e6ec; border-radius:10px; padding:14px 16px; margin:14px 0; background:#fff; }
.card h2 { margin:0 0 10px; font-size:15px; }
.row-form { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.sitelist { list-style:none; margin:0 0 6px; padding:0; }
.sitelist li { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:3px 0; border-bottom:1px dashed #eef1f5; }
.btn.mini, button.mini { font-size:11px; padding:1px 7px; }

.edit-form { display: grid; gap: 6px; padding: 8px; background:#fafbfc; border:1px solid var(--line);
  border-radius: 8px; margin: 6px 0; min-width: 240px; }
.edit-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.edit-form input, .edit-form select { padding: 4px 6px; border:1px solid var(--line); border-radius: 6px; }
td.actions { white-space: nowrap; }
details summary { cursor: pointer; color: var(--accent); }

/* login page */
.login-body { display:flex; min-height:100vh; align-items:center; justify-content:center;
  background:#f4f6f9; margin:0; }
.login-card { width:100%; max-width:340px; background:#fff; border:1px solid #e2e6ec;
  border-radius:12px; padding:28px 26px; box-shadow:0 6px 24px rgba(20,30,50,.06); }
.login-card .brand { font-weight:600; font-size:16px; margin-bottom:2px; }
.login-form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.login-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#5a6473; }
.login-form input { padding:8px 10px; border:1px solid #cfd6df; border-radius:8px; font-size:14px; }
.login-form button { margin-top:6px; padding:9px; font-size:14px; }