@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --forest:#13302a;--forest-2:#1c4339;--cream:#f6f5ef;--paper:#fff;
  --ink:#1a221f;--muted:#6c7670;--line:#e2e1d6;
  --divert:#2f9e5b;--recycle:#2f6fc4;--organic:#c98a2b;--special:#8456bd;--landfill:#b14640;
  --danger:#b14640;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif}
h1,h2,h3,.display{font-family:'Archivo',sans-serif;letter-spacing:-.02em;margin:0}
.num{font-family:'Archivo';font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--divert)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:var(--forest)}
.login .box{background:var(--paper);padding:34px;border-radius:16px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login .mark{width:46px;height:46px;border-radius:12px;background:var(--divert);display:grid;place-items:center;
  font-family:'Archivo';font-weight:800;font-size:24px;color:#06150f;margin-bottom:16px}
.login h1{font-size:22px}.login p{color:var(--muted);font-size:13px;margin:4px 0 20px}

label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:12px 0 5px}
.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.input:focus{outline:2px solid var(--divert);border-color:var(--divert)}

/* pretty dropdowns — native <select class="input"> gets a custom chevron + states */
select.input{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:34px;cursor:pointer;color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236c7670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  transition:border-color .12s,box-shadow .12s,background-color .12s}
select.input:hover{border-color:#c4cabf;background-color:#fbfcfa}
select.input:focus{outline:none;border-color:var(--divert);box-shadow:0 0 0 3px rgba(47,158,91,.18)}
select.input:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232f9e5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
select.input:disabled{background-color:#f1f1ea;color:var(--muted);cursor:not-allowed;opacity:.7}
select.input option{color:var(--ink)}
select.input option:checked{background:#e7f3ec}

/* ---- custom dropdown (GGSelect) ---- */
select.ggsel-native{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.ggsel-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color .12s,box-shadow .12s,background-color .12s}
.ggsel-trigger:hover{border-color:#c4cabf;background-color:#fbfcfa}
.ggsel-trigger.ggsel-open{border-color:var(--divert);box-shadow:0 0 0 3px rgba(47,158,91,.18)}
.ggsel-trigger .ggsel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggsel-trigger .ggsel-label.ph{color:var(--muted)}
.ggsel-trigger .ggsel-chev{flex:none;width:12px;height:12px;
  background:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236c7670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transition:transform .15s}
.ggsel-trigger.ggsel-open .ggsel-chev{transform:rotate(180deg)}
.ggsel-trigger.ggsel-disabled{background:#f1f1ea;color:var(--muted);cursor:not-allowed;opacity:.7}
.ggsel-panel{position:fixed;z-index:200;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 34px rgba(20,30,26,.18);padding:6px;max-height:260px;overflow-y:auto;
  animation:ggselIn .12s ease-out;max-width:min(360px,92vw)}
@keyframes ggselIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ggsel-opt{padding:9px 12px;border-radius:7px;font-size:14px;color:var(--ink);cursor:pointer;
  white-space:nowrap;transition:background-color .1s}
.ggsel-opt:hover{background:#f1f5f1}
.ggsel-opt.sel{background:#e7f3ec;color:var(--forest);font-weight:600}
.ggsel-opt.sel::after{content:"\2713";float:right;margin-left:10px;color:var(--divert)}
.ggsel-opt.dis{color:var(--muted);cursor:not-allowed;opacity:.6}
.ggsel-opt.dis:hover{background:transparent}
.ggsel-panel::-webkit-scrollbar{width:9px}
.ggsel-panel::-webkit-scrollbar-thumb{background:#d7dcd7;border-radius:6px;border:2px solid #fff}
.btn{background:var(--divert);color:#06150f;border:none;padding:10px 16px;border-radius:9px;font-weight:700;font-size:14px}
.btn.block{width:100%;margin-top:18px;padding:12px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:600}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{background:var(--danger);color:#fff}
.err{color:var(--danger);font-size:13px;margin-top:10px;min-height:18px}

/* app shell */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--forest);color:#cfe2d8;padding:20px 14px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;gap:10px;align-items:center;padding:0 8px 16px}
.side .brand .brandLogo{max-width:170px;width:100%;height:auto;display:block}
.side .brand .brandFallback{display:none;gap:10px;align-items:center}
.side .brand .m{width:30px;height:30px;border-radius:8px;background:var(--divert);display:grid;place-items:center;
  font-family:'Archivo';font-weight:800;color:#06150f}
.side .brand b{color:#fff;font-family:'Archivo';font-size:15px}
.navToggle{display:none;background:none;border:none;color:#e9efe9;font-size:24px;line-height:1;padding:4px 8px;cursor:pointer}
.side .brand small{display:block;color:#8fb7a2;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.nav a{padding:10px 12px;border-radius:9px;color:#bfd6c9;text-decoration:none;font-size:14px;font-weight:500;cursor:pointer}
.nav a:hover{background:#1d4338}
.nav a.on{background:var(--divert);color:#06150f;font-weight:700}
.side .me{margin-top:auto;padding:12px 8px;border-top:1px solid #284c40;font-size:12px;color:#8fb7a2}
.side .me b{color:#fff;display:block;font-size:13px}
.role-pill{display:inline-block;margin-top:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  background:#1d4338;color:#9fd3b6;padding:2px 8px;border-radius:20px}

.main{padding:26px 30px;overflow:auto}
.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.head h1{font-size:24px}
.muted{color:var(--muted)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
.kpi .v{font-size:25px;font-weight:800}.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.kpi.hero{background:var(--forest);color:#fff;border-color:var(--forest)}.kpi.hero .l{color:#8fb7a2}

.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.card h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.stream{height:30px;border-radius:7px;overflow:hidden;display:flex;border:1px solid var(--line)}
.stream span{height:100%}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover{background:var(--cream)}
.chip{font-size:10px;padding:2px 8px;border-radius:20px;color:#fff;font-weight:600;white-space:nowrap}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .grow{flex:1}
.grow{flex:1}
.bar{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:10px;font-size:13px;margin-bottom:8px}
.bar .track{height:16px;background:var(--cream);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.bar .fill{height:100%;background:var(--divert)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,20,16,.5);display:grid;place-items:center;z-index:50;padding:20px}
.modal .panel{background:#fff;border-radius:14px;width:min(560px,100%);max-height:90vh;overflow:auto;padding:24px}
.modal .panel.modalWide{width:min(900px,100%)}
.histFilters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:6px}
.histFilters > div{display:flex;flex-direction:column;gap:4px}
.histFilters > div.grow{flex:1;min-width:160px}
.histFilters label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
/* custom date picker (GGDate) */
input.ggdate-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;opacity:0!important;pointer-events:none!important}
.ggdate-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  background:#fff;color:var(--ink);cursor:pointer;transition:border-color .12s,box-shadow .12s,background-color .12s}
.ggdate-trigger:hover{border-color:#c4cabf;background-color:#fbfcfa}
.ggdate-trigger.ggdate-open{border-color:var(--divert);box-shadow:0 0 0 3px rgba(47,158,91,.18)}
.ggdate-trigger .ggdate-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggdate-trigger .ggdate-label.ph{color:var(--muted)}
.ggdate-trigger .ggdate-ico{flex:none;width:15px;height:15px;opacity:.6;
  background:no-repeat center/15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none' stroke='%236c7670' stroke-width='1.4'><rect x='2' y='3' width='12' height='11' rx='1.5'/><path d='M2 6h12M5.5 1.5v3M10.5 1.5v3'/></svg>")}
.ggdate-trigger.ggdate-open .ggdate-ico{opacity:1}
.ggdate-trigger.ggdate-disabled{background:#f1f1ea;color:var(--muted);cursor:not-allowed;opacity:.7}
.ggdate-panel{position:fixed;z-index:210;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(20,30,26,.18);padding:12px;width:256px;animation:ggselIn .12s ease-out}
.ggdate-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ggdate-title{font-weight:700;font-size:14px;color:var(--forest)}
.ggdate-nav{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
  font-size:16px;line-height:1;color:var(--ink);display:grid;place-items:center;transition:background-color .1s}
.ggdate-nav:hover{background:#f1f5f1}
.ggdate-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.ggdate-dow span{text-align:center;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;padding:4px 0}
.ggdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ggdate-cell{aspect-ratio:1;border:none;background:none;border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:background-color .1s}
.ggdate-cell.empty{visibility:hidden;cursor:default}
.ggdate-cell:hover:not(.empty){background:#f1f5f1}
.ggdate-cell.today{box-shadow:inset 0 0 0 1px var(--divert);color:var(--forest);font-weight:700}
.ggdate-cell.sel{background:var(--divert);color:#06150f;font-weight:700}
.ggdate-cell.sel:hover{background:var(--divert)}
.ggdate-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ggdate-foot button{border:none;background:none;color:var(--divert);font-weight:600;font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ggdate-foot button:hover{background:#e7f3ec}
/* quick-range chips + count row */
.histFilterBar{display:flex;align-items:center;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
.rangeChip{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;
  padding:5px 12px;border-radius:999px;cursor:pointer;transition:background-color .12s,border-color .12s}
.rangeChip:hover{background:#f1f5f1;border-color:#c4cabf}
.rangeChip.on{background:#e7f3ec;border-color:var(--divert);color:var(--forest);font-weight:600}
.histFilterBar .histCount{margin-left:auto;font-size:12px}
.histTableWrap{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.histTableWrap table{width:100%}
.histTableWrap thead th{position:sticky;top:0;background:var(--cream);z-index:1}
.modal h2{font-size:19px;margin-bottom:4px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formgrid .full{grid-column:1/-1}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.switchrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px}
.sw{width:38px;height:22px;border-radius:20px;background:#d7dcd7;border:none;position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--divert)}.sw.on::after{left:18px}
.hidden{display:none!important}

/* report */
.report{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:860px}
.rhead{background:var(--forest);color:#fff;padding:24px 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.rhead .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8fb7a2}
.rhead h2{font-size:25px;margin:6px 0 2px}
.rhead .sub{color:#bcd4c7;font-size:14px}
.rhead .gg{text-align:right;font-size:11px;color:#9cc0b0;line-height:1.6}
.rhead .gg b{color:#fff}
.report .section{padding:20px 28px;border-bottom:1px solid var(--line)}
.report .section:last-child{border-bottom:none}
.report .section h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.report .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center}
.report tr.tot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
/* client dashboard stat cards */
.cdStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.cdStat{background:#fbfcfa;border:1px solid #e4e7e0;border-radius:12px;padding:14px 16px;box-shadow:0 1px 4px rgba(20,30,26,.05)}
.cdStat b{display:block;font-size:20px;color:var(--ink);font-family:'Archivo'}
.cdStat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.cdInvWrap{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.cdInv{width:110px;text-align:right}
.cert{display:flex;gap:12px;align-items:center;border:1px dashed var(--divert);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:#f3faf5}
.cert .seal{width:40px;height:40px;border-radius:50%;background:var(--divert);color:#06150f;display:grid;place-items:center;font-family:'Archivo';font-weight:800;flex:none}
.cert b{display:block;font-family:'Archivo'}
.cert .d{font-size:12px;color:var(--muted)}

@media print{
  .side,#rptControls,.head{display:none!important}
  .shell{grid-template-columns:1fr}
  .main{padding:0;overflow:visible}
  .report{border:none;border-radius:0;max-width:none}
  .report .section{break-inside:avoid}
  body{background:#fff}
}
@media (max-width:820px){
  .shell{display:block}
  .side{position:sticky;top:0;z-index:60;height:auto;padding:10px 16px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .side .brand{display:flex;align-items:center;gap:10px;padding:0;width:100%}
  .side .brand .brandLogo{max-width:140px;flex:0 1 auto}
  .side .brand .navToggle{margin-left:auto}
  .navToggle{display:block}
  .nav{display:none;flex-direction:column;gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid #2a4d41}
  .side.open .nav{display:flex}
  .nav a{padding:12px 12px;font-size:15px}
  .side .me{display:none;margin-top:6px;padding:12px 8px 4px}
  .side.open .me{display:block}
  .main{padding:18px 16px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .formgrid{grid-template-columns:1fr}
}

/* certificate document */
.certOverlay{position:fixed;inset:0;background:rgba(20,30,26,.75);z-index:80;overflow:auto;padding:26px}
.certActions{max-width:720px;margin:0 auto 14px;display:flex;gap:10px;justify-content:flex-end}
.certDoc{max-width:720px;margin:0 auto;background:#fbfbf6;border:1px solid #d8d8cc;
  font-family:Georgia,'Times New Roman',serif;color:#22302b;padding:34px 44px 0;position:relative}
.certDoc::before,.certDoc::after{content:"";position:absolute;width:140px;height:90px;background:var(--forest-2);opacity:.85}
.certDoc::before{top:0;right:0;clip-path:polygon(100% 0,0 0,100% 100%)}
.certDoc::after{bottom:0;left:0;clip-path:polygon(0 100%,100% 100%,0 0)}
.certBrand{letter-spacing:10px;font-size:27px;color:#3c5148}
.certLogo{display:block;max-width:190px;width:100%;height:auto;margin-bottom:6px}
.certRule{border-top:2px solid #3c5148;width:120px;margin-top:6px}
.certDoc h1{text-align:center;font-size:27px;letter-spacing:2px;color:#2f4a3f;margin:44px 0 14px;font-family:inherit}
.certIntro{text-align:center;font-size:14px;color:#444;line-height:1.65;margin:0 26px 26px}
.certFields{width:100%;font-size:14.5px;border-collapse:collapse;position:relative;z-index:1}
.certFields td{border:none;padding:8px 0;vertical-align:top}
.certFields .cl{color:#555;width:230px}
.certFields .cv{font-weight:700}
.certDoc .soft{font-weight:400;color:#555;font-size:13px}
.certSign{margin:56px 0 30px;font-size:14.5px;position:relative;z-index:1}
.certSign .line{border-top:1px solid #333;width:250px;margin-bottom:6px}
.certFoot{background:#3c5148;color:#cfe0d6;font-size:11.5px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;padding:14px 44px 18px;margin:26px -44px 0;position:relative;z-index:1}
.certFoot b{color:#fff}
.certFoot > span:first-child{flex:1;min-width:0}
.certFoot > span:last-child{flex:none;white-space:nowrap}
.certFootText{display:block;margin-top:6px;font-size:9px;line-height:1.5;letter-spacing:.2px;
  text-transform:uppercase;color:#b9ccc2}

@media print{
  .noprint{display:none!important}
  .certOverlay{position:static;background:#fff;padding:0}
  body:has(.certOverlay) #root{display:none!important}
  .certDoc{border:none;max-width:none}
}

/* ---- old-system waste report (TOTAL + per-site sections) ---- */
.wr{background:#fff;border-radius:6px;overflow:hidden;margin-bottom:26px;box-shadow:0 2px 14px rgba(20,30,26,.08);
  font-family:'Archivo',sans-serif}
.wrHead{display:flex;justify-content:space-between;background:#5f7364;color:#fff;padding:26px 30px 20px;position:relative}
.wrTotal .wrHead{background:#a8c4c1}
.wrHead h2{font-size:clamp(26px,4vw,40px);line-height:1.05;letter-spacing:4px;font-weight:800;margin:0;color:#fff}
.wrSub{margin-top:8px;font-weight:800;font-size:14px;letter-spacing:.5px;color:#f0a63c}
.wrTotal .wrSub{color:#4c6154}
.wrRule{height:5px;background:#c8d2b9;width:min(420px,90%);margin-top:10px}
.wrHeadR{display:flex;flex-direction:column;align-items:flex-end;gap:10px;justify-content:center}
.wrMonth{font-weight:800;letter-spacing:2px;font-size:13px;position:absolute;top:14px;right:22px}
.wrPageNo{font-size:18px;position:absolute;top:10px;right:22px}
.wrKpi{display:flex;align-items:center;gap:12px;font-weight:800;font-size:13.5px;letter-spacing:.5px}
.wrKpi b{min-width:120px;text-align:center;padding:9px 14px;font-size:15px}
.wrKpi .k1{background:#f0a63c;color:#fff}
.wrKpi .k2{background:#6a8452;color:#fff}
.wr:not(.wrTotal) .wrKpi .k1{background:#b0cbd1;color:#37413a}
.wr:not(.wrTotal) .wrKpi .k2{background:#b0b896;color:#37413a}
.wrBody{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:24px 30px 20px}
/* each category chart boxed as its own card so they read as separate charts */
.chartCard{background:#fbfcfa;border:1px solid #e4e7e0;border-radius:12px;padding:16px 18px 14px;
  box-shadow:0 1px 4px rgba(20,30,26,.05)}
.chartCard h3{margin-top:0}
.wrBody > *{min-width:0}   /* grid cells may shrink — charts scroll instead of spilling out of the card */
.wrBody h3{font-size:13px;font-weight:800;letter-spacing:.5px;color:#37413a;margin:0 0 14px}
/* horizontal bars */
.wrHbRow{display:flex;align-items:center;gap:10px;margin:9px 0}
.wrHbL{width:118px;text-align:right;font-size:11px;color:#37413a;flex:none}
.wrHbTrack{flex:1;position:relative;background:linear-gradient(to right,#e8e8e2 1px,transparent 1px);background-size:20% 100%;height:22px;display:flex;align-items:center}
.wrHbBar{height:100%;border-radius:0 3px 3px 0}
.wrHbV{font-size:10.5px;color:#37413a;margin-left:6px;white-space:nowrap}
/* columns — the group shrinks to fit the screen; no horizontal scroll */
.wrColsWrap{position:relative;overflow:hidden}
.wrLegend{display:flex;gap:14px;justify-content:flex-end;font-size:11px;color:#37413a;margin-bottom:8px}
.wrLegend i{display:inline-block;width:9px;height:9px;margin-right:5px}
.wrColsPlot{position:relative;padding-top:34px}   /* reserved strip for the rotated value labels */
.wrCols{display:flex;align-items:flex-end;gap:2%;height:230px;border-bottom:1px solid #d8d8d0;padding:0 4%}
.wrColGroup{flex:1 1 0;min-width:0;display:flex;flex-direction:column;height:100%}
.wrColPair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.wrColBarWrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:48%;
  box-sizing:border-box}
.wrColBar{width:100%;max-width:34px;border-radius:2px 2px 0 0}
.wrColV{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:bottom center;
  font-size:9.5px;color:#37413a;margin-bottom:4px;white-space:nowrap;pointer-events:none}
.wrColM{text-align:center;font-size:11px;color:#37413a;padding-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .wrCols{gap:1%;height:200px}
  .wrColsPlot{padding-top:30px}
  .wrColV{font-size:8px;margin-bottom:3px}
  .wrColM{font-size:9px}
  .wrColBar{max-width:20px}
}
.wrPill{background:#6a8452;color:#eef3e8;border-radius:26px;padding:16px 26px;margin-top:22px;font-size:13px;text-align:center;line-height:1.7;max-width:360px}
.wrPill b{color:#fff}
.wrFoot{background:#3e403e;color:#e8e8e2;display:flex;justify-content:center;gap:36px;padding:13px 20px;font-size:12.5px}
@media (max-width:760px){.wrBody{grid-template-columns:1fr}.wrHead{flex-direction:column;gap:14px}.wrHeadR{align-items:flex-start}}
@media print{
  @page{size:A4 landscape;margin:0}
  .wr{break-after:page;border-radius:0;box-shadow:none;margin:0}
  .wrColsWrap{overflow:visible}
}

/* Report preview — the generated PDF shown inline, so view = print = download.
   A4 landscape is 297x210, so the frame keeps that aspect and never letterboxes. */
.rptPreview{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 2px 14px rgba(20,30,26,.08);
  /* Sits inside the content padding and caps out, so the page stays comfortably
     readable without the frame growing taller than the screen. */
  max-width:1430px;margin:0 auto}
/* The frame is exactly A4-landscape shaped, so one page fills it with no grey
   letterboxing above and below; scrolling moves to the next page. */
.rptPreview iframe{display:block;width:100%;aspect-ratio:297/210;height:auto;min-height:380px;
  border:0;background:#f2f2ec}
.rptPreviewFallback{padding:10px 18px;font-size:12.5px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rptPreviewFallback a{color:var(--divert);font-weight:600}
@media (max-width:820px){
  .rptPreview{margin:0 -16px;border-radius:0}
  .rptPreview iframe{aspect-ratio:auto;height:70vh}
}
/* On very wide screens stop growing, or a page-shaped frame gets taller than the
   screen and you scroll more than you read. */
/* (max-width above already caps growth on very wide screens) */

/* dashboard variant of the report look */
.wrDash .wrHead{background:#3f5a4d}
.wrDash .wrSub{color:#c8d2b9}
.wrDash .wrKpi .k1{background:#f0a63c;color:#fff}
.wrDash .wrKpi .k2{background:#a8c97f;color:#2c3a30}
.wrStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:#e4e4dc;border-bottom:1px solid #e4e4dc}
.wrStat{background:#f7f7f2;padding:16px 10px;text-align:center}
.wrStat b{display:block;font-size:20px;color:#2c3a30;font-variant-numeric:tabular-nums}
.wrStat span{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#7a8078}

/* landfill month tracker */
.lfMonths{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.lfM{background:#f7f7f2;border:1px solid #e4e4dc;border-radius:8px;padding:12px 8px;text-align:center;cursor:pointer;
  font-family:inherit;transition:.12s}
.lfM:hover{border-color:#b14640;box-shadow:0 2px 8px rgba(177,70,64,.15)}
.lfMn{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#7a8078}
.lfM b{display:block;font-size:17px;color:#b14640;margin:3px 0;font-variant-numeric:tabular-nums}
.lfC{display:block;font-size:11.5px;color:#37413a;font-variant-numeric:tabular-nums}
/* Secondary line on a landfill month tile: the estimate when an invoice exists,
   or why no invoiced figure is shown. */
.lfEst{display:block;font-size:9.5px;color:#9aa096;margin-top:1px;font-variant-numeric:tabular-nums}
.lfM.lfMact{border-color:#b0cbd1}
.lfM.lfMact b{color:#37413a}
/* Third line inside a dashboard stat tile (variance against estimate). */
.wrStatSub{display:block;font-size:9.5px;letter-spacing:.2px;margin-top:2px;font-weight:700}
.catDot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* Email account (Outpost) card */
.opStatus{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:10px 14px;font-size:13.5px;background:#fbfbf7}
.opStatus.opOk{border-left-color:var(--divert)}
.opStatus.opBad{border-left-color:var(--danger)}
.opStatus.opWait{border-left-color:var(--organic)}
.opStatus.opOff{border-left-color:#9aa096}
.opPill{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;color:#fff;background:#9aa096}
.opOk .opPill{background:var(--divert)} .opBad .opPill{background:var(--danger)} .opWait .opPill{background:var(--organic)}
.opErr{font-size:12.5px;color:var(--danger);margin-top:6px}
.opLegacy{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.opLegacy summary{cursor:pointer;font-size:12.5px;color:var(--muted)}

/* Once-off certificate form */
.ooNote{font-size:12.5px;color:var(--ink);background:#fbf6ea;border:1px solid #ecdcb4;border-left:4px solid var(--organic);border-radius:8px;padding:9px 12px}
.ooBoxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.ooBox{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;margin:0}
.ooBox span{font-weight:600;color:var(--ink)}