/* =======================================================================
   RxMax Speed - design base (portado do mockup do Rafael)
   Tokens, Inter + JetBrains Mono, topbar, cards, paineis, badges, filtros,
   tabelas, formularios e alertas.
   ======================================================================= */
:root{
  color-scheme: light;
  /* ---- marca (iguais nos 2 temas) ---- */
  --navy:#261134; --navy-soft:#3a2350; --orange:#F4700F; --orange-soft:#fff1e6;
  --green:#1f9d57; --green-soft:#e7f6ee; --teal:#1aa5a0; --red:#e0444a;
  --red-soft:#fdecec; --amber:#f4a24a;
  /* ---- superfícies e texto (mudam no tema) ---- */
  --bg:#f4f5f7; --card:#ffffff; --line:#e7e6ea; --line-2:#f0eff2;
  --soft:#fbfafd;
  --ink:#261134; --muted:#6b6577; --muted-2:#928d9d;
  /* ---- controles/superfícies auxiliares (tokenizados p/ tema) ---- */
  --input-bg:#fcfcfd; --chip-navy:#efe9f4; --chip-std:#eef1f4;
  --track:#ddd8e4; --hover:#faf9fb; --knob:#ffffff;
  --scroll:#d9d4dd; --scroll-h:#c9c3cf;
  --code-bg:#1b1130; --code-ink:#e7dcf5;
  --blue:#2b7de9; --blue-soft:#e7f0fc;
  --on-accent:#ffffff; --navy-bg:#261134;
  --sb-bg:#ffffff; --sb-ink:#261134; --sb-dim:#6b6577; --sb-hover:#f4f1f7; --sb-active:#F4700F; --sb-line:#eae7ef;
  /* ---- escala / raios / sombra ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(38,17,52,.04), 0 6px 20px rgba(38,17,52,.05);
  --shadow-sm:0 1px 2px rgba(38,17,52,.05);
}
/* ============ TEMA ESCURO ============ */
[data-theme="dark"]{
  color-scheme: dark;
  --bg:#141019; --card:#1e1a27; --soft:#26212f; --line:#332d40; --line-2:#2a2536;
  --ink:#ece8f2; --muted:#a79fb6; --muted-2:#7f7791;
  --navy:#d9d2e6;                 /* navy é usado como TEXTO em vários lugares -> clareia */
  --orange-soft:#3a2510; --green-soft:#13301f; --red-soft:#38191b; --navy-soft:#2c2640;
  --input-bg:#221d2e; --chip-navy:#2c2640; --chip-std:#272233;
  --track:#3a3348; --hover:#241f30; --knob:#e7e2f0;
  --scroll:#3a3348; --scroll-h:#4a4359;
  --blue:#5b9bf0; --blue-soft:#17283e;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --navy-bg:#2c2640;
  --sb-bg:#17141f; --sb-ink:#ece8f2; --sb-dim:#948ca6; --sb-hover:rgba(255,255,255,.06); --sb-active:#F4700F; --sb-line:#2a2536;
}
[data-theme="dark"] body{color:var(--ink)}
[data-theme="dark"] .logo{box-shadow:0 4px 12px rgba(244,112,15,.22)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace}
a{color:var(--orange);text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:22px 24px 60px}

/* ---------- polish global (v3.47) ---------- */
::selection{background:var(--orange-soft)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
*::-webkit-scrollbar-track{background:transparent}
.wrap{animation:pagein .25s ease}
@keyframes pagein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.wrap{animation:none}}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:13px;min-width:0;color:var(--ink)}
.logo{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,#ff8a2a,var(--orange) 55%,#e05f00);border-radius:13px;
  box-shadow:0 4px 12px rgba(244,112,15,.32)}
