:root { --ink:#1d2433; --muted:#5b6475; --line:#d9dee7; --bg:#f6f7f9; --accent:#0b5cad; --error:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
.topbar { display:flex; gap:1.5rem; align-items:center; padding:.6rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.topbar nav { flex:1; display:flex; gap:1rem; }
.topbar a { color:var(--accent); text-decoration:none; }
main { padding:1rem; }
.login { max-width:320px; margin:10vh auto; background:#fff; padding:1.5rem; border:1px solid var(--line); border-radius:6px; }
.login form { display:grid; gap:.4rem; }
input, select, textarea, button { font:inherit; padding:.4rem .5rem; border:1px solid var(--line); border-radius:4px; }
button { background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.msg { padding:.5rem .75rem; border-radius:4px; background:#eef4ff; }
.msg-error { background:#fdecea; color:var(--error); }
.card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:1rem; margin-bottom:1rem; max-width:900px; }
.stack > div { display:grid; gap:.25rem; margin-bottom:.6rem; }
.muted { color:var(--muted); }
.signature-preview { max-height:80px; border:1px dashed var(--line); padding:4px; background:#fff; }
.clinic-switch { display:flex; gap:.4rem; align-items:center; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line); }
.errorlist { color:var(--error); margin:0; padding-left:1rem; }
.toolbar { display:flex; gap:.5rem; align-items:center; margin-bottom:.75rem; flex-wrap:wrap; }
a.button { display:inline-block; background:var(--accent); color:#fff; padding:.4rem .7rem; border-radius:4px; text-decoration:none; }
button.secondary { background:#fff; color:var(--accent); }
button.danger { background:var(--error); border-color:var(--error); }
.month-head { display:flex; align-items:center; gap:1rem; }
.month-head a { font-size:1.6rem; text-decoration:none; color:var(--accent); }
.totals { display:flex; gap:1.5rem; margin:.5rem 0 1rem; }
.totals div { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.4rem .8rem; }
.totals dt { font-size:.8rem; color:var(--muted); }
.totals dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.month-table { background:#fff; font-size:.92rem; }
.month-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.section-row th { background:#ED58BE; color:#fff; text-align:center; letter-spacing:.03em; }
.payee-row th { background:#f2f3f6; }
.remark { font-size:.82rem; font-weight:600; }
.row-error { color:var(--error); font-weight:600; }
.status-badge { font-weight:600; }
/* Status colours follow the old Excel sheet; the status word is always shown too. */
.status-proposed { background:#FFE7A8; }
.status-keyed_in { background:#FFFF9E; }
.status-released { background:#B9F6B0; }
.status-cancelled { background:#FFB3AD; }
.status-offset { background:#2F75B5; color:#fff; }
.status-offset a, .status-offset .muted { color:#fff; }
.recurring-unpaid { background:#DDEBF7; }
.actions details summary { cursor:pointer; color:var(--accent); }
.action-panel { display:grid; gap:.4rem; padding:.5rem; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:6px; min-width:260px; }
.action-panel form { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.release-form label { display:grid; font-size:.8rem; }
.detail-list { display:grid; grid-template-columns: 9rem 1fr; gap:.3rem .8rem; } .detail-list dt { color:var(--muted); } .detail-list dd { margin:0; }
.chip { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.82rem; background:#eef0f4; } .chip-ready { background:#B9F6B0; } .chip-failed { background:#FFB3AD; } .chip-processing, .chip-queued { background:#FFF3B0; } nav [aria-current=page] { font-weight:700; }
.review { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,1fr); gap:1rem; align-items:start; } .pdf-frame { width:100%; height:85vh; border:1px solid var(--line); background:#fff; } @media (max-width: 900px) { .review { grid-template-columns: 1fr; } .pdf-frame { height:60vh; } }