/* NORCOM NOC / Edição operacional 2026-10-08 — ajustes visuais sem alterar a coleta */
:root{--noc-ink:#091321;--noc-panel:#122337;--noc-stroke:#324b65;--noc-mint:#50e1b8;--noc-blue:#7fb7ff}
#shell .sidebar{background:linear-gradient(160deg,#0c1c2c,#091625 68%);border-right-color:#2c4559}
#shell .sidebar .brand{border-bottom:1px solid #20364b;margin-bottom:10px}
#shell .nav-button.selected{background:linear-gradient(110deg,#214942,#163847);box-shadow:inset 3px 0 #68ebbd}
#shell .topbar{background:#0b1a2ce8;backdrop-filter:blur(20px);border-bottom-color:#284056}
#shell main{max-width:1770px}
#shell .page-heading h1{letter-spacing:-.95px}
#shell .panel,#shell .device-card,#shell .kpi{box-shadow:0 12px 27px #020b1938}
#shell .ghost,#shell .filter-button{transition:background .18s,border-color .18s,transform .18s}
#shell button:active:not(:disabled){transform:translateY(1px)}
#olt{--olt-online:#62e2b3;--olt-offline:#ff8d99;--olt-warn:#ffc673;--olt-quiet:#9bb3c9}
#olt .olt-heading{margin-bottom:15px;padding:24px 25px;background:radial-gradient(ellipse at 95% 20%,#1e756b62,transparent 43%),linear-gradient(110deg,#1a3549,#11253b 75%);border:1px solid #345469;border-radius:21px;align-items:flex-start}
#olt .olt-heading h1{font-size:32px;letter-spacing:-1.2px}
#olt .olt-heading .muted{font-size:12px;max-width:560px}
#olt .olt-stamp{padding:10px 14px;background:#0c2634;border:1px solid #3b666a;border-radius:12px;text-align:left}
#olt .olt-stamp small{font-size:10px}
#olt .olt-hero-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
#olt .olt-hero-badges span{font-size:10px;padding:5px 9px;background:#0e3040;border:1px solid #396278;border-radius:7px;color:#b8dce8}
#olt .olt-hero-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#olt .olt-hero-actions button{border-color:#40667b;background:#1a3949}
#olt .olt-overview{gap:12px;margin:14px 0}
#olt .olt-overview>div{position:relative;min-width:0;overflow:hidden;padding:18px 19px;border-color:#304c61;border-radius:16px;background:linear-gradient(135deg,#192f43,#112337)}
#olt .olt-overview>div:before{position:absolute;content:'';left:0;top:0;bottom:0;width:3px;background:#638fb8}
#olt .olt-overview>div:nth-child(2):before{background:var(--olt-online)}
#olt .olt-overview>div:nth-child(3):before{background:var(--olt-offline)}
#olt .olt-overview>div:nth-child(4):before{background:var(--olt-warn)}
#olt .olt-overview strong{font-size:37px;letter-spacing:-1px;font-variant-numeric:tabular-nums;font-weight:700;margin-top:10px;line-height:1}
#olt .olt-overview span{font-size:11px;color:#b0c4d8}
#olt .olt-overview small{display:block;margin-top:9px;font-size:10px;color:#829eb8}
#olt .olt-pon-tabs{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:9px;background:#0e1d30;border:1px solid #2a425a;border-radius:15px;margin:14px 0}
#olt .olt-pon-tabs button{flex:1;min-width:95px;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:11px 14px;background:#182d43;border:1px solid #304963;color:#d1e0f1;border-radius:10px;font-size:11px;font-weight:650}
#olt .olt-pon-tabs button span{font-size:10px;color:#9fb6cf;background:#0e2136;padding:3px 6px;border-radius:6px}
#olt .olt-pon-tabs button[aria-pressed=true]{background:#1c5048;color:#9af4d3;border-color:#3f8675}
#olt .olt-pon-tabs button[aria-pressed=true] span{background:#113e36;color:#a5e9ce}
#olt .olt-toolbar{padding:16px;background:#102339;border:1px solid #2c4661;border-radius:15px;margin-bottom:10px}
#olt .olt-search{max-width:none}
#olt .olt-controls{display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px;border:1px solid #2e475e;border-radius:14px;background:#101f32;align-items:end}
#olt .olt-controls label{flex:1;min-width:142px}
#olt .olt-controls label select{width:100%}
#olt .olt-quality{background:#122638;border:1px solid #2c465c;padding:12px 15px;border-radius:12px;gap:9px;flex-wrap:wrap}
#olt .olt-quality span{font-size:11px}
#olt .olt-quality #olt-health[data-state=ok]{background:#173d38;border-color:#2c7164;color:#8ff4cc}
#olt .olt-quality #olt-health[data-state=warning]{background:#4c3429;border-color:#825b42;color:#ffd098}
#olt .olt-list-caption{margin:18px 0 12px;align-items:center}
#olt .olt-list-caption #olt-results{font-weight:650;color:#d5e5f3}
#olt .olt-layout-controls{display:flex;gap:5px;background:#0d1d30;border:1px solid #2e435a;border-radius:10px;padding:4px}
#olt .olt-layout-controls button{border:1px solid transparent;border-radius:7px;padding:8px 11px;min-height:32px;background:transparent;font-size:10px;color:#98b3cb}
#olt .olt-layout-controls button[aria-pressed=true]{background:#264d51;border-color:#427375;color:#c0ffe6}
#olt .pon-grid{gap:16px}
#olt .pon-card{border-color:#34526a;background:#101e31;border-radius:18px;box-shadow:0 15px 40px #02091840}
#olt .pon-card[data-attention=yes]{border-color:#604e56}
#olt .pon-heading{background:linear-gradient(120deg,#1a3449,#14283b);gap:15px}
#olt .pon-heading h2{font-size:25px}
#olt .pon-heading .eyebrow{font-size:9px;color:#91bbd7}
#olt .pon-count{background:#173c38;border:1px solid #396c62;color:#b0f2d5}
#olt .pon-sensors{background:#152a3e;padding-top:10px;gap:16px}
#olt .pon-diagnostics{background:#112236;color:#b0c5da}
#olt .pon-progress{height:5px;display:flex;background:#263a50;overflow:hidden}
#olt .pon-progress span{display:block;height:100%;background:var(--olt-online)}
#olt .pon-progress span.offline{background:var(--olt-offline)}
#olt .pon-progress span.unknown{background:var(--olt-warn)}
#olt .pon-onus{max-height:600px;scrollbar-color:#50728c transparent}
#olt .onu-row{transition:background .16s,border-color .16s;background:#10253a;border-left:3px solid #459b7e}
#olt .onu-row:hover{background:#193249}
#olt .onu-row.offline{background:#2b2332;border-left-color:var(--olt-offline)}
#olt .onu-row.offline:hover{background:#392738}
#olt .onu-top{margin-bottom:8px}
#olt .onu-number{font-size:10px;font-weight:800;letter-spacing:.8px;color:#a7c2d8}
#olt .onu-state{font-weight:700;font-size:10px;padding:4px 8px;border-radius:7px;background:#153c31;color:#93f2c7}
#olt .onu-state.offline{background:#492935;color:#ffc0c9}
#olt .onu-state.unknown{background:#493d26;color:#ffe1a2}
#olt .onu-description{font-size:13px;font-weight:650}
#olt .onu-down-reason{color:#9fb7cd;font-size:10px}
#olt .onu-down-reason b{color:#d7e6f4}
#olt .onu-rx{font-size:10px}
#olt .onu-rx strong{font-size:14px}
#olt .onu-open{background:#19384b;border-color:#31566a}
#olt .onu-sublabels{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:7px}
#olt .onu-subchip{display:inline-flex;border:1px solid #34516a;border-radius:6px;padding:3px 6px;font-size:9px;color:#9ec0d5;background:#152e41}
#olt .onu-subchip.blocked{background:#4b3424;color:#f5c793;border-color:#765539}
#olt .onu-subchip.clear{background:#1d433a;color:#9df0c7;border-color:#2f6556}
#olt .pon-footer{background:#12263a}
#olt .olt-footnote{margin-top:14px}
#olt .pon-grid.olt-compact .pon-onus{max-height:610px}
#olt .pon-grid.olt-compact .onu-row{position:relative;padding:11px 13px;display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.65fr);column-gap:12px;align-items:center}
#olt .pon-grid.olt-compact .onu-top{grid-column:1;grid-row:1;justify-content:flex-start}
#olt .pon-grid.olt-compact .onu-description{grid-column:1;grid-row:2}
#olt .pon-grid.olt-compact .onu-down-reason{grid-column:1/-1;grid-row:4;margin-top:3px}
#olt .pon-grid.olt-compact .onu-sublabels{grid-column:1/-1;grid-row:3;margin-top:7px}
#olt .pon-grid.olt-compact .onu-reading{grid-column:2;grid-row:1/3;margin:0;display:block;text-align:right}
#olt .pon-grid.olt-compact .onu-reading .onu-rx{justify-content:flex-end}
#olt .pon-grid.olt-compact .onu-details{display:none}
#olt .pon-grid.olt-compact .onu-open{grid-column:2;grid-row:3/5;justify-self:end;white-space:nowrap}
#olt .pon-grid.olt-compact .onu-state{font-size:9px;padding:3px 5px}
#olt .pon-grid.olt-compact .onu-down-reason:empty{display:none}
#olt .fiber-docs{border-color:#345269}
@media(min-width:1500px){#olt .pon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px) and (max-width:1150px){#olt .pon-grid{grid-template-columns:1fr}}
@media(max-width:800px){
 #shell main{padding-bottom:105px}
 #olt .olt-heading{padding:18px 17px;border-radius:18px;margin-bottom:10px}
 #olt .olt-heading h1{font-size:28px}
 #olt .olt-stamp{display:block;padding:6px 9px;font-size:9px;letter-spacing:0}
 #olt .olt-stamp small{font-size:9px}
 #olt .olt-heading{display:block}
 #olt .olt-hero-badges{margin-top:10px}
 #olt .olt-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #olt .olt-overview>div{padding:15px;border-radius:14px;min-height:105px}
 #olt .olt-overview strong{font-size:32px}
 #olt .olt-overview small{font-size:9px}
 #olt .olt-pon-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px;gap:6px;position:sticky;top:63px;z-index:14;background:#0b1d30eb;backdrop-filter:blur(15px)}
 #olt .olt-pon-tabs button{min-width:88px;flex:none;min-height:42px;padding:9px}
 #olt .olt-toolbar{padding:11px;display:grid;grid-template-columns:1fr auto;align-items:center}
 #olt .olt-search{grid-column:1/-1;min-width:0}
 #olt .olt-toolbar .filter-button{font-size:10px}
 #olt .olt-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:9px}
 #olt .olt-controls label{min-width:0}
 #olt .olt-controls #olt-export{grid-column:1/-1}
 #olt .olt-quality{gap:8px;padding:11px}
 #olt .olt-quality small{flex-basis:100%}
 #olt .olt-list-caption{flex-wrap:wrap;gap:8px}
 #olt .olt-list-caption #olt-results{width:100%}
 #olt .pon-grid{grid-template-columns:1fr}
 #olt .pon-heading h2{font-size:23px}
 #olt .pon-count{font-size:9px}
 #olt .pon-sensors{font-size:10px}
 #olt .pon-onus{max-height:none}
 #olt .pon-grid.olt-compact .pon-onus{max-height:none}
 #olt .pon-grid.olt-compact .onu-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:12px 11px}
 #olt .pon-grid.olt-compact .onu-open{font-size:9px;padding:7px 8px;min-height:35px}
 #olt .pon-grid.olt-compact .onu-rx{font-size:9px}
 #olt .pon-grid.olt-compact .onu-rx strong{font-size:12px}
 #olt .pon-grid.olt-compact .onu-description{font-size:12px}
 #olt .pon-grid.olt-compact .onu-down-reason{font-size:10px}
}
@media(max-width:360px){#olt .pon-grid.olt-compact .onu-row{grid-template-columns:minmax(0,1fr) auto}#olt .pon-grid.olt-compact .onu-open{max-width:120px;white-space:normal}}
@media(prefers-reduced-motion:reduce){#olt *,#shell .ghost{transition:none!important}}
