:root{
  --ground:#F1EFEA; --surface:#fff; --ink:#1B212B; --muted:#5B6470; --faint:#8A929C;
  --hair:#E4E0D8; --accent:#215F97; --accent-wash:#EAF1F8; --flag:#B4432C; --flag-wash:#F7E7E2;
  --good:#2C8158; --good-wash:#E7F2EB; --warn:#B57A18;
}
@media (prefers-color-scheme:dark){
  :root{ --ground:#0F1319; --surface:#171D25; --ink:#E8ECF1; --muted:#9BA6B2; --faint:#6E7986;
    --hair:#2A323C; --accent:#5AA0E0; --accent-wash:#182634; --flag:#E0765C; --flag-wash:#2C1712;
    --good:#4BB482; --good-wash:#12241B; --warn:#D6A64C; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--surface);
  border-bottom:1px solid var(--hair);position:sticky;top:0}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);text-decoration:none;font-family:system-ui,sans-serif}
.topbar .brand:hover{text-decoration:none}
.brandmark{width:24px;height:24px;flex:0 0 auto;display:block}
.brandmark.lg{width:34px;height:34px}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:2px;text-decoration:none;color:var(--ink)}
.auth-brand:hover{text-decoration:none}
.auth-brand h1{margin:0}
.home-link{position:absolute;top:18px;left:20px;color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.home-link:hover{text-decoration:underline}
.topbar nav{display:flex;gap:14px}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}
.topbar .who .name{font-weight:600}
.topbar .who .role{color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-size:11px}

.wrap{max-width:1000px;margin:0 auto;padding:24px 20px 64px}
.page-head h1{margin:0 0 2px;font-size:24px}
.page-head .sub,.card .sub{color:var(--muted);font-size:14px;margin:0 0 18px}

.card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card + .card{margin-top:16px}
.card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{margin:0;font-size:17px}
.card-head .hint{color:var(--faint);font-size:12.5px}
.card.empty{color:var(--muted)}
.muted{color:var(--faint)} .r{text-align:right}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:14px 16px}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.tile .v{font-size:26px;font-weight:700;margin-top:6px}

table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th,table.grid td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair)}
table.grid thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600}
table.grid tbody tr:last-child td{border-bottom:none}

/* auth */
.card.auth{max-width:380px;margin:8vh auto 0}
.card.auth h1{margin:0 0 4px;font-size:22px}
.card.auth form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input{font:inherit;padding:10px 12px;border:1px solid var(--hair);border-radius:8px;
  background:var(--ground);color:var(--ink)}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
button{font:inherit;font-weight:600;padding:11px 14px;border:none;border-radius:8px;
  background:var(--accent);color:#fff;cursor:pointer}
button:hover{filter:brightness(1.05)}
.alert{background:var(--flag-wash);color:var(--flag);border:1px solid var(--flag);
  border-radius:8px;padding:10px 12px;font-size:13.5px;margin-top:12px}

/* --- day input (M2) --- */
.day-nav{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.day-nav .day-title{flex:1;text-align:center}
.day-nav h1{margin:0;font-size:20px}
.day-nav .sub{color:var(--muted);font-size:13px}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--hair);border-radius:10px;background:var(--surface);font-size:18px;text-decoration:none}
.daylinks{text-align:center;margin-bottom:14px;font-size:13px}
.badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:6px;margin-left:6px}
.badge.draft{background:var(--accent-wash);color:var(--accent)}
.badge.submitted{background:var(--flag-wash);color:var(--flag)}
.alert.info{background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent);
  border-radius:8px;padding:10px 12px;font-size:13.5px;margin:0 0 14px}

.tiles.small{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.tiles.small .tile{padding:10px 12px}
.tiles.small .v{font-size:19px}
.tile .u{font-size:12px;color:var(--muted);font-weight:400}

.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-form .wide{grid-column:1 / -1}
.grid-form button{grid-column:1 / -1}
.tip{color:var(--faint);font-weight:400;font-size:11px}

.stops{list-style:none;margin:0 0 16px;padding:0;counter-reset:s}
.stop{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
.stop:last-child{border-bottom:none}
.stop-main{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.stop-name{font-weight:600}
.pc{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);background:var(--ground);padding:1px 6px;border-radius:5px}
.odo{font-size:12px;color:var(--faint)}
.cmt{font-size:12.5px;color:var(--muted);font-style:italic}
.chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--ground);color:var(--muted)}
.ord{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-wash);padding:2px 8px;border-radius:6px}
.stop-actions{display:flex;gap:4px}
.inline{display:inline}
.mini{width:30px;height:30px;padding:0;font-size:14px;background:var(--surface);color:var(--ink);border:1px solid var(--hair)}
.mini:hover{background:var(--ground)}
.mini.danger{color:var(--flag);border-color:var(--flag)}

.add-stop{border-top:1px dashed var(--hair);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.add-stop .row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.add-stop label{font-size:12px}
.add-stop .grow{flex:1;min-width:140px}
.add-stop input,.add-stop select{min-width:90px}
.add-stop .check{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.add-stop button{align-self:end}

.submit-week{margin-top:18px;text-align:center}
button.secondary{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}

/* --- customers / geocoding (M3) --- */
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inline-form.small input{padding:6px 8px;font-size:13px;width:130px}
.mini2{padding:6px 10px;font-size:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pill{font-size:12px;padding:4px 12px;border-radius:999px;border:1px solid var(--hair);
  background:var(--surface);color:var(--muted);text-transform:capitalize}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill:hover{text-decoration:none;border-color:var(--accent)}
.tbl-scroll{overflow-x:auto}
.gstat{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;text-transform:capitalize}
.gstat.confirmed{background:var(--good-wash,#E7F2EB);color:var(--good,#2C8158)}
.gstat.auto{background:var(--accent-wash);color:var(--accent)}
.gstat.none{background:var(--ground);color:var(--faint)}
.gstat.failed{background:var(--flag-wash);color:var(--flag)}
.pager{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:14px;font-size:13px}

/* --- route check (M4) --- */
.card.computed{border-left:3px solid var(--accent)}
.route-row{display:flex;flex-wrap:wrap;gap:22px}
.route-row > div{display:flex;flex-direction:column;gap:2px}
.route-row .rk{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.route-row .rv{font-family:ui-monospace,monospace;font-size:18px;font-weight:600}
.route-row .rv.over{color:var(--flag)}
.route-row .rv.ok{color:var(--good)}
.check-route{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* --- report (M5) --- */
.report-grid td,.report-grid th{white-space:nowrap}
td .over,.rv.over,span.over{color:var(--flag);font-weight:600}
td .ok,.rv.ok,span.ok{color:var(--good);font-weight:600}
.bar{display:inline-flex;width:120px;height:12px;border-radius:4px;overflow:hidden;background:var(--ground);vertical-align:middle}
.bar-opt{background:var(--accent-2,#2E77B8);opacity:.85}
.bar-av{background:var(--flag);opacity:.9}
.stale{color:var(--flag);font-weight:600}
p.method{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0;max-width:80ch}
tfoot td{font-weight:700;background:var(--surface-2,var(--ground));border-top:2px solid var(--hair)}
@media print{ .topbar,.check-route,form{display:none} .card{break-inside:avoid} }

@media (max-width:720px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles.small{grid-template-columns:repeat(2,1fr)}
  .grid-form{grid-template-columns:1fr}
  .add-stop .row{flex-direction:column;align-items:stretch}
  .add-stop .row label{width:100%}
}