:root{
  --paper:#F3F5F3; --surface:#FFFFFF; --ink:#1B211F; --ink-soft:#57615D; --ink-faint:#89918D;
  --line:#DBE1DD; --line-strong:#C2CAC5; --accent:#2B5A6B; --accent-ink:#1B3E4A; --accent-soft:#DCE9EC;
  --ok:#1E6B45; --ok-bg:#DFF0E6; --warn:#8A6300; --warn-bg:#F6EBC9; --bad:#B23A2E; --bad-bg:#F7DEDB;
  --stage-enquiry:#8A6300; --stage-quoted:#5B6BB0; --stage-scheduled:#2B5A6B; --stage-onsite:#B0692B;
  --stage-invoicing:#7A3E9D; --stage-closed:#1E6B45;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI", system-ui, -apple-system, sans-serif; background:var(--paper); color:var(--ink); }
a{ color:var(--accent-ink); }
h1,h2,h3{ margin:0 0 8px; }
button, .btn{
  font: inherit; cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:6px;
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent-ink); }
.btn.small{ padding:4px 9px; font-size:12.5px; }
.btn.danger{ border-color:var(--bad); color:var(--bad); background:transparent; }
input, select, textarea{
  font: inherit; padding:8px 10px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink);
  width:100%;
}
label{ font-size:12.5px; color:var(--ink-soft); display:block; margin:10px 0 4px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; }
.container{ max-width:1180px; margin:0 auto; padding:20px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .brand{ font-weight:700; color:var(--accent-ink); text-decoration:none; font-size:1.1rem; }
.topbar nav{ display:flex; gap:4px; flex-wrap:wrap; }
.topbar nav a{ padding:7px 11px; border-radius:6px; text-decoration:none; color:var(--ink-soft); font-size:13.5px; }
.topbar nav a.active, .topbar nav a:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.topbar .who{ font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:10px; }

.grid{ display:grid; gap:16px; }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns:1fr; } }

.stat{ display:flex; flex-direction:column; gap:4px; }
.stat .n{ font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stat .l{ font-size:12.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }

.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:99px; white-space:nowrap; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.enquiry{ color:var(--stage-enquiry); background:#F6EBC9; }
.pill.quoted{ color:var(--stage-quoted); background:#E4E7F7; }
.pill.scheduled{ color:var(--stage-scheduled); background:var(--accent-soft); }
.pill.on_site{ color:var(--stage-onsite); background:#F7E6D3; }
.pill.invoicing{ color:var(--stage-invoicing); background:#EFE0F5; }
.pill.closed{ color:var(--stage-closed); background:var(--ok-bg); }

.board{ display:grid; grid-template-columns:repeat(6, minmax(210px,1fr)); gap:12px; overflow-x:auto; }
.board .col{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px; min-height:120px; }
.board .col h3{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:10px; }
.job-card{ background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; cursor:pointer; }
.job-card:hover{ border-color:var(--accent); }
.job-card .t{ font-weight:600; font-size:13.5px; margin-bottom:4px; }
.job-card .m{ font-size:11.5px; color:var(--ink-faint); }
.job-card.small-job{ border-left:3px solid var(--warn); }

table{ border-collapse:collapse; width:100%; background:var(--surface); }
th,td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
th{ font-size:11px; text-transform:uppercase; color:var(--ink-faint); background:var(--paper); }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
.section{ margin-bottom:26px; }
.muted{ color:var(--ink-faint); font-size:13px; }
.error{ color:var(--bad); background:var(--bad-bg); border-radius:6px; padding:8px 12px; font-size:13px; margin:8px 0; }
.notice{ color:var(--accent-ink); background:var(--accent-soft); border-radius:6px; padding:8px 12px; font-size:13px; margin:8px 0; }
.progress{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.progress > div{ height:100%; background:var(--accent); }

.engineer-shell{ max-width:480px; margin:0 auto; padding:16px; }
.engineer-job{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px; }
.engineer-job .t{ font-weight:700; font-size:15px; }
.clock-banner{ background:var(--accent); color:#fff; border-radius:10px; padding:14px; margin-bottom:16px; }
.clock-banner .btn{ background:#fff; color:var(--accent-ink); border:none; margin-top:8px; }