:root{
  /* Palette taken from the Horizon MLS logo: navy blue + gold */
  --bg:#f4f7fb; --panel:#ffffff; --panel2:#eef4fb; --line:#e2e9f2;
  --text:#13294b; --muted:#5b6b85; --accent:#1f5aa8; --accent-deep:#16407e;
  --accent-2:#f5a623; --gold:#f5a623; --accent-soft:#e9f1fb;
  --accent2:#16a34a; --danger:#dc2626;
  --shadow:0 1px 2px rgba(16,40,80,.06),0 6px 16px rgba(16,40,80,.06);
  --grad:linear-gradient(115deg,#16407e 0%,#2f6fb5 52%,#f5a623 125%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--panel2);padding:.1rem .35rem;border-radius:4px;color:#3257b8}

.topbar{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.4rem;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;color:var(--text);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-logo{height:40px;width:auto;display:block}
.brand span{color:var(--accent-deep)}
.login-logo{width:190px;max-width:80%;margin:0 auto .6rem;display:block}
.topbar nav{display:flex;gap:.4rem}
.topbar nav a{color:var(--muted);font-weight:500;padding:.35rem .7rem;border-radius:8px}
.topbar nav a:hover{color:var(--accent);background:var(--accent-soft);text-decoration:none}
.spacer{flex:1}
.snap-form{display:flex;align-items:center;gap:.4rem}
.snap-form label{color:var(--muted);font-size:.85rem}
.logout{color:var(--muted);font-size:.9rem}

main{max-width:1320px;margin:0 auto;padding:1.6rem 1.4rem 4rem}
.page-head{margin-bottom:1.2rem}
.page-head h1{margin:0 0 .2rem;font-size:1.6rem;letter-spacing:-.02em}
.page-head.row,.row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.muted{color:var(--muted)}
h2{font-size:1.1rem;margin:.2rem 0 .8rem}
.count{font-size:.8rem;color:var(--muted);font-weight:400}

select,input,button{font:inherit}
select,input[type=text],input[type=password],input[type=number],input[type=email],input:not([type]){
  background:#fff;border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:.45rem .6rem;box-shadow:var(--shadow)}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;
  padding:.5rem 1rem;border-radius:9px;cursor:pointer;font-weight:600;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.actions{display:flex;gap:.5rem;align-items:center}
.area-pick{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}
.mini{font-size:.8rem;color:var(--muted);margin-left:.5rem}
.mini.danger,button.danger{color:var(--danger);background:none;border:none;cursor:pointer}
button.mini{background:none;border:none}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.kpi:hover{border-color:var(--accent);transition:border-color .15s}
.kpi-label{color:var(--muted);font-size:.8rem;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.kpi{border-top:3px solid var(--gold)}
.kpi-value{font-size:1.7rem;font-weight:800;color:var(--accent-deep);letter-spacing:-.02em}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;margin-bottom:1.3rem;box-shadow:var(--shadow)}
.list{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.list li{padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.list li:last-child{border-bottom:none}
.filter-box{width:100%;margin-bottom:.6rem}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:74vh;background:var(--panel);box-shadow:var(--shadow)}
table.data{border-collapse:collapse;width:100%;font-size:.85rem}
table.data th,table.data td{padding:.5rem .75rem;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
table.data th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-weight:600;z-index:1;border-bottom:1px solid var(--line);user-select:none}
table.data th.sorted-asc::after{content:" ▲";color:var(--accent);font-size:.7em}
table.data th.sorted-desc::after{content:" ▼";color:var(--accent);font-size:.7em}
table.data td{font-variant-numeric:tabular-nums}
table.data tbody tr:nth-child(even) td{background:#fafbfe}
table.data tr:hover td{background:var(--accent-soft)}
.row-actions{white-space:nowrap}

.page-pick{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
fieldset{border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;background:var(--panel);box-shadow:var(--shadow)}
legend{color:var(--accent);font-weight:600;font-size:.9rem;padding:0 .4rem}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem;max-height:200px;overflow:auto}
.chk-grid label{font-size:.85rem;display:flex;gap:.4rem;align-items:center}
.inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.inline label{color:var(--muted);font-size:.85rem}
.filter-row{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:.4rem;margin-bottom:.4rem}
.builder-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.save-inline{display:flex;gap:.4rem;align-items:center}

.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1rem;height:360px;margin:1rem 0;box-shadow:var(--shadow)}
.sched-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}

.flash{background:var(--accent-soft);border:1px solid var(--accent);color:#1d4ed8;
  padding:.6rem .9rem;border-radius:10px;margin-bottom:1rem}
.error{background:#fef2f2;border:1px solid var(--danger);color:#b91c1c;padding:.5rem .8rem;border-radius:10px;margin:.6rem 0}

.login-wrap{min-height:82vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:2.2rem;width:350px;display:flex;flex-direction:column;gap:.85rem;box-shadow:0 10px 40px rgba(16,32,64,.10)}
.login-card h1{margin:0;font-size:1.5rem}
.login-card h1 span{color:var(--accent)}
.login-card input,.login-card button{width:100%}

/* Tuesday vs Friday totals box */
.totals-box{margin-top:1.4rem;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:1.1rem 1.3rem;box-shadow:var(--shadow);max-width:640px}
.totals-box h3{margin:0 0 .7rem;color:var(--accent-deep)}
table.totals{width:100%}
table.totals td,table.totals th{padding:.5rem .7rem}
table.totals tr.var td{border-top:2px solid var(--gold);font-weight:700}
table.totals .pre{color:var(--muted);margin-right:2px}
table.totals input{width:120px;text-align:right}

/* GP% vs Target colour coding */
table.data td.gp-good{color:#0a8f5b;font-weight:700}
table.data td.gp-bad{color:#c5303a;font-weight:700}

/* Target view */
table.target td .pct{color:var(--muted);margin-left:2px}
table.target td input[type=number]{width:66px;background:#fff;border:1px solid var(--accent);
  color:var(--text);border-radius:6px;padding:.22rem .35rem;text-align:right;font-variant-numeric:tabular-nums;box-shadow:none}
table.target th.editc,table.target td.editc{background:var(--accent-soft)}
table.target tr.subtotal td{background:#eef2f9;font-weight:700;border-top:1px solid var(--accent)}
table.target tr.grand td{background:#eafaf0;font-weight:700;border-top:2px solid var(--accent2);position:sticky;bottom:0}

.site-footer{text-align:center;color:var(--muted);font-size:.82rem;
  padding:1.4rem 1rem 2rem;border-top:1px solid var(--line);margin-top:2rem}
.site-footer a{color:var(--accent);font-weight:600}

@media(max-width:860px){.grid-2,.builder-grid{grid-template-columns:1fr}}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .topbar{flex-wrap:wrap;gap:.5rem .8rem;padding:.55rem .8rem}
  .brand{font-size:1rem}
  .brand-logo{height:30px}
  .topbar nav{order:4;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:.2rem;padding-bottom:.1rem}
  .topbar nav a{white-space:nowrap}
  .spacer{display:none}
  .snap-form{order:2;margin-left:auto}
  .snap-form select{max-width:46vw}
  .logout{order:3}

  main{padding:1rem .8rem 3rem}
  .page-head h1{font-size:1.3rem}
  .page-head.row,.row{flex-direction:column;align-items:stretch}
  .actions{flex-wrap:wrap;width:100%}
  .actions .btn,.actions .btn.ghost{flex:1;text-align:center}
  .area-pick{width:100%;justify-content:space-between}
  .area-pick select{flex:1;margin-left:.4rem}

  .kpi-row{grid-template-columns:1fr 1fr;gap:.6rem}
  .kpi{padding:.8rem .9rem}
  .kpi-value{font-size:1.35rem}

  .filter-box{max-width:100%!important}
  .table-wrap{max-height:68vh;border-radius:10px}
  table.data th,table.data td{padding:.42rem .55rem;font-size:.8rem}

  .totals-box{max-width:100%}
  .builder-actions{flex-direction:column;align-items:stretch}
  .save-inline{width:100%}
  .filter-row{grid-template-columns:1fr}
  .login-card{width:100%;max-width:92vw}
}
@media(max-width:430px){
  .kpi-row{grid-template-columns:1fr}
}