:root{
--bg:#f4f7f9;--card:#fff;--line:#e4e9ed;--text:#17212b;--muted:#72808c;
--dark:#101923;--water:#119ed0;--water2:#0877a5;--green:#16a34a;--amber:#d88a18;--red:#e45d48;
--shadow:0 14px 36px rgba(15,31,43,.08);--radius:18px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}button{cursor:pointer}.app{display:flex;min-height:100vh}
.sidebar{width:270px;flex:0 0 270px;background:linear-gradient(180deg,#101923,#0c141c);color:#fff;display:flex;flex-direction:column;overflow:visible;transition:width .25s,flex-basis .25s;position:relative;z-index:20}
.sidebar.collapsed{width:78px;flex-basis:78px}.sidebar-top{height:76px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px;background:linear-gradient(145deg,#27c6eb,#0878a7);box-shadow:0 7px 20px rgba(34,198,235,.22)}
.logo svg{width:24px;height:24px}.logo path{fill:#062735}.brand{margin-left:11px;white-space:nowrap;overflow:hidden}.brand b{display:block;font-size:16px;letter-spacing:.7px}.brand span{font-size:9px;color:#7f96a6;letter-spacing:1.5px;text-transform:uppercase}
.toggle{position:absolute;right:-14px;top:22px;width:30px;height:30px;border-radius:50%;border:1px solid #30414e;background:#182630;color:#dce8ee;display:grid;place-items:center;z-index:50;font-size:19px;line-height:1;box-shadow:0 5px 14px rgba(0,0,0,.22)}
.toggle:hover{background:#243744;color:#fff}.nav{padding:22px 12px;flex:1}.nav-label{font-size:9px;color:#607483;text-transform:uppercase;letter-spacing:1.7px;padding:0 11px 10px}
.nav-item{width:100%;height:44px;border:0;background:transparent;color:#aebfca;border-radius:11px;padding:0 12px;display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:5px}.nav-item:hover,.nav-item.active{background:rgba(17,158,208,.14);color:#56d4f5}.nav-icon{width:21px;flex:0 0 21px;text-align:center;font-size:18px}.nav-text{white-space:nowrap}
.side-bottom{padding:15px 14px;border-top:1px solid rgba(255,255,255,.08)}.connection{display:flex;align-items:center;gap:9px;color:#8095a2;font-size:10px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#64748b;flex:0 0 8px}.dot.on{background:#28c76f;box-shadow:0 0 0 4px rgba(40,199,111,.11)}.dot.warn{background:#f3a62b}.dot.err{background:#ef6653}
.sidebar.collapsed .brand,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-text,.sidebar.collapsed .connection span:not(.dot){display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:0}.sidebar.collapsed .side-bottom{display:flex;justify-content:center}
.main{flex:1;min-width:0;padding:24px 28px 44px}.wrap{max-width:1320px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.title-group{display:flex;align-items:center;gap:12px}.title-group h1{margin:0;font-size:25px;letter-spacing:-.5px}.title-group p{margin:5px 0 0;color:var(--muted);font-size:12px}.top-right{display:flex;align-items:center;gap:15px}
.live-pill{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #dce5ea;border-radius:99px;padding:8px 12px;color:#697884;font-size:11px;box-shadow:0 4px 13px rgba(15,31,43,.04)}.clock{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#677783;text-align:right;line-height:1.45}
.hero{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(420px,1.25fr);gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:22px;position:relative;overflow:hidden}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.6px;color:#84929d;font-weight:700}.card-title{font-size:16px;font-weight:750;margin-top:4px}
.tank-card{display:flex;flex-direction:column;align-items:center}.tank-card .head{width:100%}.tank{width:190px;height:190px;position:relative;margin:12px 0 13px}.tank-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px #dfe7eb,inset 0 0 28px rgba(15,31,43,.18)}.tank-clip{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#edf6f9,#dbeef3)}
.tank-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#27c6eb,#0d90bd 70%,#08708f);transition:height 1s}.tank-fill:before,.tank-fill:after{content:"";position:absolute;left:-30%;width:160%;height:20px;top:-11px;border-radius:50%;background:rgba(255,255,255,.25);animation:wave 5s linear infinite}.tank-fill:after{top:-7px;opacity:.35;animation-duration:8s;animation-direction:reverse}@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-30%)}}
.tank-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.tank-read .pct{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:33px;font-weight:800;color:#fff;text-shadow:0 2px 9px rgba(0,0,0,.28)}.tank-read small{font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.9);text-transform:uppercase}.tank-meta{text-align:center}.tank-meta .big{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:20px;font-weight:700}.tank-meta .cap{font-size:10px;color:#8a98a3;margin-top:3px}
.meter-card{display:flex;flex-direction:column}.plate{margin-top:10px;border-radius:13px;padding:15px;background:linear-gradient(155deg,rgba(201,161,90,.13),rgba(201,161,90,.035));border:1px solid rgba(180,140,72,.32)}.plate-top,.plate-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center}.plate-top .name{font-size:9px;color:#a47d37;letter-spacing:1.4px;text-transform:uppercase;font-weight:800}.plate-top .unit{font-size:10px;color:#8b969e}
.odometer{display:flex;gap:3px;background:#10202a;border-radius:8px;padding:10px 11px;margin-top:10px;width:max-content;box-shadow:inset 0 2px 8px rgba(0,0,0,.28)}.digit{width:24px;height:35px;overflow:hidden;background:linear-gradient(180deg,#152c38,#0d202b);border-radius:3px;position:relative}.digit .strip{position:absolute;left:0;top:0;width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:22px;font-weight:800;color:#e8f5fa;text-align:center;line-height:35px;transition:transform .45s}.digit.decimal .strip{color:#e6ad4d}.digit-sep{width:5px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;color:#8e723e;font-weight:800}
.plate-bottom{margin-top:8px}.plate-bottom span{font-size:9px;color:#7e8d97}.plate-bottom b{color:#697a84}.flow-row{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-top:20px}.flow-label{margin-bottom:5px}.flow-num{display:flex;align-items:baseline;gap:7px}.flow-num .v{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:42px;font-weight:800;letter-spacing:-2px}.flow-num .u{font-size:12px;color:#8b98a2}.status{font-size:10px;font-weight:800;padding:6px 11px;border-radius:99px;border:1px solid #cbeff7;background:#effbfe;color:#0986ad;white-space:nowrap}.status.high{color:#a8680c;background:#fff8e8;border-color:#f6d58c}.status.idle{color:#71808a;background:#f3f5f7;border-color:#e3e7ea}.spark{width:100%;height:45px;margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.stat{padding:16px 17px}.stat .icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:10px}.icon.blue{background:#e8f8fc;color:#119ed0}.icon.amber{background:#fff5df;color:#d88a18}.icon.green{background:#edf8f1;color:#16a34a}.icon.red{background:#fdf0ee;color:#e45d48}.stat .label{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#7e8c97;font-weight:800}.stat .value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:22px;font-weight:800;margin-top:4px}.stat .note{font-size:10px;color:#909ba4;margin-top:5px}
.week-card{margin-top:18px;padding:21px}.week-head{display:flex;justify-content:space-between;align-items:baseline}.week-head .right{font-size:11px;color:#8997a1}.week-head b{color:var(--water)}.bars{height:145px;display:flex;align-items:flex-end;gap:14px;margin-top:18px;padding:0 5px}.bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.bar-track{height:100%;width:100%;max-width:35px;display:flex;align-items:flex-end}.bar{width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#27c6eb,#0c8eb9);height:0;transition:height 1s}.bar.today{background:linear-gradient(180deg,#efb24d,#c47b1d)}.bar-val{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;color:#7e8c97}.bar-day{font-size:10px;color:#6f7e88}
.history{margin-top:18px;padding:20px}.history-head{display:flex;justify-content:space-between;align-items:center}.history-title{font-size:15px;font-weight:800}.history-count{font-size:10px;color:#8a98a2;margin-top:3px}.actions{display:flex;gap:7px}.btn{border:1px solid #dce4e9;background:#fff;color:#4e5d67;border-radius:9px;padding:8px 11px;font-size:10px;font-weight:700}.btn:hover{background:#f6f8fa}.btn.primary{background:#1099ca;border-color:#1099ca;color:#fff}.table-wrap{overflow:auto;border:1px solid #edf0f2;border-radius:11px;margin-top:14px}table{width:100%;border-collapse:collapse;font-size:11px}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef1f3;white-space:nowrap}th{font-size:9px;color:#82909a;text-transform:uppercase;letter-spacing:1px;background:#fafbfc}td{color:#4f5e68}tr:last-child td{border-bottom:0}.empty{text-align:center;color:#9aa5ad}
.mobile-menu{display:none}.overlay{position:fixed;inset:0;background:rgba(7,16,24,.52);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.overlay.show{display:flex}.modal{width:min(570px,100%);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden}.modal.small{max-width:390px}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #edf0f2}.modal-head h2{margin:0;font-size:16px}.modal-head p{margin:4px 0 0;font-size:10px;color:#8a98a2}.close{width:31px;height:31px;border:0;border-radius:9px;background:#f2f4f6;color:#687680;font-size:18px}.modal-body{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{margin-bottom:13px}.field label{display:block;font-size:9px;font-weight:800;color:#687680;letter-spacing:.7px;margin-bottom:6px}.field input,.field select{width:100%;height:40px;border:1px solid #dce3e7;border-radius:9px;padding:0 11px;color:#1f2c34;background:#fff;outline:none;font-size:12px}.field input:focus,.field select:focus{border-color:#43b5d7;box-shadow:0 0 0 3px rgba(17,158,208,.1)}.password{position:relative}.password input{padding-right:38px}.eye{position:absolute;right:3px;top:3px;width:34px;height:34px;border:0;background:transparent;color:#7c8b95}.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}.note{font-size:10px;line-height:1.5;color:#788690;background:#f7fafb;border:1px solid #e8eef1;border-radius:9px;padding:10px;margin-top:3px}.error{display:none;background:#fff1ef;color:#b13d2d;border:1px solid #ffd1c8;border-radius:8px;padding:8px 10px;font-size:10px;margin-bottom:12px}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);width:270px;flex-basis:270px}.sidebar.mobile-open{transform:translateX(0)}.mobile-menu{display:grid;place-items:center;width:36px;height:36px;border:1px solid #dce4e9;background:#fff;border-radius:9px}.main{padding:16px 13px 35px}.topbar{align-items:flex-start}.live-pill{display:none}.clock{font-size:9px}.title-group h1{font-size:21px}.stats{grid-template-columns:1fr 1fr}.bars{gap:7px}}@media(max-width:500px){.stats{grid-template-columns:1fr}.flow-num .v{font-size:36px}.digit{width:20px}.digit .strip{font-size:19px}.form-grid{grid-template-columns:1fr}}

/* Water Meter UI revisions */
.nav-icon svg,.stat .icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-icon{display:grid;place-items:center}.stat .icon svg{width:18px;height:18px}
.side-bottom{min-height:78px}.connection{flex-wrap:wrap}.connection small{width:100%;margin-left:17px;color:#5f7381;font-size:8px;overflow:hidden;text-overflow:ellipsis}
.sidebar.collapsed .connection small{display:none}
.meter-card{min-height:390px}.flow-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.chart-window{font-size:9px;color:#7c8a94;border:1px solid #e2e8ec;background:#fafcfd;border-radius:8px;padding:6px 8px;white-space:nowrap}.line-chart-wrap{height:220px;position:relative;margin-top:8px;border-radius:12px;background:linear-gradient(180deg,#fbfdfe,#f7fbfc);border:1px solid #edf2f4;overflow:hidden}.line-chart{width:100%;height:100%;display:block}.chart-grid{stroke:#dfe8ed;stroke-width:1;stroke-dasharray:4 5}.chart-axis{fill:#81909a;font-size:9px;font-family:Inter,system-ui,sans-serif}.chart-area{fill:rgba(17,158,208,.12)}.chart-line{fill:none;stroke:#119ed0;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:#119ed0;stroke-width:2}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8b99a3;font-size:11px}
.prominent-flow{margin-top:16px}.prominent-flow .flow-label{color:#119ed0;font-size:10px;letter-spacing:1.8px}.prominent-flow .flow-num{gap:9px}.prominent-flow .flow-num .v{font-size:58px;line-height:1;letter-spacing:-3px;color:#10202a}.prominent-flow .flow-num .u{font-size:14px;font-weight:650;color:#6f808b}.flow-source{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid #edf1f3;font-size:9px;color:#82909a}.flow-source b{color:#566873}.latest-ten{display:inline-block;margin-left:7px;padding:4px 7px;border-radius:999px;background:#eaf8fc;color:#0785ae;font-size:8px;text-transform:uppercase;letter-spacing:.7px;vertical-align:middle}.row-num{width:35px;color:#98a5ad;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.history table th:first-child,.history table td:first-child{text-align:center}.history table td:last-child{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.history table td:last-child b{font-size:12px;color:#17212b}
@media(max-width:760px){.meter-card{min-height:0}.line-chart-wrap{height:190px}.prominent-flow .flow-num .v{font-size:48px}}
@media(max-width:500px){.flow-chart-head{display:block}.chart-window{display:inline-block;margin-top:7px}.line-chart-wrap{height:170px}.prominent-flow .flow-num .v{font-size:42px}.flow-source{display:block}.flow-source span{display:block;margin-top:4px}}


/* FINAL WATER METER UI FIXES
   Encoding-safe controls + compact desktop dashboard.
*/
html,body{width:100%;height:100%;overflow:hidden}
.app{height:100vh;min-height:0;overflow:hidden}
.sidebar{height:100vh;min-height:0}
.main{height:100vh;min-height:0;overflow:hidden;padding:14px 22px}
.wrap{height:100%;max-width:1400px;display:flex;flex-direction:column}
.topbar{flex:0 0 auto;padding-bottom:12px;margin-bottom:12px;min-height:58px}
.title-group h1{font-size:23px}
.title-group p{font-size:11px}
.hero{flex:0 0 300px;min-height:0}
.hero-card{padding:16px}
.tank{width:150px;height:150px;margin:7px 0 8px}
.tank-read .pct{font-size:29px}
.tank-meta .big{font-size:18px}
.meter-card{min-height:0}
.line-chart-wrap{height:150px;margin-top:6px}
.prominent-flow{margin-top:9px}
.prominent-flow .flow-num .v{font-size:52px}
.flow-source{margin-top:7px;padding-top:7px}
.stats{flex:0 0 88px;margin-top:12px;gap:12px}
.stat{padding:10px 13px}
.stat .icon{width:26px;height:26px;margin-bottom:6px}
.stat .value{font-size:19px}
.stat .note{font-size:9px;margin-top:3px}
.week-card{flex:0 0 88px;margin-top:12px;padding:10px 16px}
.bars{height:48px;margin-top:6px;gap:12px}
.bar-col{gap:2px}
.bar-val{font-size:8px}
.bar-day{font-size:8px}
.history{flex:1 1 auto;min-height:0;margin-top:12px;padding:10px 14px;overflow:hidden}
.history-head{min-height:34px}
.history-title{font-size:13px}
.history-count{font-size:9px}
.table-wrap{margin-top:6px;overflow:hidden}
table{font-size:9px}
th,td{padding:5px 8px}
th{font-size:8px}
.history table td:last-child b{font-size:10px}
.latest-ten{padding:3px 6px;font-size:7px}
.actions .btn{padding:6px 9px;font-size:9px}

/* No Unicode chevrons: CSS draws the arrows reliably in any response encoding. */
.toggle{font-size:0}
.chevron{display:block;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.chevron-left{transform:rotate(-135deg);margin-left:3px}
.chevron-right{transform:rotate(45deg);margin-right:3px}
.hamburger-lines{display:block;width:16px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.hamburger-lines:after{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px solid currentColor}
.sidebar.collapsed .toggle{right:-14px}
.sidebar.collapsed .nav{padding-top:22px}

/* Compact enough for normal 1366x768 / 1920x1080 desktop displays. */
@media (max-height:820px) and (min-width:761px){
  .main{padding-top:10px;padding-bottom:10px}
  .topbar{min-height:52px;padding-bottom:9px;margin-bottom:9px}
  .hero{flex-basis:270px}
  .line-chart-wrap{height:132px}
  .prominent-flow .flow-num .v{font-size:48px}
  .stats{flex-basis:80px;margin-top:9px}
  .week-card{flex-basis:78px;margin-top:9px}
  .history{margin-top:9px}
}
@media (max-height:720px) and (min-width:761px){
  .hero{flex-basis:245px}
  .tank{width:125px;height:125px}
  .line-chart-wrap{height:112px}
  .prominent-flow .flow-num .v{font-size:44px}
  .stats{flex-basis:72px}
  .week-card{flex-basis:68px}
}

/* Small screens can scroll when the content genuinely cannot fit. */
@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow:auto}
  .app{height:auto;min-height:100vh;overflow:visible}
  .sidebar{height:100vh}
  .main{height:auto;min-height:100vh;overflow:visible;padding:16px 13px 35px}
}

/* Hide legacy MQTT topic/field metadata row */
.flow-source{display:none !important}