/* next build (after 22 Oct): web2 styles */

/* ===== Q635: the Live pop-up's Live tab, one view (three columns, option B). Colours from the app's tokens, so light and dark both work. ===== */
.lv48{--b48-cold:var(--cold);--b48-cool:#5aa6d6;--b48-ok:var(--acc);--b48-warm:var(--warn);--b48-hot:var(--crit);--b48-na:var(--off);--b48-oil:#a3620a;--b48-gas:var(--acc)}
.lvp-dark .lv48,html[data-mode="dark"] .lv48{--b48-cool:#8cc8ee;--b48-oil:#f0b45a}
html body .lv48:not(#z48){max-width:none;padding:12px 16px 24px;font-family:var(--sans)}
html body .lv48 .g48:not(#z48){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.lv48 .full48{grid-column:1/-1;min-width:0}
.lv48 .col48{display:flex;flex-direction:column;gap:12px;min-width:0}
.lv48 .pr48{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
/* cards */
html body .lv48 .c48:not(#z48){background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;padding:0;margin:0;box-shadow:none}
.lv48 .ch48{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:9px 14px;background:var(--surface2);border-bottom:1px solid var(--line2)}
.lv48 .ch48 .t48{font:700 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.lv48 .ch48 .r48{margin-left:auto;display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:500 12.5px/1.3 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}
.lv48 .ch48 .r48 .badge{font-size:11.5px}
.lv48 .ch48 .r48 .fv42{vertical-align:-3px;margin-right:4px}
.lv48 .k48{font:600 11px/1.25 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lv48 .pad48{padding:10px 14px}
.lv48 .tw48{overflow-x:auto}
.lv48 .mono,.lv48 .val,.lv48 .t48 td{font-family:var(--sans)!important;font-variant-numeric:tabular-nums}
html body .lv48 .b48:not(#z48){padding:10px 14px;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
/* top card */
html body .lv48 .top48:not(#z48){padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.lv48 .cfh48{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.lv48 .cfhk48{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--sans);letter-spacing:.08em;color:var(--muted)}
.lv48 .cfhk48 svg{width:18px;height:18px;color:var(--warn)}
html body .lv48 .cfh48 .badge:not(#z48){font:700 17px/1.2 var(--sans);padding:8px 18px;border-radius:999px;min-width:min(360px,100%);text-align:center;display:inline-block}
.lv48 .six48{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 0}
.lv48 .six48 > .s48{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line2);padding:0 12px;min-width:0}
.lv48 .six48 > .s48:first-child{border-left:0}
.lv48 .s48 .v48{font:700 26px/1.15 var(--sans);font-variant-numeric:tabular-nums}
.lv48 .s48.cold .v48,.lv48 .s48.tn48.c-b .v48,.lv48 .s48.tn48.c-lb .v48{color:var(--cold)}
.lv48 .s48.tn48.c-a .v48{color:var(--warn)} .lv48 .s48.tn48.c-r .v48{color:var(--crit)}
.lv48 .ft48,.lv48 .ft48 *{font-size:12px;color:var(--muted)}
.lv48 .bl48{border-top:1px solid var(--line2);margin:0 -14px}
.lv48 .four48{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px}
.lv48 .four48 > .f48{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;border:0;background:none}
.lv48 .f48 .v48{font:600 15px/1.35 var(--sans);display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.lv48 .f48 .v48 .small.muted{font-size:12.5px;font-weight:400}
.lv48 .f48 .v48 .badge{font-size:15px}
.lv48 .f48.bad .v48{color:var(--crit)}
.lv48 .tank48{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.lv48 .tank48 .tg48{height:12px;border-radius:6px;background:var(--line2);overflow:hidden}
.lv48 .tank48 .tg48 i{display:block;height:100%;border-radius:6px;background:var(--b48-oil)}
.lv48 .tank48.low .tg48 i{background:var(--crit)} .lv48 .tank48.low .val{color:var(--crit)}
.lv48 .tank48 .val{font:700 15px var(--sans)}
html body .lv48 .top48 .lights:not(#z48){padding:0;border:0;background:none}
/* system temperatures and meters */
.lv48 .rb48{padding:8px 14px 7px;border-top:1px solid var(--line2);display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(64px,auto) minmax(0,1.4fr);gap:2px 10px;align-items:center}
.lv48 .rbs48 > .rb48:first-child{border-top:0}
.lv48 .rb48 .k2{font:600 12.5px var(--sans);color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-width:0}
html body .lv48 .rb48 .val:not(#z48){font:700 20px var(--sans);text-align:right;white-space:nowrap;margin:0}
.lv48 .rb48 .val small{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.lv48 .rb48 .dt{grid-column:1/-1;font-size:12px;color:var(--muted)}
.lv48 .rb48.w{background:var(--warn-soft)} .lv48 .rb48.w .dt{color:var(--warn)}
.lv48 .rb48.c{background:var(--crit-soft)} .lv48 .rb48.c .dt{color:var(--crit)}
.lv48 .rb48.m48 .val{font-size:18px}
.lv48 .bar48{position:relative;height:16px;display:block}
.lv48 .bar48 .tr{position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:var(--line2)}
.lv48 .bar48 .ok{position:absolute;top:4px;height:8px;border-radius:4px;background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.lv48 .bar48 .rg{position:absolute;top:6px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--fg) 35%,transparent)}
.lv48 .bar48 .now{position:absolute;top:1px;width:4px;height:14px;margin-left:-2px;border-radius:2px;background:var(--fg)}
/* tables */
html body .lv48 table.t48:not(#z48){width:100%;border-collapse:collapse;font-size:13.5px;margin:0}
html body .lv48 table.t48 th:not(#z48){font:700 12px var(--sans);letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:7px 14px;white-space:nowrap}
html body .lv48 table.t48 th.n:not(#z48){text-align:right}
html body .lv48 table.t48 td:not(#z48){padding:6px 14px;border-top:1px solid var(--line2);white-space:nowrap}
.lv48 table.t48 .n{text-align:right}
.lv48 table.t48 td:first-child{color:var(--muted)}
.lv48 table.t48 tr.all td{font-weight:700;font-size:15px} .lv48 table.t48 tr.all td:first-child{color:var(--fg)}
.lv48 table.t48 td.r48{color:var(--crit);font-weight:700}
.lv48 table.t48 td.g48{color:var(--acc);font-weight:700}
.lv48 table.t48 td .fv42{vertical-align:-3px;margin-right:4px}
.lv48 .blr48 td small{font-size:12px;color:var(--muted)}
.lv48 .oil48{color:var(--b48-oil)} .lv48 .gas48{color:var(--b48-gas)}
/* apartments */
.lv48 .ah48{padding:10px 14px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:6px;font-size:13px}
.lv48 .ah48 .cold48{color:var(--cold)}
.lv48 .lg48{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.lv48 .lg48 span{display:inline-flex;align-items:center;gap:5px}
.lv48 .lg48 i{width:9px;height:9px;border-radius:50%}
.lv48 .lg48 i.cold{background:var(--b48-cold)} .lv48 .lg48 i.cool{background:var(--b48-cool)} .lv48 .lg48 i.ok{background:var(--b48-ok)} .lv48 .lg48 i.warm{background:var(--b48-warm)} .lv48 .lg48 i.hot{background:var(--b48-hot)}
.lv48 .lg48 i.dit{width:2px;height:12px;border-radius:1px;background:var(--fg)}
.lv48 .apr48{--c:var(--b48-na);padding:6px 14px;display:grid;grid-template-columns:minmax(64px,92px) 48px minmax(0,1fr);gap:8px;align-items:center;border-top:1px solid var(--line2)}
.lv48 .apl48 > .apr48:first-child{border-top:0}
.lv48 .apr48.cold{--c:var(--b48-cold)} .lv48 .apr48.cool{--c:var(--b48-cool)} .lv48 .apr48.ok{--c:var(--b48-ok)} .lv48 .apr48.warm{--c:var(--b48-warm)} .lv48 .apr48.hot{--c:var(--b48-hot)}
.lv48 .apr48 .n{font:600 13px/1.25 var(--sans);display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.lv48 .apr48 .t{font:700 16px var(--sans);text-align:right;color:var(--c);font-variant-numeric:tabular-nums}
.lv48 .apr48 .b{position:relative;height:10px;border-radius:5px;background:var(--line2)}
.lv48 .apr48 .b i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c)}
.lv48 .apr48 .b .d{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg)}
.lv48 .apr48.cx .t,.lv48 .apr48.nr .t,.lv48 .apr48.na .t{color:var(--muted)}
.lv48 .apr48.cx .b,.lv48 .apr48.nr .b{background:repeating-linear-gradient(135deg,var(--line2) 0 5px,transparent 5px 10px);height:18px;display:flex;align-items:center;padding-left:8px;font:700 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lv48 .tag48{display:inline-block;border-radius:5px;padding:0 5px;font:600 11px/1.6 var(--sans);white-space:nowrap;background:var(--warn-soft);color:var(--warn)}
.lv48 .tag48.i{background:var(--info-soft);color:var(--info)}
/* controller and weather */
html body .lv48 .say48 .b48:not(#z48){border-left:4px solid var(--off)}
html body .lv48 .say48 .b48.on:not(#z48){border-left-color:var(--crit)}
.lv48 .say48 .lv-sayh{margin-top:0}
.lv48 .say48 p{font-size:13.5px;line-height:1.45;margin:6px 0 0}
.lv48 .b48 .lines > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13.5px}
.lv48 .b48 .lines > div > span:first-child{color:var(--muted)}
.lv48 .b48 .lines > div b{font-weight:600;text-align:right}
.lv48 .b48 .big{font:700 28px/1.15 var(--sans)}
.lv48 .b48 .wxf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.lv48 .b48 .wxf > div{background:var(--surface2);border-radius:8px;padding:6px 4px;text-align:center;font-size:12px;display:flex;flex-direction:column;gap:1px;min-width:0}
/* heat plant + boilers */
.lv48 .lv-dgm svg{width:100%;height:auto;display:block;max-height:460px}
.lv48 .lv-dgm .legend{margin-top:6px}
.lv48 .seg48 button{padding:5px 12px;font-size:12.5px}
.lv48 .lp48{display:inline-flex;align-items:center;gap:5px}
.lv48 .lp48 i{width:9px;height:9px;border-radius:50%;background:var(--off)}
.lv48 .lp48.on{color:var(--fg);font-weight:600} .lv48 .lp48.on i{background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
/* relays, inputs and meters */
html body .lv48 .lst48:not(#z48){padding:10px 14px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px}
.lv48 .chips48{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html body .lv48 .chips48 .io:not(#z48){display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font:500 12.5px var(--sans);background:var(--surface);color:var(--fg)}
html body .lv48 .chips48 .io i:not(#z48){width:8px;height:8px;border-radius:50%;background:var(--off);border:0}
html body .lv48 .chips48 .io.on:not(#z48){background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 40%,var(--line));font-weight:600}
html body .lv48 .chips48 .io.on i:not(#z48){background:var(--acc)}
html body .lv48 .chips48 .io.al:not(#z48){background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 45%,var(--line));font-weight:600}
html body .lv48 .chips48 .io.al i:not(#z48){background:var(--crit)}
.lv48 .lgd48{font-size:12px;color:var(--muted);gap:6px 14px}
.lv48 .lgd48 span{display:inline-flex;align-items:center;gap:5px}
/* Today and Box read keep their own contents */
html body .lv48 .rr48 .b48:not(#z48){padding:10px 14px;display:flex;flex-direction:column;gap:8px}
/* narrower screens: two columns, then one */
@media (max-width:1100px){html body .lv48 .g48:not(#z48){grid-template-columns:repeat(2,minmax(0,1fr))}.lv48 .pr48{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){html body .lv48 .g48:not(#z48){grid-template-columns:minmax(0,1fr)}html body .lv48:not(#z48){padding:10px 12px 20px}}
/* the Boiler mode bar under the title bar: no view switch any more */
html body .lvv26.ctl48:not(#z48){justify-content:flex-start;padding:10px 16px 0}

/* ===== Q630: Live (multiple buildings) table header blue with white text and white group lines, grouped or not; the group lines run blue
   down the rows. Real-Time and the Live pop-up keep their white header with blue text. ===== */
html body #latbl thead th:not(#z517):not(#z518):not(#z630),html[data-theme="dark"] body #latbl thead th:not(#z517):not(#z518):not(#z630){background:#1E40AF!important;color:#fff!important;border-color:#3352c0!important}
html body #latbl thead th:not(#z517):not(#z518):not(#z630) *,html[data-theme="dark"] body #latbl thead th:not(#z517):not(#z518):not(#z630) *{color:#fff!important}
html body #latbl thead th.g29:not(#z517):not(#z518):not(#z630){border-left:2px solid #fff!important}
html body #latbl tbody td.g29:not(#z517):not(#z518):not(#z630){border-left:2px solid #1E40AF}
html[data-theme="dark"] body #latbl tbody td.g29:not(#z517):not(#z518):not(#z630){border-left-color:#3B63D9}

/* ===== Q636: Buildings: the batch action buttons sit on the "Find a building" line ===== */
html body main .bl-top:not(#z636){display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
html body main .bl-top .bt19-bar.bt48:not(#z636){display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:0;border:0;background:none;box-shadow:none}
/* Q614: the short "Offline" status with its unplugged icon */
html body .nc48:not(#z614){display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
html body .nc48 svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ===== Q648: Real-Time cards: no inner right borders on the value rows ===== */
html body .rt-tile.q45 .rt-r:not(#z648){border-right:0!important;border-radius:0}

/* ===== Q605 / Q650: a pop-up that loads opens at its final size with the one loader in the middle of its body ===== */
html body .swal2-popup.fs50:not(#z650){height:min(86vh,860px)}
html body .swal2-popup.fs50 .swal2-html-container:not(#z650){flex:1 1 auto;min-height:0;position:relative}
html body .swal2-popup.fs50 #dlgB:not(#z650){min-height:100%;position:relative}
html body .swal2-popup.fs50 #dlgB > .dl50:not(#z650){position:absolute;inset:0;display:flex;align-items:center;justify-content:center}