@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   Nodus — Tema "Light refinado / Clean SaaS" (accent teal)
   Carregado DEPOIS do <style> inline de cada página → sobrescreve os tokens
   (:root) e dá um polimento por cima dos mesmos nomes de classe.
   ========================================================================= */
:root{
  /* superfícies */
  --bg:#f6f8fb;
  --s1:#ffffff;
  --s2:#f1f4f8;
  --border:#e6eaf0;
  --border2:#d4dae6;
  /* texto */
  --text:#0f172a;
  --muted:#64748b;
  --muted2:#94a3b8;
  /* accent = teal (mantém o nome --blue p/ compatibilidade com o CSS existente) */
  --blue:#14b8a6;
  --blue-l:#e3f7f4;
  --blue-d:#0d9488;
  /* status */
  --green:#16a34a;
  --green-l:#eafaf0;
  --red:#ef4444;
  --red-l:#fef2f2;
  --yellow:#f59e0b;
  /* sidebar (escura, contraste elegante; ativo tingido de teal) */
  --sidebar-bg:#0f172a;
  --sidebar-hover:#1e293b;
  --sidebar-active:#115e59;
  --sidebar-text:#94a3b8;
  --sidebar-text-active:#ffffff;
  --sidebar-border:#1e293b;
  /* tokens novos do tema */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 6px 18px rgba(15,23,42,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- base ---- */
html,body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--text);letter-spacing:-.006em;}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box;}

/* ---- topbar ---- */
.topbar{background:var(--s1);border-bottom:1px solid var(--border);}
.topbar-title{font-weight:700;letter-spacing:-.01em;}
.total-badge{background:var(--blue-l);color:var(--blue-d);border-radius:999px;font-weight:600;padding:3px 10px;}
.coleta-info,.auto-badge{color:var(--muted);}

/* ---- toolbar / inputs ---- */
.toolbar{background:var(--s1);border-bottom:1px solid var(--border);padding:12px 24px;gap:10px;}
.toolbar input,.toolbar select,.form-row input,.form-row select,.quedas-toolbar select{
  border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--s1);color:var(--text);
  font-family:var(--font);font-size:13px;padding:8px 12px;transition:border .15s,box-shadow .15s;}
.toolbar input:focus,.toolbar select:focus,.form-row input:focus,.form-row select:focus,.quedas-toolbar select:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,184,166,.14);outline:none;}
.toolbar input{width:260px;}
.toolbar input::placeholder{color:var(--muted2);}

/* ---- botões ---- */
.btn{border-radius:var(--radius-sm);font-family:var(--font);font-weight:600;font-size:13px;padding:8px 14px;
  transition:all .14s;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-d);filter:none;}
.btn-ghost{background:var(--s1);border:1px solid var(--border2);color:var(--muted);}
.btn-ghost:hover{color:var(--text);border-color:var(--blue);background:var(--blue-l);}
.btn-danger{background:var(--red);color:#fff;}
.btn.active{border-color:var(--blue);color:var(--blue-d);background:var(--blue-l);}

/* ---- cards / painéis (cantos maiores, sombra sutil, mais ar) ---- */
.kpi-card,.kpi,.hub-card,.detail-panel,.loc-card,.conc-card,.det-card,.traffic-card,.modal-box,.resumo-card{
  border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);}
.kpi-card,.kpi{padding:18px 20px;}
.kpi-val,.kpi-value{font-weight:800;letter-spacing:-.02em;}
.hub-card,.detail-panel{transition:box-shadow .15s,transform .15s,border-color .15s;}
.hub-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2);transform:translateY(-1px);}
.panel-hdr,.det-header{background:var(--s2);border-bottom:1px solid var(--border);}
.panel-hdr-title,.det-user-name{font-weight:700;letter-spacing:-.01em;}
.section-title{font-weight:700;color:var(--text);letter-spacing:-.01em;}

/* ---- tabelas ---- */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
thead th{background:var(--s2);color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;border-bottom:1px solid var(--border);}
thead th.sortable:hover{color:var(--text);background:#e9eef5;}
tbody td{border-bottom:1px solid var(--border);}
tbody tr{transition:background .12s;}
tbody tr:hover{background:var(--blue-l);cursor:pointer;}
.mini-table th{background:var(--s2);}

/* ---- badges ---- */
.tipo-badge{border-radius:var(--radius-xs);font-weight:700;}
.loc-badge{border-radius:999px;font-weight:600;}
.quedas-badge{background:var(--red);}

/* ---- paginação ---- */
.page-btn{border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--s1);font-weight:600;padding:5px 12px;}
.page-btn:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-l);}
.page-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.page-info{color:var(--muted);font-weight:700;}

