/* B53 (13 Oct): the customer page's look for staff pages — side menu, Figtree, look D3 "control room" in Light and
   Dark. A page opts in with <body class="shell"> and this file after sentinel.css; staff.js draws the menu.
   <html data-theme> is set in the page's head before it draws (saved choice, else the computer's setting); the choice
   is shared with the customer page (localStorage "sentinel.theme"). Red and amber stay the only trouble colours. */
@font-face{font-family:Figtree;src:url(/v2/fonts/figtree-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/v2/fonts/figtree-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(/v2/fonts/figtree-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/v2/fonts/figtree-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--pz-navy:#0F1B29;--pz-lime:#AFFF71;--pz-lime2:#9BEF5C;
  --bg:#F4F6FA;--panel:#fff;--line:#E3E8F0;--ink:#0F1B29;--ink2:#55697C;--ink3:#8A97AB;--sea:#0F1B29;
  --red:#D92D20;--red-bg:#FEF3F2;--amber:#B45309;--amber-bg:#FFFBEB;--grey-bg:#EEF2F8;--green:#55697C;--green-bg:#EEF2F8;
  --card:#F7F9FC;--card2:#EEF2F8;--hair:#EDF1F6;--tint:#7C8FAD;--ok:#3F9A2A;--ok-ink:#3F7F24;color-scheme:light}
:root[data-theme=dark]{--bg:#0B1622;--panel:#12202F;--line:#22344A;--ink:#E8EEF7;--ink2:#9FB0C6;--ink3:#71849C;--sea:#AFFF71;
  --red:#FF6B57;--red-bg:#3A1A1A;--amber:#FFC24D;--amber-bg:#3A2E12;--grey-bg:#1A2A3C;--green:#9FB0C6;--green-bg:#1A2A3C;
  --card:#152434;--card2:#1A2B3E;--hair:#1C2E44;--tint:#5F7690;--ok:#3F9A2A;--ok-ink:#3F9A2A;color-scheme:dark}
html,body.shell{background:var(--bg);color:var(--ink);font-family:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
body.shell>header{display:none}
body.shell main{width:100%;max-width:1240px;margin:0;padding:34px 32px 60px}
/* side menu */
.side{position:sticky;top:0;height:100vh;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px 14px;gap:18px;z-index:30}
:root[data-theme=dark] .side{background:#0F1B29;border-right-color:#1C2E44}
.smain{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600}.smain svg{width:18px;height:18px;flex:none}.smain:hover{background:var(--card2);color:var(--ink)}
.sbrand{display:flex;flex-direction:column;gap:6px;padding:0 6px}.sbrand .org{font-size:14px;color:var(--ink2);line-height:1.3}
.shell .brand{font-weight:800;letter-spacing:.08em;border-left:4px solid var(--pz-lime);padding-left:10px}
.snav{display:flex;flex-direction:column;gap:2px}
.snav a{font-size:15px;font-weight:500;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:7px;color:var(--ink2);text-decoration:none}
.snav a svg{width:20px;height:20px;flex:none}.snav a:hover{background:var(--card2)}
.snav a[aria-current=page]{background:var(--card2);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--pz-lime)}
:root[data-theme=dark] .snav a[aria-current=page]{background:#16263A;color:#fff}
.snav a:focus-visible{outline:3px solid var(--pz-lime);outline-offset:-3px}
.sfoot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:0 6px}
.sfoot .seg{align-self:flex-start}
.sme{display:flex;align-items:center;gap:8px;min-width:0}
.sme .who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--ink2)}
.sme .so{flex:none;font:inherit;font-size:13px;font-weight:600;background:none;border:0;padding:2px 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.sme .so:hover{text-decoration-color:currentColor}.sme .so::before{content:"·";margin-right:8px;color:var(--ink3);display:inline-block}
.thm{margin-left:auto;flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);cursor:pointer;padding:0}
.thm:hover{background:var(--card2)}.thm:focus-visible{outline:3px solid var(--pz-lime);outline-offset:2px}.thm svg{width:17px;height:17px}
.thm .i-sun{display:none}:root[data-theme=dark] .thm .i-sun{display:block;color:var(--pz-lime)}:root[data-theme=dark] .thm .i-moon{display:none}
:root[data-theme=dark] .thm{background:#16263A;border-color:#2C4058}
.topbar,.scrim{display:none}
@media (max-width:760px){ body.shell{display:block}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 12px}
  :root[data-theme=dark] .topbar{background:#0F1B29}
  .topbar .tcur{font-weight:600;color:var(--ink2);font-size:15px}
  .menu{width:38px;height:38px;border:1px solid var(--line);border-radius:7px;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
  .menu span,.menu span::before,.menu span::after{display:block;width:16px;height:2px;background:var(--ink);position:relative;content:""}.menu span::before{position:absolute;top:-5px}.menu span::after{position:absolute;top:5px}
  .side{position:fixed;left:0;top:0;width:284px;transform:translateX(-102%);transition:transform .2s ease;box-shadow:4px 0 24px rgba(15,27,41,.18)}
  body.menu-open .side{transform:none}.scrim{display:block;position:fixed;inset:0;background:rgba(15,27,41,.35);z-index:25}.scrim[hidden]{display:none}
  body.shell main{padding:22px 14px 50px} }
@media (prefers-reduced-motion:reduce){ .side{transition:none} }
/* the staff components in D3 */
.shell .now h1{font-size:30px;font-weight:700}.shell .now h1.warn{color:var(--amber)}
.shell .list,.shell .panel{background:var(--panel);border-color:var(--line);border-radius:10px}
.shell .lhead{background:var(--card);border-color:var(--hair)}.shell .item{border-color:var(--hair)}
.shell .lrow:hover{background:var(--card)}.shell .item::before,.shell .item.red::before,.shell .item.yellow::before{display:none}
.shell .caret{background:transparent;border-color:transparent;color:var(--ink3)}
.shell .act{background:var(--pz-lime);color:var(--pz-navy);font-weight:700}.shell .act:hover{background:var(--pz-lime2)}
.shell .act.alt{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.shell .act.alt:hover{background:var(--card2)}
.shell .seg{background:var(--panel);border-color:var(--line)}.shell .seg button{color:var(--ink2)}.shell .seg button[aria-pressed="true"]{background:var(--pz-lime);color:var(--pz-navy)}
.shell .fact{background:var(--card);border-color:var(--hair)}.shell .schip{background:var(--panel);border-color:var(--line)}
.shell .pill.online,.shell .pill.green{background:var(--grey-bg);color:var(--ink2)}
.shell .bar{background:var(--card2)}.shell .bar i{background:var(--tint)}
.shell table.t th{background:var(--card);border-color:var(--line)}.shell table.t td{border-color:var(--hair)}
.shell input.f,.shell select.f{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .shell .test,:root[data-theme=dark] .test{background:#2A2140;color:#C9B3F0}
:root[data-theme=dark] .shell .now h1{color:#fff}:root[data-theme=dark] .shell .now h1.bad{color:var(--red)}:root[data-theme=dark] .shell .now h1.warn{color:var(--amber)}
:root[data-theme=dark] .shell .nm b{color:#fff}:root[data-theme=dark] .shell .item.poseidon .nm b{color:var(--ink2)}
:root[data-theme=dark] .shell a{color:inherit}
:root[data-theme=dark] .shell a.act,.shell a.act{color:var(--pz-navy)}:root[data-theme=dark] .shell a.act.alt,.shell a.act.alt{color:var(--ink)}

/* Sign out as a bordered button, next to the name */
.sme{gap:6px}.sme .so{font:inherit;font-size:13px;font-weight:600;color:var(--ink)!important;background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:6px;padding:3px 9px!important;text-decoration:none!important;cursor:pointer;white-space:nowrap}.sme .so:hover{background:var(--card2)!important}.sme .so::before{content:none}

/* ---- B54: every staff page in the shell — Status, Client Overview, Insights, Report — and their own parts in Dark */
.shell main{background:transparent}
@media print{ body.shell{display:block!important;background:#fff!important} .side,.topbar,.scrim{display:none!important} }
/* overview.css (cards, alerts, graphs) */
:root[data-theme=dark] .shell .card,:root[data-theme=dark] .shell .focus,:root[data-theme=dark] .shell .abtn,:root[data-theme=dark] .shell .afil select,
:root[data-theme=dark] .shell .asub,:root[data-theme=dark] .shell .amore{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .shell .arow{border-bottom-color:var(--hair)}:root[data-theme=dark] .shell .card.red{background:#2A1A1E}
:root[data-theme=dark] .shell .chart .tip{background:#0B1622;color:#E8EEF7;border:1px solid #2C4058}
:root[data-theme=dark] .shell .chart svg text{fill:#9FB0C6}
:root[data-theme=dark] .shell .chart svg line[stroke="#E6EAEF"],:root[data-theme=dark] .shell .chart svg line[stroke="#F0F3F6"]{stroke:#1F3046}
:root[data-theme=dark] .shell .chart svg line[stroke="#C9D2DC"]{stroke:#2C4058}:root[data-theme=dark] .shell .chart svg path[fill="#D6EAF6"]{fill:rgba(79,184,234,.18)}
:root[data-theme=dark] .shell .chart svg path[stroke="#0F8FCB"]{stroke:#4FB8EA}:root[data-theme=dark] .shell .chart svg rect[fill="#F4F6F9"]{fill:#152434}
:root[data-theme=dark] .shell .chart svg circle[fill="#0F8FCB"]{fill:#4FB8EA}:root[data-theme=dark] .shell .chart .plot{border-color:#1C2E44}
/* Status */
:root[data-theme=dark] .shell .acts button,:root[data-theme=dark] .shell .vm,:root[data-theme=dark] .shell .cm .sl,:root[data-theme=dark] .shell .cm .sl button,
:root[data-theme=dark] .shell .nbc,:root[data-theme=dark] .shell .chip,:root[data-theme=dark] .shell .ulist,:root[data-theme=dark] .shell .uline,
:root[data-theme=dark] .shell #p-notify .seg button,:root[data-theme=dark] .shell .nbtools select,:root[data-theme=dark] .shell .nbtools input{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .shell .cm .sl button[aria-current="true"],:root[data-theme=dark] .shell .urow.open .uline,:root[data-theme=dark] .shell .ubody,
:root[data-theme=dark] .shell .nbmenu button:hover,:root[data-theme=dark] .shell .nbmenu button:focus{background:#16263A}
:root[data-theme=dark] .shell .uline:hover,:root[data-theme=dark] .shell .uhead,:root[data-theme=dark] .shell .nbmenu,:root[data-theme=dark] .shell .linkbox input{background:var(--card);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .shell .nbcol{background:var(--card)}:root[data-theme=dark] .shell .nbcol.never{background:#121C28}:root[data-theme=dark] .shell .nbcol.over{background:#14283A}
:root[data-theme=dark] .shell .sess,:root[data-theme=dark] .shell .cm .sl button,:root[data-theme=dark] .shell .steps li,:root[data-theme=dark] .shell .urow{border-color:var(--hair)}
:root[data-theme=dark] .shell .acts button.danger,:root[data-theme=dark] .shell .uacts .danger{border-color:#5A2A2A}
/* Insights */
:root[data-theme=dark] .shell .sites,:root[data-theme=dark] .shell .sites button,:root[data-theme=dark] .shell .pick,:root[data-theme=dark] .shell .charts .chart,
:root[data-theme=dark] .shell .units button{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .shell .sites button{border-bottom-color:var(--hair)}:root[data-theme=dark] .shell .pick details{border-bottom-color:var(--hair)}
:root[data-theme=dark] .shell .sites button[aria-current="true"]{background:#16263A}
.shell .units button[aria-pressed="true"]{background:var(--pz-lime);color:var(--pz-navy);border-color:var(--pz-lime)}
/* Client Overview */
:root[data-theme=dark] .shell .edit{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .shell .crumb a{color:var(--ink2)}

/* ---- B55: the customer view's controls everywhere — tab bars like Readings | Alarms, switches like Overview | Alarm,
   counts as small pills (red for alarms), filters and fields in the same shape */
.shell .ctabs,.shell .mtabs,.shell .atabs{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--line)}
.shell .ctabs button,.shell .mtabs button,.shell .atabs button{font:inherit;font-size:15px;font-weight:600;padding:8px 14px;border:0;border-bottom:3px solid transparent;
  background:none;color:var(--ink2);cursor:pointer;margin-bottom:-1px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.shell .ctabs button:hover,.shell .mtabs button:hover,.shell .atabs button:hover{color:var(--ink)}
.shell .ctabs button[aria-selected="true"],.shell .mtabs button[aria-selected="true"],.shell .atabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pz-lime)}
.shell .ctabs .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--card2);color:var(--ink2);font-size:12px;font-weight:700;margin:0}
.shell .ctabs .n:empty{display:none}.shell .ctabs .n.red{background:var(--red);color:#fff}.shell .ctabs .n.amber{background:#F59E0B;color:#fff}
.shell .seg,.shell #p-notify .seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel)}
.shell .seg button,.shell #p-notify .seg button{font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.shell .seg button+button,.shell #p-notify .seg button+button{border-left:1px solid var(--line)}
.shell .seg button[aria-pressed="true"],.shell #p-notify .seg button[aria-pressed="true"]{background:var(--pz-lime);color:var(--pz-navy)}
.shell .side .seg.lang button{padding:4px 9px}
.shell .units button{border-radius:7px;font-weight:600;background:var(--panel);color:var(--ink);border-color:var(--line)}
.shell .units button[aria-pressed="true"] small{color:var(--pz-navy);opacity:.7}
.shell select.f,.shell input.f,.shell .filters select,.shell .filters input,.shell .nbtools select,.shell .nbtools input,.shell input[type=date],.shell input[type=search]{
  font:inherit;font-size:14px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink)}
.shell select.f:focus-visible,.shell input.f:focus-visible,.shell .filters input:focus-visible{outline:3px solid var(--pz-lime);outline-offset:1px}
.shell .act.alt,.shell .acts button,.shell .uacts button{border-radius:7px}

/* ---- B55: Service list rows, drawn like the customer's site rows */
.shell .list .lhead{display:none!important}
.shell .svc .srow{display:grid;grid-template-columns:30px minmax(180px,1.3fr) 150px 130px minmax(0,1.4fr);gap:12px;align-items:center;padding:14px 14px;min-height:62px;cursor:pointer}
.shell .svc .nm b{font-size:16px;font-weight:700}.shell .svc .nm span{font-size:13px;color:var(--ink3)}
.shell .svc .caret{font-size:18px;width:auto;height:auto;border:0}
.shell .svc .ratio b{font-size:16px;font-weight:700}.shell .svc .ratio span{font-size:13px;color:var(--ink3);margin-left:4px}
.shell .pill{background:none!important;padding:0;gap:7px;font-weight:600;font-size:14px}.shell .pill svg{display:none}
.shell .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#7C8FAD;flex:none}
.shell .pill.green,.shell .pill.online{color:var(--ok-ink)}.shell .pill.green::before,.shell .pill.online::before{background:var(--ok)}.shell .pill.yellow,.shell .pill.degraded{color:var(--amber)}.shell .pill.yellow::before,.shell .pill.degraded::before{background:#F59E0B}
.shell .pill.red,.shell .pill.offline{color:var(--red)}.shell .pill.red::before,.shell .pill.offline::before{background:var(--red)}
.shell .pill.grey{color:var(--ink3)}.shell .pill.grey::before{background:none;border:1.5px solid var(--ink3)}
.shell .svc .pill.offline{color:var(--ink3)}.shell .svc .pill.offline::before{background:none;border:1.5px solid var(--ink3)}
.shell .strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.shell .strip .sg{display:inline-flex;align-items:center;gap:7px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:6px;padding:4px 8px}
.shell .strip .sgq{display:inline-flex;flex-wrap:wrap;gap:3px}.shell .strip i{width:11px;height:11px;border-radius:2px;display:inline-block}
.shell .strip .ok{background:var(--ok)}.shell .strip .deg{background:#C9D3E6;box-shadow:inset 0 0 0 2px #F59E0B}.shell .strip .warning{background:#F5B83D}.shell .strip .alarm{background:var(--red)}
.shell .strip .nodata{background:none;box-shadow:inset 0 0 0 1px #9FB0C6}
:root[data-theme=dark] .shell .strip .alarm{box-shadow:0 0 6px rgba(255,107,87,.75)}:root[data-theme=dark] .shell .strip .nodata{box-shadow:inset 0 0 0 1px #5F7690}
.shell .svc .more{padding:2px 14px 18px 56px}.shell .sacts{margin:2px 0 12px}
.shell .fact{background:var(--card);border:0;border-radius:8px}.shell .schip{border-radius:7px}
@media (max-width:820px){ .shell .svc .srow{grid-template-columns:26px 1fr auto;grid-template-areas:"c n w" ". r r" ". s s";row-gap:6px}
  .shell .svc .srow>.caret{grid-area:c}.shell .svc .srow>.nm{grid-area:n}.shell .svc .srow>.word{grid-area:w}.shell .svc .srow>.ratio{grid-area:r}.shell .svc .srow>.strip{grid-area:s}
  .shell .svc .more{padding:2px 12px 16px} }

/* ---- B55: Status → List as customer-style site rows */
.shell .lgrp{margin-top:22px}.shell .lgrp h2{font-size:17px;font-weight:700;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}.shell .lgrp h2 span{font-size:13px;font-weight:400;color:var(--ink3)}
.shell .lgrp .list{margin-top:0}
.shell .lsite .srow{display:grid;grid-template-columns:30px minmax(170px,1.2fr) 120px minmax(0,1.6fr) 170px 64px;gap:12px;align-items:center;padding:12px 14px;min-height:58px;cursor:pointer}
.shell .lsite .srow:hover{background:var(--card)}.shell .lsite .caret{font-size:18px;border:0;width:auto;height:auto}
.shell .lsite .nm b{font-size:15px;font-weight:700;display:block}.shell .lsite .nm span{font-size:12.5px;color:var(--ink3)}
.shell .lsite .lpoll{font-size:13px}.shell .lsite .lal{text-align:right}
.shell .strip .sgk{font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.shell .lsite .more{display:none;padding:2px 14px 16px 56px}.shell .lsite.open .more{display:block}
.shell .lsite .fact .v{font-size:16px}.shell .fact.wide{grid-column:span 2}.shell .fact .d small{display:block;color:var(--ink3);font-size:12.5px;margin-top:2px}
.shell .lsite .ok,.shell .lsite .v.ok{color:var(--ink)}.shell .lsite .warn,.shell .lsite .v.warn{color:var(--amber)}.shell .lsite .bad,.shell .lsite .v.bad{color:var(--red)}
@media (max-width:900px){ .shell .lsite .srow{grid-template-columns:26px 1fr auto;grid-template-areas:"c n w" ". s s" ". p a";row-gap:6px}
  .shell .lsite .srow>.caret{grid-area:c}.shell .lsite .srow>.nm{grid-area:n}.shell .lsite .srow>.word{grid-area:w}.shell .lsite .srow>.strip{grid-area:s}.shell .lsite .srow>.lpoll{grid-area:p}.shell .lsite .srow>.lal{grid-area:a}
  .shell .lsite .more{padding:2px 12px 14px}.shell .fact.wide{grid-column:auto} }
.shell .pill.offline{color:var(--ink3)}.shell .pill.offline::before{background:none;border:1.5px solid var(--ink3)}   /* offline reads grey, as on the customer page; red is for alarms */