/* One shared layout, based on Sani4All. Brand colours stay in each theme. */
.portal-sani4all{--layout-paper:#f4f5f3;--layout-tabs:#e8ecea;--layout-hero:#334d59;--layout-old-bar:#d7e2e5}
.portal-kitchen4all{--layout-paper:#faf8f5;--layout-tabs:#eee8e1;--layout-hero:#77041c;--layout-old-bar:#e0d8cd}
body{background:var(--layout-paper)}
main{padding:32px 36px;max-width:1900px;min-width:0}
header{margin-bottom:22px}h1{font-size:36px}header .quiet{font-size:11px}
aside{overflow-y:auto;scrollbar-width:thin}
.brand{margin-bottom:12px;flex-shrink:0}
.brand img{width:100%;height:54px;object-fit:contain;object-position:left center}
aside nav{gap:2px;flex-shrink:0}
aside nav button{padding:9px 12px;min-height:37px}
.nav-group-label{color:#ffffffbd;font-size:9px;letter-spacing:1.3px;text-transform:uppercase;margin:16px 12px 4px;font-weight:500}
.aside-bottom{padding-top:20px}.aside-bottom .payoff{margin-bottom:15px}
.card{border-color:var(--line);border-radius:14px;box-shadow:0 3px 16px #253f471f}
.toolbar{margin:18px 0 14px}.tabs{background:var(--layout-tabs)}.tabs button.active{color:var(--wine);box-shadow:inset 0 -3px var(--red)}
.period-note{background:transparent;border:0;padding:5px 0;margin:0 0 17px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.period-help{margin:0}.period-help[open]{width:100%;padding:12px;background:white;border-radius:8px}.period-summary{font-size:11px}
#view>.kpis{gap:15px;margin:16px 0 14px;grid-template-columns:repeat(4,minmax(0,1fr))}
#view>.kpis .kpi{min-width:0}
#view>.kpis .value{font-size:clamp(22px,2.15vw,36px);letter-spacing:-1px;margin:20px 0 12px;overflow-wrap:anywhere}
#view>.kpis .label{font-size:11px}#view>.kpis .hint{font-size:10px}
#view>.kpis .kpi:first-child{background:var(--layout-hero);color:white}
#view>.kpis .kpi:first-child .label,#view>.kpis .kpi:first-child .hint{color:#ffffffe0}
#view>.kpis .kpi:first-child .value{color:white}
#view>.kpis .kpi:before{height:4px}#view>.kpis .kpi:first-child:before{background:var(--red)}
.overview-visuals{margin:20px 0;grid-template-columns:1.4fr 1fr}
.overview-visuals>.card{margin:0;min-width:0}.overview-visuals .chart{height:210px}
.overview-visuals .bar{background:var(--red);border-radius:5px 5px 0 0}.overview-visuals .bar.old{background:var(--layout-old-bar)}
.attention-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.attention-heading>div{min-width:0}
.attention-count{font-size:16px;line-height:1.65;color:var(--ink);margin:16px 0}.attention-count>strong{font-weight:600}
.attention-list{display:grid;gap:0}.attention-list button{display:flex;justify-content:space-between;text-align:left;gap:12px;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:11px}
.attention-list strong{color:var(--wine);white-space:nowrap}.overview-visuals .quiet{padding:8px 0;color:var(--wine)}
/* Keep the Kitchen4All comparison visuals for both brands. */
.portal-sani4all{--portfolio-bar:#ef7d00;--portfolio-muted:#cba579}
.portal-kitchen4all{--portfolio-bar:#77041c;--portfolio-muted:#ad737f}
.portfolio-visuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0 10px}
.portfolio-visuals>.card{margin:0;min-width:0;padding:26px}
.portfolio-visuals h2{margin:8px 0}
.portfolio-visuals .visual-subtitle{font-size:11px;color:var(--muted);margin:0 0 18px;line-height:1.7;max-width:680px}
.portfolio-visuals .visual-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10px;color:var(--muted);margin:14px 0 12px;min-height:20px}
.portfolio-visuals .visual-legend>span{display:inline-flex;gap:6px;align-items:center}
.portfolio-visuals .swatch{display:inline-block;width:12px;height:8px;border-radius:2px;flex:none;background:var(--portfolio-bar)}
.portfolio-visuals .reference-key{height:12px;border-left:2px dashed #52625e;margin:0 5px}
.portfolio-visuals .visual-axis{display:flex;justify-content:space-between;margin:0 86px 4px 135px;font-size:9px;color:var(--muted)}
.portfolio-visuals .visual-row{display:grid;grid-template-columns:125px minmax(40px,1fr) 76px;align-items:center;gap:10px;min-height:45px;border-top:1px solid #f2eeea;padding:5px 0;break-inside:avoid}
.portfolio-visuals .visual-label{font-size:11px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.portfolio-visuals .visual-label button{font-size:11px;font-weight:500;color:var(--ink);line-height:1.4}
.portfolio-visuals .visual-label small{display:block;font-size:9px;font-weight:400;color:#75695c;margin-top:4px}
.portfolio-visuals .bar-svg{display:block;width:100%;height:36px;overflow:visible}
.portfolio-visuals .bar-track{stroke:#f4f0eb;stroke-width:8}
.portfolio-visuals .zero-line{stroke:#b5aba0;stroke-width:1;vector-effect:non-scaling-stroke}
.portfolio-visuals .reference-line{stroke:#52625e;stroke-width:1.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.portfolio-visuals .series.current{fill:var(--portfolio-bar)}
.portfolio-visuals .outside-row .series.current{fill:var(--portfolio-muted)}
.portfolio-visuals .visual-value{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.45;font-size:11px}
.portfolio-visuals .visual-value strong{font-weight:500}
.portfolio-footnote{color:var(--muted);font-size:10px;line-height:1.7;margin:10px 0 22px}
@media(min-width:1450px){.portfolio-visuals .visual-row{grid-template-columns:150px minmax(60px,1fr) 85px}.portfolio-visuals .visual-axis{margin-left:160px;margin-right:95px}}
@media(max-width:1100px){.portfolio-visuals{grid-template-columns:1fr}}
@media(max-width:1200px){#view>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-visuals{grid-template-columns:1fr}}
@media(max-width:1150px){main{padding:28px 25px}}
@media(max-width:700px){
  main{padding:22px 16px}header{margin-bottom:14px}h1{font-size:28px}
  .brand img{width:165px;height:44px}.nav-group-label{display:none}
  aside nav button{padding:9px 10px;font-size:10px}
  .toolbar{margin-top:14px}.toolbar .tabs{width:100%;overflow:auto;flex-wrap:nowrap;gap:1px}.tabs button{white-space:nowrap;padding:9px 12px}
  #view>.kpis{gap:10px}#view>.kpis .value{font-size:22px}
  .portfolio-visuals{gap:14px}.portfolio-visuals>.card{padding:18px}
  .portfolio-visuals .visual-row{grid-template-columns:104px minmax(30px,1fr) 74px;gap:7px}
  .portfolio-visuals .visual-axis{margin-left:111px;margin-right:81px}
  .portfolio-visuals .visual-label,.portfolio-visuals .visual-label button,.portfolio-visuals .visual-value{font-size:10px}
  .portfolio-visuals .visual-label small{font-size:8px}.portfolio-visuals .visual-legend{font-size:9px;gap:8px 12px}
}
@media print{#view>.kpis .kpi,.bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}.overview-visuals{break-inside:avoid}}
@media print{.portfolio-visuals{display:block}.portfolio-visuals>.card{margin-bottom:16px;break-inside:avoid}.portfolio-visuals .series,.portfolio-visuals .swatch{-webkit-print-color-adjust:exact;print-color-adjust:exact}}