.logo svg{width:30px;height:30px;overflow:visible}
.logo-ekg .ekg-base{opacity:.28}
.logo-ekg .ekg-scan{stroke-dasharray:100;animation:rxdraw 2.4s ease-in-out infinite}
@keyframes rxdraw{0%{stroke-dashoffset:100;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:0}81%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:100;opacity:1}}
@media(prefers-reduced-motion:reduce){.logo-ekg .ekg-scan{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}
.brand h1{font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.1}
.brand h1 .accent{color:var(--orange)}
.brand p{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:1px}

.actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.top-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.top-right .actions{margin-left:0}
.sync-stamp{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.1px;white-space:nowrap;background:var(--soft,#fbfafd);border:1px solid var(--line-2,#f0eff2);border-radius:999px;padding:4px 11px}
.sync-stamp svg{width:13px;height:13px;opacity:.85;color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;
  font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);
  padding:8px 13px;border-radius:10px;cursor:pointer;transition:.15s;white-space:nowrap;text-decoration:none}
.btn svg{width:15px;height:15px;opacity:.75}
.btn:hover{border-color:#d6d4db;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.on{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.on svg{opacity:1}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(244,112,15,.3)}
.btn.primary svg{opacity:1}
.btn.primary:hover{background:#e0640a;border-color:#e0640a}
.btn.danger{background:var(--card);border-color:var(--red-soft);color:var(--red)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--line-2);color:var(--ink);box-shadow:none}
.uname{font-size:12.5px;color:var(--muted);font-weight:600;padding:0 4px}
.sep{width:1px;height:24px;background:var(--line);margin:0 2px}

/* ---------- STAT CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
a.card{display:block;text-decoration:none;color:inherit}
.card.clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.card.clickable:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(38,17,52,.12);border-color:#d9cfe4}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--navy))}
.card .head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card .label{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.1px}
.card .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.card .ic svg{width:18px;height:18px}
.card .value{font-size:29px;font-weight:800;letter-spacing:-1px;margin:9px 0 4px;line-height:1}
.card .sub{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12.5px;color:var(--muted-2);font-weight:500;min-height:20px}
.card .sub b{color:var(--muted);font-weight:600}
.c-total{--accent:var(--navy)} .c-total .ic{background:var(--chip-navy);color:var(--navy)}
.c-off{--accent:var(--red)} .c-off .ic{background:var(--red-soft);color:var(--red)} .c-off .value{color:var(--red)}
.c-warn{--accent:var(--orange)} .c-warn .ic{background:var(--orange-soft);color:var(--orange)} .c-warn .value{color:var(--orange)}
.c-on{--accent:var(--green)} .c-on .ic{background:var(--green-soft);color:var(--green)} .c-on .value{color:var(--green)}

/* ---------- PANELS ---------- */
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:16px}
.grid-b{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:16px}
.panel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;margin-bottom:16px}
.panel .ph{display:flex;align-items:center;gap:9px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.panel .ph .pic{width:30px;height:30px;padding:6px;background:var(--orange-soft);border-radius:9px;color:var(--orange);flex:0 0 auto}
.panel .ph h3{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.panel .ph .tag{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--line-2);padding:3px 9px;border-radius:999px}
.panel .ph .ph-act{margin-left:auto;display:flex;gap:8px}
.panel .pb{padding:18px 20px;flex:1}
.muted{color:var(--muted)} .muted-2{color:var(--muted-2)}

/* ---------- TABELA ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;padding:11px 14px;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--soft)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--hover)}
.table .nm{font-weight:700;letter-spacing:-.1px}
/* lista de ONUs mais compacta — cabe melhor e tira a rolagem lateral */
.onus-tb th{padding:8px 9px}
.onus-tb td{padding:7px 9px;font-size:12.5px}
.onus-tb .btn-view{padding:5px 11px}
.onus-tb .s{font-size:11.5px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.empty{padding:34px 20px;text-align:center;color:var(--muted-2);font-size:13px}

/* badges / pills */
.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;color:#fff;white-space:nowrap}
.badge.b-red{background:var(--red)} .badge.b-orange{background:var(--orange)} .badge.b-green{background:var(--green)}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--line-2);color:var(--navy)}
.pill.navy{background:var(--chip-navy);color:var(--navy)}
.pill.pill-std{background:var(--chip-std);color:var(--muted)}
.pill.pill-user{background:var(--green-soft);color:var(--green)}
/* ===== seções de configuração + switches + chips (v3.51) ===== */
.cfg-sec{background:var(--soft);border:1px solid var(--line-2);border-radius:12px;padding:15px 16px;margin-bottom:12px}
.cfg-sec-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.cfg-sec-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--line-2);color:var(--muted)}
.cfg-sec-ic svg{width:18px;height:18px}
.cfg-sec-t{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.cfg-sec-d{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.unit-wrap{position:relative;display:block;max-width:180px}
.unit-wrap input{width:100%;padding-right:52px}
.unit-wrap i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted-2);pointer-events:none}
.sw{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:999px;background:var(--track);position:relative;cursor:pointer;transition:background .15s;flex:none;margin:0;border:0;outline:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--knob);transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.sw:checked{background:var(--green)}
.sw:checked::after{left:21px}
.swrow{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink)}
.chip-check{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:background .12s,border-color .12s,color .12s}
.chip-check input{accent-color:var(--orange);margin:0}
.chip-check:has(input:checked){background:var(--orange-soft);border-color:#f2c9a6;color:var(--orange)}
.dotl{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.steps{display:flex;flex-direction:column;gap:9px}
.step{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--ink)}
.step i{width:20px;height:20px;flex:none;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:center;margin-top:1px}
.step code{background:var(--card);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;font-size:11.5px}

/* mini-chip com bolinha colorida (sub-linhas de cards e afins) */
.mchip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;background:var(--soft);color:var(--muted);border:1px solid var(--line-2);border-radius:7px;padding:2px 8px;white-space:nowrap}
.mchip i{width:7px;height:7px;border-radius:50%;flex:none}
/* indicador de status estilo toggle switch (Online/Offline) */
.tgl{display:inline-flex;align-items:center;justify-content:space-between;gap:7px;
  width:80px;height:22px;padding:0 5px;border-radius:999px;box-sizing:border-box;
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;vertical-align:middle;user-select:none;line-height:1}
.tgl i{width:14px;height:14px;border-radius:50%;background:var(--card);flex:0 0 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.22)}
.tgl.on{background:var(--green)}
.tgl.off{background:var(--red)}
/* globo de status (verde=online, vermelho=offline) */
.globo{vertical-align:middle;display:inline-block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.globo.on{color:var(--green)}
.globo.off{color:var(--red)}
/* ícones de status em azulejo circular (lista de ONUs) */
.st{vertical-align:middle;display:inline-block}
svg.st{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--soft);filter:none}
.st-on{color:var(--green)}
svg.st-on{background:var(--green-soft)}
.st-off{color:var(--muted-2)}
.st-plug{color:#2563eb}
svg.st-plug{background:#e7eefc}
.st-los{color:var(--red)}
svg.st-los{background:var(--red-soft)}
.st-ban{color:var(--muted-2)}
/* LED de status com anel suave (tela de OLTs) */
.stled{display:inline-block;width:10px;height:10px;border-radius:50%;background:#cbd5e1;box-shadow:0 0 0 3px #eef0f3;vertical-align:middle;transition:background .2s,box-shadow .2s}
.stled.tst{background:var(--amber);box-shadow:0 0 0 3px #fdeccd}
.stled.ok{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);animation:ledpulse 2.4s ease-in-out infinite}
.stled.err{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
@keyframes ledpulse{50%{box-shadow:0 0 0 6px rgba(31,157,87,.10)}}
@media(prefers-reduced-motion:reduce){.stled.ok{animation:none}}
.sigwrap{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sigbars{vertical-align:middle;flex:0 0 auto}
.sigwrap.ok .sigbars{color:var(--green)}
.sigwrap.warn .sigbars{color:var(--orange)}
.sigwrap.crit .sigbars{color:var(--red)}
.st{font-size:12px;font-weight:600}
.st.ok{color:var(--green)} .st.err{color:var(--red)} .st.run{color:var(--muted)}

/* ---------- FORM ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);outline:none;transition:.15s}
.field input:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,112,15,.12)}
.form-actions{display:flex;gap:10px;margin-top:18px;align-items:center}

/* alerts */
.alert{padding:12px 16px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.alert.ok{background:var(--green-soft);color:var(--green);box-shadow:inset 3px 0 0 var(--green)}
.alert.err{background:var(--red-soft);color:var(--red);box-shadow:inset 3px 0 0 var(--red)}

/* filtros (dashboard / busca) */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 20px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end;margin-bottom:16px}

.foot{margin-top:26px;text-align:center;font-size:11.5px;color:var(--muted-2)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-b{grid-template-columns:1fr}
  .filters{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .wrap{padding:16px 14px 48px}
  .cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .actions{width:100%}
  .brand h1{font-size:18px}
}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px}
.login-box{background:var(--card);border-radius:18px;padding:34px 32px;width:350px;border:1px solid var(--line);box-shadow:0 10px 40px rgba(38,17,52,.10)}
.login-box .logo{width:50px;height:50px;margin:0 auto 2px}
.login-box .logo svg{width:46px;height:46px}
.login-box h1{text-align:center;color:var(--navy);font-size:21px;font-weight:800;letter-spacing:-.3px}
.login-box h1 .accent{color:var(--orange)}
.login-box .sub{text-align:center;color:var(--muted);font-size:12.5px;margin:3px 0 22px}
.login-box label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin:14px 0 6px}
.login-box input{width:100%;font-family:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--input-bg);outline:none;transition:.15s}
.login-box input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,112,15,.12)}
.login-box .btn.primary{width:100%;justify-content:center;margin-top:20px;padding:12px}
.login-box .err{background:var(--red-soft);color:var(--red);padding:10px 12px;border-radius:9px;
  font-size:12.5px;font-weight:600;margin-top:14px;text-align:center}

/* ===== Lista de Configurações ===== */
.cfg-list{display:flex;flex-direction:column;gap:10px}
.cfg-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--card);text-decoration:none;color:inherit;transition:all .12s ease}
.cfg-row:not(.disabled):hover{border-color:#d9cfe4;box-shadow:0 8px 22px rgba(38,17,52,.10);transform:translateY(-1px)}
.cfg-ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--chip-navy);color:var(--navy)}
.cfg-ic svg{width:21px;height:21px}
.cfg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cfg-txt b{font-size:15px;font-weight:700;color:var(--navy)}
.cfg-txt span{font-size:12.5px;color:var(--muted-2)}
.cfg-txt i{color:var(--orange);font-style:normal;font-weight:600}
.cfg-meta{font-size:12px;font-weight:600;color:var(--muted);background:var(--chip-navy);
  padding:5px 10px;border-radius:20px;white-space:nowrap}
