/* Qenos Altona Remediation - Material Stream Register dashboard
   Brand palette: Helia orange, Rokon navy, Edcorp gold/charcoal. */
:root{
  --helia:#EE6C2D; --helia-dark:#D65C22;
  --navy:#16274C; --gold:#F2C230; --charcoal:#20242C;
  --bg:#F4F6F8; --card:#FFFFFF; --ink:#272C36; --muted:#6B7280;
  --line:#E4E7EC; --line-soft:#EEF1F4;
  --red:#E23B3B; --amber:#E9971E; --blue:#2E7FD1; --green:#2FA36B; --grey:#8A94A6;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg); font-size:14px; line-height:1.45;
  /* app shell: fixed chrome, the active view fills the rest of the viewport */
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:#fff; border-bottom:1px solid var(--line);
  padding:14px 26px; box-shadow:var(--shadow); position:relative; z-index:40; flex:none;
}
.brand-row{display:flex; align-items:center; gap:20px}
.logo{height:46px; width:auto; display:block}
.logo[hidden]{display:none}  /* let the hidden attribute win over display:block (logo image fallback swap) */
.logo-helia-wrap{display:inline-flex; align-items:center}
.logo-helia{height:56px; object-fit:contain}
.logo-rokon{height:40px}
.logo-edcorp{height:30px}
.logo-edcorp-wrap{display:inline-flex; align-items:center; background:#111; border-radius:7px; padding:9px 13px}
.brand-sep{width:1px; height:38px; background:var(--line)}

.sync{display:flex; align-items:center; gap:16px}
.sync-meta{font-size:11.5px; color:var(--muted); line-height:1.5; text-align:right}
.sync-meta span{color:var(--ink); font-weight:600}
.sync-msg{font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.sync-msg::before{content:''; width:8px; height:8px; border-radius:50%; background:currentColor}
.sync-msg.ok{color:var(--green); background:rgba(47,163,107,.12)}
.sync-msg.loading{color:var(--amber); background:rgba(233,151,30,.12)}
.sync-msg.err{color:var(--red); background:rgba(226,59,59,.12)}
.auto{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none}
.btn-refresh{
  border:1px solid var(--line); background:#fff; color:var(--navy);
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.btn-refresh:hover{background:var(--bg); border-color:var(--helia); color:var(--helia)}
.btn-refresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- title band ---------- */
.title-band{
  background:linear-gradient(120deg,#20242C 0%,#2A3140 60%,#243049 100%);
  color:#fff; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-bottom:3px solid var(--helia); flex:none;
}
.title-main h1{margin:0; font-size:22px; font-weight:800; letter-spacing:-.2px}
.subtitle{margin:4px 0 0; color:#C4CBD6; font-size:13px}
.legend{display:flex; gap:18px; margin:0; padding:0; list-style:none; flex-wrap:wrap}
.legend li{display:flex; align-items:center; gap:7px; font-size:12.5px; color:#E4E8EE; font-weight:600}
.legend .dot{width:11px; height:11px; border-radius:3px; display:inline-block}

/* ---------- tabs ---------- */
.tabs{
  display:flex; gap:2px; background:#fff; padding:0 20px; border-bottom:1px solid var(--line);
  flex:none; z-index:30; overflow-x:auto;
}
.tab{
  border:0; background:none; padding:14px 16px; font-size:13.5px; font-weight:600; color:var(--muted);
  cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; transition:.15s;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--helia); border-bottom-color:var(--helia)}

/* ---------- filter bar ---------- */
.filterbar{display:flex; gap:10px; padding:14px 26px 0; align-items:center; flex-wrap:wrap; flex:none}
.filterbar[hidden]{display:none}  /* class display:flex would otherwise defeat the hidden attribute */
.filter{
  border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:13px; background:#fff; color:var(--ink);
  font-family:inherit; min-width:150px;
}
.filter:focus{outline:none; border-color:var(--helia); box-shadow:0 0 0 3px rgba(238,108,45,.12)}
.filter.search{min-width:220px; flex:0 1 320px}
.btn-ghost{border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 12px; font-size:12.5px; color:var(--muted); cursor:pointer}
.btn-ghost:hover{color:var(--helia); border-color:var(--helia)}

/* ---------- view / cards ---------- */
.view{flex:1 1 auto; min-height:0}
.view--scroll{overflow-y:auto; padding:20px 26px 34px}
/* data tabs: single table card fills the viewport so its horizontal scrollbar is always visible */
.view--table{overflow:hidden; display:flex; flex-direction:column; padding:16px 26px}
.view--table > .card{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-bottom:0}
.view--table > .card > .table-mount{flex:1 1 auto; min-height:0}
.view--table > .card > .table-mount > .table-scroll{flex:1 1 auto; min-height:0}
.table-mount{display:flex; flex-direction:column; min-height:0}
/* nested (stockpile) tables inside an expanded row scroll naturally, capped */
.row-detail .table-mount > .table-scroll{max-height:340px}
.loading-splash{padding:60px; text-align:center; color:var(--muted)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:20px}
.card-title{font-size:14px; font-weight:800; color:var(--navy); margin-bottom:14px; display:flex; align-items:center; gap:10px}
.card-title .count{font-size:12px; font-weight:600; color:var(--muted); background:var(--bg); padding:2px 9px; border-radius:999px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:960px){.grid-2{grid-template-columns:1fr}}
.chart-wrap{position:relative; height:300px}

/* ---------- KPI row ---------- */
.kpi-row{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:18px}
@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grey)}
.kpi-orange::before{background:var(--helia)}
.kpi-slate::before{background:var(--navy)}
.kpi-label{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.kpi-value{font-size:26px; font-weight:800; color:var(--ink); margin:6px 0 2px; letter-spacing:-.5px}
.kpi-sub{font-size:12px; color:var(--muted)}

/* ---------- status strip ---------- */
.status-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px}
@media(max-width:900px){.status-strip{grid-template-columns:repeat(2,1fr)}}
.status-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:12px; align-items:flex-start}
.status-dot{width:12px; height:12px; border-radius:50%; background:var(--c); margin-top:4px; flex:none}
.status-name{font-size:12.5px; color:var(--muted); font-weight:600}
.status-val{font-size:19px; font-weight:800; color:var(--ink); margin:2px 0}
.status-pct{font-size:11.5px; color:var(--muted)}

/* ---------- precinct cards ---------- */
.prec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.prec-card{border:1px solid var(--line); border-radius:10px; padding:13px 14px; background:#fff}
.prec-head{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.prec-dot{width:11px; height:11px; border-radius:3px; flex:none}
.prec-name{font-weight:700; font-size:13.5px}
.prec-vol{margin-left:auto; font-weight:800; font-size:13.5px; color:var(--navy)}
.prec-foot{margin-top:8px; font-size:11.5px; color:var(--muted)}
.segbar{display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--line-soft)}
.segbar span{display:block; height:100%}

/* ---------- tables ---------- */
.table-scroll{
  overflow:auto; border-radius:6px;
  scrollbar-color:var(--navy) #e3e7ee; /* Firefox */
}
/* prominent, always-obvious scrollbars */
.table-scroll::-webkit-scrollbar{height:15px; width:15px}
.table-scroll::-webkit-scrollbar-track{background:#e3e7ee; border-radius:8px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--navy); border-radius:8px; border:3px solid #e3e7ee}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--helia)}
.table-scroll::-webkit-scrollbar-corner{background:#e3e7ee}
.scroll-cue{margin-left:14px; font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap}
.scroll-cue::before{content:'⇄ '; color:var(--helia)}
.reg-table{width:100%; border-collapse:collapse; font-size:12.8px; table-layout:auto}
/* column sizing: everything hugs its content; only long-text columns wrap within a cap */
.reg-table td{white-space:nowrap}
.reg-table td.c-wrap, .reg-table th.c-wrap{white-space:normal; min-width:170px; max-width:300px; word-break:break-word}
.reg-table th{
  text-align:left; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; font-size:11px;
  padding:9px 12px; border-bottom:2px solid var(--line); white-space:nowrap; background:var(--bg); position:sticky; top:0;
}
.reg-table td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.reg-table tr:hover td{background:#FBFCFD}
.reg-table td.num, .reg-table th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.reg-table td.center, .reg-table th.center{text-align:center}
.reg-table .empty{text-align:center; color:var(--muted); padding:26px}
.col-caret{width:22px; color:var(--muted)}
.caret{display:inline-block; transition:transform .15s}
.row-expandable{cursor:pointer}
.row-expandable.open .caret{transform:rotate(90deg); color:var(--helia)}
.row-detail>td{background:#FAFBFC; padding:0 12px 12px 34px}
.detail-title{font-weight:700; color:var(--navy); font-size:12.5px; padding:12px 0 8px}
.muted{color:var(--muted)}
.count{margin-left:auto}

/* chips & tags */
.chip{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--chip);
  background:color-mix(in srgb, var(--chip) 13%, #fff); border:1px solid color-mix(in srgb, var(--chip) 32%, #fff); white-space:nowrap}
.prec-tag{font-size:11.5px; font-weight:700; color:var(--c)}
.prec-tag::before{content:''; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--c); margin-right:6px; vertical-align:middle}
.yn{font-weight:700; font-size:11.5px; padding:1px 8px; border-radius:6px}
.yn.yes{color:var(--green); background:rgba(47,163,107,.12)}
.yn.no{color:var(--red); background:rgba(226,59,59,.12)}

/* error */
.error-box{background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow)}
.error-title{font-weight:800; color:var(--red); margin-bottom:6px}

/* footer */
.footer{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 26px; font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); background:#fff; flex:none;
}

/* ---------- pagination ---------- */
.pager{display:flex; align-items:center; gap:14px; padding:9px 2px; flex-wrap:wrap; flex:none}
.pager-top{border-bottom:1px solid var(--line-soft)}
.pager-bottom{justify-content:center; gap:5px; border-top:1px solid var(--line-soft); padding-top:11px}
.pg-size-lbl{font-size:12px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:8px}
.pg-size{border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:12.5px; font-family:inherit; background:#fff; color:var(--ink); cursor:pointer}
.pg-size:focus{outline:none; border-color:var(--helia); box-shadow:0 0 0 3px rgba(238,108,45,.12)}
.pg-info{font-size:12px; color:var(--muted); margin-left:auto}
.page-btn{min-width:34px; height:32px; border:1px solid var(--line); background:#fff; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; padding:0 9px}
.page-btn:hover:not(:disabled){border-color:var(--helia); color:var(--helia)}
.page-btn.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.page-btn:disabled{opacity:.4; cursor:default}
.page-ellipsis{color:var(--muted); padding:0 3px; align-self:center}

/* chart unit tag + sticky header layering */
.unit{font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); padding:1px 7px; border-radius:999px; margin-left:4px}
.reg-table th{z-index:2}

/* update + report buttons */
.btn-update{display:inline-flex; align-items:center; gap:7px; border:0; background:var(--helia); color:#fff; font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:9px; cursor:pointer; transition:.15s; font-family:inherit}
.btn-update:hover{background:var(--helia-dark)}
.btn-update.spin svg{animation:spin .8s linear infinite}
.btn-report{display:inline-flex; align-items:center; text-decoration:none; border:1px solid var(--line); color:var(--navy); font-weight:700; font-size:12.5px; padding:8px 13px; border-radius:9px; transition:.15s}
.btn-report:hover{border-color:var(--navy); background:var(--bg)}
.report-link{margin-left:auto; font-size:12px; font-weight:700; color:var(--helia); text-decoration:none}
.report-link:hover{text-decoration:underline}
.reg-table a{color:var(--blue); text-decoration:none; font-weight:600}
.reg-table a:hover{text-decoration:underline}

/* ---- login gate (hosted build) ---- */
.login-overlay{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; background:#0f1b34 url('../img/login-bg.jpg?v=3') center 65% / cover no-repeat}
.login-card{width:100%; max-width:400px; background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:34px 30px 30px; display:flex; flex-direction:column; font-family:inherit; position:relative; z-index:2}
.login-marks{position:absolute; inset:0; z-index:1; pointer-events:none}
.login-mark{position:absolute; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.login-mark-helia{top:22px; left:26px; width:96px}
.login-mark-rokon{top:34px; left:50%; transform:translateX(-50%); width:238px}
.login-mark-edcorp{top:46px; right:26px; width:216px}
.login-brand{font-size:34px; font-weight:800; letter-spacing:-1.5px; color:var(--helia); line-height:1}
.login-brand span{color:#111}
.login-title{margin-top:0; font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.3px; white-space:nowrap}
.login-sub{margin-top:3px; font-size:13px; color:var(--muted)}
.login-label{margin-top:16px; font-size:12px; font-weight:600; color:var(--ink)}
.login-input{margin-top:6px; height:42px; border:1px solid var(--line); border-radius:9px; padding:0 12px; font-size:14px; font-family:inherit; color:var(--ink); outline:none; transition:.15s}
.login-input:focus{border-color:var(--helia); box-shadow:0 0 0 3px rgba(238,108,45,.15)}
.login-err{margin-top:14px; font-size:12.5px; color:#b00020; background:#fdecec; border:1px solid #f5c2c7; border-radius:8px; padding:8px 10px}
.login-btn{margin-top:20px; height:44px; border:0; border-radius:10px; background:var(--helia); color:#fff; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; transition:.15s}
.login-btn:hover:not(:disabled){background:var(--helia-dark)}
.login-btn:disabled{opacity:.6; cursor:default}
.login-link{margin-top:14px; align-self:center; background:none; border:0; padding:0; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--helia); cursor:pointer}
.login-link:hover{text-decoration:underline}
.login-note{margin-top:14px; font-size:12.5px; color:#0b6b4f; background:#e7f6ef; border:1px solid #b7e2cf; border-radius:8px; padding:8px 10px}
/* sign-out lives in the top-right of the header (added by supa.js after login) */
.signout-btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--navy); font-family:inherit; font-size:12.5px; font-weight:700; padding:9px 14px; border-radius:9px; cursor:pointer; transition:.15s; white-space:nowrap}
.signout-btn:hover{border-color:var(--red); color:var(--red); background:#fff}
.signout-btn svg{display:block}
.thumb{width:80px; height:54px; object-fit:cover; border-radius:5px; vertical-align:middle; border:1px solid var(--line); box-shadow:var(--shadow)}
.img-link:hover .thumb{border-color:var(--helia)}
.attach-cell{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.results-link{font-size:11.5px; font-weight:700; color:var(--navy); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:5px}
.results-link::before{content:'\1F4CA'}  /* chart glyph = data/results marker */
.results-link:hover{color:var(--helia); text-decoration:underline}
.img-link{display:inline-flex; align-items:center; gap:6px}
.detail-head{display:flex; align-items:center; gap:14px; padding:12px 0 8px}
.detail-links{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12px}
.detail-links a{color:var(--blue); font-weight:700; text-decoration:none}
.detail-links a:hover{text-decoration:underline}
.img-note{color:var(--muted); font-size:11.5px}

/* fallback for browsers without color-mix */
@supports not (background:color-mix(in srgb, red 10%, white)){
  .chip{background:#F1F3F6; border-color:#E0E4EA}
}