/* 17 Oct build: prototype v185-v326 (webb screens) */

/* Q242 + Q332 range date picker */
html body .rgx:not(#z44){display:none!important}
.rg-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-align:left;min-width:190px;color:var(--fg);background:var(--surface)}
.rg-btn::before{content:"";width:14px;height:14px;flex:none;background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.rg-btn span{white-space:nowrap}
.rg-btn:disabled{opacity:.55;cursor:default}
.rgp44{position:fixed;z-index:100000;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.22);padding:14px;display:grid;gap:12px;width:min(640px,calc(100vw - 16px));font-size:14px}
.rgh44{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}
.rgh44 span{padding-bottom:3px;border-bottom:3px solid transparent;font-weight:600}
.rgh44 span.now{border-color:#1E40AF;color:#1E40AF}
.rgh44 i{margin-left:auto;font-style:normal;color:var(--muted);font-size:13px}
.rgms44{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}
.rgm44{display:flex;align-items:center;justify-content:center;font-weight:600;height:30px}
.rgn44{position:absolute;top:0;width:30px;height:30px;border:0;background:none;color:#1E40AF;font-size:20px;cursor:pointer;border-radius:6px;z-index:1}
.rgn44.p{left:0}.rgn44.n{right:0}.rgn44:disabled{opacity:.3;cursor:default}
.rgg44{display:grid;grid-template-columns:repeat(7,1fr);font-variant-numeric:tabular-nums}
.rgg44 b{text-align:center;color:var(--muted);font-size:12px;font-weight:500;padding:6px 0}
.rgd44{height:34px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;position:relative}
.rgd44:hover:not(:disabled),.rgd44.in,.rgn44:hover:not(:disabled){background:rgba(30,64,175,.14)}
.rgd44:disabled{opacity:.35;cursor:default}
.rgd44.t::after{content:"";position:absolute;left:50%;bottom:4px;width:14px;height:2px;margin-left:-7px;background:#f59e0b}
.rgd44.s,.rgd44.e,.rgd44.s:hover,.rgd44.e:hover{background:#1E40AF!important;color:#fff;font-weight:600}
.rgd44.s{border-radius:6px 0 0 6px}.rgd44.e{border-radius:0 6px 6px 0}.rgd44.s.e{border-radius:6px}
.rgq44{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.rgq44 span{flex:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rgh44 span.now,:root:not([data-theme="light"]) .rgn44{color:#8fb0ff;border-color:#8fb0ff}}
:root[data-theme="dark"] .rgh44 span.now,:root[data-theme="dark"] .rgn44{color:#8fb0ff;border-color:#8fb0ff}
@media (max-width:620px){.rgp44{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto}.rgms44{grid-template-columns:1fr}.rg2-44{display:none}}
.rg1-44 .rgh44 span{border-color:#1E40AF}

/* Q386 (v327 item 77): no answer: red header pill, red Status cell, red Real-Time tile text; values "--" */
html body .lvp-rt.blz:not(#z45){background:#dc2626!important;color:#fff!important;font-weight:700;border-radius:5px;padding:2px 8px}
html body #latbl td.la-st.blz:not(#z45){color:var(--crit);font-weight:700}
html body .rt-wait.blz:not(#z45){border:1px solid var(--crit);border-radius:8px;padding:8px 10px;background:var(--crit-soft,#fdecec);display:flex;flex-direction:column;gap:4px}
html body .rt-wait.blz b:not(#z45){color:var(--crit)!important;font-weight:700}
/* Q395: Real-Time water loss amber only while a Water loss alert is open (red at 50 gal or more uses .al) */
html body .rt-c.wlz b:not(#z45){color:#b45309!important}
/* Q178: Cycle rem in the strong amber */
html body .lbl + .badge.warn:not(#z42){background:#FFD54A!important;color:#3a2600!important;border-color:#FFC21A!important}

/* Q374 + Q396: dots and tints of System temperatures and meters; the Table view rows */
.dot.dz-cold{background:#2563eb}
html body .card.dev.tz-crit:not(#z45){background:#fdecec}html body .card.dev.tz-crit .val:not(#z45){color:var(--crit)}
html body .card.dev.tz-warn:not(#z45){background:#fff4e0}html body .card.dev.tz-warn .val:not(#z45){color:#b45309}
html body .card.dev.tz-cold:not(#z45){background:#e8efff}html body .card.dev.tz-cold .val:not(#z45){color:#1d4ed8}
:root[data-theme="dark"] body .card.dev.tz-crit:not(#z45){background:rgba(185,28,28,.18)}:root[data-theme="dark"] body .card.dev.tz-warn:not(#z45){background:rgba(180,83,9,.18)}:root[data-theme="dark"] body .card.dev.tz-cold:not(#z45){background:rgba(37,99,235,.18)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body .card.dev.tz-crit:not(#z45){background:rgba(185,28,28,.18)}:root:not([data-theme="light"]) body .card.dev.tz-warn:not(#z45){background:rgba(180,83,9,.18)}:root:not([data-theme="light"]) body .card.dev.tz-cold:not(#z45){background:rgba(37,99,235,.18)}}
.lvt26 tr.r42-warn > td{background:color-mix(in srgb,#f59e0b 16%,transparent)!important}
.lvt26 tr.r42-crit > td{background:color-mix(in srgb,#dc2626 14%,transparent)!important}
.lvt26 tr.r42-cold > td{background:color-mix(in srgb,#2563eb 12%,transparent)!important}
.lvt26 tr.r42-off > td{color:var(--muted)}

/* Q336: cancelled apartment sensors: grey striped tile with a "Cancelled" tag; the count in the heading highlights them */
html body .apt33.cx336:not(#z45){background:repeating-linear-gradient(135deg,#eef0f3 0 6px,#e2e5ea 6px 12px)!important;color:#6b7280!important;border-color:#cbd0d8!important}
html body .apt33.cx336 .cx336t:not(#z45){font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#4b5563}
.apt33.cx336hi{outline:3px solid #1E40AF;outline-offset:1px;transition:outline-color .3s}
.lg33 i.cx336{background:repeating-linear-gradient(135deg,#eef0f3 0 3px,#cfd4db 3px 6px)}
.cx336b{border:0;background:none;padding:0;font:inherit;color:#1E40AF;text-decoration:underline;cursor:pointer}
:root[data-theme="dark"] body .apt33.cx336:not(#z45){background:repeating-linear-gradient(135deg,#2a2f38 0 6px,#232831 6px 12px)!important;color:#9aa3b2!important;border-color:#3a414d!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body .apt33.cx336:not(#z45){background:repeating-linear-gradient(135deg,#2a2f38 0 6px,#232831 6px 12px)!important;color:#9aa3b2!important;border-color:#3a414d!important}}

/* Q267 Live (all buildings): blue controls line, the read progress in the Columns row; Q312/Q320 Not grouped fits the window */
html body main.la .la-h.la42:not(#z42){background:#1E40AF;color:#fff;margin:-16px -16px 10px;padding:10px 120px 10px 16px;border-radius:0}
html body main.la .la-h.la42 h2:not(#z42),html body main.la .la-h.la42 label:not(#z42){color:#fff}
html body main.la .la-h.la42 #lapause:not(#z42){background:transparent;color:#fff;border-color:#fff}
html body main.la .la-h.la42 select:not(#z42),html body main.la .la-h.la42 input:not(#z42){color:#0f172a;background-color:#fff}
html body main.la .la29 .la-p.la42p:not(#z42){margin:0 0 0 auto;display:flex;align-items:center;gap:10px;padding:0}
html body main.la .la29 .la-p.la42p .la-pb:not(#z42){width:120px}
html body main.la td.la-cfh43:not(#z43),html body main.la th.la-cfh43:not(#z43){text-align:left;white-space:nowrap;font-size:13px;padding-left:8px}
html body main.la table.ng44:not(#z44){table-layout:fixed;width:100%!important;min-width:0!important}
html body main.la table.ng44 th:not(#z44){white-space:normal!important;line-height:1.15;vertical-align:bottom;overflow-wrap:anywhere;padding-left:4px;padding-right:4px}
html body main.la table.ng44 td:not(#z44){padding-left:4px;padding-right:4px;overflow:hidden;text-overflow:ellipsis}
html body main.la table.ng44 td.la-st:not(#z44),html body main.la table.ng44 td.la-cfh43:not(#z44){white-space:normal;font-size:12px;line-height:1.2}
html body main.la table.ng44 td:first-child a:first-child:not(#z44){white-space:normal}
html body main.la table.ng44 .la-b:not(#z44),html body main.la table.ng44 .la-st:not(#z44){left:auto!important}
/* Q371: the Mode cell button and its menu */
html body #latbl button.la-mode.mcz:not(#z45){cursor:pointer;border:1px solid var(--line);background:var(--surface,#fff);border-radius:5px;padding:1px 4px;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;color:inherit}
html body #latbl button.la-mode.mcz.byp:not(#z45){background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
html body #latbl button.la-mode.mcz:hover:not(#z45){border-color:#1E40AF;color:#1E40AF}
html body #latbl button.la-mode.mcz i:not(#z45){font-style:normal;font-size:10px;margin-left:3px;color:var(--muted)}
.mrz{display:block;font-size:11px;font-weight:700;white-space:nowrap;margin-top:2px}.mrz.ok{color:#059669}.mrz.bad{color:var(--crit)}
.ldz{display:inline-block;width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 15%,#93B4FF 40%,#1E40AF 100%);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px);animation:ldz 0.9s linear infinite;vertical-align:middle}
@keyframes ldz{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ldz{animation:none}}
.mmz{position:fixed;z-index:1000;background:var(--surface,#fff);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(15,23,42,.2);padding:4px;min-width:160px}
.mmz button{display:flex;gap:8px;align-items:center;width:100%;border:0;background:none;color:inherit;font:inherit;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left}
.mmz button:hover:not(:disabled){background:rgba(30,64,175,.1)}.mmz button:disabled{opacity:.55;cursor:default}
.mmz span[class^="i-"]{width:16px;text-align:center;font-weight:700}.mmz .i-AUTO{color:#1E40AF}.mmz .i-BYPASS_ON{color:#059669}.mmz .i-BYPASS_OFF{color:var(--crit)}.mmz b{margin-left:auto;color:#059669}

/* Q197 + Q216: full screen LIVE / Real-Time / TIME-LINE with one Close × (white border on the blue bar) */
html.fs42 header.top{display:none!important}
html.fs42 body{padding-top:0!important}
#x42{position:fixed;top:8px;right:10px;z-index:2000;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:2px solid #fff;background:#1E40AF;color:#fff;font:600 13px/1.4 inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.18)}
#x42 span{font-size:20px;line-height:1;font-weight:400}
#x42:hover{background:#fff;color:#1E40AF}
#x42[hidden]{display:none}
html.fs42 .rt-strip,html.fs42 main.page.la .la-h{padding-right:120px!important}

/* Buildings: Q274 dark selected row, Q270 10.5px action buttons, Q318 Copy / CSV / Excel at the right end, Q329 empty summary */
html body .li27[aria-current="true"]:not(#z42){background:#3B63D9!important;border-color:#3B63D9!important;color:#fff}
html body .li27[aria-current="true"] .muted:not(#z42),html body .li27[aria-current="true"] .small:not(#z42),html body .li27[aria-current="true"] i:not(#z42){color:#e5ecff!important}
html body .bt19-bar .ac33:not(#z42),html body .acb27 .ac33:not(#z42){font-size:10.5px}
.bx318{display:inline-flex;gap:6px;margin-left:auto}
.sel329{padding:18px 4px;margin:0}
.cr44{display:flex;justify-content:flex-end;margin:0 0 8px}

/* Q162 / Q180 / Q181 / Q220 / Q322: Set DITs / Set DTs as vertical tables */
.sw44{margin:0 0 10px}
.row32{margin-bottom:10px}.row32[hidden]{display:none}
.row32h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 6px}
.dits42g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dts32{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:900px){.dits42g{grid-template-columns:1fr}.dts32{grid-template-columns:1fr}}
.s32g{padding:8px}.s32g header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.s32g.off32 .v32s,.s32g.off32 > .v32{opacity:.45}
.v32s{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v32c{font-size:12px;font-weight:700;margin:0 0 3px}
.v32t{width:100%;font-size:13.5px}.v32t td,.v32t th{padding:3px 6px}
.v32t input.in{width:58px;padding:3px 6px;text-align:right;font-size:14px}
.s32i .i32{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#1E40AF;font-weight:700;cursor:help}

/* Real-Time: Q213 blue bar, Q211 blue tile border, Q214 the Boiler mode heading in the ⋮ menu */
html body .rt-strip:not(#z42){background:#1E40AF!important;color:#fff!important;border-color:#1E40AF!important}
html body article.rt-tile:not(#z42){border-color:#1E40AF!important;border-left-color:#1E40AF!important}
:root[data-theme="dark"] body article.rt-tile:not(#z42){border-color:#3B63D9!important}
html body .rt-pop .rth33:not(#z42){display:block;background:#eef2f7;color:#334155;cursor:default;pointer-events:none;user-select:none;margin:6px 0 2px;padding:7px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.rt-pop .rth33 ~ button{padding-left:26px!important}

/* Q328 (Sam 16 Oct 13:20): Export: a narrower buildings list, more room on the right (Data, File, Days, Export) */
@media (min-width:901px){html body .exp-g:not(#z44){grid-template-columns:minmax(240px,340px) minmax(0,1fr)}}
html body .exp-d:not(#z44){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Q286 (Sam 15 Oct 17:42): Metrics tables keep their header rows in view */
html body #mtout .mt-wrap thead th:not(#z44){position:sticky;top:0;z-index:2;background:var(--surface2,#f1f5f9)}
html body #mtout .mt-wrap:not(#z44){max-height:calc(100vh - 220px);overflow:auto}
/* Q150 (Sam 15 Oct): the Metrics tab buttons 15px */
html body main button[data-mttab]:not(#z44){font-size:15px}
/* Q245 (Sam 15 Oct 15:28-15:57): a sensor box's apartments: dashed edge, stored read time, a note above the tiles */
.apt33.sb45{border-style:dashed!important}
.apt33.sb45 .rd45{font-size:10px;color:var(--muted);font-weight:500}
.sb45n{margin:6px 0 8px;color:var(--muted)}
/* ===== 17 Oct (webb): the prototype CSS of the items on webb's screens, the same rules weba's ui326a.css carries (copied so the
   webb branch draws them on its own; identical duplicates are harmless): Q163, Q182, Q194, Q199-Q204, Q243, Q244, Metrics toolbar
   (Q249, Q251, Q256), Report title line (Q273), Q287, Q316, Q321 ===== */
/* Q163 fuel valve on / off picture (Sam 09:29) */
svg.fv42{display:inline-block;vertical-align:-3px;margin-right:5px;flex:none}
.blr23 .lt.fvlt42 > i{display:none}
.blr23 .lt.fvlt42{display:inline-flex;align-items:center}
/* Q182 colour squares for gas / oil */
.sw42{display:inline-flex;align-items:center;gap:4px;margin-right:10px}.sw42 i{width:11px;height:11px;border-radius:2px;display:inline-block}
.sw42g{background:var(--acc)}.sw42o{background:var(--warn)}
.dits42g .t42 caption{white-space:nowrap;font-size:12px;padding:4px}
.lv-grid.lv3.noside42{grid-template-columns:minmax(0,1fr)!important}.lv-grid.noside42 > aside.side{display:none}
/* Q194 Alert history: per day a Critical, Warning and Info time line like Open alerts */
.story33 .ah42{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.story33 .ah42 .tg28{padding:4px 10px 2px}
/* Q199 Table view rows in their card colours */
.lvt26 tr.r42 > td:first-child{box-shadow:inset 4px 0 0 var(--rcc)}
.lvt26 tr.r42-warn > td{background:color-mix(in srgb,#f59e0b 16%,transparent)!important}
.lvt26 tr.r42-crit > td{background:color-mix(in srgb,#dc2626 14%,transparent)!important}
.lvt26 tr.r42-off > td{color:var(--muted)}
/* Q200 Oil and gas time */
td.fu42o,th.fu42o{color:#b45309;background:color-mix(in srgb,#f59e0b 10%,transparent)}
td.fu42g,th.fu42g{color:#15803d;background:color-mix(in srgb,#22c55e 9%,transparent)}
th.fu42o,th.fu42g{font-weight:700;white-space:nowrap}
td.fu42o,td.fu42g{text-align:center}
table td.fu42d,table th.fu42d{border-left:2px solid #64748b!important}
html[data-theme="dark"] table td.fu42d,html[data-theme="dark"] table th.fu42d{border-left-color:#94a3b8!important}
/* Q201 Metrics graph */
.g42bar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.g42{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.g42 svg{width:100%;height:auto;display:block}
.g42g{stroke:var(--line);stroke-width:1}.g42t{font-size:12px;fill:var(--muted)}
.g42k{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:13px}.g42k i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
/* Q204 (Sam 15 Oct 12:20 "the date must come as strong bold black clear"): Alert history day headings */
html body .story33 .fdv33:not(#z42){color:#000!important;font-weight:800!important;font-size:16px!important;opacity:1!important;letter-spacing:.04em}
html[data-theme="dark"] body .story33 .fdv33:not(#z42){color:#fff!important}
/* Q243 (Sam 13:50 "Activity report -> we are wasting a lot of space in the column headers ... a lot of horizontal scrolling") report headers wrap onto 2 lines */
html body #lvrep table.rpt thead th:not(#z42){white-space:normal;vertical-align:bottom;line-height:1.2;letter-spacing:.03em;min-width:64px;padding-left:8px;padding-right:8px}
html body #lvrep table.rpt td:not(#z42){padding-left:8px;padding-right:8px}
/* Q244 Report > Trend: tabs, one clear legend, facts line, animations */
.tr42 .tbs42{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;align-items:center}
.tr42 .tbs42 button{border:1px solid #1E40AF;border-radius:999px;background:#fff;color:#1E40AF;font:inherit;font-size:14px;font-weight:700;padding:6px 14px;cursor:pointer}
.tr42 .tbs42 button.on{background:#1E40AF;color:#fff}
.tr42 .tbs42 .shl42{margin-left:auto;border-color:#9ca3af;color:#374151;font-weight:600}
.tr42 .fx42{margin:2px 0 8px;font-size:15px;color:#1f2937}
.tr42 .bd42{display:block}
.tr42 .bd42.wl42{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:start}
.tr42 .cw42{position:relative;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface)}
.tr42 .sv42{display:block;width:100%;height:auto}
.tr42 .gr42{stroke:var(--line);stroke-width:1} .tr42 .ax42{font:12px var(--sans);fill:#374151} .tr42 .u42{font-weight:700}
.tr42 .nt42{fill:#eef2f7} .tr42 .hv42{stroke:#6b7280;stroke-dasharray:3 3}
.tr42 .pl42{stroke-dasharray:1;stroke-dashoffset:1;animation:dr42 1.1s ease-out var(--d42,0ms) forwards}
@keyframes dr42{to{stroke-dashoffset:0}}
.tr42 .br42{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:gw42 .6s cubic-bezier(.2,.8,.2,1) var(--d42,0ms) forwards}
@keyframes gw42{to{transform:scaleY(1)}}
.tr42 .tp42{position:absolute;top:8px;min-width:190px;padding:8px 10px;border-radius:8px;background:#fff;color:#111827;border:1px solid #c7d2fe;box-shadow:0 8px 22px #0000002e;font-size:13px;pointer-events:none;z-index:2}
.tr42 .tp42 div{display:flex;align-items:center;gap:6px;white-space:nowrap} .tr42 .tp42 i{width:9px;height:9px;border-radius:50%} .tr42 .tp42 div b{margin-left:auto;padding-left:12px}
.tr42 .lg42t{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface)}
.tr42 .lgh42{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;font-size:13px}
.tr42 .lgh42 span{display:flex;gap:4px}
.tr42 .lgh42 button{border:1px solid #d1d5db;border-radius:6px;background:#fff;font:inherit;font-size:12px;font-weight:600;padding:2px 6px;cursor:pointer;color:#1E40AF}
.tr42 .lgi42{display:grid;grid-template-columns:28px 1fr auto;gap:6px;align-items:center;width:100%;text-align:left;border:0;border-radius:6px;background:transparent;padding:5px 4px;font:inherit;font-size:14px;color:#111827;cursor:pointer}
.tr42 button.lgi42:hover{background:#eef2ff}
.tr42 .lgi42:not(.on){opacity:.42} .tr42 .lgi42:not(.on) .ln42{text-decoration:line-through}
.tr42 .lgi42 small{color:#6b7280;font-weight:500} .tr42 .lgi42 > b{font-variant-numeric:tabular-nums}
.tr42 .hk42{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:13px}
.tr42 .hk42 > span:not(.hs42){padding:3px 8px;border-radius:6px;font-weight:600}
.tr42 .hs42{margin-left:auto;display:flex;gap:4px;align-items:center;color:#374151}
.tr42 .hs42 button{border:1px solid #1E40AF;border-radius:999px;background:#fff;color:#1E40AF;font:inherit;font-size:12.5px;font-weight:600;padding:3px 10px;cursor:pointer} .tr42 .hs42 button.on{background:#1E40AF;color:#fff}
.tr42 .hm42w{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:10px}
.tr42 .hm42{border-collapse:separate;border-spacing:2px;font-size:13.5px;min-width:100%}
.tr42 .hm42 th{position:sticky;top:0;background:var(--surface);font-weight:700;padding:4px 6px;white-space:nowrap;z-index:1;color:#374151;text-align:center}
.tr42 .hm42 th small{display:block;font-weight:500;color:#6b7280}
.tr42 .hm42 tbody th{position:sticky;left:0;z-index:1;text-align:left}
.tr42 .hm42 td{text-align:center;padding:5px 6px;border-radius:4px;font-weight:600;white-space:nowrap;opacity:0;animation:fi42 .4s ease-out var(--d42,0ms) forwards}
@keyframes fi42{to{opacity:1}}
.tr42 .c64{background:#1d4ed8;color:#fff} .tr42 .c67{background:#bfdbfe;color:#1e3a8a} .tr42 .c76{background:#d1fae5;color:#065f46}
.tr42 .c80{background:#fed7aa;color:#9a3412} .tr42 .c81{background:#dc2626;color:#fff} .tr42 .na42{background:#f3f4f6;color:#6b7280}
.tr42 .hm42 .sm42{background:transparent;color:#111827;font-weight:600}
@media (prefers-reduced-motion:reduce){.tr42 .pl42,.tr42 .br42,.tr42 .hm42 td{animation:none;stroke-dashoffset:0;transform:none;opacity:1}}
@media (max-width:900px){.tr42 .bd42.wl42{grid-template-columns:1fr}}
html[data-theme="dark"] .tr42 .tbs42 button:not(.on),html[data-theme="dark"] .tr42 .lgh42 button,html[data-theme="dark"] .tr42 .hs42 button:not(.on),html[data-theme="dark"] .tr42 .tp42{background:var(--surface);color:var(--fg)}
html[data-theme="dark"] .tr42 .ax42{fill:var(--muted)} html[data-theme="dark"] .tr42 .nt42{fill:#ffffff0d} html[data-theme="dark"] .tr42 .lgi42,html[data-theme="dark"] .tr42 .fx42{color:var(--fg)}
/* Sam 15:35: Metrics toolbar compact, one row each, and it stays on screen while scrolling */
html body .mt-bar:not(#z42){gap:8px 10px!important;align-items:center;position:sticky;top:var(--hd42,100px);z-index:30;background:var(--pg42,#fff);padding:8px 0 6px!important;margin-top:-8px}
html body .mt-bar .mt-bp > summary:not(#z42){padding:6px 12px!important;font-size:12px!important;min-height:0!important}
html body .mt-tabs > button:not(#z42){font-size:13px!important;padding:6px 11px!important;line-height:1.25!important;min-height:0!important}
html body .mtr33:not(#z42){gap:8px!important}
html body .mt-ctl:not(#z42){position:sticky;top:calc(var(--hd42,100px) + var(--mb42,46px));z-index:29;background:var(--pg42,#fff);padding:4px 0 8px!important;margin:0!important;gap:8px 12px!important;flex-wrap:wrap;align-items:center}
html body .mt-ctl .g42bar:not(#z42){margin:0!important;display:flex;align-items:center;gap:6px!important;padding:0!important;border:0}
html body .mt-ctl .seg > button:not(#z42){font-size:13px!important;padding:6px 11px!important;line-height:1.25!important;min-height:0!important}
html body .mt-ctl .mt-dt:not(#z42){gap:6px!important;font-size:13px!important}
html body .mt-ctl button.dp42:not(#z42){font-size:13px!important;padding:6px 10px!important;min-height:0!important}
html body .mt-ctl .mtx20 .btn.sm:not(#z42){font-size:11px!important;padding:5px 10px!important;min-height:0!important}
html body .mt-ctl .mtx20:not(#z42){gap:6px!important;margin-left:auto!important}
html body .mt-ctl .mtx20 label:not(#z42){font-size:12.5px!important}
html body .mt-ctl.st42 , html body .mt-bar.st42{box-shadow:0 6px 8px -8px rgba(15,23,42,.35)}
/* Sam 15:43: Table / Graph far right; one scroll bar; Event column narrow; report graphs */
html body .mt-ctl .g42bar:not(#z42){order:99;margin-left:8px!important}
html body #mtout .mt-wrap:not(#z42){max-height:none;overflow:auto}
html body #mtout .mt-wrap.wx42:not(#z42){overflow-x:auto}
html body #mtout .mt-wrap:not(.wx42) thead th:not(#z42){position:sticky;top:0;z-index:5;background:var(--surface2,#f1f5f9)}
html body #mtout .ev42:not(#z42){width:1%;white-space:nowrap}
.g42r{display:grid;gap:10px}.g42h{margin:4px 0 2px;font-size:13.5px;font-weight:600}
html body #mtout .brp-ctl:not(#z42){position:sticky;top:0;z-index:29;background:var(--pg42,#fff);padding:4px 0 8px;margin:0}
html body #mtout .brp-ctl .g42bar:not(#z42){order:99;margin:0 0 0 auto!important;display:flex;align-items:center;gap:6px}
html body #mtout .brp-t:not(#z42){max-height:none;overflow:auto}
html body #mtout .brp-t.wx42:not(#z42){overflow-x:auto}
html body #mtout .brp-t:not(.wx42) thead th:not(#z42){position:sticky;top:0;z-index:5;background:var(--surface2,#f1f5f9)}
html body #mtout .brp-ctl:not(#z42){position:sticky;top:0;z-index:29;background:var(--pg42,#fff);padding:4px 0 8px;margin:0}
html body #mtout .brp-ctl .g42bar:not(#z42){order:99;margin:0 0 0 auto!important;display:flex;align-items:center;gap:6px}
html body #mtout .brp-t:not(#z42){max-height:none;overflow:auto}
html body #mtout .brp-t.wx42:not(#z42){overflow-x:auto}
html body #mtout .brp-t:not(.wx42) thead th:not(#z42){position:sticky;top:0;z-index:5;background:var(--surface2,#f1f5f9)}
/* Sam 16:02: building name bar with the top bar's blue line, Table / Graph on the same line; Oil days easier to read */
html body #mtout .tt42:not(#z42){display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;border-bottom:3px solid #1E40AF;padding:8px 4px 8px;margin:10px 0 0}
html body #mtout .tt42n:not(#z42){display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:17px}
html body #mtout .tt42n small:not(#z42){font-weight:500;font-size:13px;color:var(--muted)}
html body #mtout .tt42 .g42bar:not(#z42){margin:0 0 0 auto!important;order:0;display:flex;align-items:center;gap:6px}
html body #mtout caption.cap42h:not(#z42){display:none}
html[data-theme="dark"] body #mtout .tt42:not(#z42){border-bottom-color:#3B63D9}
html body #mtout td.ol42:not(#z42),html body #mtout th.ol42:not(#z42){padding-left:9px;padding-right:9px;border-right:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
html body #mtout .ol42b:not(#z42){background:color-mix(in srgb,#1E40AF 10%,transparent)}
html body #mtout thead th.ol42:not(#z42){white-space:nowrap}
.mt-k.m-lb i,.mt-t td.m-lb{background:color-mix(in srgb,var(--cold) 13%,var(--surface))}

/* Sam 17:06/17:09: Report tab title line like Metrics; Save + View on the same line */
html body #lvrep .tt42:not(#z42){display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;border-bottom:3px solid #1E40AF;padding:8px 4px 8px;margin:10px 0 0}
html body #lvrep .tt42n:not(#z42){display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:17px}
html body #lvrep .tt42n small:not(#z42){font-weight:500;font-size:13px;color:var(--muted)}
html body #lvrep .tt42 .g42bar:not(#z42),html body #mtout .tt42 .g42bar:not(#z42){margin:0!important;display:flex;align-items:center;gap:6px}
html body .tt42 .sv42r:not(#z42){margin:0 0 0 auto!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0!important;border:0!important}
html body #lvrep:not(.mt22rep) .rp-top .rpv33:not(#z42){display:none!important}
html[data-theme="dark"] body #lvrep .tt42:not(#z42){border-bottom-color:#3B63D9}
/* Sam 17:25: less space between the top row and the building name (Report tab and Metrics) */
html body #mtout .tt42.tt42:not(#z42),html body #lvrep .tt42.tt42:not(#z42){margin-top:0!important;padding-top:2px!important}
html body #mtout .brp-ctl:not(#z42),html body #lvrep .brp-ctl:not(#z42){margin-bottom:2px!important}
/* Sam 17:39: the Report tab's period row is spaced and aligned as on Metrics; Activity / Current Status / Daily lines up with View below */
@media (min-width:981px){html body #lvrep .brp-ctl:not(#z42){padding:4px 420px 8px 0!important}
html body #lvrep > .rp-top:not(#z42){right:18px!important;top:21px!important}}
html body #lvrep .rp-top .seg button:not(#z42){padding-top:9px!important;padding-bottom:9px!important}
html body .one42:not(#z42){overflow:auto!important}
/* Sam 17:50: the one table uses the whole window height (no 64px gap under the page) */
html.one42m body main.page:not(#z42){padding-bottom:8px!important}
/* Sam 17:53: Metrics graphs draw in like the Activity / Status graphs; legend items toggle their line */
.g42 .pl42{stroke-dasharray:1;stroke-dashoffset:1;animation:dr42 1.1s ease-out var(--d42,0ms) forwards}
.g42 .pt42{opacity:0;animation:fi42 .35s ease-out calc(var(--d42,0ms) + .8s) forwards}
html body .g42k .g42s:not(#z42){display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:none;border-radius:999px;padding:2px 8px;font:inherit;color:inherit;cursor:pointer}
html body .g42k .g42s:not(#z42):hover{border-color:var(--line,#d1d5db)}
html body .g42k .g42s:not(.on):not(#z42){opacity:.4;text-decoration:line-through}
.g42k .g42s i{display:inline-block;width:14px;height:3px;border-radius:2px}
html body .g42k .g42ka:not(#z42){display:inline-flex;gap:4px;margin-right:8px}
html body .g42k .g42ka button:not(#z42){border:1px solid #1E40AF;color:#1E40AF;background:#fff;border-radius:999px;padding:2px 10px;font:600 12px var(--sans,system-ui);cursor:pointer}
html body .g42k .g42ka button:not(#z42):hover{background:#1E40AF;color:#fff}
@media (prefers-reduced-motion:reduce){.g42 .pl42,.g42 .pt42{animation:none;stroke-dashoffset:0;opacity:1}}
/* Q316: the Settings tab's DIT / Aquastat / DT blocks in the Set DITs / Set DTs layout */
html body main .g43:not(#z43) { margin-bottom:14px; }
html body main .g43 > section.grp:not(#z43) { margin:0 !important; min-width:0; }
html body main .g43 > section.grp > header:not(#z43) { flex-wrap:wrap; gap:6px 8px; }
html body main .g43 .scroll:not(#z43), html body main section.one43 .scroll:not(#z43) { overflow:visible; }
html body main section.grp .v43:not(#z43) { padding:8px 14px 12px; }
html body main section.one43 .v43 .t42:not(#z43) { font-size:15px; }
html body main .dts42.g43 .t42:not(#z43) { width:100%; }
/* Q321 */
html body .aq44:not(#z44){display:grid;grid-template-columns:max-content minmax(300px,1fr);gap:16px;align-items:start}
html body .aq44 > section:not(#z44){margin:0!important;min-width:0}
html body .aq44 > section:last-child .fgrid:not(#z44){grid-template-columns:1fr 1fr!important}
@media (max-width:1100px){html body .aq44:not(#z44){grid-template-columns:1fr}}
/* weba smoke test 17 Oct: a wide Metrics or report table scrolls sideways inside its own box; the page itself never does (390 px) */
html body #mtout .mt-wrap:not(#z42),html body #mtout .brp-t:not(#z42){overflow-x:auto;max-width:100%}
html body #mtout:not(#z42){min-width:0;max-width:100%}
/* Q316 (Sam 16 Oct 11:57) in this build: the settings blocks use the Set DITs / Set DTs dialog tables (.v32); the three days wrap
   when the settings pane is narrow (Live pop-up, phone); a hidden DIT set hides its whole group */
html body .set .dits42g:not(#z43){grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
html body .set .dts32:not(#z43){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
html body .set .g43[hidden]:not(#z43){display:none}
html body .set .g43 .row42:not(#z43){grid-column:1/-1}
html body .set section.one43 .v43:not(#z43){max-width:620px}
html body .set .g43 .v32t input.in:not(#z43),html body .set .one43 .v32t input.in:not(#z43){width:54px;min-width:0}
html body .set .aq44 > section.one43 .v43:not(#z44){max-width:none}
html body .set .v32t td.l43:not(#z43){white-space:nowrap}
html body .set .v32t td:not(#z43){padding:2px 6px}
html body .set .v32t input.in:not(#z43){height:28px;padding:2px 6px}

/* ================= 19 Oct build (webb) ================= */
/* Q411: the Live tab's Today strip: green gas, amber oil */
html body .lv-tdy .ch-fire.gas:not(#z19){fill:var(--ok,#059669)}
html body .lv-tdy .ch-fire.oil:not(#z19){fill:var(--warn,#d97706)}
.lv-tdy .ch-dot{fill:var(--info)}
/* Q419 / Q436 / Q457: Live (all buildings) fits the window: no page scroll, no sideways scroll, fixed header, one vertical scroll */
html body main.la.la19m:not(#z19){display:flex;flex-direction:column;overflow:hidden;padding-bottom:6px!important;box-sizing:border-box}
html body main.la.la19m > *:not(#z19){flex:0 0 auto}
html body main.la.la19m > .la-wrap.la19:not(#z19){flex:1 1 auto;min-height:160px;max-height:none;overflow-y:auto;overflow-x:hidden}
html body main.la .la19 #latbl:not(#z19){table-layout:fixed;width:100%!important;min-width:0!important}
html body main.la .la19 #latbl td.la-b:not(#z19),html body main.la .la19 #latbl td.la-st:not(#z19){position:static}
html body main.la .la19 #latbl th:not(#z19){white-space:normal;line-height:1.15;vertical-align:bottom;overflow-wrap:anywhere;font-size:clamp(9.5px,.78vw,11px);padding-left:2px;padding-right:2px}
html body main.la .la19 #latbl td:not(#z19){font-size:clamp(10.5px,.92vw,13px);padding:5px 2px;overflow:hidden;text-overflow:ellipsis}
html body main.la .la19 #latbl td.la-b:not(#z19){padding-left:6px}
html body main.la .la19 #latbl .gh29 th:not(#z19){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body main.la.la19m .la-key:not(#z19){margin:6px 0 0}
/* Q443: the loader scaled down in a Real-Time tile or the alerts strip */
html body .ldf-box.ld19s:not(#z19){min-height:0;padding:4px}
html body .ldf-box.ld19s .ldf:not(#z19){--ldf:40px;gap:4px;flex-direction:row}
html body .ldf-box.ld19s .ldf-lbl:not(#z19){font-size:12px}
html body .rt-ban .ldf-box.ld19s:not(#z19){justify-content:flex-start}
/* Q447: one active period choice: picked days highlight the period field; the period after the report title */
html body .rg-btn.rg47:not(#z19),html body input.in.rg47:not(#z19){border-color:#2563eb;background:#eff6ff;box-shadow:inset 0 0 0 1px #2563eb;color:#1e3a8a}
html[data-theme="dark"] body .rg-btn.rg47:not(#z19),html[data-theme="dark"] body input.in.rg47:not(#z19){background:#1e3a8a33;color:var(--fg)}
html body .tt42n .rp47p:not(#z19){font-weight:600;font-size:13px;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:1px 10px;white-space:nowrap}
html[data-theme="dark"] body .tt42n .rp47p:not(#z19){color:#bfdbfe;background:#1e3a8a55;border-color:#1e40af}
/* Q435-Q438: the report tables from the one column list */
html body table.rpt td.tm19:not(#z19){white-space:nowrap}
html body table.rpt tr.g24 th[rowspan]:not(#z19){vertical-align:bottom}
/* Q459: key facts: values bold and coloured, words in plain dark text */
html body .fx42 b.fx59:not(#z19){font-weight:700;color:#0f172a}
html body .fx42 b.fx59.c-b:not(#z19){color:#1d4ed8} html body .fx42 b.fx59.c-lb:not(#z19){color:#0284c7}
html body .fx42 b.fx59.c-a:not(#z19){color:#b45309} html body .fx42 b.fx59.c-r:not(#z19){color:#b91c1c}
html[data-theme="dark"] body .fx42 b.fx59:not(.c-b):not(.c-a):not(.c-r):not(.c-lb):not(#z19){color:var(--fg)}
/* Q454 / Q458: Performance bars grow in, tooltip as the Metrics graph's card */
.pf54{position:relative}
.pf54 .br42{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:gw42 .6s cubic-bezier(.2,.8,.2,1) var(--d42,0ms) forwards}
.pf54 .pf54b:hover .ch-bar{opacity:1}
.pf54 .hv42{stroke:#64748b;stroke-width:1;stroke-dasharray:4 4}
.pf54 .tp42{position:absolute;top:8px;min-width:190px;padding:8px 10px;border-radius:8px;background:#fff;color:#111827;border:1px solid #c7d2fe;box-shadow:0 8px 22px #0000002e;font-size:13px;pointer-events:none;z-index:2}
.pf54 .tp42 div{display:flex;align-items:center;gap:6px;white-space:nowrap} .pf54 .tp42 div b{margin-left:auto;padding-left:12px}
.pf54 .tp42 i.pf54d{width:9px;height:9px;border-radius:50%;background:var(--info)} .pf54 .tp42 i.pf54d.oil{background:var(--warn)} .pf54 .tp42 i.pf54d.hi{background:var(--crit)} .pf54 .tp42 i.pf54d.band{background:#86efac}
html[data-theme="dark"] .pf54 .tp42{background:var(--surface);color:var(--fg)}
@media (prefers-reduced-motion:reduce){.pf54 .br42{animation:none;transform:none}}
/* Q453: the heat map legend line */
.hm53{color:var(--fg)} .hm53 .hm53n{display:inline-block;width:12px;height:12px;vertical-align:-2px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#cbd5e1 0 2px,transparent 2px 5px)}
/* Q459 on Performance: the sentence in normal dark text */
html body p.pf59:not(#z19){color:var(--fg);font-size:14px}
html body .fx42 b.fx59.c-g:not(#z19){color:#15803d}
/* Q448: Export: the building list about 8 rows high with its own scroll; Downloaded files as a blue bar with the count; the new row flashes */
html body .exp .exp-list:not(#z19){max-height:min(312px,48vh);overflow-y:auto}
html body .exp-dl .ex48h:not(#z19){background:#1d4ed8;color:#fff;border-radius:10px;padding:10px 14px;align-items:center;scroll-margin-top:72px}
html body .exp-dl .ex48h h2:not(#z19){color:#fff;margin:0;font-size:18px}
html body .exp-dl .ex48h .sub:not(#z19){color:#dbeafe}
html body .exp-dl .ex48h .ex48n:not(#z19){font-weight:600;color:#dbeafe}
html body .exp-dl .ex48h .btn:not(#z19){background:#fff;color:#1d4ed8;border-color:#fff}
html body #exdl:not(#z19){scroll-margin-top:72px}
@keyframes ex48f{0%,60%{background:#fde68a}100%{background:transparent}}
html body #exfiles tr.ex48f td:not(#z19){animation:ex48f 2.6s ease-out 2}
/* Q429 (Sam 18 Oct 16:34-16:38, to-do 97): every Settings tab in the VB layout: boxed panels side by side, a centred title, one
   setting per row with the label right-aligned on the left and a small value box on the right; the DIT buttons on one line */
html body .set .vb29w:not(#z29){display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:12px 0}
html body .set .vb29w > section:not(#z29){margin:0!important;flex:1 1 300px;max-width:430px;min-width:0}
html body .set .vb29w > section.vb29x:not(#z29){flex:2 1 600px;max-width:860px}
html body .set .vb29w > section.vb29b:not(#z29){flex-basis:100%;max-width:none}
html body .set section.vb29 > header:not(#z29),html body .set section.vb29b > header:not(#z29){justify-content:center;padding:8px 12px}
html body .set section.vb29 > header h4:not(#z29),html body .set section.vb29b > header h4:not(#z29){text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;color:var(--fg)}
html body .set .vb29g:not(#z29){display:flex!important;flex-direction:column;gap:5px;padding:10px 14px 12px}
html body .set .vb29x .vb29g:not(#z29){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:5px 22px}
html body .set .vb29r:not(#z29){display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;flex-direction:initial}
html body .set .vb29r > span:first-child:not(#z29){text-align:right;font-weight:500!important;font-size:13.5px!important;line-height:1.25}
html body .set .vb29r > .in:not(#z29),html body .set .vb29r > input:not(#z29){width:92px;min-width:0;padding:4px 8px;height:30px;text-align:center}
html body .set .vb29r > select.in:not(#z29){width:auto;min-width:92px;max-width:200px;text-align:left}
html body .set .vb29r > :not(span):not(.in):not(input):not(select):not(#z29){justify-self:end}
html body .set .vb29b .vb29bar:not(#z29){flex-wrap:nowrap;overflow-x:auto;gap:12px;padding:10px 14px 12px;margin:0}
html body .set .vb29b .vb29bar .seg:not(#z29){flex:none;display:inline-flex;flex-wrap:nowrap}
html body .set .vb29b .vb29bar .seg button:not(#z29){white-space:nowrap}
@media (max-width:700px){html body .set .vb29w > section:not(#z29){flex-basis:100%;max-width:none}html body .set .vb29b .vb29bar:not(#z29){flex-wrap:wrap}}
html body .set .grp.vb29b .seg:has(> button:nth-child(4)):not(#z29){display:inline-flex!important;grid-template-columns:none;border-radius:999px!important;flex-wrap:nowrap!important}
html body .set .grp.vb29b .seg:has(> button:nth-child(4)) > button:not(#z29){border-bottom:0!important;border-right:1px solid var(--blue42,#1E40AF)!important;padding:8px 14px!important}
html body .set .grp.vb29b .seg:has(> button:nth-child(4)) > button:last-child:not(#z29){border-right:0!important}
html body .set .vb29s:not(#z29){display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
html body .set .vb29s > .dts32:not(#z29){flex:0 1 600px;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
html body .set .vb29s > .vb29w:not(#z29){flex:1 1 380px;margin:0;min-width:0}
html body .set .vb29s > .vb29w > section:not(#z29){flex-basis:100%;max-width:none}
html body .set .vb29r > span + span:not(#z29){display:flex;gap:6px;justify-self:end;align-items:center;flex-wrap:nowrap}
html body .set .vb29r > span + span .in:not(#z29){width:auto;min-width:72px;max-width:150px;padding:4px 8px;height:30px}
@media (max-width:700px){html body .set .vb29s > .dts32:not(#z29){grid-template-columns:1fr;flex-basis:100%}}

/* ====================================================================================================================================
   Next build (webb, prototype v344 proto_s47.css). Q517 STANDING (Sam 19 Oct 16:31-17:08 + 20 Oct 11:41): ONE table header style.
   Blue band, white bold text everywhere (screens, pop-ups, reports, Get Apt Sensors); under a blue title bar (Live all, Real-Time, the
   Live pop-up) white with blue text. Night sub-headers purple, day amber; a heavier line after each column group. The Excel files
   carry the same colours (REPORT_Tones.Xls). ==================================================================================== */
html body main table thead th:not(#z517):not(#z518),html body .swal2-popup table thead th:not(#z517):not(#z518),html body #dlg table thead th:not(#z517):not(#z518){background:#1E40AF!important;color:#fff!important;border-color:#3352c0!important}
html body main table thead th:not(#z517):not(#z518) *,html body .swal2-popup table thead th:not(#z517):not(#z518) *,html body #dlg table thead th:not(#z517):not(#z518) *{color:#fff!important}
html body main table thead th.m-now:not(#z517):not(#z518){background:#1E3A8A!important;box-shadow:inset 0 -3px 0 #93C5FD}
html body main table thead th.nit:not(#z517):not(#z518),html body #lvp table thead th.nit:not(#z517):not(#z518){background:#EEE8FD!important;color:#5B21B6!important}
html body main table thead th.day:not(#z517):not(#z518),html body #lvp table thead th.day:not(#z517):not(#z518){background:#FDF0E1!important;color:#A2400B!important}
html body main table thead tr:first-child th.nit:not(#z517):not(#z518),html body main table thead tr:first-child th.day:not(#z517):not(#z518){background:#1E40AF!important;color:#fff!important}
html body main table thead th.nit:not(#z517):not(#z518) *{color:#5B21B6!important}
html body main table thead th.day:not(#z517):not(#z518) *{color:#A2400B!important}
html body main table thead th.g29:not(#z517):not(#z518),html body main table thead th.m-dl:not(#z517):not(#z518){border-left:2px solid #93C5FD!important}
html body table thead th.g517:not(#z517):not(#z518){border-right:2px solid #1E3A8A!important}
html body #latbl thead th:not(#z517):not(#z518),html body #rtmain table thead th:not(#z517):not(#z518),html body #lvp table thead th:not(#z517):not(#z518){background:#fff!important;color:#1E40AF!important;font-weight:700;border-color:#c7d2fe!important}
html body #latbl thead th:not(#z517):not(#z518) *,html body #rtmain table thead th:not(#z517):not(#z518) *,html body #lvp table thead th:not(#z517):not(#z518) *{color:#1E40AF!important}
html body #latbl thead th.g29:not(#z517):not(#z518),html body #lvp table thead th.m-dl:not(#z517):not(#z518){border-left:2px solid #1E40AF!important}
html body #lvp table thead th.nit:not(#z517):not(#z518){background:#EEE8FD!important;color:#5B21B6!important}
html body #lvp table thead th.day:not(#z517):not(#z518){background:#FDF0E1!important;color:#A2400B!important}
html[data-theme="dark"] body #latbl thead th:not(#z517):not(#z518),html[data-theme="dark"] body #rtmain table thead th:not(#z517):not(#z518),html[data-theme="dark"] body #lvp table thead th:not(#z517):not(#z518){background:#131D31!important;color:#93b4ff!important;border-color:#2a3a5c!important}
html[data-theme="dark"] body #latbl thead th:not(#z517):not(#z518) *,html[data-theme="dark"] body #rtmain table thead th:not(#z517):not(#z518) *,html[data-theme="dark"] body #lvp table thead th:not(#z517):not(#z518) *{color:#93b4ff!important}
html[data-theme="dark"] body main table thead th.nit:not(#z517):not(#z518),html[data-theme="dark"] body #lvp table thead th.nit:not(#z517):not(#z518){background:#2e2350!important;color:#c4b5fd!important}
html[data-theme="dark"] body main table thead th.day:not(#z517):not(#z518),html[data-theme="dark"] body #lvp table thead th.day:not(#z517):not(#z518){background:#3a2a12!important;color:#fbbf77!important}
html body table.dataTable thead th .dt-column-order:not(#z517){opacity:.8}

/* Q559 Metrics button groups: TEMPS / METRICS / REPORTS, each joined, with a small grey label; the select on a phone */
.mtg59{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mgr59{display:flex;align-items:center;gap:7px}
.mgl59{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mtg59 .seg{margin:0}
@media (max-width:760px){.mtg59{display:none}}
.mt-ctl .mt-rt{width:auto;display:inline-block;padding:4px 8px;font-size:13px;margin-left:6px}
html body #mtout .mt-all thead tr:first-child th.n:not(#z517){text-align:center!important}
.mt-bpa .mt-bpx{margin-left:auto}
/* Q495: while a report loads only the loader shows (no "Save what is shown" run into it) */
#mtout:has(.ldf-box:not(.ldf-over)) .mtx20{display:none}
/* Q531: report columns sort on a header click */
#lvrep table.rpt thead th{cursor:pointer}
#lvrep table.rpt thead th[data-s531="a"]::after{content:" ▲";font-size:9px}
#lvrep table.rpt thead th[data-s531="d"]::after{content:" ▼";font-size:9px}

/* Q580 Export: three report cards, the section as tall as the Buildings list; Q557 file icons */
html body .exp-g.exp58:not(#z580){align-items:stretch}
html body .exp-g.exp58 > .exp-b:not(#z580){display:flex;flex-direction:column}
html body .exp .exp-g.exp58 .exp-list:not(#z580){flex:1 1 0;min-height:200px;max-height:none}
.kinds58{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kinds58{grid-template-columns:1fr}}
.kind58{border:1.5px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:10px;align-content:start;cursor:pointer;background:var(--surface);transition:opacity .15s}
.kind58.on{border-color:#1E40AF;background:color-mix(in srgb,#1E40AF 6%,var(--surface))}
.kind58.off{opacity:.45}
.kind58.off .ft58 label,.kind58.off .sub58{pointer-events:none}
.kh58{display:flex;gap:8px;align-items:flex-start}.kh58 input{margin-top:3px}.kh58 b{font-size:15px}.kh58 p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.sub58{display:grid;gap:4px;padding-left:24px;font-size:13.5px}.sub58 label{display:flex;align-items:center;gap:6px}
.ft58{display:flex;flex-wrap:wrap;gap:6px;padding-left:24px}
.ft58 label{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface)}
.ft58 label.sel{border-color:#1E40AF;color:#1E40AF;box-shadow:0 0 0 1px #1E40AF}
.ft58 input{position:absolute;opacity:0;pointer-events:none}
.go58{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.go58 .lbl{margin:0}.go58 #exgo{margin-left:auto}
.go58 .exp-d.off58{opacity:.45;pointer-events:none}
svg.fi57{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:6px}
.btn.fb57{display:inline-flex;align-items:center}
td.fn57{white-space:nowrap}
[data-rp42s]::before,[data-bl318="xlsx"]::before{content:"";display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;background:center/contain no-repeat}
[data-rp42s]{display:inline-flex;align-items:center}
/* Q898 (Sam 29 Oct 07:58 "what happened to the pdf, excel images?"): single quotes inside the data URIs, else the browser drops these rules */
[data-rp42s="XLSX"]::before,[data-bl318="xlsx"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231D6F42' d='M5 2h10l5 5v15H5z'/%3E%3Cpath fill='%23fff' d='M8.2 10h2.1l1.7 2.8 1.7-2.8h2.1l-2.7 4.2 2.8 4.3h-2.1L12 15.6l-1.8 2.9H8.1l2.8-4.3z'/%3E%3C/svg%3E")}
[data-rp42s="PDF"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C62828' d='M5 2h10l5 5v15H5z'/%3E%3Ctext x='12.5' y='17' font-size='6.2' font-weight='700' text-anchor='middle' fill='%23fff' font-family='Arial,sans-serif'%3EPDF%3C/text%3E%3C/svg%3E")}
[data-rp42s="TXT"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23475569' d='M5 2h10l5 5v15H5z'/%3E%3Cpath fill='%23fff' d='M8 10h9v1.5H8zm0 3h9v1.5H8zm0 3h6v1.5H8z'/%3E%3C/svg%3E")}

/* Q497 / Q499 / Q498 Live all: grouped = not grouped (same columns, widths, Building font); CFH word, bold orange when "on" */
#latbl td.la-cfh43{color:var(--muted)}
#latbl td.la-cfh43.on47{color:#c2410c;font-weight:800}
html body #latbl td.la-b .la-n:not(#z497){font-size:14px!important;font-weight:700}
html body main.la table.ng44.grp29 th:not(#z497){white-space:normal}
html body main.la table.ng44 td.la-cfh43:not(#z497){text-align:left;padding-left:6px!important;font-size:12px;white-space:normal}

/* Q561 / Q562 Get Apt Sensors: the database line with the Update button right-aligned, the result in bold, the partial message on top */
.ap562{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.ap562 .ap562b{margin-left:auto}
.apm562{background:#fff7e6;border:1px solid #f5c26b;color:#5a3b00;border-radius:8px;padding:8px 12px;margin:0 0 10px;font-size:13.5px}
.er562{color:var(--crit)}

/* Q765 (Sam 25 Oct 09:15 UTC; prototype v361 item 6): Admin > Boxes column-value filters (▾ in each header, the values pop-up) */
.cf51b{border:0;background:none;color:inherit;opacity:.55;cursor:pointer;padding:0 2px;font-size:11px}
.cf51b.on{opacity:1;color:var(--info);background:var(--info-soft);border-radius:4px}
.cf51p{position:fixed;z-index:3000;width:260px;max-height:340px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.18);padding:8px 0;font-size:13px;color:var(--fg)}
.cf51h2{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 12px 6px}
.cf51l{overflow:auto}
.cf51r{display:flex;gap:8px;align-items:center;padding:4px 12px;cursor:pointer}
.cf51r:hover{background:var(--surface2)}
/* Q770 (prototype v361 item 7): Real-Time's "Re-opened: N" after "since ..." */
.pill.ro51{white-space:nowrap}
.rt43 .ro51{margin-left:6px;font-size:11px}