:root{--ink:#213c40;--deep:#174b52;--aqua:#167d86;--line:#dbe6e5;--bg:#f5f8f8}*{box-sizing:border-box}body{margin:0;font:14px system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}.wrap{max-width:1310px;margin:auto;padding:0 22px}header{background:white;border-bottom:4px solid #eb9b32}.nav{display:flex;align-items:center;gap:16px;padding-top:13px;padding-bottom:13px}.logo{background:#167a85;color:white;font-size:24px;font-weight:800;padding:11px 15px;border-radius:7px}.nav small{display:block;color:#577078;margin-top:5px}.hero{padding:33px 0 18px}.tag{color:#bb6c20;font-weight:800;letter-spacing:.08em;font-size:11px}h1{font-size:clamp(23px,3vw,38px);margin:10px 0}h2{font-size:19px;margin:0 0 12px}.hero>p{font-size:16px}.note{background:#e5f2f0;border-left:4px solid var(--aqua);padding:13px 16px;border-radius:5px;font-size:14px!important}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stats>div,.panel{background:white;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 10px #1b4c5010;padding:20px}.stats span{display:block;color:#627d80;font-size:13px}.stats strong{display:block;font-size:28px;margin-top:8px;color:#13535e}.panel{margin-bottom:18px}.row{display:flex;align-items:center;gap:16px}.between{justify-content:space-between}.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}label{display:flex;flex-direction:column;gap:7px;color:#50666a;font-weight:650;font-size:12px}.wide{grid-column:span 2}select,input{width:100%;min-width:0;border:1px solid #ccdcdb;border-radius:7px;background:white;padding:11px;font:inherit;color:#213c40}.actions{display:flex;align-items:center;gap:15px;padding-top:15px}.primary{background:#167b86;color:white;border:0;padding:12px 22px;font-weight:700}.quiet{background:transparent;border:0;color:var(--aqua)}button{cursor:pointer;border-radius:7px;border:1px solid #cbdcd9;background:white;padding:10px 14px;color:#125862;font-weight:600}button:disabled{opacity:.5;cursor:default}.sort{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;max-width:290px}.charts{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sub{color:#617a7b;font-size:13px;margin:0 0 16px}.bar{display:grid;grid-template-columns:150px 1fr 120px;align-items:center;gap:10px;margin:10px 0;font-size:12px}.track{height:12px;border-radius:9px;background:#e7efef;overflow:hidden}.fill{height:100%;background:#16838a}.bar em{text-align:right;font-style:normal}.scroll{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;background:#f2f7f7;font-size:12px;color:#46646a}td,th{padding:12px;border-bottom:1px solid #e2eaea;vertical-align:top}td:nth-child(5),td:nth-child(6){white-space:nowrap}.projectbutton{text-align:left;border:0;background:none;padding:0;color:#0c6673;font-weight:700}.minor{color:#819297;font-size:12px;margin-top:4px}.billtable{background:#f7fbfb;padding:16px}.billtable table{font-size:12px}.pager{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:15px}footer{text-align:center;padding:25px;color:#738486}@media(max-width:850px){.filters{grid-template-columns:1fr 1fr}.charts{grid-template-columns:1fr}.bar{grid-template-columns:125px 1fr 105px}}@media(max-width:550px){.filters,.stats{grid-template-columns:1fr}.wide{grid-column:span 1}.bar{grid-template-columns:100px 1fr 90px}.between{align-items:flex-start;flex-direction:column}}

/* Multi-select filtering */
.filterfield{min-width:0;position:relative}.filterlabel{display:block;font-weight:650;font-size:13px;margin-bottom:7px}.multifilter{position:relative;background:#fff;border:1px solid #cad4e1;border-radius:9px}.multifilter>summary{padding:12px;list-style:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.multifilter>summary:after{content:'⌄';float:right;padding-left:6px}.multifilter>summary::-webkit-details-marker{display:none}.filtermenu{position:absolute;z-index:30;top:100%;left:0;width:max(100%,265px);max-width:min(420px,90vw);background:white;border:1px solid #cbd5e1;border-radius:9px;box-shadow:0 12px 24px #2135472b;padding:10px}.filteroptions{overflow-y:auto;max-height:230px;display:flex;flex-direction:column;gap:2px}.checkoption{display:flex;gap:10px;align-items:center;padding:7px 5px;font-size:13px;cursor:pointer}.checkoption:hover{background:#f1f5f9}.checkoption input{width:16px;height:16px;flex-shrink:0;accent-color:#bf3c30}.pickactions{display:flex;gap:10px;margin-bottom:8px;border-bottom:1px solid #e2e8f0;padding-bottom:8px}.pickactions button{border:0;color:#a53123;background:#f9eae7;padding:6px 10px;border-radius:6px;cursor:pointer}

/* BNP Citizen Portal responsive filter layout — aligned, AC-led and readable */
:root{--ink:#1c3046;--deep:#73101c;--aqua:#bd2237;--line:#e5e8ee;--bg:#f6f7fa}
header{border-bottom:4px solid #b92236}.logo{background:#fff;color:#b61c30;padding:5px;border-radius:50%;width:63px;height:63px;display:flex;align-items:center;justify-content:center;border:2px solid #b92236;overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain}.logo-fallback{font-size:19px}.tag,.quiet,.projectbutton{color:#b01c30}.note{background:#fff7f8;border-color:#bf2338}.stats strong{color:#9a1b2b}.primary{background:#b92236}.fill{background:#ba2339}.pickactions button{color:#a51d31}.checkoption input{accent-color:#b92236}.filters{display:flex;flex-direction:column;gap:16px}.searchfield{width:100%;max-width:none}.filtergrid{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(250px,1.45fr) minmax(210px,1.1fr) minmax(190px,1fr) minmax(190px,1fr);gap:14px;align-items:stretch}.filterfield{min-width:0;display:flex;flex-direction:column}.filterlabel{min-height:18px;color:#344155;font-size:12px;display:block}.multifilter{width:100%;min-height:46px;display:block}.multifilter>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px 12px;font-size:13px}.multifilter>summary:after{float:none;flex-shrink:0}.filtermenu{width:max(100%,285px);max-width:min(390px,92vw)}.filterfield:nth-child(n+4) .filtermenu{left:auto;right:0}.checkoption[hidden]{display:none!important}.actions{flex-wrap:wrap}.actions .primary{min-width:140px}.quiet{font-weight:700;border:1px solid #e6c2c8;padding:9px 13px;border-radius:7px}footer{font-size:13px;line-height:1.9}footer a{color:#aa1e32}footer span{color:#64748b}@media(max-width:1180px){.filtergrid{grid-template-columns:repeat(6,minmax(0,1fr))}.filter-ac,.filter-ward,.filter-year{grid-column:span 2}.filter-category,.filter-classification{grid-column:span 3}}@media(max-width:650px){.filtergrid{grid-template-columns:1fr}.filter-ac,.filter-ward,.filter-year,.filter-category,.filter-classification{grid-column:auto}.filtermenu{max-width:calc(100vw - 55px);width:100%}.filterfield:nth-child(n+4) .filtermenu{left:0;right:auto}}

/* Oct 2026: searchable horizontal checkbox labels and visible popovers */
.filterfield,.filtergrid,.panel,.filters {overflow:visible!important}
.multifilter[open] {z-index:1000}
.filtermenu {position:fixed!important;z-index:99999!important;width:340px!important;max-width:calc(100vw - 22px)!important;max-height:min(440px,75vh);display:flex;flex-direction:column;overflow:hidden;left:var(--popup-x,12px)!important;right:auto!important;top:var(--popup-y,85px)!important;padding:10px!important}
.filteroptions{overflow-y:auto;overflow-x:hidden;max-height:300px;min-height:0;display:block}
.filteroptions .checkoption{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;min-height:39px;white-space:normal!important;text-align:left!important;margin:0!important;padding:7px 8px!important;font-size:13px;line-height:1.3;overflow-wrap:anywhere;cursor:pointer}
.filteroptions .checkoption[hidden]{display:none!important}
.filteroptions .checkoption input[type=checkbox]{display:block!important;position:static!important;flex:0 0 17px!important;width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important;margin:0!important;padding:0!important;appearance:auto!important;accent-color:#b92236}
.optionsearch{display:block;width:100%;flex:0 0 auto;margin:0 0 8px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:7px;font-size:13px}
.pickactions{flex:0 0 auto}
.projectstable{table-layout:fixed;min-width:1100px;width:100%}
.projectstable th:nth-child(2),.projectstable td:nth-child(2){min-width:200px;overflow-wrap:break-word}
.projectstable th:nth-child(3),.projectstable td:nth-child(3){min-width:170px;overflow-wrap:break-word}
.projectstable td,.projectstable th{padding:12px 14px}
.scroll{max-width:100%;overflow-x:auto}
@media(max-width:800px){.filtermenu{width:min(340px,calc(100vw - 22px))!important}}

/* BNP's supplied official-logo reference: full-width red header band */
header{background:#bd2028!important;border:0!important;position:relative;min-height:110px;color:white}
.nav{min-height:110px;gap:23px;padding-top:14px;padding-bottom:14px;align-items:center}
.logo{width:100px;height:100px;flex:0 0 100px;padding:0!important;background:#fff!important;border:4px solid #fff!important;border-radius:50%!important;box-shadow:0 2px 6px #61091066;overflow:hidden;display:flex;justify-content:center;align-items:center}
.logo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.brandtext{min-width:0;color:#fff}
.brandtext b{font-size:clamp(19px,2.3vw,30px);line-height:1.18;letter-spacing:.012em;color:#fff}
.nav .brandtext small{font-size:clamp(13px,1.3vw,17px);font-weight:500;margin-top:6px;color:#fff!important;opacity:.96}
.hero{padding:14px 0 18px}.hero .intro{margin:0 0 12px;color:#344155;font-size:15px}
/* Table: isolate and wrap very long work titles in their own cell */
.scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible}
.projectstable{width:100%;min-width:1190px;table-layout:fixed;border-collapse:collapse}
.projectstable th,.projectstable td{box-sizing:border-box;vertical-align:top;min-width:0!important;max-width:0;overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.45;padding:12px 13px}
.projectstable td:first-child{overflow:hidden;word-break:break-word}
.projectstable .projectbutton{display:block;width:100%;max-width:100%;white-space:normal!important;text-align:left;overflow-wrap:anywhere;word-break:break-word;line-height:1.4;font-size:13px;padding:0}
.projectstable .minor{display:block;overflow-wrap:anywhere;word-break:break-word}
.projectstable td:nth-child(2),.projectstable td:nth-child(3),.projectstable td:nth-child(4){overflow-wrap:anywhere;word-break:normal}
.projectstable td:nth-child(5),.projectstable td:nth-child(6){white-space:nowrap;overflow-wrap:normal}
/* Expandable bill tables remain independently horizontally scrollable */
.projectstable td[colspan="6"]{max-width:none!important;padding:0!important}
.billtable{max-width:100%;width:100%;overflow-x:auto}.billtable table{min-width:960px;width:100%;table-layout:auto}
@media(max-width:650px){header{min-height:94px}.nav{min-height:94px;gap:12px}.logo{width:73px;height:73px;flex-basis:73px}.brandtext b{font-size:18px}.brandtext small{font-size:12px}}

/* Use only the supplied BNP emblem on a solid red band; no photo/background image. */
header{background:#bd2028!important;background-image:none!important}
.logo{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.logo img{object-fit:contain!important;filter:none!important}

.ward-structure-note{display:block;margin-top:5px;color:#66758a;font-size:11px;font-weight:400;line-height:1.3}

/* Final header uses supplied BNP logo image and red background sampled from the same user image */
header{background:#af342f!important;background-image:none!important}
.logo{background:transparent!important;border:0!important;box-shadow:none!important;overflow:hidden!important}
.logo img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important}

/* Additional work-category chart spans both columns */
.charts .category-panel{grid-column:1/-1}
.category-panel .bar{grid-template-columns:minmax(180px,270px) minmax(120px,1fr) 125px}
.category-panel .bar>span{overflow-wrap:anywhere}
@media(max-width:650px){.category-panel .bar{grid-template-columns:minmax(105px,1fr) minmax(50px,1.2fr) 90px}}

/* Mobile bill-details fix: separate readable columns, horizontal swipe */
.projectstable td[colspan="6"] {width:100%;max-width:none!important;overflow:visible!important;}
.projectstable td[colspan="6"] > .billtable {display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;}
.billtable table {width:100%;min-width:1110px!important;table-layout:fixed!important;border-collapse:collapse;}
.billtable thead th,.billtable tbody td {box-sizing:border-box;max-width:none!important;min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important;line-height:1.45!important;vertical-align:top;padding:11px 13px!important;}
.billtable th:nth-child(1),.billtable td:nth-child(1){width:150px}
.billtable th:nth-child(2),.billtable td:nth-child(2){width:115px}
.billtable th:nth-child(3),.billtable td:nth-child(3),.billtable th:nth-child(4),.billtable td:nth-child(4){width:120px}
.billtable th:nth-child(5),.billtable td:nth-child(5){width:135px}
.billtable th:nth-child(6),.billtable td:nth-child(6){width:305px;overflow-wrap:anywhere!important}
.billtable th:nth-child(7),.billtable td:nth-child(7){width:165px;white-space:nowrap!important;overflow-wrap:normal!important;font-variant-numeric:tabular-nums}
@media(max-width:700px){.billtable{padding:12px 8px!important}.billtable table{min-width:1110px!important}.billtable thead th,.billtable tbody td{font-size:12px!important}.scroll{overflow-x:auto!important}}

/* FIX: expanded records must scroll in a viewport-width region, not full desktop table width. */
.bill-scroll-region{display:block;position:relative;width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border:1px solid #dde4ea;border-radius:8px;}
.bill-scroll-region table{min-width:1110px!important;width:1110px!important;table-layout:fixed!important;margin:0;}
.bill-swipe-hint{display:none;color:#ab1d30;font-size:12px;padding:9px 0;font-weight:600;}
@media(max-width:800px){
  .projectstable tr[data-details] .billtable{width:calc(100vw - 56px)!important;max-width:calc(100vw - 56px)!important;min-width:0!important;overflow:visible!important;padding:12px 4px!important;}
  .projectstable tr[data-details] .bill-scroll-region{width:100%!important;max-width:100%!important;overflow-x:scroll!important;touch-action:pan-x pan-y!important;}
  .projectstable tr[data-details] .bill-scroll-region table{width:1110px!important;min-width:1110px!important;}
  .bill-swipe-hint{display:block;}
}

/* Original source ward display */
.projectstable{min-width:1470px!important}.projectstable .original-wards{white-space:normal!important;overflow-wrap:anywhere;line-height:1.5;font-size:12px}.bill-scroll-region table{min-width:1320px!important}.projectstable td[colspan="7"]{max-width:none!important;padding:0!important}

/* FINAL Oct-24: precise column widths + sticky project columns */
.charts.charts-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.charts-three .panel{min-width:0;padding:16px}
.charts-three .bar{display:grid;grid-template-columns:minmax(90px,42%) minmax(35px,1fr) 93px;gap:7px;font-size:11px}
.charts-three .bar>span{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.charts-three .bar em{font-size:11px;white-space:nowrap}
@media(max-width:1100px){.charts.charts-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.charts.charts-three{grid-template-columns:1fr}}
.applied-filters{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:16px;font-size:12px;line-height:1.45}
.applied-filters>strong{color:#29374a;margin-right:4px}
.filter-chip{display:inline-flex;max-width:100%;gap:4px;background:#fff1f2;border:1px solid #efb7c1;border-radius:7px;padding:6px 9px;color:#7a192c;overflow-wrap:anywhere}
.filter-chip b{white-space:nowrap}.filter-none{color:#697689}
.projectstable .cell-line{display:block;margin:0 0 5px;overflow-wrap:anywhere}
.projectstable{border-collapse:separate!important;border-spacing:0!important}
.projectstable th:nth-child(1),.projectstable td:nth-child(1){position:sticky!important;left:0;z-index:4;background:#fff;box-shadow:1px 0 #e2eaea}
.projectstable th:nth-child(2),.projectstable td:nth-child(2){position:sticky!important;left:26%;z-index:3;background:#fff;box-shadow:2px 0 5px #00000016}
.projectstable thead th:nth-child(1),.projectstable thead th:nth-child(2){background:#f2f7f7;z-index:8}
.projectstable tr[data-details] td[colspan="7"]{position:static!important;left:auto!important;background:#f7fbfb!important;box-shadow:none!important}
.bill-scroll-region{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}
.bill-scroll-region table{table-layout:fixed!important;width:1450px!important;min-width:1450px!important;border-collapse:separate;border-spacing:0}
.bill-scroll-region th,.bill-scroll-region td{box-sizing:border-box!important;max-width:none!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;position:static!important}
.bill-scroll-region th:nth-child(1),.bill-scroll-region td:nth-child(1){width:125px!important}
.bill-scroll-region th:nth-child(2),.bill-scroll-region td:nth-child(2){width:215px!important}
.bill-scroll-region th:nth-child(3),.bill-scroll-region td:nth-child(3){width:125px!important}
.bill-scroll-region th:nth-child(4),.bill-scroll-region td:nth-child(4){width:115px!important}
.bill-scroll-region th:nth-child(5),.bill-scroll-region td:nth-child(5){width:115px!important}
.bill-scroll-region th:nth-child(6),.bill-scroll-region td:nth-child(6){width:170px!important}
.bill-scroll-region th:nth-child(7),.bill-scroll-region td:nth-child(7){width:375px!important;white-space:normal!important;overflow-wrap:anywhere!important}
.bill-scroll-region th:nth-child(8),.bill-scroll-region td:nth-child(8){width:210px!important;white-space:nowrap!important;overflow-wrap:normal!important}
@media(max-width:850px){.projectstable th:nth-child(2),.projectstable td:nth-child(2){left:26%}.bill-scroll-region{touch-action:pan-x pan-y!important}}


/* 2026-10-24: corrected fixed pixel geometry for sticky table columns */
.projectstable {
  table-layout:fixed!important;
  width:1655px!important;
  min-width:1655px!important;
  max-width:none!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.projectstable th,.projectstable td {
  box-sizing:border-box!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  white-space:normal!important;
  min-width:0!important;
  max-width:none!important;
}
.projectstable th:nth-child(1),.projectstable td:nth-child(1) {
  position:sticky!important;
  left:0!important;
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
  z-index:5;
  background:#fff!important;
}
.projectstable th:nth-child(2),.projectstable td:nth-child(2) {
  position:sticky!important;
  left:390px!important;
  width:235px!important;
  min-width:235px!important;
  max-width:235px!important;
  z-index:4;
  background:#fff!important;
  box-shadow:3px 0 5px -3px rgba(20,35,55,.25)!important;
  overflow-wrap:anywhere!important;
}
.projectstable thead th:nth-child(1),.projectstable thead th:nth-child(2) {
  background:#f2f7f7!important;
  z-index:10!important;
}
.projectstable th:nth-child(3),.projectstable td:nth-child(3){width:310px!important;}
.projectstable th:nth-child(4),.projectstable td:nth-child(4){width:175px!important;}
.projectstable th:nth-child(5),.projectstable td:nth-child(5){width:310px!important;overflow-wrap:anywhere!important;}
.projectstable th:nth-child(6),.projectstable td:nth-child(6){width:145px!important;white-space:nowrap!important;}
.projectstable th:nth-child(7),.projectstable td:nth-child(7){width:90px!important;white-space:nowrap!important;}
.projectstable tr[data-details] td[colspan="7"] {
  position:static!important;left:auto!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  background:#f7fbfb!important;z-index:auto!important;
  box-shadow:none!important;
}
/* Chart cards must be in one desktop row, across regular laptop widths */
.charts.charts-three {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.charts.charts-three > .panel {min-width:0!important;width:auto!important;padding:13px!important}
.charts.charts-three .bar{grid-template-columns:minmax(65px,40%) minmax(18px,1fr) 88px!important;gap:5px!important}
.charts.charts-three .bar>span{overflow-wrap:anywhere;white-space:normal}
@media(max-width:760px) {
  .charts.charts-three{grid-template-columns:1fr!important}
}
/* project table uses its own sideways scroll without clipped sticky elements */
.scroll{overflow-x:auto!important;overflow-y:auto!important;max-width:100%!important;position:relative}


/* Desktop fix: no spanning chart, all three share one row */
@media(min-width:901px){
  .charts.charts-three{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }
  .charts.charts-three > .panel,
  .charts.charts-three > .category-panel{
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  .charts.charts-three .bar,
  .charts.charts-three .category-panel .bar {
    grid-template-columns:minmax(0,41%) minmax(24px,1fr) 75px!important;
    gap:5px!important;
  }
  .charts.charts-three .bar span{font-size:11px!important;overflow-wrap:anywhere!important}
  .charts.charts-three .bar em{font-size:11px!important;white-space:nowrap!important}
}
/* Wider than phone: display every project column without horizontal scrolling */
@media(min-width:1101px){
  .projectstable{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  .projectstable th,
  .projectstable td{
    min-width:0!important;
    max-width:none!important;
    position:static!important;
    left:auto!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    padding:10px 9px!important;
  }
  .projectstable th:nth-child(1),.projectstable td:nth-child(1){width:24%!important;min-width:0!important;max-width:none!important;box-shadow:none!important}
  .projectstable th:nth-child(2),.projectstable td:nth-child(2){width:12%!important;min-width:0!important;max-width:none!important;box-shadow:none!important}
  .projectstable th:nth-child(3),.projectstable td:nth-child(3){width:18%!important}
  .projectstable th:nth-child(4),.projectstable td:nth-child(4){width:11%!important}
  .projectstable th:nth-child(5),.projectstable td:nth-child(5){width:23%!important;white-space:normal!important}
  .projectstable th:nth-child(6),.projectstable td:nth-child(6){width:8%!important;white-space:nowrap!important}
  .projectstable th:nth-child(7),.projectstable td:nth-child(7){width:4%!important;white-space:nowrap!important}
  .projectstable tr[data-details] td[colspan="7"]{width:auto!important;max-width:none!important}
  .scroll{overflow-x:visible!important}
}
/* Mobile and small tablet: table scrolls sideways; avoid hidden text under sticky headers */
@media(max-width:1100px){
  .projectstable{width:1250px!important;min-width:1250px!important;table-layout:fixed!important}
  .projectstable th,.projectstable td{position:static!important;left:auto!important;box-shadow:none!important}
  .scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}
@media(max-width:900px){
  .charts.charts-three{grid-template-columns:1fr!important}
  .charts.charts-three .category-panel{grid-column:auto!important}
}


/* FINAL DESKTOP TABLE ALIGNMENT FIX — 24 Oct 2026.
   Remove the old sticky offset only for the top-level Works/Projects cells.
   Nested bill tables and their horizontal scrolling remain untouched. */
@media (min-width:1101px) {
  .scroll > .projectstable > thead > tr > th:nth-child(1),
  .scroll > .projectstable > tbody > tr > td:nth-child(1),
  .scroll > .projectstable > thead > tr > th:nth-child(2),
  .scroll > .projectstable > tbody > tr > td:nth-child(2) {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .scroll > .projectstable {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  .scroll > .projectstable > thead > tr > th {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    vertical-align: top !important;
  }
  .scroll > .projectstable > tbody > tr > td:nth-child(-n+5) {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}

/* Multiple refined heads may be shown for one project. */
.projectstable td:nth-child(5) {white-space:normal!important;overflow-wrap:anywhere;}
#snapshotNote{display:block;color:#9b3c16;font-size:12px;margin-top:5px;}


/* 27 Oct 2026: responsive project + bill tables, category tags, non-overlapping charts.
   Works/project columns must all fit a desktop viewport. Mobile remains swipeable. */
.projectstable .head-tags {
  display:flex!important; flex-wrap:wrap!important; align-items:flex-start!important;
  justify-content:flex-start!important; gap:4px!important; min-width:0!important;
}
.projectstable .head-tag {
  display:inline-block!important; max-width:100%!important;
  font-size:11px; font-weight:550; line-height:1.35;
  background:#f9eef0; border:1px solid #edd0d5; color:#7b2030;
  border-radius:5px; padding:3px 6px;
  white-space:normal!important; overflow-wrap:anywhere!important;
}
.charts.charts-three {align-items:start!important;}
.charts.charts-three > .panel {min-width:0!important;overflow:hidden!important;}
.charts.charts-three .bar,
.charts.charts-three .category-panel .bar {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  grid-template-rows:auto 9px!important; row-gap:5px!important; column-gap:7px!important;
  min-width:0!important; max-width:100%!important; align-items:start!important;
  margin:10px 0 13px!important;
}
.charts.charts-three .bar > span {
  grid-column:1!important; grid-row:1!important; font-size:11px!important;
  line-height:1.4!important; overflow-wrap:anywhere!important; min-width:0!important;
  white-space:normal!important;
}
.charts.charts-three .bar > em {
  grid-column:2!important; grid-row:1!important;
  font-size:11px!important; line-height:1.4!important; text-align:right!important;
  white-space:nowrap!important; align-self:start!important;
}
.charts.charts-three .bar > .track {
  grid-column:1/-1!important; grid-row:2!important; height:9px!important;
  width:100%!important; min-width:0!important; max-width:100%!important;
}
@media (min-width:960px) {
  .scroll {overflow-x:hidden!important; overflow-y:visible!important; width:100%!important; min-width:0!important}
  .scroll > .projectstable {
    width:100%!important; min-width:0!important; max-width:100%!important;
    table-layout:fixed!important; border-spacing:0!important;
  }
  .scroll > .projectstable > thead > tr > th,
  .scroll > .projectstable > tbody > tr > td:not([colspan]) {
    box-sizing:border-box!important; position:static!important;
    left:auto!important; right:auto!important; min-width:0!important;
    max-width:none!important; width:auto!important; box-shadow:none!important;
    overflow-wrap:anywhere!important; word-break:normal!important;
    white-space:normal!important; vertical-align:top!important;
    padding:9px 7px!important; font-size:12px!important;
  }
  .scroll > .projectstable > tbody > tr > td.amount-cell {
    font-size:11.5px!important; font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
  }
  .scroll > .projectstable > tbody > tr[data-details] > td[colspan="7"] {
    box-sizing:border-box!important;position:static!important;left:auto!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    overflow:visible!important;padding:0!important;box-shadow:none!important;
    background:#f7fbfb!important;
  }
  .scroll > .projectstable > tbody > tr[data-details] .billtable {
    box-sizing:border-box!important; width:100%!important; max-width:100%!important;
    min-width:0!important; padding:12px!important; overflow:visible!important;
  }
  .scroll > .projectstable > tbody > tr[data-details] .bill-scroll-region {
    width:100%!important; min-width:0!important; max-width:100%!important;
    overflow-x:hidden!important;overflow-y:visible!important;
  }
  .scroll > .projectstable > tbody > tr[data-details] .bill-records {
    border-collapse:collapse!important;table-layout:fixed!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    border-spacing:0!important;
  }
  .scroll > .projectstable > tbody > tr[data-details] .bill-records th,
  .scroll > .projectstable > tbody > tr[data-details] .bill-records td {
    position:static!important;left:auto!important;right:auto!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    box-shadow:none!important; padding:7px 6px!important;font-size:11px!important;
    line-height:1.45!important; white-space:normal!important;
    overflow-wrap:anywhere!important;word-break:normal!important;
    background:transparent!important;
  }
  .bill-swipe-hint {display:none!important}
}
@media (min-width:960px) and (max-width:1120px) {
  .scroll > .projectstable > thead > tr > th,
  .scroll > .projectstable > tbody > tr > td:not([colspan]) {padding:7px 5px!important;font-size:11px!important}
  .scroll > .projectstable > tbody > tr[data-details] .bill-records th,
  .scroll > .projectstable > tbody > tr[data-details] .bill-records td {padding:7px 4px!important;font-size:10px!important}
}
@media (max-width:959px) {
  /* Horizontal swipe remains available on compact tablets and phones. */
  .scroll {overflow-x:auto!important;max-width:100%!important}
  .scroll > .projectstable {min-width:1120px!important; width:1120px!important}
  .scroll > .projectstable > thead > tr > th,
  .scroll > .projectstable > tbody > tr > td:not([colspan]) {
    position:static!important;left:auto!important;
    min-width:0!important;max-width:none!important;box-shadow:none!important;
  }
  .bill-scroll-region {overflow-x:auto!important;}
  .bill-scroll-region .bill-records {width:1120px!important;min-width:1120px!important;}
}

/* The nested bill table is never a sticky project table: do not inherit a
   390px first column or 235px second column on small screens. */
@media (max-width:959px) {
 .scroll > .projectstable > tbody > tr[data-details] .bill-scroll-region .bill-records {
   width:1120px!important;min-width:1120px!important;max-width:none!important;
   table-layout:fixed!important;
 }
 .scroll > .projectstable > tbody > tr[data-details] .bill-scroll-region .bill-records > thead > tr > th,
 .scroll > .projectstable > tbody > tr[data-details] .bill-scroll-region .bill-records > tbody > tr > td {
   position:static!important;left:auto!important;width:auto!important;
   min-width:0!important;max-width:none!important;box-shadow:none!important;
   padding:8px 7px!important;white-space:normal!important;overflow-wrap:anywhere!important;
 }
}

/* Explanation appears only below the work-category chart heading. */
.charts-three .work-category-note{color:#6d7c80!important;font-size:12px!important;line-height:1.55!important;margin:0 0 14px!important;font-weight:400!important;}


/* 27 Oct – Resolved ACs, distinct bills, clean 2 x 2 chart grid. */
.charts.charts-four {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-items:start!important}
.charts.charts-four > .panel {grid-column:auto!important;min-width:0!important;width:100%!important;padding:17px!important;overflow:hidden!important}
.charts.charts-four .category-panel {grid-column:auto!important}
.charts.charts-four .bar {display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:auto 9px!important;gap:5px 8px!important;margin:9px 0 12px!important;align-items:start!important;min-width:0!important}
.charts.charts-four .bar > span {grid-column:1!important;grid-row:1!important;overflow-wrap:anywhere!important;white-space:normal!important;font-size:12px!important;line-height:1.35!important}
.charts.charts-four .bar > em {grid-column:2!important;grid-row:1!important;font-size:11px!important;white-space:nowrap!important;align-self:start!important}
.charts.charts-four .bar .track {grid-column:1/-1!important;grid-row:2!important;height:9px!important;width:100%!important;max-width:100%!important;min-width:0!important}
.charts.charts-four .ac-bars {max-height:450px;overflow-y:auto;overflow-x:hidden;padding-right:6px;scrollbar-width:thin}
.data-warning{background:#fff7ed;border-left:4px solid #cf8b35;padding:10px 14px;border-radius:5px;color:#71471d;font-size:13px!important;line-height:1.5}
.data-warning[hidden]{display:none!important}
.bill-allocation-note{color:#67777e;font-size:12px;line-height:1.5;margin:8px 0 12px;max-width:100%}
.scroll > .projectstable .minor{white-space:normal!important;overflow-wrap:anywhere!important}
@media(max-width:800px){.charts.charts-four{grid-template-columns:1fr!important}.charts.charts-four .ac-bars{max-height:440px}}
@media(min-width:960px){.scroll > .projectstable{width:100%!important;min-width:0!important;table-layout:fixed!important}.scroll{overflow-x:hidden!important}}
@media(max-width:959px){.scroll{overflow-x:auto!important}.scroll > .projectstable{width:1150px!important;min-width:1150px!important}}

/* Chart descriptions: consistent grey footnotes below the chart. */
.charts.charts-four .chart-disclaimer,
.charts.charts-four .work-category-note {
  color:#6d7c80!important; font-size:12px!important; line-height:1.55!important;
  font-weight:400!important;
}
.charts.charts-four .chart-disclaimer {margin:13px 0 0!important;padding-top:9px;border-top:1px solid #edf1f1;}
.charts.charts-four .work-category-note {margin:0 0 14px!important;}


/* 27 October 2026: gross-spend / unique-project distributions */
.charts.charts-distribution{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;margin-bottom:18px}
.charts.charts-distribution > .panel{min-width:0!important;overflow:hidden!important;width:100%!important;padding:17px!important;margin-bottom:0!important}
.charts.charts-distribution .bar{display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:auto 9px!important;gap:6px 9px!important;margin:12px 0 16px!important;align-items:start!important;min-width:0!important}
.charts.charts-distribution .bar > span{grid-column:1!important;grid-row:1!important;line-height:1.45!important;overflow-wrap:anywhere!important;min-width:0!important;white-space:normal!important;font-size:12px!important}
.charts.charts-distribution .bar > em{grid-column:2!important;grid-row:1!important;white-space:nowrap!important;font-size:12px!important;align-self:start!important}
.charts.charts-distribution .bar > .track{grid-column:1/-1!important;grid-row:2!important;width:100%!important;max-width:100%!important;height:9px!important}
.charts.charts-distribution .distribution-note,.charts.charts-four .chart-disclaimer,.charts.charts-four .work-category-note{color:#687980!important;font-weight:400!important;font-size:12px!important;line-height:1.55!important;margin:16px 0 0!important;padding-top:10px!important;border-top:1px solid #edf1f1!important}
@media(max-width:800px){.charts.charts-distribution{grid-template-columns:1fr!important;gap:12px!important}}

/* 28 Oct: compact bill type column with gross amount only */
@media (min-width:960px){
 .scroll > .projectstable > tbody > tr[data-details] .bill-records th,
 .scroll > .projectstable > tbody > tr[data-details] .bill-records td { padding:7px 5px!important; font-size:10.8px!important; }
 .scroll > .projectstable > tbody > tr[data-details] .bill-records td:nth-child(4) { font-size:10px!important; }
}


/* 28 October 2026 — Top 10 original 198-ward spends (filter-responsive) */
.top-wards-panel {min-width:0!important;overflow:hidden!important;padding:19px!important;}
.top-wards-panel h2 {margin:0 0 14px!important;}
.top-wards-panel .bar {
  display:grid!important;
  grid-template-columns:minmax(160px,26%) minmax(0,1fr) max-content!important;
  align-items:center!important;gap:12px!important;
  margin:11px 0!important;min-width:0!important;
}
.top-wards-panel .bar > span {
  min-width:0!important;max-width:none!important;
  overflow-wrap:anywhere!important;white-space:normal!important;
  font-size:13px!important;line-height:1.35!important;
}
.top-wards-panel .bar > .track {
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:13px!important;border-radius:7px!important;
}
.top-wards-panel .bar > em {font-size:12px!important;min-width:94px!important;white-space:nowrap!important;text-align:right!important;}
.top-wards-panel .top-wards-note {
  color:#687980!important;font-size:12px!important;line-height:1.55!important;
  font-weight:400!important;margin:16px 0 0!important;
  padding-top:10px!important;border-top:1px solid #edf1f1!important;
}
@media (max-width:760px) {
  .top-wards-panel .bar {grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:auto 11px!important;gap:5px 9px!important;margin:12px 0 16px!important;}
  .top-wards-panel .bar > span {grid-row:1!important;grid-column:1!important;}
  .top-wards-panel .bar > em {grid-row:1!important;grid-column:2!important;}
  .top-wards-panel .bar > .track {grid-row:2!important;grid-column:1/-1!important;height:11px!important;}
}

/* Portal title now sits below the shared nammabnp.org site header */
.hero{padding-top:40px}.hero .portal-title{margin:0 0 8px;color:#9a1b2b;font-size:clamp(20px,2.4vw,30px);letter-spacing:.01em}
@media(max-width:767px){.hero{padding-top:18px}}