/* ==========================================================
 SGW V456 - MONITORAMENTO COMPLETO
 ========================================================== */
html.sgw456-monitoramento{
  --m456-bg:#020b19;
  --m456-panel:#061a33;
  --m456-panel2:#071f3b;
  --m456-panel3:#0a294b;
  --m456-line:#17466f;
  --m456-line2:#205985;
  --m456-text:#eaf4ff;
  --m456-muted:#86a4c7;
  --m456-blue:#1677ff;
  --m456-cyan:#22c5e5;
  --m456-green:#19ce7a;
  --m456-red:#ff4f62;
  --m456-amber:#ffb11b;
}

html.sgw456-monitoramento body,
html.sgw456-monitoramento main,
html.sgw456-monitoramento .content-area,
html.sgw456-monitoramento .container{
  background:
    radial-gradient(circle at 88% 0,rgba(22,119,255,.08),transparent 28%),
    linear-gradient(180deg,#031024 0%,var(--m456-bg) 100%) !important;
  color:var(--m456-text) !important;
}

/* ----------------------------------------------------------
   TIPOGRAFIA
---------------------------------------------------------- */
html.sgw456-monitoramento main h1,
html.sgw456-monitoramento main h2,
html.sgw456-monitoramento main h3,
html.sgw456-monitoramento main h4{
  color:#f6faff !important;
}
html.sgw456-monitoramento main p,
html.sgw456-monitoramento main small,
html.sgw456-monitoramento main label{
  color:var(--m456-muted) !important;
}

/* ----------------------------------------------------------
   CARDS / PAINÉIS
---------------------------------------------------------- */
html.sgw456-monitoramento main .card,
html.sgw456-monitoramento main .panel,
html.sgw456-monitoramento main .box,
html.sgw456-monitoramento main .table-card,
html.sgw456-monitoramento main .server-card,
html.sgw456-monitoramento main .metric-card,
html.sgw456-monitoramento main .summary-card,
html.sgw456-monitoramento main section[class*="card"],
html.sgw456-monitoramento main div[class*="card"]:not(.leaflet-control){
  background:linear-gradient(180deg,var(--m456-panel2),var(--m456-panel)) !important;
  color:var(--m456-text) !important;
  border:1px solid var(--m456-line) !important;
  box-shadow:0 13px 34px rgba(0,0,0,.17) !important;
}

/* ----------------------------------------------------------
   FORMULÁRIOS / FILTROS
---------------------------------------------------------- */
html.sgw456-monitoramento main input:not([type=checkbox]):not([type=radio]),
html.sgw456-monitoramento main select,
html.sgw456-monitoramento main textarea{
  background:#041a34 !important;
  color:#f1f8ff !important;
  border:1px solid #1a507f !important;
  box-shadow:none !important;
}
html.sgw456-monitoramento main input::placeholder,
html.sgw456-monitoramento main textarea::placeholder{
  color:#6e8dad !important;
  opacity:1 !important;
}
html.sgw456-monitoramento main input:focus,
html.sgw456-monitoramento main select:focus,
html.sgw456-monitoramento main textarea:focus{
  border-color:#2b8bff !important;
  box-shadow:0 0 0 3px rgba(43,139,255,.12) !important;
  outline:none !important;
}
html.sgw456-monitoramento main input[type=checkbox],
html.sgw456-monitoramento main input[type=radio]{
  accent-color:var(--m456-blue);
}

/* ----------------------------------------------------------
   BOTÕES
---------------------------------------------------------- */
html.sgw456-monitoramento main button,
html.sgw456-monitoramento main .btn{
  border-radius:9px !important;
}
html.sgw456-monitoramento main .btn-primary,
html.sgw456-monitoramento main button.primary{
  background:linear-gradient(135deg,#0b5fd7,#1677ff) !important;
  color:#fff !important;
  border-color:#2c87ff !important;
}
html.sgw456-monitoramento main .btn-success,
html.sgw456-monitoramento main button.success{
  background:#0f7b4b !important;
  color:#fff !important;
  border-color:#1aa76a !important;
}
html.sgw456-monitoramento main .btn-danger,
html.sgw456-monitoramento main button.danger{
  background:#8f2333 !important;
  color:#fff !important;
  border-color:#c6364c !important;
}

/* ----------------------------------------------------------
   TABELAS
---------------------------------------------------------- */
html.sgw456-monitoramento main table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:var(--m456-panel) !important;
  color:var(--m456-text) !important;
  border:1px solid var(--m456-line) !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
html.sgw456-monitoramento main table thead th{
  background:#0a2a4e !important;
  color:#c4e1ff !important;
  border-color:#1b4a76 !important;
  font-weight:800 !important;
}
html.sgw456-monitoramento main table tbody td{
  background:#061a33 !important;
  color:#dcecff !important;
  border-color:#12395f !important;
}
html.sgw456-monitoramento main table tbody tr:nth-child(even) td{
  background:#071f3b !important;
}
html.sgw456-monitoramento main table tbody tr:hover td{
  background:#0a2a4d !important;
}
html.sgw456-monitoramento main table a{
  color:#68b1ff !important;
}

/* ----------------------------------------------------------
   BADGES / STATUS
---------------------------------------------------------- */
html.sgw456-monitoramento main .badge,
html.sgw456-monitoramento main .pill,
html.sgw456-monitoramento main [class*="badge"],
html.sgw456-monitoramento main [class*="pill"]{
  border-radius:999px !important;
  font-weight:800 !important;
}
html.sgw456-monitoramento main .online,
html.sgw456-monitoramento main .success,
html.sgw456-monitoramento main .badge.online,
html.sgw456-monitoramento main .badge.success{
  background:#0d3b28 !important;
  color:#6af1aa !important;
  border-color:#1d8c5c !important;
}
html.sgw456-monitoramento main .offline,
html.sgw456-monitoramento main .danger,
html.sgw456-monitoramento main .badge.offline,
html.sgw456-monitoramento main .badge.danger{
  background:#40141f !important;
  color:#ff8996 !important;
  border-color:#a83245 !important;
}
html.sgw456-monitoramento main .warning,
html.sgw456-monitoramento main .badge.warning{
  background:#3d300a !important;
  color:#ffd773 !important;
  border-color:#92700f !important;
}

/* ----------------------------------------------------------
   INTERFACES LÓGICAS / IP MAC
---------------------------------------------------------- */
html.sgw456-logicas main,
html.sgw456-ipmac main,
html.sgw456-pppoe main,
html.sgw456-onoff main,
html.sgw456-alertas main,
html.sgw456-telegram main,
html.sgw456-whatsapp main{
  padding:22px 28px 34px !important;
}
html.sgw456-logicas main > *,
html.sgw456-ipmac main > *,
html.sgw456-pppoe main > *,
html.sgw456-onoff main > *,
html.sgw456-alertas main > *,
html.sgw456-telegram main > *,
html.sgw456-whatsapp main > *{
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
}

html.sgw456-logicas main [class*="iface"],
html.sgw456-logicas main [class*="server"],
html.sgw456-ipmac main [class*="iface"],
html.sgw456-ipmac main [class*="server"]{
  background:#071c38 !important;
  color:#eaf4ff !important;
  border-color:#17466f !important;
}

/* ----------------------------------------------------------
   PPPoE
---------------------------------------------------------- */
html.sgw456-pppoe main table td,
html.sgw456-onoff main table td{
  vertical-align:middle !important;
}
html.sgw456-pppoe main table td:first-child,
html.sgw456-onoff main table td:nth-child(2){
  color:#f3f8ff !important;
  font-weight:700 !important;
}
html.sgw456-pppoe main .online,
html.sgw456-onoff main .online{
  background:#0c3b28 !important;
  color:#64eda5 !important;
}

/* ----------------------------------------------------------
   CLIENTES ON/OFF
---------------------------------------------------------- */
html.sgw456-onoff main [class*="toolbar"],
html.sgw456-onoff main [class*="filters"]{
  background:#061a33 !important;
  border-color:#17456f !important;
}
html.sgw456-onoff main a[href*="192."]{
  color:#44a3ff !important;
}

/* ----------------------------------------------------------
   GRÁFICOS MIKROTIK
   preserva gráfico V453 e melhora encaixe
---------------------------------------------------------- */
html.sgw456-graficos main{
  padding:18px 28px 34px !important;
}
html.sgw456-graficos #v450GraphsPage{
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html.sgw456-graficos .v450-card,
html.sgw456-graficos .v450-graph-main,
html.sgw456-graficos .v450-storage-card,
html.sgw456-graficos .v450-options-card{
  background:linear-gradient(180deg,#071d39,#05162e) !important;
  border-color:#17466f !important;
  color:#eaf4ff !important;
}
html.sgw456-graficos .v450-rangebar button{
  background:#082544 !important;
  color:#abd2ff !important;
  border-color:#1d5688 !important;
}
html.sgw456-graficos .v450-rangebar button.active{
  background:linear-gradient(135deg,#0b5fd7,#1677ff) !important;
  color:#fff !important;
  border-color:#2d8bff !important;
}
html.sgw456-graficos .v450-iface-chip{
  background:#071f3d !important;
  color:#d9eaff !important;
  border-color:#174c7a !important;
}
html.sgw456-graficos .v450-iface-chip.running{
  border-color:#1d5d83 !important;
}
html.sgw456-graficos .v450-iface-chip.down{
  border-color:#5b2633 !important;
}
html.sgw456-graficos .v450-chart-wrap{
  background:#03162d !important;
  border-color:#17466f !important;
}

/* ----------------------------------------------------------
   ALERTAS INTELIGENTES
---------------------------------------------------------- */
html.sgw456-alertas main [class*="alert-card"],
html.sgw456-alertas main [class*="incident"],
html.sgw456-alertas main [class*="evento"]{
  background:#071c38 !important;
  color:#eaf4ff !important;
  border-color:#17466f !important;
}
html.sgw456-alertas main [class*="critical"],
html.sgw456-alertas main [class*="critico"]{
  border-color:#8e3043 !important;
}
html.sgw456-alertas main [class*="warning"],
html.sgw456-alertas main [class*="aviso"]{
  border-color:#8b6814 !important;
}

/* ----------------------------------------------------------
   MAPA
   NÃO mexer no conteúdo Leaflet / Google
---------------------------------------------------------- */
html.sgw456-mapa body,
html.sgw456-mapa main,
html.sgw456-mapa .content-area{
  background:#020b19 !important;
}
html.sgw456-mapa main{
  padding:0 !important;
}
html.sgw456-mapa .leaflet-container,
html.sgw456-mapa .leaflet-pane,
html.sgw456-mapa .leaflet-tile-pane,
html.sgw456-mapa .leaflet-map-pane{
  background:initial !important;
  color:initial !important;
}
html.sgw456-mapa .leaflet-control,
html.sgw456-mapa .leaflet-popup,
html.sgw456-mapa .leaflet-popup-content-wrapper,
html.sgw456-mapa .leaflet-popup-tip{
  color:initial;
}
html.sgw456-mapa #sgw437MapOps,
html.sgw456-mapa [id^="sgw44"],
html.sgw456-mapa [class*="sgw437"]{
  border-color:#17466f !important;
}

/* ----------------------------------------------------------
   Modais
---------------------------------------------------------- */
html.sgw456-monitoramento .modal-content,
html.sgw456-monitoramento [class*="modal-card"],
html.sgw456-monitoramento [class*="modal-box"]{
  background:linear-gradient(180deg,#081e3a,#05152c) !important;
  color:#eaf4ff !important;
  border:1px solid #1a4c78 !important;
  box-shadow:0 24px 65px rgba(0,0,0,.42) !important;
}
html.sgw456-monitoramento .modal-header,
html.sgw456-monitoramento .modal-footer,
html.sgw456-monitoramento [class*="modal-head"],
html.sgw456-monitoramento [class*="modal-foot"]{
  background:#071b35 !important;
  border-color:#18436d !important;
}

/* ----------------------------------------------------------
   Branco inline residual (fora do mapa)
---------------------------------------------------------- */
html.sgw456-monitoramento:not(.sgw456-mapa) main div[style*="background:#fff"],
html.sgw456-monitoramento:not(.sgw456-mapa) main div[style*="background: #fff"],
html.sgw456-monitoramento:not(.sgw456-mapa) main section[style*="background:#fff"],
html.sgw456-monitoramento:not(.sgw456-mapa) main section[style*="background: #fff"],
html.sgw456-monitoramento:not(.sgw456-mapa) main div[style*="background:white"],
html.sgw456-monitoramento:not(.sgw456-mapa) main div[style*="background: white"]{
  background:#071b35 !important;
  color:#eaf4ff !important;
  border-color:#17456f !important;
}

/* ----------------------------------------------------------
   Responsivo
---------------------------------------------------------- */
@media(max-width:900px){
  html.sgw456-logicas main,
  html.sgw456-ipmac main,
  html.sgw456-graficos main,
  html.sgw456-pppoe main,
  html.sgw456-onoff main,
  html.sgw456-alertas main,
  html.sgw456-telegram main,
  html.sgw456-whatsapp main{
    padding:14px 12px 28px !important;
  }
}


/* ==========================================================
 SGW V478 - ALERTAS INTELIGENTES + TELEGRAM
 Base visual: gravacao de tela apos V476/V477.
 Corrige contraste, checkbox e superficies claras conflitantes.
 ========================================================== */

/* ----------------------------------------------------------
   ALERTAS INTELIGENTES V399
---------------------------------------------------------- */

/* Checkbox real: impede quadrado gigante causado por estilos globais. */
html.sgw456-monitoramento main .ai399 input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  padding:0 !important;
  margin:0 7px 0 0 !important;
  flex:0 0 18px !important;
  vertical-align:middle !important;
  accent-color:#1677ff !important;
  box-shadow:none !important;
}

/* Regra principal não fica mais branca com texto apagado. */
html.sgw456-monitoramento main .ai399 .master{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  background:#082343 !important;
  color:#eaf4ff !important;
  border:1px solid #205985 !important;
  padding:10px 11px !important;
}
html.sgw456-monitoramento main .ai399 .master,
html.sgw456-monitoramento main .ai399 .master *{
  color:#eaf4ff !important;
}

/* Linhas de regras. */
html.sgw456-monitoramento main .ai399 .rule399{
  border-color:#17466f !important;
}
html.sgw456-monitoramento main .ai399 .rule399 label{
  display:flex !important;
  align-items:center !important;
  color:#dcecff !important;
  line-height:1.2 !important;
}
html.sgw456-monitoramento main .ai399 .rule399 small{
  color:#86a4c7 !important;
}
html.sgw456-monitoramento main .ai399 .fixed399{
  color:#9bb8d8 !important;
}

/* Incidentes encerrados precisam continuar legíveis. */
html.sgw456-monitoramento main .ai399 .inc399.encerrado{
  opacity:.84 !important;
}
html.sgw456-monitoramento main .ai399 .inc399 .inc-top b{
  color:#f4f8ff !important;
  font-size:12px !important;
  font-weight:850 !important;
}
html.sgw456-monitoramento main .ai399 .inc399 small{
  color:#9bb8d8 !important;
}
html.sgw456-monitoramento main .ai399 .inc399 .inc-top span{
  background:#dbe7f5 !important;
  color:#334155 !important;
  border:1px solid #c0d1e5 !important;
  opacity:1 !important;
}
html.sgw456-monitoramento main .ai399 .inc399.critico{
  background:rgba(116,26,47,.24) !important;
}
html.sgw456-monitoramento main .ai399 .inc399.atencao{
  background:rgba(124,82,13,.20) !important;
}

/* Botões operacionais legíveis se houver incidente aberto. */
html.sgw456-monitoramento main .ai399 .actions399 button{
  background:#0b2b4e !important;
  color:#eaf4ff !important;
  border-color:#28608d !important;
}
html.sgw456-monitoramento main .ai399 .actions399 button:hover{
  background:#10406f !important;
}

/* Fontes de monitoramento. */
html.sgw456-monitoramento main .ai399 .srcgrid399 > div{
  background:#061a33 !important;
  border-color:#17466f !important;
}
html.sgw456-monitoramento main .ai399 .srcgrid399 b{
  color:#eaf4ff !important;
}
html.sgw456-monitoramento main .ai399 .srcgrid399 span{
  color:#91afd0 !important;
}

/* Nota inferior compatível com tema escuro. */
html.sgw456-monitoramento main .ai399 .note399{
  background:#30270b !important;
  border-color:#7a6418 !important;
  color:#ffe08a !important;
}

/* ----------------------------------------------------------
   TELEGRAM V130
---------------------------------------------------------- */

/* Todo card Telegram fica coerente com o tema escuro.
   Inclui FORM, que não era atingido pelo antigo seletor div[class*=card]. */
html.sgw456-monitoramento main .v130 .card130,
html.sgw456-monitoramento main .v130 form.card130{
  background:linear-gradient(180deg,#071f3b,#061a33) !important;
  color:#eaf4ff !important;
  border:1px solid #17466f !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
}

/* Cabeçalhos e textos. */
html.sgw456-monitoramento main .v130 h2,
html.sgw456-monitoramento main .v130 h3{
  color:#f6faff !important;
}
html.sgw456-monitoramento main .v130 .mut130{
  color:#91afd0 !important;
}
html.sgw456-monitoramento main .v130 .checkrow130 label{
  color:#cfe2f7 !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Checkbox Telegram com tamanho real, sem herdar width de campos. */
html.sgw456-monitoramento main .v130 input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 18px !important;
  accent-color:#1682ff !important;
  box-shadow:none !important;
}

/* Labels dos campos sobre o card escuro. */
html.sgw456-monitoramento main .v130 .field130 label{
  color:#a9c4e3 !important;
  font-size:10px !important;
  font-weight:850 !important;
}

/* Estatísticas superiores: sem superfície clara sendo convertida depois. */
html.sgw456-monitoramento main .v130 .stat130{
  background:#071f3b !important;
  border-color:#17466f !important;
  color:#eaf4ff !important;
}
html.sgw456-monitoramento main .v130 .stat130 b{
  color:#f6faff !important;
}
html.sgw456-monitoramento main .v130 .stat130 small{
  color:#86a4c7 !important;
}

/* Cards de RX/TX/última leitura dentro dos monitores. */
html.sgw456-monitoramento main .v130 .statusgrid130 > div{
  background:#0a294b !important;
  border-color:#205985 !important;
  color:#eaf4ff !important;
}
html.sgw456-monitoramento main .v130 .statusgrid130 small{
  color:#91afd0 !important;
}
html.sgw456-monitoramento main .v130 .statusgrid130 b{
  color:#f6faff !important;
}

/* Destinos e separadores. */
html.sgw456-monitoramento main .v130 .dest130{
  border-color:#17466f !important;
}
html.sgw456-monitoramento main .v130 .id130{
  color:#dcecff !important;
}

/* Tabela de logs Telegram. */
html.sgw456-monitoramento main .v130 .logsWrap130{
  border-color:#17466f !important;
}
html.sgw456-monitoramento main .v130 .logs130 thead th{
  background:#0a2a4e !important;
  color:#c5e2ff !important;
}
html.sgw456-monitoramento main .v130 .logs130 td{
  color:#dcecff !important;
  border-color:#12395f !important;
}
html.sgw456-monitoramento main .v130 .logrow130:hover{
  background:#0b2d51 !important;
}

/* Modal de log no mesmo tema. */
html.sgw456-monitoramento .v130 .modalbox130{
  background:#061a33 !important;
  color:#eaf4ff !important;
  border:1px solid #17466f !important;
}
html.sgw456-monitoramento .v130 .modalhead130{
  border-color:#17466f !important;
}
html.sgw456-monitoramento .v130 .info130 > div{
  background:#0a294b !important;
  border-color:#205985 !important;
  color:#eaf4ff !important;
}
html.sgw456-monitoramento .v130 .info130 small{
  color:#91afd0 !important;
}

/* Mensagens de diagnóstico sem branco estourado. */
html.sgw456-monitoramento main .v130 .boxok130{
  background:#0d3528 !important;
  border-color:#217a57 !important;
  color:#9ff2c7 !important;
}
html.sgw456-monitoramento main .v130 .boxbad130{
  background:#401923 !important;
  border-color:#8f3548 !important;
  color:#ffb3bd !important;
}
html.sgw456-monitoramento main .v130 .boxwarn130{
  background:#3b300d !important;
  border-color:#866a14 !important;
  color:#ffe08a !important;
}

/* Em telas pequenas, não deixa checkbox/texto apertados. */
@media(max-width:700px){
  html.sgw456-monitoramento main .v130 .checkrow130 label,
  html.sgw456-monitoramento main .ai399 .rule399 label{
    align-items:flex-start !important;
  }
}


/* ==========================================================
 SGW V479 - INTERFACES LOGICAS MIKROTIK V87/V92
 Base visual: gravacao de tela enviada pelo usuario.
 Corrige os seletores reais sem alterar coleta/trafego.
 ========================================================== */

/* Cabecalho da pagina e filtro */
html.sgw456-logicas main .v87-head h1{
  color:#f6faff !important;
}
html.sgw456-logicas main .v87-head p{
  color:#8faccc !important;
}
html.sgw456-logicas main .v87-filter{
  background:#041a34 !important;
  color:#eef7ff !important;
  border-color:#1a507f !important;
}
html.sgw456-logicas main .v87-filter::placeholder{
  color:#7897b8 !important;
}

/* Servidor */
html.sgw456-logicas main .v87-server{
  background:#061a33 !important;
  border-color:#17466f !important;
  box-shadow:0 10px 28px rgba(0,0,0,.15) !important;
}
html.sgw456-logicas main .v87-server-head{
  background:#071f3b !important;
  border-color:#17466f !important;
}
html.sgw456-logicas main .v87-name{
  color:#f4f9ff !important;
}
html.sgw456-logicas main .v87-server-head small{
  color:#86a4c7 !important;
}
html.sgw456-logicas main .v87-ok{
  color:#62eaa5 !important;
}
html.sgw456-logicas main .v87-bad{
  color:#ff7180 !important;
}

/* Painel Link Total */
html.sgw456-logicas main .v92-link-panel{
  background:#061a33 !important;
  border-color:#17466f !important;
}
html.sgw456-logicas main .v92-link-title{
  color:#f4f9ff !important;
}
html.sgw456-logicas main .v92-link-sub{
  color:#86a4c7 !important;
}
html.sgw456-logicas main .v92-chip-empty{
  color:#86a4c7 !important;
}
html.sgw456-logicas main .v92-chip{
  background:#0a315b !important;
  border-color:#246799 !important;
  color:#9dceff !important;
}

/* Botoes */
html.sgw456-logicas main .v92-btn{
  background:#0a294b !important;
  color:#eaf4ff !important;
  border-color:#205985 !important;
}
html.sgw456-logicas main .v92-btn:hover{
  background:#10406f !important;
}
html.sgw456-logicas main .v92-btn.primary{
  background:linear-gradient(135deg,#0b5fd7,#1677ff) !important;
  border-color:#2d8bff !important;
  color:#fff !important;
}

/* Quatro metricas: remove branco estourado e corrige valor "0" invisivel. */
html.sgw456-logicas main .v92-metric{
  background:#0a294b !important;
  border-color:#205985 !important;
  color:#eaf4ff !important;
}
html.sgw456-logicas main .v92-metric-label{
  color:#9bb8d8 !important;
}
html.sgw456-logicas main .v92-metric-value{
  color:#f5f9ff !important;
  opacity:1 !important;
}
html.sgw456-logicas main .v92-metric-value.rx{
  color:#5c9dff !important;
}
html.sgw456-logicas main .v92-metric-value.tx{
  color:#4add91 !important;
}
html.sgw456-logicas main .v92-metric-value.tot{
  color:#b87cff !important;
}

/* Grafico */
html.sgw456-logicas main .v92-graph{
  background:#04182f !important;
  border-color:#17466f !important;
}
html.sgw456-logicas main .v92-graph-head > b{
  color:#eef7ff !important;
}
html.sgw456-logicas main .v92-legend{
  color:#9bb8d8 !important;
}
html.sgw456-logicas main .v92-no-selection{
  color:#91afd0 !important;
}

/* Tabela das interfaces */
html.sgw456-logicas main .v87-table{
  background:#061a33 !important;
  border-color:#17466f !important;
}
html.sgw456-logicas main .v87-table th{
  background:#0a2a4e !important;
  color:#b9d9f7 !important;
  border-color:#17466f !important;
}
html.sgw456-logicas main .v87-table td{
  background:#071f3b !important;
  color:#dcecff !important;
  border-color:#12395f !important;
}
html.sgw456-logicas main .v87-table tbody tr:nth-child(even) td{
  background:#061a33 !important;
}
html.sgw456-logicas main .v87-table tbody tr:hover td{
  background:#0b2d51 !important;
}
html.sgw456-logicas main .v87-iface{
  color:#f4f9ff !important;
}
html.sgw456-logicas main .v87-sub{
  color:#86a4c7 !important;
}

/* Status */
html.sgw456-logicas main .badge{
  background:#193a5e !important;
  color:#b9d9f7 !important;
}
html.sgw456-logicas main .badge.up{
  background:#0d3b28 !important;
  color:#71f0ad !important;
}
html.sgw456-logicas main .badge.off{
  background:#40141f !important;
  color:#ff8996 !important;
}
html.sgw456-logicas main .badge.sat{
  background:#591925 !important;
  color:#ff9eaa !important;
}

/* Modal de selecao V92 */
html.sgw456-logicas .v92-modal{
  background:rgba(1,7,17,.72) !important;
}
html.sgw456-logicas .v92-modal-box{
  background:#061a33 !important;
  color:#eaf4ff !important;
  border:1px solid #205985 !important;
  box-shadow:0 28px 90px rgba(0,0,0,.5) !important;
}
html.sgw456-logicas .v92-modal-head,
html.sgw456-logicas .v92-modal-tools,
html.sgw456-logicas .v92-modal-foot{
  background:#071f3b !important;
  border-color:#17466f !important;
}
html.sgw456-logicas .v92-modal-head h3{
  color:#f6faff !important;
}
html.sgw456-logicas .v92-modal-head p{
  color:#91afd0 !important;
}
html.sgw456-logicas .v92-modal-search{
  background:#041a34 !important;
  color:#f1f8ff !important;
  border-color:#1a507f !important;
}
html.sgw456-logicas .v92-modal-search::placeholder{
  color:#7897b8 !important;
}
html.sgw456-logicas .v92-list{
  background:#061a33 !important;
}
html.sgw456-logicas .v92-item{
  background:#071f3b !important;
  color:#eaf4ff !important;
  border-color:#17466f !important;
}
html.sgw456-logicas .v92-item:hover{
  background:#0b2d51 !important;
}
html.sgw456-logicas .v92-item input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  min-height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  flex:0 0 17px !important;
  padding:0 !important;
  margin:0 !important;
  accent-color:#1677ff !important;
}
html.sgw456-logicas .v92-item-name{
  color:#eaf4ff !important;
}
html.sgw456-logicas .v92-item-meta{
  color:#91afd0 !important;
}
html.sgw456-logicas .v92-row-selected{
  background:#0d3528 !important;
  border-color:#217a57 !important;
}

/* Ranking PPPoE, caso o mesmo template seja usado no modo PPPoE. */
html.sgw456-logicas main .v87-rank{
  border-color:#17466f !important;
}
html.sgw456-logicas main .v87-rank-card{
  background:#0a294b !important;
  border-color:#205985 !important;
  color:#eaf4ff !important;
}
html.sgw456-logicas main .v87-rank-card small{
  color:#91afd0 !important;
}


/* ==========================================================
 SGW V480 - WHATSAPP CENTRAL DE ALERTAS V134
 Base visual: gravacao enviada pelo usuario.
 Consolida as classes reais sem alterar integracao/API.
 ========================================================== */

html.sgw456-whatsapp main .wa134{
  color:#eaf4ff !important;
}

/* Cards reais V134, inclusive FORM. */
html.sgw456-whatsapp main .card134,
html.sgw456-whatsapp main form.card134{
  background:linear-gradient(180deg,#071f3b,#061a33) !important;
  color:#eaf4ff !important;
  border:1px solid #17466f !important;
  box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
}

html.sgw456-whatsapp main .top134 h2,
html.sgw456-whatsapp main .card134 h3{
  color:#f6faff !important;
}

html.sgw456-whatsapp main .mut134{
  color:#91afd0 !important;
}

/* Checkbox dos alertas. */
html.sgw456-whatsapp main .check134 label{
  color:#dcecff !important;
  font-size:12px !important;
  font-weight:700 !important;
}
html.sgw456-whatsapp main .check134 input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  flex:0 0 18px !important;
  padding:0 !important;
  margin:0 !important;
  accent-color:#16a34a !important;
  box-shadow:none !important;
}

/* Destinos / numeros. */
html.sgw456-whatsapp main .dest134{
  background:#071c38 !important;
  border-color:#205985 !important;
}
html.sgw456-whatsapp main .field134 label{
  color:#a9c4e3 !important;
}
html.sgw456-whatsapp main .field134 input{
  background:#041a34 !important;
  color:#f1f8ff !important;
  border-color:#1a507f !important;
}
html.sgw456-whatsapp main .field134 input::placeholder{
  color:#7897b8 !important;
}

/* Botoes preservando as cores funcionais. */
html.sgw456-whatsapp main .btn134{
  border:1px solid transparent !important;
  min-height:32px !important;
  font-size:10px !important;
  font-weight:900 !important;
  opacity:1 !important;
}
html.sgw456-whatsapp main .blue134{
  background:#2563eb !important;
  color:#fff !important;
  border-color:#3b82f6 !important;
}
html.sgw456-whatsapp main .green134{
  background:#15803d !important;
  color:#fff !important;
  border-color:#22c55e !important;
}
html.sgw456-whatsapp main .red134{
  background:#b91c1c !important;
  color:#fff !important;
  border-color:#ef4444 !important;
}
html.sgw456-whatsapp main .gray134{
  background:#0a294b !important;
  color:#eaf4ff !important;
  border-color:#205985 !important;
}

/* Status da instancia. */
html.sgw456-whatsapp main .pill134{
  border:1px solid transparent !important;
}
html.sgw456-whatsapp main .open134{
  background:#0d3b28 !important;
  color:#71f0ad !important;
  border-color:#217a57 !important;
}
html.sgw456-whatsapp main .close134{
  background:#40141f !important;
  color:#ff8996 !important;
  border-color:#8f3548 !important;
}
html.sgw456-whatsapp main .connecting134{
  background:#3b300d !important;
  color:#ffe08a !important;
  border-color:#866a14 !important;
}

/* Mensagens de retorno. */
html.sgw456-whatsapp main .ok134{
  color:#71f0ad !important;
}
html.sgw456-whatsapp main .bad134{
  color:#ff8996 !important;
}

/* QR fica claro apenas onde precisa ser branco para leitura. */
html.sgw456-whatsapp main .qr134{
  color:#dcecff !important;
}
html.sgw456-whatsapp main .qr134 img{
  background:#fff !important;
  border-color:#fff !important;
}

/* Historico de envios. */
html.sgw456-whatsapp main .logs134{
  background:#04182f !important;
  border-color:#17466f !important;
}
html.sgw456-whatsapp main .logs134 table{
  background:#061a33 !important;
  color:#dcecff !important;
  border:0 !important;
}
html.sgw456-whatsapp main .logs134 th{
  background:#0a2a4e !important;
  color:#c5e2ff !important;
  border-color:#17466f !important;
}
html.sgw456-whatsapp main .logs134 td{
  background:#071f3b !important;
  color:#dcecff !important;
  border-color:#12395f !important;
}
html.sgw456-whatsapp main .logs134 tr:nth-child(even) td{
  background:#061a33 !important;
}
html.sgw456-whatsapp main .logs134 tbody tr:hover td{
  background:#0b2d51 !important;
}

/* HR inline claro demais no tema escuro. */
html.sgw456-whatsapp main .card134 hr{
  border-top-color:#17466f !important;
}

/* Mensagens "salvo/erro" inline recebem contraste mesmo com style inline. */
html.sgw456-whatsapp main .card134[style*="f0fdf4"]{
  background:#0d3528 !important;
  color:#9ff2c7 !important;
  border-color:#217a57 !important;
}
html.sgw456-whatsapp main .card134[style*="fff1f2"]{
  background:#401923 !important;
  color:#ffb3bd !important;
  border-color:#8f3548 !important;
}

@media(max-width:950px){
  html.sgw456-whatsapp main .grid134{
    grid-template-columns:1fr !important;
  }
  html.sgw456-whatsapp main .dest134{
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
 SGW V487 - INTERFACES PPPOE V50 - CLASSES REAIS
 Somente tema. Nao altera secrets, sync, vinculo ou API.
 ========================================================== */
html.sgw456-pppoe main #sgw-aut-v50-page{
  color:#eaf4ff !important;
}
html.sgw456-pppoe main #sgw-aut-v50-page h1{
  color:#f6faff !important;
}
html.sgw456-pppoe main #sgw-aut-v50-page > div:first-child p{
  color:#91afd0 !important;
}
html.sgw456-pppoe main #sgw-aut-resumo-v50{
  color:#cfe2f7 !important;
}

/* filtros reais */
html.sgw456-pppoe main .sgw-aut-filter-v50{
  background:#0a294b !important;
  color:#cfe2f7 !important;
  border-color:#205985 !important;
}
html.sgw456-pppoe main .sgw-aut-filter-v50:hover{
  background:#0b3157 !important;
  color:#9dceff !important;
}
html.sgw456-pppoe main .sgw-aut-filter-v50.active{
  background:#2563eb !important;
  color:#fff !important;
  border-color:#3b82f6 !important;
}

/* cards reais criados pelo JS V50 */
html.sgw456-pppoe main .sgw-aut-card-v50{
  background:linear-gradient(180deg,#071f3b,#061a33) !important;
  color:#eaf4ff !important;
  border-color:#17466f !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
}
html.sgw456-pppoe main .sgw-aut-card-v50.vinculado{
  border-left:6px solid #22c55e !important;
}
html.sgw456-pppoe main .sgw-aut-card-v50.sem_cliente{
  background:#30270b !important;
  color:#ffe8a6 !important;
  border-color:#6e5914 !important;
  border-left:6px solid #eab308 !important;
}
html.sgw456-pppoe main .sgw-aut-card-v50 b,
html.sgw456-pppoe main .sgw-aut-card-v50 strong{
  color:#f6faff !important;
}
html.sgw456-pppoe main .sgw-aut-card-v50 small{
  color:#91afd0 !important;
}
html.sgw456-pppoe main .sgw-aut-card-v50.sem_cliente small{
  color:#e7ca70 !important;
}

/* badges */
html.sgw456-pppoe main .sgw-aut-badge-v50.ok{
  background:#0d3b28 !important;
  color:#71f0ad !important;
  border:1px solid #217a57 !important;
}
html.sgw456-pppoe main .sgw-aut-badge-v50.warn{
  background:#3b300d !important;
  color:#ffe08a !important;
  border:1px solid #866a14 !important;
}

/* botoes do JS */
html.sgw456-pppoe main .sgw-aut-vincular-v50,
html.sgw456-pppoe main .sgw-aut-confirmar-v50{
  background:#2563eb !important;
  color:#fff !important;
  border:1px solid #3b82f6 !important;
}

/* modal real V50: inner DIV nao tem classe */
html.sgw456-pppoe #sgw-aut-modal-v50{
  background:rgba(1,7,17,.76) !important;
}
html.sgw456-pppoe #sgw-aut-modal-v50 > div{
  background:#061a33 !important;
  color:#eaf4ff !important;
  border:1px solid #205985 !important;
  box-shadow:0 28px 90px rgba(0,0,0,.52) !important;
}
html.sgw456-pppoe #sgw-aut-modal-v50 > div > div:first-child{
  background:#071f3b !important;
  border-color:#17466f !important;
}
html.sgw456-pppoe #sgw-aut-modal-v50 h2{
  color:#f6faff !important;
}
html.sgw456-pppoe #sgw-aut-modal-login-v50{
  color:#91afd0 !important;
}
html.sgw456-pppoe #sgw-aut-modal-close-v50{
  background:#0a294b !important;
  color:#ff8996 !important;
}
html.sgw456-pppoe #sgw-aut-modal-resultados-v50 > div,
html.sgw456-pppoe #sgw-aut-modal-resultados-v50 button{
  background:#071f3b !important;
  color:#dcecff !important;
  border-color:#17466f !important;
}
html.sgw456-pppoe #sgw-aut-modal-resultados-v50 > div:hover,
html.sgw456-pppoe #sgw-aut-modal-resultados-v50 button:hover{
  background:#0b2d51 !important;
}