/* ---------- build 22 (WEBA): alerts, Anagha AI, timeline, live pop-up, shell. Loads after vio326.css. ---------- */

/* Q564: the dot before "N open alerts" in the top bar */
.dot22{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:7px;vertical-align:1px}

/* Q519 / Q596: a control that is waiting for the server */
.busy22{pointer-events:none;opacity:.6;cursor:progress}

/* Q526: one customer = no customer selector (not on the admin screens) */
html:not([data-r42^="admin"]) body.onecust22 select[aria-label="Customer"],
html:not([data-r42^="admin"]) body.onecust22 label:has(> select[aria-label="Customer"]){display:none!important}

/* Q584 / Q571 / Q586: status pills (OPEN, RESOLVED 9:12 AM (Name), RESET, DAY ENDED, MOVED TO SEVERE) */
html body .pill.b22:not(#z22){font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:11px;border-radius:999px;padding:1px 9px;white-space:nowrap}
.pill.p-grey22{background:#eceef2;color:#4b5563}
html[data-mode="dark"] .pill.p-grey22{background:#262f40;color:#a3abba}
.pill .pt22{font:inherit;text-transform:none;letter-spacing:0;margin-left:3px}

/* Q549: a time column wide enough for "10/18 11:18 PM", a fixed gap before the line, never under the circle */
html body .at21-ti:not(#z22){margin-left:132px}
html body .at21-nd:not(#z22){width:112px;left:-157px}
html body .at21-kid .at21-nd:not(#z22){left:-192px}
@media (max-width:640px){html body .at21-ti:not(#z22){margin-left:6px}html body .at21-nd:not(#z22),html body .at21-kid .at21-nd:not(#z22){width:auto;left:auto}}
/* grey rows: reset / day ended / moved to severe */
.at21-r.gy22::before,.at21-r.gy22::after{border-color:#9ca3af!important}
.at21-r.gy22.at21-kid::after{background:#9ca3af!important}

/* Q591: control rows (buttons and search left, period and tabs right) */
.at21-top.ctl22{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px}
.ctl22 .lf22{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.ctl22 .rt22{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.ctl22 .at21-sw{width:min(340px,100%)}
.at21-sw.hs22{margin-left:auto;width:min(320px,40%)}
@media (max-width:640px){.at21-sw.hs22{width:100%;margin-left:0}}
.bt22{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
html body .btn.ab22.ab22.ab22:not(#z22):not(#z23){margin:0;padding:6px 14px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.04em;line-height:1.3!important;height:auto!important;min-height:0!important;border-radius:999px!important;color:#fff!important;text-transform:none}
html body .btn.ab22.ob22.ob22:not(#z22):not(#z23){background:#14532d!important;border-color:#14532d!important}
html body .btn.ab22.ob22.ob22:not(#z22):not(#z23):hover{background:#166534!important}
html body .btn.ab22.pd22.pd22:not(#z22):not(#z23){background:#C62828!important;border-color:#C62828!important}
html body .btn.ab22.pd22.pd22:not(#z22):not(#z23):hover{background:#A51F1F!important}
html body .btn.ab22.tl22.tl22:not(#z22):not(#z23){background:#1E40AF!important;border-color:#1E40AF!important}
html body .btn.ab22.tl22.tl22:not(#z22):not(#z23):hover{background:#1e3a8a!important}

/* Q585: the bypass bar under a Boiler mode changed alert, and the Bypass time left box */
.byp22{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 14px;align-items:center;margin-top:6px;background:var(--line2,#f4f6fb);border-radius:8px;padding:7px 12px;font-size:13px}
.byp22 .t22{white-space:nowrap}.byp22 .t22 span{color:var(--muted)}
.trk22{height:7px;border-radius:99px;background:#e5eaf4;overflow:hidden;min-width:80px}
.trk22 i{display:block;height:100%;border-radius:99px;background:var(--info,#1d4ed8)}
.lft22{color:var(--info,#1d4ed8);white-space:nowrap;font-variant-numeric:tabular-nums}
.bx22{border:1px solid var(--info,#1d4ed8);border-radius:10px;margin:0 0 12px;overflow:hidden;padding:0}
.bxh22{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}
.bxh22 h3{margin:0;font-size:15px}
.bl22{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(0,3.2fr);gap:6px 14px;align-items:center;padding:7px 14px;border-top:1px solid var(--line2,#eef1f6);font-size:13.5px}
.bl22:first-of-type{border-top:0}
.bl22 .v22{color:var(--muted)}
.bl22 .byp22{grid-column:auto;margin:0;background:none;padding:0}
@media (max-width:760px){.bl22{grid-template-columns:1fr}.byp22{grid-template-columns:1fr 1fr}.byp22 .trk22{grid-column:1/-1}}

/* Q505 / Q588: Predictions and Observations tree pop-ups */
.asof22{margin:8px 0}
.tr22{display:grid;gap:10px;text-align:left}
.tg22{border:1px solid var(--line);border-left:4px solid var(--info,#1d4ed8);border-radius:10px;padding:10px 12px}
.tg22.v22-crit{border-left-color:var(--crit,#c62828)}.tg22.v22-warn{border-left-color:var(--warn,#b45309)}.tg22.og22{border-left-color:#14532d}
.th22{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.th22 b{font-size:15px}
.th22 .ch22{margin-left:auto;font-size:13px}
.tx22{display:grid;gap:4px;margin:8px 0 6px;font-size:13.5px}
.k22{display:inline-block;min-width:118px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.kd22{display:grid;border-top:1px solid var(--line2,#eef1f6);margin-top:6px}
.tk22{display:grid;grid-template-columns:14px minmax(140px,190px) 1fr auto auto;gap:4px 12px;align-items:center;padding:7px 0 7px 6px;border-bottom:1px solid var(--line2,#eef1f6)}
.tk22:last-child{border-bottom:0}
.nd22{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
.og22 .nd22{color:#14532d}
.pill.og22p{background:#dcfce7;color:#14532d}
html[data-mode="dark"] .pill.og22p{background:#14532d;color:#dcfce7}
.ob22n{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:9px 12px;font-size:13.5px;text-align:left}
html[data-mode="dark"] .ob22n{background:#0f2a1a;border-color:#14532d}
.obb22{display:flex;gap:4px 2px;align-items:flex-start;padding:8px 0 4px;font-size:13.5px}.obb22 .k22{margin-right:8px}.obb22 a{font-weight:600}
.obl22{display:flex;flex-direction:column;gap:4px}
@media (max-width:760px){.tk22{grid-template-columns:14px 1fr}.tk22 .btn{justify-self:start}.obb22{flex-direction:column}}

/* Q516 / Q550: alert details, Resolved / Ended and Alert tabs */
.dtb22{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 14px}
.dtb22 button{font:inherit;font-weight:600;font-size:14px;border:1px solid transparent;border-bottom:0;background:transparent;color:var(--muted);padding:8px 18px;border-radius:8px 8px 0 0;cursor:pointer;margin-bottom:-1px}
.dtb22 button.on{background:var(--surface,#fff);border-color:var(--line);color:var(--fg)}
.dtb22 button.rs22.on{color:#15803d}
.dtb22 button.rs22.gy22.on{color:#4b5563}
.ad74 .ad74-s{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ad74-gw{color:#4b5563;font-weight:700}
html[data-mode="dark"] .ad74-gw{color:#a3abba}
.nt22{border-left:3px solid #1E40AF;background:#eef2fa;padding:8px 12px;border-radius:0 6px 6px 0}
html[data-mode="dark"] .nt22{background:#131d31}

/* Q584 option C: the Live pop-up story, one row per firing */
.tl22{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12.5px;margin-top:3px}.tl22 span{color:var(--muted);font-weight:400}
.fe33.gy22 .ic33 i{background:#9ca3af!important;border-color:#9ca3af!important}
.fe33 .tx33 .pill.b22{margin-right:6px}

/* Anagha AI home: the buttons on the header row; grey end dots and times */
#app main > .h.h22{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
#app main > .h.h22 .bt22{margin-left:auto}
.aic-b .d440{margin-right:7px;vertical-align:1px}
.d440.gy{background:#9ca3af}
.aic-tm.g22{color:#6b7280;font-weight:600}

/* Q507: every chart pop-up the same size */
.swal2-popup.trp22{width:min(1100px,96vw)!important}
.swal2-popup.trp22 .swal2-html-container{min-height:min(560px,70vh)}

/* Q555 / Q593 / Q567 timelines: white time bar, dark bold ticks, named bands, Boiler firing strip, clear legend */
html body .ax97.ax22:not(#z22){background:#fff!important;border:1px solid #cbd5e1;color:#0f172a}
html body .ax97.ax22 .tk97:not(#z22){color:#0f172a;font-weight:700}
html body .bd97.tk22b:not(#z22){height:19px!important;margin-top:-6px;border-radius:4px;display:flex;align-items:center;overflow:hidden}
html body .bd97.tk22b span{color:#fff;font-size:11px;font-weight:700;padding:0 6px;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.25)}
html body .bd97.ln22:not(#z22){height:4px!important;margin-top:2px}
html body .fr41.fr22:not(#z22){height:13px!important;margin-top:-4px;border-radius:3px;display:flex;align-items:center;overflow:hidden;background:#b91c1c!important}
html body .fr41.fr22 span{color:#fff;font-size:10px;font-weight:700;padding:0 5px;white-space:nowrap}
html body .lg97.lg22:not(#z22){font-size:13.5px!important;color:var(--fg)!important}
html body .lg97.lg22 span:not(#z22){font-weight:700}
html body .nm97 b:not(#z22){font-size:17px}
html body .dyh97 h2:not(#z22){font-size:18px!important}

/* Q591: the Timeline full-screen pop-up */
body.tlon22{overflow:hidden}
.tlov22{position:fixed;inset:0;z-index:1500;background:var(--bg,#fff);display:flex;flex-direction:column}
.tlh22{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#1E40AF;color:#fff}
.tlh22 h2{margin:0;font-size:18px;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlh22 .sp{flex:1}
.tlh22 .btn{background:#fff!important;color:#1E40AF!important;border-color:#fff!important}
.tlb22{flex:1;overflow:auto}
.tlov22 header.top{display:none!important}
.tlov22 main.page{padding-top:12px}
.tlov22 .dyh97 h2{display:none}
body.tlon22 .tip97{z-index:1600}
@media (max-width:640px){.tlh22{padding:10px 16px}}