/* Shared look for the Monitaria hub (and anything else that loads it). */
:root{
  --bg:#f5f6f8; --panel:#fff; --ink:#1c2230; --muted:#5d6678; --line:#e2e5ea;
  --up:#1f8a4c; --warn:#b86e00; --down:#c62828; --unknown:#7a8194; --stale:#6b4fbb; --accent:#2f5bd3; --accent-ink:#fff;
  /* status colours for words (4.5:1 on the page and on their tints); the ones above are for dots, bars and shapes */
  --up-text:#17733f; --warn-text:#8f5500; --down-text:#b71c1c; --unknown-text:#5f6678;
  --field-line:#8a93a3;  /* the edge of inputs and selects (3:1) */
  /* categorical series colours (charts) */
  --c1:#2f5bd3; --c2:#1a9a8a; --c3:#d9822b; --c4:#8a4fd3; --c5:#c0457a; --c6:#6c8a1f; --c7:#7a8194;
  color-scheme:light dark;
}
/* Dark: the system setting, unless someone chose Light; or always, when they chose Dark (Account › Theme, data-theme) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){ --bg:#11151c; --panel:#1a1f29; --ink:#e7eaf0; --muted:#9aa3b5; --line:#2a3140;
         --up:#3fbf75; --warn:#e0a030; --down:#ef5a5a; --unknown:#8a91a3; --stale:#a78bfa; --accent:#7c9cff; --accent-ink:#0b1020;
         --up-text:#3fbf75; --warn-text:#e0a030; --down-text:#f26b6b; --unknown-text:#9aa3b5; --field-line:#647089;
         --c1:#7c9cff; --c2:#3cc4b0; --c3:#f0a35a; --c4:#b18cf2; --c5:#ee7aa8; --c6:#a3c25a; --c7:#9aa3b5; }
}
:root[data-theme=dark]{ --bg:#11151c; --panel:#1a1f29; --ink:#e7eaf0; --muted:#9aa3b5; --line:#2a3140;
       --up:#3fbf75; --warn:#e0a030; --down:#ef5a5a; --unknown:#8a91a3; --stale:#a78bfa; --accent:#7c9cff; --accent-ink:#0b1020;
       --up-text:#3fbf75; --warn-text:#e0a030; --down-text:#f26b6b; --unknown-text:#9aa3b5; --field-line:#647089;
       --c1:#7c9cff; --c2:#3cc4b0; --c3:#f0a35a; --c4:#b18cf2; --c5:#ee7aa8; --c6:#a3c25a; --c7:#9aa3b5; color-scheme:dark; }
:root[data-theme=light]{ color-scheme:light; }
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
header.top{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
header.top h1{font-size:17px;margin:0;font-weight:650;display:flex;align-items:center;gap:8px}
header.top .sub{color:var(--muted)}
.usermenu{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap}
.usermenu .who{color:var(--muted)}
nav.tabs{display:flex;gap:4px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
nav.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
nav.tabs button:focus-visible{outline:2px solid var(--accent)}
main.view{padding:16px 20px;display:grid;gap:14px;max-width:1400px;margin:0 auto}
.hidden{display:none!important}
.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:5px 11px;cursor:pointer;font:inherit;font-size:13px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--down)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:wait}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar input[type=search],.toolbar select{font:inherit;padding:6px 10px;border:1px solid var(--field-line);border-radius:6px;background:var(--panel);color:var(--ink)}
.toolbar input[type=search]{min-width:220px}
.toolbar label{font-size:13px;display:flex;gap:6px;align-items:center}
.note,.type,.muted{color:var(--muted);font-size:12.5px}
.msg-ok{color:var(--up-text);font-size:13px} .msg-err{color:var(--down-text);font-size:13px}
.st-up{color:var(--up-text)} .st-warning{color:var(--warn-text)} .st-down{color:var(--down-text)} .st-unknown,.st-never_seen,.st-nodata,.st-offline{color:var(--unknown-text)} .st-stale{color:var(--stale)}
.st-maintenance{color:var(--stale)}  /* In maintenance (◇): the map legend's colour, 4.5:1 in both themes */
.dot{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.empty{padding:40px;text-align:center;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.panel h2{font-size:15px;margin:0 0 8px}
/* dashboards */
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.w.s1{grid-column:span 1}.w.s2{grid-column:span 2}.w.s3{grid-column:span 3}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}.w.s1,.w.s2,.w.s3{grid-column:span 1}}
.w-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.w-h h3{margin:0;font-size:14px;flex:1}
.w-ctl{display:flex;gap:4px}
.w-ctl button{background:none;border:1px solid var(--line);color:var(--ink);border-radius:5px;padding:1px 7px;cursor:pointer;font-size:12px}
.big{font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.health{display:flex;gap:14px;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.kpi{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.tile{border:1px solid var(--line);border-left:5px solid var(--c,var(--up));border-radius:8px;padding:8px 10px;cursor:pointer;background:none;color:inherit;font:inherit;text-align:left}
.tile:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tile .t{font-weight:650;font-size:13px}.tile .n{font-size:12px;color:var(--muted)}
.bars{display:grid;gap:5px}
.bar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.bar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{display:block;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--accent)}
.bar .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.plist{display:grid;gap:4px;font-size:12.5px}
.plist>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:4px}
.plist .m{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* devices */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip .n{opacity:.8;margin-left:4px} .chip[aria-pressed=true] .n{opacity:1} .chip.bad{border-color:var(--down)}
section.cat h2.cat-h{font-size:16px;margin:6px 0 0}
.cat-body{display:grid;gap:10px}
details summary{cursor:pointer}
.device{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.device h2{font-size:14px;margin:0;padding:9px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
.device table{width:100%;border-collapse:collapse}
.device td{padding:7px 14px;border-top:1px solid var(--line);vertical-align:middle}
.device tr:first-child td{border-top:0}
.device .name{font-weight:600}
.device .val{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.device .msg{color:var(--muted);max-width:420px}
.device .since{color:var(--muted);font-size:12px;white-space:nowrap}
svg.spark{display:block}
@media (max-width:720px){.device .msg,.device .spark-cell{display:none}}
/* sites */
.grid-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.site{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.site:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)} .site:focus-visible{outline:2px solid var(--accent)}
.site h3{font-size:15px;margin:2px 0}
.site .state{font-weight:650;text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--c)}
.site.st-up{--c:var(--up)} .site.st-warning{--c:var(--warn)} .site.st-down{--c:var(--down)} .site.st-stale{--c:var(--stale)} .site.st-never_seen{--c:var(--unknown)}
.site.st-up,.site.st-warning,.site.st-down,.site.st-stale,.site.st-never_seen{color:var(--ink)}
.counts{display:flex;gap:10px;margin-top:6px;font-size:12px;font-variant-numeric:tabular-nums}
/* dialogs & forms */
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);width:min(760px,94vw);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h3{margin:0 0 8px}
dialog > button[data-close]{float:right}
/* the heading beside the floating Close, never under it, and as wide as its words: the ring of a heading that has the
   focus (the device dialog's, once the button used went with the change) goes round the name alone, not Close too */
dialog > button:first-child + h3{display:flow-root;width:fit-content}
form.stack label{display:block;font-size:12px;font-weight:600;margin:10px 0 3px}
form.stack input,form.stack select{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--field-line);border-radius:6px;background:var(--bg);color:var(--ink)}
form.stack .chip input{width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width:640px){.grid2{grid-template-columns:1fr}}
table.grid{width:100%;border-collapse:collapse}
table.grid th{font-size:12px;color:var(--muted);text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
table.grid td{padding:6px 8px;font-size:13px;vertical-align:top;border-top:1px solid var(--line)}
code{word-break:break-all}
/* acknowledgement / maintenance / dependency badges */
.badge{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;vertical-align:middle}
.badge.ack{color:var(--accent);border-color:currentColor}
.badge.maint{color:var(--stale);border-color:currentColor}
.badge.dep{color:var(--unknown-text);border-color:currentColor}
.badge.on{color:var(--up-text);border-color:currentColor} .badge.off{color:var(--warn-text);border-color:currentColor}
.plist .handled{opacity:.72}
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.linkish:hover{text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--accent)}
/* checklist, help, reports */
.checklist{background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:12px;padding:12px 16px}
.checklist h2{font-size:15px;margin:0 0 6px;display:flex;gap:8px;align-items:center}
.checklist ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.checklist li.done{color:var(--muted);text-decoration:line-through}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;flex:1;max-width:220px}
.progress span{display:block;height:100%;background:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);padding:7px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--line) 25%,var(--panel))}
.facts b{color:var(--ink);font-weight:600}
.devname{font-weight:inherit;font-size:inherit}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 18px;margin:10px 0 14px}
.kv div{display:flex;flex-direction:column;font-size:13px;min-width:0}
.kv span{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
.kv b{font-weight:600;overflow-wrap:anywhere}
.inv-table{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.inv-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.inv-table th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:600;border-bottom:1px solid var(--line);padding:5px 8px}
.inv-table td{border-top:1px solid var(--line);padding:4px 8px;overflow-wrap:anywhere}
.field-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin:10px 0}
.field-pick label{display:flex;gap:6px;align-items:center;font-size:13px}
.review-actions{list-style:none;padding:0;margin:8px 0}
.review-actions li{border:1px solid var(--line);border-radius:10px;padding:9px 13px;margin:7px 0;background:var(--panel)}
.pri{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;margin-right:8px}
.pri.p1{background:color-mix(in srgb,var(--down) 15%,var(--panel));color:var(--down-text)}
.pri.p2{background:color-mix(in srgb,var(--warn) 18%,var(--panel));color:var(--warn-text)}
.pri.p3{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent)}
@media print{.review-actions li{break-inside:avoid}}
.lic-banner{border-radius:10px;padding:8px 14px;font-size:13px;border:1px solid var(--line);background:var(--panel)}
.lic-banner.warn{background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.lic-banner.error{background:color-mix(in srgb,var(--down) 10%,var(--panel));border-color:color-mix(in srgb,var(--down) 45%,var(--line))}
.lic-banner a{color:inherit;font-weight:600}
.meter{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 10px}
.meter>span{display:block;height:100%;background:var(--up)}
.meter.over>span{background:var(--down)}
.maint-banner{background:color-mix(in srgb,var(--stale) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--stale) 45%,var(--line));border-radius:10px;padding:8px 14px;font-size:13px}
.helpbox{background:color-mix(in srgb,var(--accent) 6%,var(--panel));border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--muted)}
.helpbox b{color:var(--ink)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.subtabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pct-bar{display:inline-block;width:80px;height:7px;background:var(--line);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:6px}
.pct-bar span{display:block;height:100%}
.scope-pick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.scope-pick label{display:inline-flex!important;gap:5px;align-items:center;font-weight:500!important;font-size:12.5px!important;margin:0!important;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.scope-pick input{width:auto!important}
@media print{
  header,nav.tabs,.toolbar,.no-print,dialog{display:none!important}
  body{background:#fff;color:#000} main.view,main{max-width:none;padding:0}
  .panel,.w,.device{border-color:#ccc;break-inside:avoid}
}

/* Traffic (NetFlow) */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbar{display:inline-block;width:46px;height:6px;border-radius:3px;background:var(--line);margin-right:6px;vertical-align:middle;overflow:hidden}
.tbar span{display:block;height:100%;background:var(--accent)}
.trchart{width:100%;height:auto;display:block}
.trchart rect{fill:var(--accent);cursor:pointer}
.trchart rect:hover,.trchart rect:focus{fill:color-mix(in srgb,var(--accent) 70%,var(--ink));outline:none}
.trchart text{fill:var(--muted);font-size:11px}
.trchart .gridline{stroke:var(--line);stroke-dasharray:3 3}
pre.code{background:color-mix(in srgb,var(--ink) 5%,var(--panel));border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:12px ui-monospace,Menlo,monospace;overflow-x:auto}
#tr-chips .badge{font-size:12px;padding:2px 8px}
form.stack input[type=checkbox],form.stack input[type=radio]{width:auto;padding:0;margin-right:6px;vertical-align:middle}
#view-traffic .panel{overflow-x:auto;min-width:0}
#view-traffic .grid2>*{min-width:0}
@media (max-width:640px){#view-traffic .tbar{display:none}}
#view-traffic>*{min-width:0}

/* charts, map, timeline */
.seg{float:right;display:inline-flex;gap:0}
.seg .btn{border-radius:0;font-size:12px;padding:3px 9px}
.seg .btn:first-child{border-radius:6px 0 0 6px} .seg .btn:last-child{border-radius:0 6px 6px 0}
.btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ubar{display:inline-block;width:70px;height:7px;border-radius:4px;background:var(--line);vertical-align:middle;overflow:hidden}
.ubar span{display:block;height:100%}
.spark2 path{fill:none;stroke-width:1.5} .spark2 .s-in{stroke:var(--c1)} .spark2 .s-out{stroke:var(--c3)}
.heat{display:grid;gap:2px;overflow-x:auto}
.heat .hrow{display:grid;grid-template-columns:36px repeat(24,minmax(14px,1fr));gap:2px}
.heat .hc{height:18px;border-radius:3px;background:var(--line)}
.heat .hh,.heat .hd{font-size:11px;color:var(--muted)}
.sankey{width:100%;height:auto} .sankey text{fill:var(--ink);font-size:12px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px}
@media (max-width:900px){.mapwrap{grid-template-columns:1fr}}
.wanmap{width:100%;height:auto}
.wanmap .mapnode{cursor:pointer}
.wanmap .mapnode.sel circle,.wanmap .mapnode:focus circle{stroke-width:7}
.wanmap .mapnode:focus{outline:none}
.wanmap .mn-n{font-size:15px;font-weight:700;fill:var(--ink)} .wanmap .mn-s{font-size:10px;fill:var(--muted)}
.wanmap .mn-l{font-size:13px;font-weight:600;fill:var(--ink)} .wanmap .mn-t{font-size:11px;fill:var(--muted)}
.wanmap .ml{paint-order:stroke;stroke:var(--panel);stroke-width:4px}
ol.timeline{list-style:none;padding:0;margin:6px 0;max-height:340px;overflow:auto}
ol.timeline li{padding:4px 0 4px 20px;position:relative;border-top:1px solid var(--line);font-size:13px}
ol.timeline .tl-i{position:absolute;left:2px;top:5px;color:var(--muted)}
ol.timeline li.tl-down .tl-i{color:var(--down)} ol.timeline li.tl-warning .tl-i{color:var(--warn)} ol.timeline li.tl-up .tl-i{color:var(--up)}
fieldset.er{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 10px}
fieldset.er legend{font-weight:600;padding:0 6px}
#view-map>*{min-width:0}