/* Sentinel V2 shared look (B14 on): the staff pages. Same identity as the customer page (sites.html): ink, kelp lime
   for actions, cool sea-grey surface, sea blue for data. Status colours never travel alone: a word and a shape too. */
:root{--bg:#F4F6FA;--panel:#fff;--line:#E3E8F0;--ink:#0F1B29;--ink2:#4A5A73;--ink3:#8A97AB;--lime:#AFFF71;--lime-ink:#2F5A12;
  --sea:#0F8FCB;--red:#C43E2A;--red-bg:#FDECEA;--amber:#B7791F;--amber-bg:#FFF6E5;--green:#3F7F24;--green-bg:#EEF9E6;--grey-bg:#EEF1F5}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit}
header{background:var(--panel);border-bottom:2px solid var(--lime);padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.14em;font-size:15px;border-left:4px solid var(--lime);padding-left:10px}
nav.tabs{display:flex;gap:2px}nav.tabs a{white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:5px}
nav.tabs a[aria-current="page"]{background:var(--ink);color:#fff}nav.tabs a:hover:not([aria-current]){background:var(--grey-bg)}
.sp{flex:1}header .who{font-size:13px;color:var(--ink2)}
header .hbtn{font:inherit;font-size:13px;color:var(--ink2);text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}.seg button{font:inherit;font-size:14px;padding:6px 12px;border:0;background:none;color:var(--ink2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}.seg.lang button{padding:4px 9px;font-size:13px}
main{max-width:1180px;margin:0 auto;padding:28px 20px 60px}
.now h1{font-size:28px;line-height:1.2;font-weight:600;margin:0}.now h1.bad{color:var(--red)}.now h1.warn{color:#8A5A12}.now p{margin:6px 0 0;color:var(--ink2);font-size:14px}
.list{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lhead{min-height:38px;font-size:13px;color:var(--ink3);border-bottom:1px solid var(--line);background:#FAFBFC}
.item{border-bottom:1px solid var(--line);position:relative}.item:last-child{border-bottom:0}
.item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent}
.item.red::before{background:var(--red);animation:edge 3s ease-in-out infinite}.item.yellow::before{background:#F5B83D}
@keyframes edge{0%,100%{opacity:1}50%{opacity:.3}}@keyframes tint{0%,100%{background:#FFF3F2}50%{background:#fff}}
.lrow{min-height:58px;cursor:pointer}.lrow:hover{background:#FAFCFE}
.caret{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink2);transition:transform .15s}
.item.open .caret{transform:rotate(90deg)}
.nm b{font-size:17px;font-weight:600;display:block}.nm span{font-size:13px;color:var(--ink3)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:4px 10px 4px 8px;border-radius:999px;white-space:nowrap}
.pill svg{width:14px;height:14px;flex:none}
.pill.online,.pill.green{background:var(--green-bg);color:var(--green)}.pill.degraded,.pill.yellow{background:var(--amber-bg);color:var(--amber)}
.pill.offline,.pill.red{background:var(--red-bg);color:var(--red)}.pill.grey{background:var(--grey-bg);color:var(--ink2)}
.pill.sm{font-size:12px;padding:2px 8px 2px 6px;gap:5px}.pill.sm svg{width:11px;height:11px}
.act{font:inherit;font-size:14px;font-weight:600;text-decoration:none;padding:7px 12px;border-radius:5px;background:var(--lime);color:var(--ink);border:0;white-space:nowrap;cursor:pointer;display:inline-block}
.act:hover{background:#9FF55C}.act.alt{background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:500}.act.alt:hover{background:#F6F8FB}
.act[aria-disabled="true"]{opacity:.5;pointer-events:none}
.act:focus-visible,.lrow:focus-visible,header .hbtn:focus-visible,nav.tabs a:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.muted{color:var(--ink3);font-size:13px}.dim{color:var(--ink3)}
.more{display:none;padding:6px 16px 18px 62px}.item.open .more{display:block}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px}
.fact{background:#FAFBFC;border:1px solid #EEF1F4;border-radius:6px;padding:10px 12px}.fact .k{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}.fact .v{font-size:20px;font-weight:600}.fact .d{font-size:13px;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.schip{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.test{font-size:12px;font-weight:600;color:#6B3FA0;background:#F4EEFB;border-radius:999px;padding:1px 8px;margin-left:6px}
.empty{padding:40px 20px;text-align:center;color:var(--ink2)}.note{margin-top:14px;font-size:13px;color:var(--ink3)}
.sev{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;text-align:center;align-self:start}.sev.alarm,.sev.system{background:var(--red-bg);color:var(--red)}.sev.warning{background:var(--amber-bg);color:var(--amber)}.sev.cleared{background:var(--grey-bg);color:var(--ink2)}
table.t{width:100%;border-collapse:collapse;font-size:14px}table.t th{font-size:12px;font-weight:600;color:var(--ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:#FAFBFC;white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid #F0F3F6;vertical-align:top}table.t tr:last-child td{border-bottom:0}
table.t th button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-top:18px}.panel h2{font-size:18px;margin:0 0 10px}
input.f,select.f{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.msg{font-size:14px;margin-top:8px}.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.badge{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--grey-bg);color:var(--ink2)}.badge.ok{background:var(--green-bg);color:var(--green)}.badge.bad{background:var(--red-bg);color:var(--red)}.badge.warn{background:var(--amber-bg);color:var(--amber)}
@media (max-width:820px){ main{padding:20px 14px 50px} .lhead{display:none} .more{padding-left:16px} nav.tabs{order:5;width:100%;overflow-x:auto} }
@media (prefers-reduced-motion:reduce){ .item.red::before{animation:none} }