.cfg-arr{width:18px;height:18px;color:var(--muted-2);flex:0 0 auto}
.cfg-row.disabled{opacity:.6;cursor:default}

/* ===== abas (ONUs) ===== */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs .tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line)}
.tabs .tab:hover{color:var(--ink);border-color:var(--muted-2)}
.tabs .tab.on{background:var(--orange);border-color:var(--orange);color:#fff}
.tabs .tab .tc{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;
  background:var(--line-2);color:var(--muted)}
.tabs .tab.on .tc{background:rgba(255,255,255,.18);color:#fff}

/* ===== barra de busca ===== */
.searchbar{display:flex;align-items:center;gap:10px;padding:10px 18px;margin-bottom:4px;
  border:1px solid var(--line);border-radius:999px;background:var(--input-bg);transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,112,15,.10)}
.searchbar svg{width:17px;height:17px;color:var(--muted-2);flex:0 0 auto}
.searchbar input{flex:1;border:0;background:transparent;font-size:14px;color:var(--ink);outline:none}
.searchbar input::placeholder{color:var(--muted-2)}
.searchbar #cnt{font-size:12.5px;font-weight:600;white-space:nowrap}

/* ===== sinal colorido + motivo ===== */
.sig{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:7px}
.tchip{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:7px}
.tchip.ok{background:var(--green-soft);color:var(--green)}
.tchip.warn{background:var(--orange-soft);color:var(--orange)}
.tchip.crit{background:var(--red-soft);color:var(--red)}
.sig.ok{background:var(--green-soft);color:var(--green)}
.sig.warn{background:var(--orange-soft);color:var(--orange)}
.sig.crit{background:var(--red-soft);color:var(--red)}
.table .s{font-size:12px}

/* ===== grid principal (gráfico + OLTs) ===== */
.grid-main{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:880px){.grid-main{grid-template-columns:1fr}}

/* ===== gráfico Status da rede ===== */
.netchart{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:12px;font-weight:600;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;background:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px}

/* status on/off (usado nos cards de OLT do dashboard) */
.d-on{color:var(--green)} .d-off{color:var(--red)}

/* badge âmbar + rodapé info */
.badge.b-amber{background:var(--amber)}
.foot-info{text-align:right;font-size:12px;color:var(--muted-2);margin:-4px 2px 14px;font-weight:500}

/* ===== hub de configurações: grupos / form geral ===== */
.cfg-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);
  margin:18px 2px 8px}
