/* ACTIVE-MONITOR — tema escuro por padrão (NOC), claro conforme o sistema. Sem fontes externas. */
:root{
  --bg:#0e1217; --surf:#151b23; --surf2:#1c242e; --line:#26303c;
  --fg:#e6ebf1; --mut:#8b98a8; --accent:#5aa9ff;
  --crit:#ff6161; --warn:#f2b24a; --ok:#3fb97c;
  --crit-bg:#3a1a1d; --warn-bg:#352a14; --ok-bg:#12301f;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f3f5f8; --surf:#ffffff; --surf2:#eef1f5; --line:#d9dfe7; --fg:#131a22; --mut:#5c6b7c; --accent:#1c6fd1;
  --crit:#d6332f; --warn:#a86b00; --ok:#1f8a55; --crit-bg:#fde8e7; --warn-bg:#fcf0d6; --ok-bg:#e1f4ea; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#f3f5f8; --surf:#ffffff; --surf2:#eef1f5; --line:#d9dfe7; --fg:#131a22; --mut:#5c6b7c; --accent:#1c6fd1;
  --crit:#d6332f; --warn:#a86b00; --ok:#1f8a55; --crit-bg:#fde8e7; --warn-bg:#fcf0d6; --ok-bg:#e1f4ea; color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 var(--sans)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.boot{color:var(--mut);padding:40px 0;text-align:center}
h1{font-size:20px;margin:0 0 4px}h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 10px;font-weight:600}
h3{margin:0 0 6px;font-size:16px}
.sub{color:var(--mut);font-size:13px}.mut{color:var(--mut)}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.right{text-align:right}.nowrap{white-space:nowrap}

/* estrutura: menu lateral + coluna de conteúdo */
:root{--side-w:236px;--side-mini:60px}
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.app.mini{grid-template-columns:var(--side-mini) minmax(0,1fr)}
.col{min-width:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 40px 20px}
main{padding-top:18px;max-width:1320px}
.ico{flex:none;vertical-align:-3px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;letter-spacing:.04em;font-size:15px;color:var(--fg);text-decoration:none!important;white-space:nowrap}.brand b{color:var(--accent)}

.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--surf);border-right:1px solid var(--line);z-index:30;overflow:hidden}
.side-head{padding:16px 16px 12px;border-bottom:1px solid var(--line);min-height:52px;display:flex;align-items:center}
.side-nav{flex:1;overflow-y:auto;padding:8px 8px 12px;scrollbar-width:thin}
.side-foot{border-top:1px solid var(--line);padding:8px}
.nav-group{margin-bottom:6px}
.nav-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;color:var(--mut);padding:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-align:left}
.nav-head:hover{color:var(--fg)}
.nav-head .lbl{flex:1}.nav-head .chev{transition:transform .15s}
.nav-head[aria-expanded=false] .chev{transform:rotate(-90deg)}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:7px;color:var(--fg);background:none;border:0;cursor:pointer;font-weight:500;text-decoration:none!important;text-align:left;white-space:nowrap}
.nav-item:hover{background:var(--surf2)}
.nav-item .ico{color:var(--mut)}
.nav-item[aria-current=page]{background:var(--surf2);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.nav-item[aria-current=page] .ico{color:var(--accent)}
.nav-top{margin-bottom:4px}
.side :focus-visible{outline-offset:-2px}
.app.mini .side-head{justify-content:center;padding:16px 0}
.app.mini .brand-t{display:none}
.app.mini .lbl,.app.mini .chev{display:none}
.app.mini .nav-head{justify-content:center;padding:6px 0;border-top:1px solid var(--line);margin-top:4px}
.app.mini .nav-head .lbl{display:none}
.app.mini .nav-head .ico{display:none}.app.mini .nav-head::after{content:"";width:0}
.app.mini .nav-item{justify-content:center;padding:10px 0}
.app.mini .nav-list[hidden]{display:block}
.app.mini .nav-group:first-child .nav-head{border-top:0;margin-top:0}
.side-backdrop{display:none}

/* barra superior */
header.top{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;flex-wrap:wrap}
.sp{flex:1}
.search input{width:min(260px,40vw)}
.clock{font-family:var(--mono);color:var(--mut);font-size:12px;margin-right:4px}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;min-height:34px;padding:0 8px;border-radius:7px;border:1px solid transparent;background:none;color:var(--mut);cursor:pointer}
.ib:hover{background:var(--surf2);color:var(--fg)}.ib[disabled]{opacity:.35;cursor:default}
.ib[aria-pressed=true].star{color:var(--warn)}.ib[aria-pressed=true].star svg{fill:currentColor}
.who{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;color:var(--fg);background:var(--surf);border:1px solid var(--line);font-weight:500;text-decoration:none!important;max-width:200px}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navtoggle{display:none}
body.tv .side,body.tv .search,body.tv .navtoggle,body.tv .who{display:none}
body.tv .app{grid-template-columns:minmax(0,1fr)}
body.tv{font-size:16px}