/* ---- sidebar ---- */
.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);}
.nav-item{border-radius:var(--radius-sm);margin:1px 10px;padding:9px 12px;font-weight:500;transition:background .14s,color .14s;}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--blue);}
.nav-section{color:#64748b;letter-spacing:.08em;font-weight:700;font-size:10px;}
.sidebar-logo-text{font-weight:800;letter-spacing:-.02em;}
.user-avatar{background:var(--blue);color:#fff;font-weight:700;}

/* ---- resumo / quedas (Fase 2) ---- */
.resumo-bar{background:var(--s2);}
.resumo-card{box-shadow:var(--shadow-sm);}
.resumo-card .rc-total{color:var(--blue-d);}
.resumo-card.active{box-shadow:0 0 0 2px rgba(20,184,166,.22);border-color:var(--blue);}
.queda-status.off{background:var(--green);}
.queda-status.on{background:var(--red);}

/* ---- toasts / status ---- */
.status-bar{background:var(--s2);color:var(--muted);}
.spinner{border-top-color:var(--blue)!important;}

/* ---- mobile: tabelas largas rolam na horizontal (sobrescreve o overflow:hidden acima) ---- */
@media(max-width:768px){
  /* min-width:0 deixa os itens flex encolherem; senão a tabela empurra a página inteira */
  .main,.content{min-width:0;max-width:100%;}
  .table-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch;}
}

.nav-item.nav-sub{padding-left:40px;font-size:12px;}
.nav-item.nav-sub .nav-icon,.nav-item.nav-sub .nav-icon svg{width:15px;height:15px;}

.eic{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* =========================================================================
   DARK MODE — opt-in (data-theme="dark" no <html>, alternado pelo conta.js).
   Padrão continua CLARO (:root acima). Aqui só REDEFINIMOS os tokens; como
   quase todo o app pinta via var(--x), o chrome inteiro flipa por tabela.
   Chips de tinta hardcoded em páginas específicas seguem claros (afinar depois).
   ========================================================================= */
:root[data-theme="dark"]{
  /* superfícies (sidebar mais escura que a página; cards levemente elevados) */
  --bg:#0b1120;
  --s1:#0f172a;
  --s2:#151f31;
  --border:#1e293b;
  --border2:#2a384c;
  /* texto */
  --text:#e6edf6;
  --muted:#93a3ba;
  --muted2:#647389;
  /* accent teal (mesma família; só a tinta clara vira translúcida p/ funcionar no escuro) */
  --blue:#14b8a6;
  --blue-l:rgba(20,184,166,.15);
  --blue-d:#0d9488;
  /* status (levemente mais vivos p/ contraste no escuro) */
  --green:#22c55e;
  --green-l:rgba(34,197,94,.15);
  --red:#ef4444;
  --red-l:rgba(239,68,68,.15);
  --yellow:#f59e0b;
  /* sidebar */
  --sidebar-bg:#0a0f1a;
  --sidebar-hover:#18233a;
  --sidebar-active:#115e59;
  --sidebar-text:#93a3ba;
  --sidebar-text-active:#ffffff;
  --sidebar-border:#1a2436;
  /* sombras mais fundas no escuro */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px rgba(0,0,0,.55);
}
/* scrollbar no escuro */
:root[data-theme="dark"] *{scrollbar-color:#334155 transparent;}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#334155;background-clip:content-box;}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#475569;background-clip:content-box;}
/* hover de cabeçalho ordenável (era hardcoded claro) */
:root[data-theme="dark"] thead th.sortable:hover{background:#1c2740;}
/* badges de status padronizados (tinta clara hardcoded → tinta escura) */
:root[data-theme="dark"] .badge.ok{background:rgba(34,197,94,.16);color:#6ee7b7;}
:root[data-theme="dark"] .badge.err{background:rgba(239,68,68,.16);color:#fca5a5;}
:root[data-theme="dark"] .badge.warn{background:rgba(245,158,11,.16);color:#fcd34d;}
/* botões de aviso: texto/borda legíveis no escuro (o hardcoded âmbar é claro demais) */
:root[data-theme="dark"] .pbtn.warn,:root[data-theme="dark"] .iconbtn.warn{color:#fcd34d;border-color:rgba(245,158,11,.4);}
:root[data-theme="dark"] .pbtn.warn:hover,:root[data-theme="dark"] .iconbtn.warn:hover{background:rgba(245,158,11,.14);}
:root[data-theme="dark"] .pbtn.danger,:root[data-theme="dark"] .iconbtn.danger{border-color:rgba(239,68,68,.42);}
:root[data-theme="dark"] .pbtn.danger:hover,:root[data-theme="dark"] .iconbtn.danger:hover{background:rgba(239,68,68,.14);}

/* =========================================================================
   POLISH v1.2.0 — unificação dos dois dialetos (mesmo look da folha aprovada).
   Central no theme.css (carrega por último → vence o inline das páginas).
   Só toca botões/badges/fundo de card — não mexe em layout/estrutura.
   ========================================================================= */
/* botões novos (.pbtn) alinhados ao teal do tema, tokenizados */
.pbtn{font-family:var(--font);font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--blue-d);background:var(--blue-d);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm);
  transition:filter .14s,background .14s,border-color .14s,color .14s;}
.pbtn:hover{filter:brightness(1.06);}
.pbtn.ghost{background:var(--s1);color:var(--blue-d);border-color:var(--border2);box-shadow:none;}
.pbtn.ghost:hover{border-color:var(--blue);background:var(--blue-l);filter:none;}
.pbtn.warn{background:var(--s1);color:#b45309;border-color:#f0c36d;box-shadow:none;}
.pbtn.warn:hover{background:#fff7ed;filter:none;}
.pbtn.danger{background:var(--s1);color:var(--red);border-color:#ffaaac;box-shadow:none;}
.pbtn.danger:hover{background:var(--red-l);filter:none;}
.pbtn.sm{padding:6px 10px;font-size:12px;}
.pbtn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none;}
.pbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* botões-ícone consistentes */
.iconbtn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);border:1px solid var(--border2);background:var(--s1);color:var(--muted);
  cursor:pointer;padding:0;transition:all .12s;}
.iconbtn:hover{color:var(--text);border-color:var(--blue);}
.iconbtn.warn:hover{color:#b45309;border-color:#f0c36d;background:#fff7ed;}
.iconbtn.danger:hover{color:var(--red);border-color:#ffaaac;background:var(--red-l);}
.iconbtn:disabled{opacity:.4;cursor:not-allowed;}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* badges consistentes (pílula + ponto de estado) */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--s2);color:var(--muted);}
.badge.ok{background:var(--green-l);color:#3a9213;}
.badge.err{background:var(--red-l);color:#cf1322;}
.badge.warn{background:#fff7ed;color:#b45309;}
.badge.info{background:var(--blue-l);color:var(--blue-d);}
.badge.none{background:var(--s2);color:var(--muted);}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px;margin-right:0;}
/* cards de dashboard com fundo uniforme (home era cinza, olts branco) */
.kpi-card,.kpi{background:var(--s1);}
/* primário e ghost: MESMO look nos dois dialetos (.btn casa com .pbtn / folha aprovada) */
.btn-primary{background:var(--blue-d);border-color:var(--blue-d);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-d);filter:brightness(1.06);}
.btn-ghost{color:var(--blue-d);}
.btn-ghost:hover{color:var(--blue-d);border-color:var(--blue);background:var(--blue-l);}

/* =========================================================================
   MENU LATERAL — polish (proposta aprovada 08/07). Sidebar é sempre escura,
   então os teais são fixos aqui (independem do tema claro/escuro).
   ========================================================================= */
.nav-section{color:#5a6b82;letter-spacing:.13em;font-weight:700;font-size:9.5px;}
.nav-item{position:relative;margin:2px 10px;}
.nav-item .nav-icon{color:#7f92a9;transition:color .14s;}
.nav-item:hover{background:rgba(255,255,255,.05);color:#eaf1f9;}
.nav-item:hover .nav-icon{color:#aebfd3;}
/* ativo: realce teal translúcido + ícone teal + barra lateral com brilho (some o bloco verde chapado) */
.nav-item.active{background:rgba(45,212,191,.13);color:#fff;font-weight:650;box-shadow:none;}
.nav-item.active .nav-icon{color:#5eead4;}
.nav-item.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:3px;background:#2dd4bf;box-shadow:0 0 10px rgba(45,212,191,.5);}
/* divisória sob o logo, separando marca da navegação */
.sidebar-logo{border-bottom:1px solid var(--sidebar-border);padding-bottom:14px;}

/* =========================================================================
   v1.2.0 — chips de cor fixa afinados no ESCURO (eram tinta clara hardcoded
   por página → viravam ilhas claras no dark). theme.css vence o inline.
   Só mexe em data-theme="dark"; no claro nada muda. (campo.html é PWA à parte.)
   ========================================================================= */
/* verde — ok / online / up */
:root[data-theme="dark"] .b-on,
:root[data-theme="dark"] .cfg-status.ok,
:root[data-theme="dark"] .qmassa-badge.ok,
:root[data-theme="dark"] .det-onu-status.up,
:root[data-theme="dark"] .off-cat.cliente,
:root[data-theme="dark"] .pon-cap.ok,
:root[data-theme="dark"] .tipo-cisco{background:rgba(34,197,94,.15);color:#6ee7b7;border-color:rgba(34,197,94,.3);}
/* vermelho — off / down / erro */
:root[data-theme="dark"] .b-off,
:root[data-theme="dark"] .cfg-status.down,
:root[data-theme="dark"] .qmassa-ic,
:root[data-theme="dark"] .qmassa-badge.off,
:root[data-theme="dark"] .det-onu-status.down,
:root[data-theme="dark"] .off-cat.rede,
:root[data-theme="dark"] .pon-cap.cheia{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3);}
:root[data-theme="dark"] tr.row-error{background:rgba(239,68,68,.1);}
:root[data-theme="dark"] tr.row-error:hover{background:rgba(239,68,68,.16);}
/* âmbar — aviso / atenção / inativo */
:root[data-theme="dark"] .badge.mud,
:root[data-theme="dark"] .badge-orange,
:root[data-theme="dark"] .msg-aviso,
:root[data-theme="dark"] .tipo-huawei,
:root[data-theme="dark"] .det-onu-status.warn,
:root[data-theme="dark"] .pon-cap.atencao,
:root[data-theme="dark"] .bg-inativo,
:root[data-theme="dark"] .b-ina,
:root[data-theme="dark"] .dbg-warn,
:root[data-theme="dark"] .off-cat.admin,
:root[data-theme="dark"] .off-cat.senha,
:root[data-theme="dark"] .ap-aviso,
:root[data-theme="dark"] .prov-warn{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.32);}
:root[data-theme="dark"] .row-dirty td,
:root[data-theme="dark"] tr.row-warning{background:rgba(245,158,11,.1);}
/* azul — mikrotik / pppoe */
:root[data-theme="dark"] .tipo-mikrotik,
:root[data-theme="dark"] .tag-pppoe,
:root[data-theme="dark"] .tag-ppp{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.3);}
/* slate — outros */
:root[data-theme="dark"] .off-cat.outro{background:rgba(148,163,184,.15);color:#cbd5e1;border-color:rgba(148,163,184,.28);}
/* roxo — dhcp */
:root[data-theme="dark"] .badge-purple,
:root[data-theme="dark"] .tag-dhcp{background:rgba(139,92,246,.16);color:#c4b5fd;border-color:rgba(139,92,246,.3);}
/* rosa — firewall */
:root[data-theme="dark"] .tag-firewall{background:rgba(236,72,153,.16);color:#f9a8d4;border-color:rgba(236,72,153,.3);}
/* teal — badge-teal / caixa */
:root[data-theme="dark"] .badge-teal,
:root[data-theme="dark"] .b-cx{background:rgba(45,212,191,.14);color:#5eead4;border-color:rgba(45,212,191,.3);}
/* zebra e hovers claros de tabela */
:root[data-theme="dark"] tbody tr:nth-child(even),
:root[data-theme="dark"] .prov-tbl tbody tr:nth-child(even){background:rgba(255,255,255,.025);}
:root[data-theme="dark"] .log-table tbody tr:hover{background:rgba(255,255,255,.05);}
:root[data-theme="dark"] #agg-itens label:hover{background:rgba(255,255,255,.05);}