/* next build (after 23 Oct): web A styles (prototype v355-v357) */

/* ---------- Q656 Buildings: a box that is not connecting shows only a small red not-connecting icon; the last good read is in its tooltip ---------- */
html body .nc49:not(#z656){display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fde2e2;color:#dc2626;vertical-align:middle;cursor:help}
html body .nc49 svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
html[data-mode="dark"] body .nc49:not(#z656){background:#3b1714;color:#ef6b62}

/* ---------- Q605 / v356 item 11: the standard loader laid over a whole open pop-up (Get apt sensors > Update) ---------- */
.swal2-popup:has(> .ld49){position:relative}
html body .swal2-popup > .ld49:not(#z49){position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:var(--surface,#fff);border-radius:inherit}

/* ---------- Q658 Live pop-up and Watch: Boiler mode, the CFH status next to it (look kept), the heat control text on the right, smaller ---------- */
html body .lvv26.ctl48:not(#z48):not(#z658){display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;width:100%;box-sizing:border-box;justify-content:flex-start}
html body .lvv26.ctl48 > .cfh48{display:flex;align-items:center;gap:10px;margin:0}
html body .lvv26.ctl48 .cfhk48{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--sans);letter-spacing:.08em;color:var(--muted)}
html body .lvv26.ctl48 .cfhk48 svg{width:18px;height:18px;color:var(--warn)}
html body .lvv26.ctl48 .cfh48 .badge:not(#z48):not(#z658){font:700 17px/1.2 var(--sans);padding:8px 18px;border-radius:999px;min-width:min(300px,100%);text-align:center;display:inline-block}
html body .lvv26.ctl48 > .hc49{margin-left:auto;text-align:right;font-size:12px;line-height:1.35;color:var(--fg)}
html body .lvv26.ctl48 > .hc49 .muted{font-size:12px}
/* the system temperature and meter labels (Coil, Mix ...) bold; Q693: 15px */
html body .lv48 .rb48 .k2:not(#z48):not(#z658){font-weight:800;font-size:15px;color:var(--fg)}

/* ---------- Q678 Live pop-up and Watch: a value that meets a condition gets the condition's background AND coloured text ---------- */
html body .lv48 .c49:not(#z678){border-radius:5px;padding:0 4px;font-weight:700}
html body .lv48 .c49-cold:not(#z678){background:var(--info-soft);color:var(--cold)}
html body .lv48 .c49-cool:not(#z678){background:color-mix(in srgb,var(--info-soft) 55%,var(--surface));color:var(--info)}
html body .lv48 .c49-warn:not(#z678){background:var(--warn-soft);color:var(--warn)}
html body .lv48 .c49-crit:not(#z678){background:var(--crit-soft);color:var(--crit)}

/* ---------- Q693 (v357) Live pop-up and Watch top card: the Out. block on one row on light grey (the condition's colour when one applies);
   every section on that row the same grey, labels 14px bold; the system rows' scale bars 20% shorter.
   v357 item 8: the boiler diagram on the same grey ---------- */
.lv48{--g50:#f1f5f9;--g50l:#cbd5e1;--g50k:#0f172a}
.lvp-dark .lv48,html[data-mode="dark"] .lv48{--g50:#1e293b;--g50l:#334155;--g50k:#e2e8f0}
html body .lv48 .six48.r50:not(#z693){gap:8px}
html body .lv48 .six48.r50 > .s48:not(#z693){background:var(--g50);border:0;border-radius:8px;padding:10px 12px}
html body .lv48 .six48.r50 > .s48 .k48:not(#z693){font-size:14px;font-weight:800;color:var(--g50k);letter-spacing:.02em}
html body .lv48 .six48 > .s48.o50:not(#z693){grid-column:span 2;flex-direction:row;align-items:center;gap:10px;flex-wrap:nowrap}
html body .lv48 .s48.o50 > *:not(#z693){margin:0;white-space:nowrap}
html body .lv48 .s48.o50 .v48:not(#z693){font-size:24px}
html body .lv48 .s48.o50:has(.c49-cold):not(#z693){background:#dbeafe} html body .lv48 .s48.o50:has(.c49-cool):not(#z693){background:#e0f2fe}
html body .lv48 .s48.o50:has(.c49-warn):not(#z693){background:#fef3c7} html body .lv48 .s48.o50:has(.c49-crit):not(#z693){background:#fee2e2}
html body .lv48 .bar48:not(#z693){width:80%}
html body .lv48 .lv-dgm .dg-room:not(#z693){fill:var(--g50)!important;stroke:var(--g50l)!important}

/* ---------- Q661 Anagha AI value tables: no header bar and no "Building" head; Mix, Coil, AQS, STK in the card's own colour ---------- */
html body section.aic table.aic-t thead th:not(#z47):not(#z48):not(#z661){background:var(--surface)!important;color:var(--tone,currentColor)!important;border:0!important;box-shadow:none!important;font-weight:800}

/* ---------- Q692 (v357) Alert details, wherever it opens: a bigger pop-up, not full screen ---------- */
html body .swal2-popup.swp.ad50:not(#z47):not(#z48):not(#z692){width:min(1480px,92vw)!important;max-width:none!important;height:min(90vh,1040px)!important;display:flex!important;flex-direction:column;overflow:hidden!important}
html body .swal2-popup.swp.ad50 > :not(.swal2-html-container):not(#z692){flex:0 0 auto}
html body .swal2-popup.swp.ad50 > .swal2-html-container:not(#z47):not(#z48):not(#z692){flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto!important}

/* ---------- Q690 (v357) Live (multiple buildings) table headers, grouped and not grouped: report Option E (Q654), as the Metrics reports:
   column row #E6EFFC, group row #C9DCF5, lines #7FA2CF, normal black text (replaces the Q630 blue header) ---------- */
html body #latbl thead th:not(#z517):not(#z518):not(#z630):not(#z690){background:#E6EFFC!important;color:#111827!important;border-color:#7FA2CF!important}
html body #latbl thead th:not(#z517):not(#z518):not(#z630):not(#z690) *:not(.sw){color:#111827!important}
html body #latbl thead tr.gh29 th[colspan]:not(#z517):not(#z518):not(#z630):not(#z690){background:#C9DCF5!important}
html body #latbl thead tr:last-child th:not(#z517):not(#z518):not(#z630):not(#z690){border-bottom:2px solid #7FA2CF!important}
html body #latbl thead th.g29:not(#z517):not(#z518):not(#z630):not(#z690){border-left:2px solid #7FA2CF!important}
html body #latbl tbody td.g29:not(#z517):not(#z518):not(#z630):not(#z690){border-left-color:#7FA2CF}
html[data-mode="dark"] body #latbl thead th:not(#z517):not(#z518):not(#z630):not(#z690){background:#22365e!important;color:#e6ebf7!important}
html[data-mode="dark"] body #latbl thead th:not(#z517):not(#z518):not(#z630):not(#z690) *{color:#e6ebf7!important}
html[data-mode="dark"] body #latbl thead tr.gh29 th[colspan]:not(#z517):not(#z518):not(#z630):not(#z690){background:#1a2c4f!important}