/* Meu painel */
.launchers{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.launch-wrap{position:relative}
.launch{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 16px;background:var(--surf);border:1px solid var(--line);border-radius:10px;color:var(--fg);text-decoration:none!important;transition:border-color .12s,transform .12s}
.launch:hover{border-color:var(--accent);transform:translateY(-1px)}
.launch .ico{color:var(--accent);margin-bottom:4px}
.launch b{font-size:15px}
.launch-tools{position:absolute;top:6px;right:6px;display:flex;gap:2px;background:var(--surf2);border:1px solid var(--line);border-radius:7px;padding:2px}

@media(max-width:900px){
  .app,.app.mini{grid-template-columns:minmax(0,1fr)}
  .col{padding-left:14px}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(280px,84vw);transform:translateX(-102%);transition:transform .18s;box-shadow:0 0 30px rgba(0,0,0,.4)}
  body.nav-open .side{transform:none}
  body.nav-open .side-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
  .navtoggle{display:inline-flex}
  .app.mini .lbl{display:inline}.app.mini .chev{display:inline}.app.mini .nav-item{justify-content:flex-start;padding:9px 10px}.app.mini .brand-t{display:inline}
  .app.mini .nav-head{justify-content:flex-start;border-top:0}.app.mini .nav-head .lbl{display:inline}
  .side-foot{display:none}
  .clock,.who span{display:none}
}
@media(prefers-reduced-motion:reduce){.side,.launch,.nav-head .chev{transition:none}}

