.sidebar{width:270px;padding:14px 10px}.app-shell{grid-template-columns:270px minmax(0,1fr)}#mainNav{overflow:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#31516b transparent}.nav-main{min-height:38px;padding:8px 10px;font-size:.82rem}.brand{padding-bottom:12px}.sidebar-foot{margin-top:10px}.eyebrow{font-size:.69rem;color:var(--teal);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}.ioc-badge{display:inline-block;margin-left:8px;padding:3px 6px;border-radius:4px;background:#24445e;color:#bfe6ff;letter-spacing:0;text-transform:none}.meta{font-size:.72rem;color:var(--muted)}.kpi-eight{grid-template-columns:repeat(4,minmax(145px,1fr))}.kpi.bad .value,.kpi.bad .delta{color:var(--red)}.dashboard-grid.wide{grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr)}
.network-map{position:relative;min-height:235px;background:linear-gradient(145deg,#0a2034,#0c263d);border-radius:9px;overflow:hidden}.network-map svg{width:100%;height:230px}.road{fill:none;stroke:#2c455a;stroke-width:12}.pipe{fill:none;stroke-width:4;stroke-linecap:round}.pipe.supply{stroke:var(--teal)}.pipe.sewer{stroke:var(--amber);stroke-dasharray:7 5}.node{stroke:#dcecf8;stroke-width:2}.node.ok{fill:var(--teal)}.node.warn{fill:var(--amber)}.node.bad{fill:var(--red)}.plant{fill:#315b76;stroke:#8ec9e5}.network-map text{font-size:11px;fill:#adc5d7}.map-legend{position:absolute;left:10px;bottom:8px;background:#061727dd;padding:7px 9px;border-radius:7px;display:flex;gap:12px;font-size:.68rem;color:#bad0df}.dot.teal{background:var(--teal)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}
.bar-chart{display:grid;gap:13px;padding:10px 2px 5px}.bar-item{display:grid;grid-template-columns:75px 1fr 110px;align-items:center;gap:12px;font-size:.78rem}.bar-item div{height:12px;background:#263f54;border-radius:6px;overflow:hidden}.bar-item i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--blue));border-radius:6px}.bar-item strong{text-align:right}.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.zone-card,.metric-card,.indicator,.process,.suspect{color:var(--text);font:inherit;cursor:pointer}.zone-card{background:var(--slate);border:1px solid var(--line);border-radius:11px;padding:16px;text-align:left}.zone-card.warn{border-color:#8a6a2a}.zone-title{display:flex;justify-content:space-between;align-items:center}.zone-card dl{margin:16px 0 0}.zone-card dl div,.indicator dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #264158;padding:9px 0}.zone-card dt,.indicator dt{color:var(--muted);font-size:.75rem}.zone-card dd,.indicator dd{font-size:.78rem;margin:0;font-weight:650}
.metric-grid,.indicator-grid{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:10px}.metric-card,.indicator{background:var(--slate);border:1px solid var(--line);border-radius:11px;padding:15px;text-align:left;position:relative}.metric-card.warn,.indicator.warn{border-color:#8c6a27}.metric-card.bad,.indicator.bad{border-color:#87404c}.metric-card span,.metric-card small{display:block}.metric-card small{color:var(--muted);font-size:.72rem;margin-top:3px}.metric-card>strong{display:block;font-size:1.55rem;margin:16px 0 2px}.metric-card em{font-size:.72rem;color:var(--muted);font-style:normal}.spark{height:55px;display:flex;gap:5px;align-items:flex-end;margin:6px 0 12px}.spark i{flex:1;background:#2dd4bf66;border-radius:2px}.map-full{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px}.map-full .network-map{min-height:520px}.map-full .network-map svg{height:500px}.map-side{padding:8px}.map-side h2{font-size:.9rem}.map-side label{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:.78rem}.map-side input{margin-right:9px}.map-side .attention{margin-top:20px}
.process-card{margin-top:10px}.process-flow{display:flex;align-items:center;gap:8px;overflow:auto;padding:6px 0}.process-flow>i{color:var(--muted);font-style:normal}.process{flex:1;min-width:130px;background:#0d283f;border:1px solid var(--line);border-radius:9px;padding:12px;text-align:left}.process>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#1b4b58;color:#8aeee0;font-size:.7rem;margin-bottom:9px}.process.warn{border-color:#8a6a2a}.process strong,.process small{display:block}.process strong{font-size:.78rem}.process small{font-size:.68rem;color:var(--muted);margin-top:4px}.indicator-head{display:flex;justify-content:space-between;align-items:center}.indicator-head strong{font-size:.88rem}.indicator-value{font-size:1.65rem;font-weight:750;margin-top:13px}.indicator-value small{font-size:.72rem;color:var(--muted);margin-left:5px}.mini-line{height:48px}.mini-line svg{width:100%;height:100%}.mini-line polyline{fill:none;stroke:var(--teal);stroke-width:2}.indicator.warn .mini-line polyline{stroke:var(--amber)}.indicator dl{margin:0}.indicator dl div{padding:6px 0}.indicator dd{text-align:right;max-width:55%}
.trace-banner{display:flex;justify-content:space-between;align-items:center;padding:15px;background:linear-gradient(100deg,#18334c,#292f3c);border:1px solid #775d2b;border-radius:11px;margin-bottom:10px}.trace-banner span,.trace-banner strong,.trace-banner small{display:block}.trace-banner span{font-size:.7rem;color:var(--amber);text-transform:uppercase}.trace-banner strong{margin:5px 0}.trace-banner small{font-size:.72rem;color:var(--muted)}.suspect-list{display:grid;gap:9px}.suspect{display:grid;grid-template-columns:30px 1fr 42px;gap:10px;align-items:center;background:#0a2035;border:1px solid var(--line);border-radius:9px;padding:11px;text-align:left}.suspect>b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#263f54;color:var(--amber)}.suspect strong,.suspect small{display:block}.suspect strong{font-size:.78rem}.suspect small{font-size:.69rem;color:var(--muted);margin:3px 0 7px}.suspect em{font-style:normal;font-weight:700;color:var(--amber)}.score{height:5px;background:#2a4257;border-radius:4px}.score i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--red));border-radius:4px}.conclusion{display:block;font-size:.75rem;color:var(--muted);margin-top:16px}.conclusion textarea{width:100%;min-height:90px;margin-top:6px;padding:10px;border-radius:8px;background:#081c30;border:1px solid var(--line);color:var(--text);font:inherit}
.severity{display:inline-block;padding:5px 8px;border-radius:99px;font-size:.7rem}.severity.warn{background:#493a1c;color:#ffd979}.severity.bad{background:#4a2130;color:#ffadbb}tr.highlight{background:#533f1e!important;box-shadow:inset 4px 0 var(--amber)}.detail-hero{display:flex;justify-content:space-between;align-items:center;background:#102b43;border:1px solid var(--line);padding:14px;border-radius:10px;margin-bottom:18px}.detail-hero.warn{border-color:#806329}.detail-hero.bad{border-color:#814050}.detail-hero span,.detail-hero strong{display:block}.detail-hero>div>span{font-size:.7rem;color:var(--muted)}.detail-hero>div>strong{font-size:1.45rem;margin-top:3px}.note{margin-top:10px;padding:11px;background:#182d3f;border-left:3px solid var(--amber);border-radius:6px}.note strong{font-size:.76rem}.note p{font-size:.76rem;color:#bed0dd;margin:5px 0 0}.mini-detail-chart .chart{height:150px}.mini-detail-chart .chart-label{display:none}.hot{color:var(--amber);font-weight:700}.table-card+.card{margin-top:10px}
@media(max-width:1250px){.metric-grid,.indicator-grid{grid-template-columns:repeat(3,1fr)}.kpi-eight{grid-template-columns:repeat(4,1fr)}}@media(max-width:1000px){.zone-grid{grid-template-columns:1fr}.metric-grid,.indicator-grid{grid-template-columns:repeat(2,1fr)}.map-full{grid-template-columns:1fr}.map-full .network-map{min-height:380px}.map-full .network-map svg{height:360px}.dashboard-grid.wide{grid-template-columns:1fr}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{width:270px}.kpi-eight{grid-template-columns:repeat(2,1fr)}.metric-grid,.indicator-grid{grid-template-columns:1fr}.trace-banner{align-items:flex-start;gap:10px}.process-flow{align-items:stretch}.process-flow>i{display:none}}