:root { --bg:#f3f5f8; --card:#fff; --ink:#1b1f26; --muted:#66707d; --line:#dfe4ea; --accent:#1f6fb2; --accent-ink:#fff;
  --c-compliance:#1f6fb2; --c-dbpr:#7a4bb8; --c-report:#c0731a; --c-permit:#b3261e; --c-monthly:#4b8f5a; --c-ww_sample:#2a8a8a; --c-ww_report:#8a5a2a; --c-wastewater:#2a8a8a; --open:#fff4d6; --past:#f0f0f0; }
* { box-sizing:border-box; } html,body { margin:0; }
body { font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; } .brand .logo { font-size:26px; } .brand small { display:block; color:var(--muted); font-size:12px; }
.views { display:flex; gap:4px; flex-wrap:wrap; flex:1 1 auto; }
.views button, .btn { font:inherit; padding:7px 12px; border:1px solid var(--line); background:var(--card); border-radius:8px; cursor:pointer; color:var(--ink); }
.views button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .btn.ghost { background:transparent; } .btn.sm { padding:4px 9px; font-size:12.5px; } .btn.danger { color:#b3261e; }
.tools { display:flex; gap:6px; }
.filters { display:flex; gap:10px; align-items:center; padding:10px 16px; flex-wrap:wrap; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:12.5px; cursor:pointer; user-select:none; }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); } .chip input { margin:0; }
.chip.cat-compliance { border-color:var(--c-compliance); } .chip.cat-dbpr { border-color:var(--c-dbpr); } .chip.cat-report { border-color:var(--c-report); } .chip.cat-permit { border-color:var(--c-permit); } .chip.cat-monthly { border-color:var(--c-monthly); } .chip.cat-ww_sample { border-color:var(--c-ww_sample); } .chip.cat-ww_report { border-color:var(--c-ww_report); }
.chip .sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
#q { flex:1 1 220px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; min-width:160px; }
main { padding:0 16px 24px; } .pad { padding:16px; } .hint { color:var(--muted); font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .bar h2 { margin:0; font-size:17px; } .grow { flex:1 1 auto; }
.tbl-wrap { overflow:auto; } table.t { width:100%; border-collapse:collapse; font-size:13px; }
table.t th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer; position:sticky; top:0; background:var(--card); }
table.t th.sorted::after { content:' ▾'; } table.t th.sorted.asc::after { content:' ▴'; }
table.t td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.t tr.open td { background:var(--open); } table.t tr:hover td { background:#f7f9fc; } table.t tr.open:hover td { background:#fdebc0; }
.tag { display:inline-block; padding:1px 7px; border-radius:6px; font-size:11.5px; font-weight:600; color:#fff; }
.tag.compliance { background:var(--c-compliance); } .tag.dbpr { background:var(--c-dbpr); } .tag.report { background:var(--c-report); } .tag.permit { background:var(--c-permit); } .tag.mor { background:#5b6b7c; } .tag.monthly { background:var(--c-monthly); } .tag.ww_sample, .tag.wastewater { background:var(--c-ww_sample); } .tag.ww_report { background:var(--c-ww_report); }
.status { font-weight:600; } .status.open { color:#9a6b00; } .status.upcoming { color:var(--accent); } .status.past, .status.unscheduled { color:var(--muted); }
.sysdot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dim { color:var(--muted); font-size:12px; }
/* calendar */
.cal-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; } .cal-head h2 { margin:0; font-size:18px; min-width:190px; text-align:center; }
.cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cal .dow { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 6px; }
.cal .day { min-height:96px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 6px; cursor:pointer; }
.cal .day.other { opacity:.45; } .cal .day.today { border-color:var(--accent); box-shadow:0 0 0 2px rgba(31,111,178,.15); } .cal .day:hover { border-color:var(--muted); }
.cal .dn { font-size:12px; color:var(--muted); display:flex; justify-content:space-between; } .cal .dn b { color:var(--ink); }
.ev { font-size:11.5px; padding:1px 5px; border-radius:4px; margin-top:2px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid rgba(0,0,0,.25); }
.ev.compliance { background:var(--c-compliance); } .ev.dbpr { background:var(--c-dbpr); } .ev.report { background:var(--c-report); } .ev.permit { background:var(--c-permit); } .ev.monthly { background:var(--c-monthly); } .ev.ww_sample { background:var(--c-ww_sample); } .ev.ww_report { background:var(--c-ww_report); }
.ev.start { border-radius:6px 4px 4px 6px; } .ev.cont { opacity:.75; } .more { font-size:11px; color:var(--muted); margin-top:2px; }
/* agenda */
.month-block h3 { margin:14px 0 6px; font-size:15px; } .ag { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; padding:6px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.ag .when { font-weight:600; white-space:nowrap; } .ag.open .when { color:#9a6b00; } .ag .what b { font-weight:600; }
/* year overview */
.yr { display:grid; grid-template-columns:260px repeat(12, 1fr); gap:2px; align-items:center; font-size:12px; }
.yr .h { text-align:center; color:var(--muted); font-size:11px; text-transform:uppercase; } .yr .lbl { padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yr .cell { height:22px; background:#eef1f5; border-radius:4px; position:relative; } .yr .cell.on { color:#fff; font-size:10.5px; text-align:center; line-height:22px; } .yr .cell.now { outline:2px solid var(--accent); outline-offset:-2px; }
.yr .grp { grid-column:1 / -1; font-weight:700; margin-top:10px; padding:4px 6px; }
/* systems */
.sysgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:3px 10px; font-size:13px; } .kv div:nth-child(odd) { color:var(--muted); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; } .modal[hidden] { display:none; }
.modal-card { background:var(--card); border-radius:14px; padding:18px; max-width:720px; width:100%; max-height:90vh; overflow:auto; position:relative; }
.modal-card .x { position:absolute; top:8px; right:10px; border:none; background:none; font-size:16px; cursor:pointer; color:var(--muted); }
.foot { color:var(--muted); font-size:12px; padding:14px 16px 24px; }
.stat { display:inline-flex; flex-direction:column; padding:8px 12px; border:1px solid var(--line); border-radius:10px; margin:0 8px 8px 0; min-width:110px; } .stat b { font-size:20px; } .stat small { color:var(--muted); }
@media (max-width: 760px) { .yr { grid-template-columns:150px repeat(12, 1fr); } .cal .day { min-height:64px; } .ev { font-size:10px; } .ag { grid-template-columns:1fr; } .top { gap:8px; } }
@media print { .top, .filters, .foot, .tools, .btn { display:none !important; } body { background:#fff; } .card { border:none; padding:0; } .cal .day { min-height:70px; } }

/* wastewater + results */
.lim { display:inline-block; background:#eef4f4; border:1px solid #cfe0e0; border-radius:6px; padding:1px 6px; margin:1px 4px 1px 0; font-size:12px; white-space:nowrap; }
.viol { color:#b3261e; font-weight:600; } .late { color:#9a6b00; } .nodi { color:var(--muted); font-style:italic; }
.res-grid td.num { text-align:right; font-variant-numeric:tabular-nums; } .res-grid tr.bad td { background:#fdecea; }
.sel { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#eef1f5; margin-right:6px; }
.pill.ok { background:#e3f3e8; color:#1b6b3a; } .pill.bad { background:#fdecea; color:#b3261e; } .pill.warn { background:#fff4d6; color:#8a5a00; }

.uploads { display:flex; gap:10px; align-items:center; padding:8px 16px; background:#eef4fb; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.uploads.drag { background:#dbe9fb; outline:2px dashed var(--accent); outline-offset:-4px; }
.uplist { display:flex; gap:6px; flex-wrap:wrap; } .uplist .chip { background:var(--card); } .uplist .chip a { color:inherit; text-decoration:none; } .uplist .chip button { border:none; background:none; cursor:pointer; color:var(--muted); padding:0 0 0 4px; }

/* tracking sheets */
.ts-head { display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:start; margin-bottom:8px; }
.ts-title { font-size:20px; font-weight:800; letter-spacing:.02em; } .ts-sub { color:var(--muted); font-size:12.5px; }
.ts-meta { font-size:13px; text-align:right; } .ts-meta b { font-weight:700; }
table.ts { border-collapse:collapse; font-size:12px; width:100%; }
table.ts th { background:#e9edf2; border:1px solid #c9d1da; padding:4px 6px; font-size:11px; text-transform:none; letter-spacing:0; color:var(--ink); white-space:nowrap; position:sticky; top:0; }
table.ts td { border:1px solid #d7dde5; padding:3px 6px; white-space:nowrap; vertical-align:middle; }
table.ts tr.done td { background:#e6f4ea; } table.ts tr.received td { background:#eef4fb; } table.ts tr.collected td { background:#fff8e1; } table.ts tr.overdue td { background:#fdecea; } table.ts tr.planned td { color:#41505f; } table.ts tr.planned td.ph { color:#98a2ad; font-style:italic; }
table.ts tr.month td { background:#1b1f26; color:#fff; font-weight:700; border-color:#1b1f26; padding:4px 8px; }
table.ts tr.extra td { background:#f5eefc; }
.ts-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; margin:8px 0; } .ts-legend span::before { content:''; display:inline-block; width:12px; height:12px; border:1px solid #c9d1da; margin-right:5px; vertical-align:-2px; }
.ts-legend .l-done::before { background:#e6f4ea; } .ts-legend .l-received::before { background:#eef4fb; } .ts-legend .l-collected::before { background:#fff8e1; } .ts-legend .l-overdue::before { background:#fdecea; } .ts-legend .l-planned::before { background:#fff; } .ts-legend .l-extra::before { background:#f5eefc; }

/* locations + editable sheet */
.loc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.loc { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--card); cursor:pointer; } .loc:hover { border-color:var(--muted); } .loc.inactive { opacity:.55; }
.loc .nm { font-weight:700; font-size:15px; display:flex; gap:8px; align-items:center; } .loc .ids { font-size:12px; color:var(--muted); margin-top:2px; } .loc .flags { margin-top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.form { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; } .form label { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; } .form input, .form select, .form textarea { width:100%; font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; } .form .wide { grid-column:1 / -1; }
table.ts td input { width:100%; min-width:64px; font:inherit; font-size:12px; padding:2px 4px; border:1px solid transparent; border-radius:4px; background:transparent; } table.ts td input:hover { border-color:#c9d1da; background:#fff; } table.ts td input:focus { border-color:var(--accent); background:#fff; outline:none; }
table.ts td.ref { color:#41505f; } table.ts td.ref.dim { color:var(--muted); } table.ts td .x { border:none; background:none; color:var(--muted); cursor:pointer; }
.saving { outline:2px solid #ffd166 !important; } .saved { outline:2px solid #2a8a5c !important; transition:outline .6s; }