/* controles */
button,input,select,textarea{font:inherit;color:var(--fg)}
input,select,textarea{background:var(--surf);border:1px solid var(--line);border-radius:6px;padding:7px 10px;min-height:36px}
textarea{width:100%;min-height:72px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.b{font-weight:600;padding:7px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surf2);cursor:pointer;min-height:36px}
button.b:hover{filter:brightness(1.12)}button.b.p{background:var(--accent);border-color:var(--accent);color:#06121f}
button.b.sm{padding:3px 9px;min-height:28px;font-size:12px}
button.b[disabled]{opacity:.5;cursor:default}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;background:var(--surf);padding:6px 12px;cursor:pointer;min-height:34px}
.seg button[aria-pressed=true]{background:var(--surf2);color:var(--accent);font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.field label{font-size:12px;color:var(--mut)}
.err{color:var(--crit);margin:8px 0}.okmsg{color:var(--ok);margin:8px 0}

/* cartões */
.panel{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kpi span{display:block;color:var(--mut);font-size:12px}
.kpi strong{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi.c strong{color:var(--crit)}.kpi.w strong{color:var(--warn)}.kpi.o strong{color:var(--ok)}
.grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
@media(max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.p-crit{background:var(--crit-bg);color:var(--crit)}.p-warn{background:var(--warn-bg);color:var(--warn)}.p-ok{background:var(--ok-bg);color:var(--ok)}.p-mut{background:var(--surf2);color:var(--mut)}

/* incidentes */
.list{display:flex;flex-direction:column;gap:8px}
.inc{display:grid;grid-template-columns:5px 1fr auto;gap:12px;align-items:center;background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:10px 12px 10px 0}
.inc>i{align-self:stretch;border-radius:8px 0 0 8px}.inc.crit>i{background:var(--crit)}.inc.warn>i{background:var(--warn)}.inc.ok>i{background:var(--ok)}
.inc .t{font-weight:600}.inc .s{color:var(--mut);font-size:12px;margin-top:2px}
.inc .r{text-align:right;font-family:var(--mono);font-size:12px;color:var(--mut)}
.inc.acked{opacity:.75}

/* barras por OLT */
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:minmax(120px,210px) 1fr 108px;gap:10px;align-items:center;font-size:13px}
.bar .track{height:10px;background:var(--surf2);border-radius:5px;overflow:hidden}
.bar .track b{display:block;height:100%;border-radius:5px;min-width:2px}
.bar em{font-style:normal;text-align:right;font-family:var(--mono);font-size:12px}
.b-crit{background:var(--crit)}.b-warn{background:var(--warn)}.b-ok{background:var(--ok)}.b-mut{background:var(--mut)}
.stack{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surf2);min-width:90px}
.stack b{display:block;height:100%}
.s-ok{background:var(--ok)}.s-warn{background:var(--warn)}.s-crit{background:var(--crit)}.s-mut{background:var(--mut)}

/* ladrilhos de PON */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tile{display:block;color:var(--fg);background:var(--surf);border:1px solid var(--line);border-left-width:5px;border-radius:6px;padding:7px 9px;font-size:12px}
.tile:hover{text-decoration:none;border-color:var(--mut)}
.tile span{display:block}
.tile b{font-family:var(--mono);font-size:14px}
.tile .sec{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.ok{border-left-color:var(--ok)}.tile.warn{border-left-color:var(--warn)}.tile.crit{border-left-color:var(--crit);background:var(--crit-bg)}.tile.mut{border-left-color:var(--line)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:8px 0}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* tabelas */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--surf2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* gráficos */
.chart{position:relative}.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .ax{fill:var(--mut);font-size:11px;font-family:var(--mono)}
.chart .ref{stroke-width:1;stroke-dasharray:5 4}.chart .cur{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.chart .hit{fill:transparent}
.chart.empty{display:flex;align-items:center;justify-content:center;color:var(--mut);background:var(--surf2);border-radius:6px}
.tip{position:absolute;top:6px;background:var(--surf);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px;pointer-events:none;min-width:150px;box-shadow:0 4px 14px #0006}
.tip .tt{color:var(--mut);margin-bottom:3px}.tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.lg{width:100%;font-size:12px}.lg td,.lg th{padding:4px 8px}
.lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}

/* linha do tempo */
.tl{list-style:none;margin:0;padding:0;font-size:13px}
.tl li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.tl time{font-family:var(--mono);color:var(--mut);min-width:96px}
.note{padding:10px 0;border-bottom:1px solid var(--line)}.note .meta{color:var(--mut);font-size:12px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px}.kv dt{color:var(--mut)}.kv dd{margin:0}
.crumbs{color:var(--mut);font-size:13px;margin-bottom:10px}
.empty-msg{color:var(--mut);padding:18px;text-align:center}
.logo{flex:none;border-radius:8px;box-shadow:0 1px 6px rgba(29,78,216,.35)}.login-logo{display:flex;justify-content:center;margin-bottom:14px}.login-logo .logo{border-radius:16px;box-shadow:0 4px 18px rgba(29,78,216,.4)}.login h1{text-align:center}.login .sub{text-align:center}
.login{max-width:392px;margin:12vh auto 0;padding:0 16px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--surf2);border:1px solid var(--line);padding:9px 16px;border-radius:8px;z-index:20}
@media(max-width:640px){.bar{grid-template-columns:110px 1fr 90px}.kv{grid-template-columns:110px 1fr}header.top{position:static}}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.chk input{margin-top:3px;width:18px;height:18px}
select,input[type=time]{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--fg);min-height:38px}

.alarm-det{background:var(--surf);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:10px 14px;margin-top:-4px}
.alarm-det[hidden]{display:none}
.alarm .inc .r{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.seg button .mut{font-family:var(--mono);margin-left:4px}
.chk.one{align-items:center}.chk.one input{margin-top:0}
.donut{width:150px;height:150px;flex:none}.donut circle{transition:opacity .15s}.donut circle:hover{opacity:.8}
.dn-ok{stroke:var(--ok)}.dn-warn{stroke:var(--warn)}.dn-crit{stroke:var(--crit)}.dn-mut{stroke:var(--mut)}
.dn-big{font:600 20px var(--mono);fill:var(--fg)}.dn-sub{font-size:9px;fill:var(--mut)}
.dist{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.dist ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.dist li{display:flex;gap:8px;align-items:center}.dist li b{font-family:var(--mono);margin-left:auto;padding-left:14px}
.dist li i{width:10px;height:10px;border-radius:2px;display:inline-block}
.ostack{display:grid;grid-template-columns:minmax(110px,190px) 1fr 70px;gap:10px;align-items:center;font-size:13px;margin:7px 0}
.ostack em{font-style:normal;font-family:var(--mono);font-size:12px;text-align:right}

/* Árvore da rede */
.tree{padding:8px}.tree ul{list-style:none;margin:0;padding:0}.tree .kids .kids{margin-left:18px;border-left:1px dashed var(--line);padding-left:8px}
.tn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:8px;color:var(--fg);cursor:pointer;font:inherit}
.tn:hover{background:var(--surf2)}.tn .sp{flex:1}.tn .car{display:inline-flex;transition:transform .15s;color:var(--mut)}.tn[aria-expanded="true"] .car{transform:rotate(0)}.tn[aria-expanded="false"] .car{transform:rotate(-90deg)}
.chip{display:inline-block;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--surf2);border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.mtag{font-size:12px;font-weight:600;padding:1px 8px;border-radius:6px;background:rgba(90,169,255,.14);color:var(--accent);white-space:nowrap}
.tree .leaf{padding:6px 8px}.tree.only-bad [data-ok]{display:none}
@media(max-width:640px){.tn{gap:6px}.tn .sp{display:none}}

/* Janelas (dialog) */
dialog{background:var(--surf);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:18px;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.55)}
.chk input{flex:none}

/* Saúde da coleta ao vivo */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;animation:pulse 1.4s ease-in-out infinite}.dot.sm{width:6px;height:6px}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,199,89,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(52,199,89,0)}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
.p-live{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}.p-info{background:rgba(90,169,255,.16);color:var(--accent)}
tr.live{box-shadow:inset 3px 0 0 var(--ok);background:rgba(52,199,89,.06)}tr.bad{box-shadow:inset 3px 0 0 var(--crit)}tr.paused{box-shadow:inset 3px 0 0 var(--accent);opacity:.85}
.banner{padding:10px 14px;border-radius:8px;border:1px solid var(--line);margin-top:12px;font-size:14px}.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}.banner.crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit)}
[hidden]{display:none!important}
td.num{white-space:nowrap}