.cfg-group:first-child{margin-top:4px}
.back{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.back:hover{color:var(--ink)}
.back svg{width:15px;height:15px}
.subhead{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.1px}

/* ===== checkboxes (form) ===== */
.chk-row{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}

/* ---------- Perfis de velocidade ---------- */
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--orange-soft);color:var(--orange)}
.pill.red{background:var(--red-soft);color:var(--red)}
.radio-row{display:flex;gap:8px}
.radio{display:flex;align-items:center;gap:7px;flex:1;cursor:pointer;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--card);transition:border-color .12s,background .12s}
.radio:hover{border-color:var(--orange)}
.radio:has(input:checked){border-color:var(--orange);background:var(--orange-soft);color:var(--orange)}
.radio input{accent-color:var(--orange);width:16px;height:16px;margin:0}
.field .hint{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--muted)}
details.adv{margin-top:6px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);padding:0 14px}
details.adv>summary{cursor:pointer;list-style:none;padding:11px 0;font-size:13px;font-weight:700;color:var(--orange);user-select:none;display:flex;align-items:center;gap:7px}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
details.adv[open]>summary::before{transform:rotate(45deg)}
details.adv[open]{padding-bottom:14px}
.note-box{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;line-height:1.85;color:var(--muted)}
.note-box .mono{color:var(--ink)}

/* barra de importar perfis */
.imp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.imp-bar .muted-2{font-size:12px}

/* ---------- Provisionar ---------- */
.prov-card{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-top:14px;background:var(--bg)}
.prov-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.prov-head .mono{font-size:14px}
.prev-meta{font-size:13px;color:var(--ink);line-height:1.7;margin-bottom:12px}
.cmdbox{background:#1b1130;color:#e7dcf5;border-radius:var(--radius-sm);padding:14px 16px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;line-height:1.65;overflow-x:auto;white-space:pre;margin:0 0 12px}
.prev-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.warn-box{background:var(--orange-soft);border:1px solid #f4c79a;border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;line-height:1.7;color:#7a3d05}
.warn-box .mono{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:5px}
.warn-box a{color:var(--orange);font-weight:700}

/* ---------- Provisionar: resultado da autorização ---------- */
.ok-head .pic{color:var(--green);background:var(--green-soft)}
.err-head .pic{color:var(--red);background:var(--red-soft)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px 18px}
.res-grid>div{display:flex;flex-direction:column;gap:3px}
.res-grid>div>span{font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.res-grid>div>b{font-size:14px;font-weight:700}
.err-box{background:#fdeded;border:1px solid #f3c4c4;border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;line-height:1.6;color:#8a2b2b;font-weight:500}

/* linha de ONU clicável (vai pro detalhe) */
.table tr.clk{cursor:pointer;transition:background .12s}
.table tr.clk:hover{background:var(--orange-soft)}

/* ---------- Provisionar: seções por OLT (estilo SmartOLT) ---------- */
.olt-sec{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.olt-sec:first-of-type{border-top:0;margin-top:10px}
.olt-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.olt-sec-head h4{font-size:15px;font-weight:700;color:var(--ink)}
.inline-f{display:inline-flex;margin:0}
.iconbtn{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;color:var(--navy);transition:.18s}
.iconbtn svg{width:15px;height:15px}
.iconbtn:hover{border-color:var(--orange);color:var(--orange)}
.empty-sm{font-size:13px;color:var(--muted);padding:6px 2px 4px}

/* spinner do scan automático */
.scanning{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);padding:8px 2px}
.spin{width:15px;height:15px;border:2.5px solid var(--line);border-top-color:var(--orange);border-radius:50%;animation:rxspin .7s linear infinite;flex:0 0 auto}
@keyframes rxspin{to{transform:rotate(360deg)}}

.aut-link{color:var(--orange);font-weight:700;text-decoration:none;white-space:nowrap}
.aut-link:hover{text-decoration:underline}

/* ---------- Formulário de autorização estilo SmartOLT ---------- */
.sform{max-width:780px}
.sf-row{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;align-items:center;margin-bottom:11px}
.sf-row>label:first-child{text-align:right;font-size:13px;font-weight:600;color:var(--ink);padding-top:2px}
.sf{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;outline:none;transition:.15s}
.sf:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
select.sf{cursor:pointer}
.sf.ro{background:var(--soft);color:var(--muted);border-color:var(--line-2);cursor:default}
.sf-radios{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rin{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);cursor:pointer}
.rin.dim{color:var(--muted-2)}
.rin input{accent-color:var(--orange)}
.sf-chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.sf-chk input{accent-color:var(--orange);width:15px;height:15px}
.sf-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
@media(max-width:560px){.sf-row{grid-template-columns:1fr;gap:4px}.sf-row>label:first-child{text-align:left}}

/* ===== ONU detail (estilo SmartOLT) ===== */
.ok-banner{background:var(--green);color:#fff;font-weight:600;padding:13px 18px;border-radius:12px;margin-bottom:16px;box-shadow:0 4px 14px rgba(31,157,87,.25)}
.od-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px 0}
.od-title{margin:0 0 6px;font-size:16px;font-family:var(--mono,monospace);color:var(--navy)}
.od-top .pill{vertical-align:middle}
.vbadge{font-weight:800;letter-spacing:.5px;font-size:15px;color:var(--navy);background:var(--chip-navy);border:1px solid var(--line);padding:7px 16px;border-radius:10px;text-transform:uppercase}
.od-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;padding:10px 20px 4px}
.od-card{display:flex;flex-direction:column}
.od-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:4.5px 0;border-bottom:1px solid var(--line,#eee)}
.od-row:last-child{border-bottom:0}
.od-row>span{color:var(--muted,#7b748a);font-size:13px;white-space:nowrap}
.od-row>b{color:var(--navy);font-weight:600;font-size:13px;text-align:right;word-break:break-word}
.od-row .mono{font-family:var(--mono,monospace);font-size:12px}
.od-actions{display:flex;gap:10px;flex-wrap:wrap;padding:6px 20px 18px}
.od-bottom{display:flex;gap:10px;flex-wrap:wrap}
.btn.warn{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 4px 12px rgba(244,112,15,.3)}
.btn.warn:hover{background:#e0640a;border-color:#e0640a}
.btn.warn svg{opacity:1}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.2)}
.btn.loading{opacity:.7;pointer-events:none}
.btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:5px}
.ld{display:inline-block;min-width:64px;height:13px;border-radius:6px;background:linear-gradient(90deg,#ece8f1 25%,#f6f3fa 37%,#ece8f1 63%);background-size:400% 100%;animation:ldsh 1.2s ease infinite;vertical-align:middle}
@keyframes ldsh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (max-width:640px){.od-cols{grid-template-columns:1fr}}

/* ===== lista de ONUs (estilo SmartOLT) ===== */
.btn-view{display:inline-block;background:var(--orange);color:#fff;font-weight:600;font-size:12.5px;padding:5px 14px;border-radius:9px;text-decoration:none;white-space:nowrap;transition:filter .15s}
.btn-view:hover{filter:brightness(1.15)}
.pager{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;padding:16px 8px 6px}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--navy);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
.pg:hover{background:var(--orange-soft);border-color:var(--orange)}
.pg.cur{background:var(--orange);border-color:var(--orange);color:#fff;cursor:default}
.pg.dis{opacity:.4;cursor:default;pointer-events:none}
.onus-tb td{vertical-align:middle}
.onus-tb td.s2{line-height:1.25}
.onus-tb .s{font-size:11px;display:block;margin-top:1px}
.onus-tb th:first-child{width:78px}

/* ---------- botão de tema (claro/escuro) ---------- */
.theme-toggle{padding:8px 10px}
.theme-toggle svg{width:16px;height:16px;opacity:.8;margin:0}
.theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:inline-block}

/* ---------- controles de formulário: base do textarea + garantia de tema escuro ---------- */
textarea{width:100%;font-family:inherit;font-size:13px;color:var(--ink);background:var(--input-bg);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;transition:.15s;resize:vertical}
textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,112,15,.12)}
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] textarea,
[data-theme="dark"] select{background:var(--input-bg);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--muted-2)}

/* =========================================================
   APP SHELL — sidebar + appbar (Fase 3)
   ========================================================= */
.app{display:flex;min-height:100vh}
.sidebar{width:238px;flex:0 0 238px;background:var(--sb-bg);color:var(--sb-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--sb-line);
  z-index:40}
html.anim .sidebar{transition:width .18s ease, transform .2s ease}
.sb-brand{display:flex;align-items:center;gap:11px;padding:17px 16px 15px;color:var(--sb-ink);text-decoration:none}
.sb-brand .logo{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,#ff8a2a,var(--orange) 55%,#e05f00);border-radius:12px;box-shadow:0 4px 12px rgba(244,112,15,.30)}
.sb-brand .logo svg{width:26px;height:26px;overflow:visible}
.sb-brand h1{font-size:16.5px;font-weight:800;letter-spacing:-.3px;line-height:1.1;white-space:nowrap}
.sb-brand h1 .accent{color:var(--orange)}
.sb-brand p{font-size:10.5px;color:var(--sb-dim);white-space:nowrap;margin-top:2px;font-weight:500}
.sb-nav{flex:1;padding:8px 10px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.sb-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--sb-dim);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;transition:background .12s,color .12s}
.sb-link svg{width:19px;height:19px;flex:0 0 auto;opacity:.85}
.sb-link:hover{background:var(--sb-hover);color:var(--sb-ink)}
.sb-link.on{background:var(--sb-active);color:#fff}
.sb-link.on svg{opacity:1}
.sb-foot{padding:9px 10px;border-top:1px solid var(--sb-line)}
.sb-collapse{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;background:transparent;
  color:var(--sb-dim);font-weight:600;font-size:13px;cursor:pointer;border-radius:10px;font-family:inherit}
.sb-collapse:hover{background:var(--sb-hover);color:var(--sb-ink)}
.sb-collapse svg{width:18px;height:18px;flex:0 0 auto;transition:transform .2s}
/* recolhida — funciona por data-sb no <html> (anti-flash) OU .collapsed no elemento */
[data-sb="collapsed"] .sidebar,.sidebar.collapsed{width:66px;flex-basis:66px}
[data-sb="collapsed"] .sidebar .sb-brand,.sidebar.collapsed .sb-brand{justify-content:center;padding:17px 0 15px}
[data-sb="collapsed"] .sidebar .sb-bt,[data-sb="collapsed"] .sidebar .sb-link span,[data-sb="collapsed"] .sidebar .sb-collapse span,.sidebar.collapsed .sb-bt,.sidebar.collapsed .sb-link span,.sidebar.collapsed .sb-collapse span{display:none}
[data-sb="collapsed"] .sidebar .sb-link,.sidebar.collapsed .sb-link{justify-content:center;padding:10px}
[data-sb="collapsed"] .sidebar .sb-collapse,.sidebar.collapsed .sb-collapse{justify-content:center}
[data-sb="collapsed"] .sidebar .sb-collapse svg,.sidebar.collapsed .sb-collapse svg{transform:rotate(180deg)}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.appbar{display:flex;align-items:center;gap:12px;padding:11px 24px;background:var(--card);
  border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:30}
.appbar-title{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.sb-burger{display:none;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:2px 4px}
.sb-burger svg{width:23px;height:23px}
.content{padding:24px 26px 56px;max-width:1340px;margin:0 auto;width:100%;flex:1;animation:pagein .25s ease}
@media(prefers-reduced-motion:reduce){.content{animation:none}}

.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.open{transform:translateX(0)}
  .sb-burger{display:block}
  .sb-overlay.show{display:block}
  .content{padding:18px 15px 46px}
  .appbar{padding:10px 15px}
}

/* =========================================================
   RESPONSIVIDADE — endurecimento global (Fase 6)
   ========================================================= */
img,canvas,video{max-width:100%;height:auto}
pre,.cmdbox,.sv-script,textarea{max-width:100%}
.table-wrap,.onus-tb-wrap{-webkit-overflow-scrolling:touch}
/* appbar em telas menores: economiza espaço sem perder função */
@media(max-width:680px){
  .appbar{padding:10px 15px;gap:9px}
  .appbar .sync-stamp{display:none}
  .appbar-title{font-size:15px}
  .appbar-right{gap:7px}
}
@media(max-width:480px){
  .appbar .uname{display:none}
  .appbar-right .btn.ghost.sm{padding:6px 9px}
}
/* tabelas mais compactas no celular */
@media(max-width:600px){
  .table th,.table td{padding:9px 10px}
  .onus-tb th,.onus-tb td{padding:6px 7px;font-size:12px}
}
/* stat cards e metrics de 2 col -> 1 col em telas bem estreitas */
@media(max-width:430px){
  .onu-metrics{grid-template-columns:1fr}
}