/* SGW V844 — UI global estável
   - menu único em todas as páginas
   - somente UMA rota ativa
   - /clientes sem visual duplo + cards claros + paginação alinhada
   - /financeiro/resumo-historico com contraste correto
   - /monitoramento/alertas-inteligentes somente Alertas ativo
   Sem DDL, sem API, sem polling contínuo.
*/

:root{
  --sgw844-primary:#0F67ED;
  --sgw844-primary-2:#1F7AF2;
  --sgw844-navy:#09285A;
  --sgw844-navy-2:#123B66;
  --sgw844-text:#16395F;
  --sgw844-muted:#637093;
  --sgw844-line:#C9DCF2;
  --sgw844-soft:#F6FAFF;
  --sgw844-bg:#F2F6FA;
  --sgw844-white:#FFFFFF;
}

/* ===================== MENU GLOBAL ===================== */
html.sgw844-ready body #sgw450TopShell{
  background:#fff!important;
  border-bottom:1px solid #DCE8F5!important;
  box-shadow:0 2px 10px rgba(9,40,90,.045)!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-host{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 10px!important;
  border:1px solid #6FA6E3!important;
  border-radius:14px!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:var(--sgw844-navy)!important;
  -webkit-text-fill-color:var(--sgw844-navy)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active),
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active).sgw826-active-route,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active).active,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active)[aria-current="page"]{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:var(--sgw844-navy)!important;
  -webkit-text-fill-color:var(--sgw844-navy)!important;
  border-color:#6FA6E3!important;
  box-shadow:none!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active) *{
  color:var(--sgw844-navy)!important;
  -webkit-text-fill-color:var(--sgw844-navy)!important;
  fill:currentColor!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active.sgw826-active-route,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active.active,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active[aria-current="page"]{
  background:linear-gradient(135deg,#1878F2 0%,#0F67ED 100%)!important;
  background-color:var(--sgw844-primary)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:var(--sgw844-primary)!important;
  box-shadow:0 5px 14px rgba(15,103,237,.20)!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  fill:currentColor!important;
}

html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:hover{
  border-color:#4F93DD!important;
  box-shadow:0 4px 10px rgba(15,103,237,.08)!important;
}
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active):hover{
  background:#EAF3FF!important;
  color:var(--sgw844-primary)!important;
  -webkit-text-fill-color:var(--sgw844-primary)!important;
}

/* Segunda linha igual em todas as páginas */
html.sgw844-ready body #sgw450TopShell .sgw827-subbar{
  background:#fff!important;
  border:0!important;
}
html.sgw844-ready body #sgw450TopShell .sgw827-subbox{
  background:#F8FBFF!important;
  background-color:#F8FBFF!important;
  border:1px solid #BCD4F1!important;
  color:#20476F!important;
  -webkit-text-fill-color:#20476F!important;
  box-shadow:none!important;
}
html.sgw844-ready body #sgw450TopShell .sgw827-search input{
  background:transparent!important;
  color:#16395F!important;
  -webkit-text-fill-color:#16395F!important;
}
html.sgw844-ready body #sgw450TopShell .sgw827-search input::placeholder{
  color:#637093!important;
  -webkit-text-fill-color:#637093!important;
}

/* ===================== CLIENTES ===================== */
html.sgw844-route-clientes body{
  background:var(--sgw844-bg)!important;
}

html.sgw844-route-clientes body .sgw844-client-cards-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  align-items:stretch!important;
}

html.sgw844-route-clientes body .sgw844-client-card{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  height:96px!important;
  min-height:96px!important;
  max-height:96px!important;
  padding:14px 22px 14px 86px!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid #C9DCF2!important;
  border-radius:16px!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#F7FBFF 100%)!important;
  box-shadow:0 4px 14px rgba(9,40,90,.05)!important;
  color:var(--sgw844-text)!important;
  -webkit-text-fill-color:var(--sgw844-text)!important;
  box-sizing:border-box!important;
}

html.sgw844-route-clientes body .sgw844-client-card.sgw844-card-active{
  border:1.5px solid #4A96FA!important;
  background:#EFF6FF!important;
  background-color:#EFF6FF!important;
  background-image:linear-gradient(135deg,#F9FCFF 0%,#EAF4FF 100%)!important;
  box-shadow:0 6px 18px rgba(15,103,237,.09)!important;
}

html.sgw844-route-clientes body .sgw844-client-card.sgw844-card-disabled{
  background:#FBFDFF!important;
  background-color:#FBFDFF!important;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#F5F8FC 100%)!important;
  border-color:#D1DFEE!important;
}

/* Neutraliza as antigas camadas internas azul/preto/branco sem mexer na estrutura */
html.sgw844-route-clientes body .sgw844-client-card > *,
html.sgw844-route-clientes body .sgw844-client-card .sgw844-card-clear{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
html.sgw844-route-clientes body .sgw844-client-card > *::before,
html.sgw844-route-clientes body .sgw844-client-card > *::after{
  display:none!important;
}

html.sgw844-route-clientes body .sgw844-client-card::before{
  content:"👥"!important;
  position:absolute!important;
  left:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#EAF3FF!important;
  color:#09285A!important;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
  font-size:24px!important;
  line-height:1!important;
  box-shadow:inset 0 0 0 1px #D4E4F6!important;
  z-index:5!important;
}
html.sgw844-route-clientes body .sgw844-client-card.sgw844-card-active::before{
  background:#DFEEFF!important;
}
html.sgw844-route-clientes body .sgw844-client-card.sgw844-card-disabled::before{
  background:#EEF2F7!important;
  filter:grayscale(1)!important;
}

html.sgw844-route-clientes body .sgw844-card-old-icon{
  display:none!important;
}
html.sgw844-route-clientes body .sgw844-card-title{
  display:block!important;
  position:relative!important;
  width:auto!important;
  margin:0 0 4px!important;
  padding:0!important;
  background:transparent!important;
  color:#41617E!important;
  -webkit-text-fill-color:#41617E!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.05!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:6!important;
}
html.sgw844-route-clientes body .sgw844-card-count{
  display:block!important;
  position:relative!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  color:#0F67ED!important;
  -webkit-text-fill-color:#0F67ED!important;
  font-size:29px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:6!important;
}
html.sgw844-route-clientes body .sgw844-card-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  z-index:6!important;
}

/* Busca da página clientes sempre clara */
html.sgw844-route-clientes body .sgw844-client-search{
  background:#fff!important;
  border:1px solid #C9DCF2!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
html.sgw844-route-clientes body .sgw844-client-search input{
  background:#fff!important;
  color:#16395F!important;
  -webkit-text-fill-color:#16395F!important;
}

/* paginação compacta e bem enquadrada */
html.sgw844-route-clientes body .sgw844-pagination-shell{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:3px 6px!important;
  margin:0!important;
  border:1px solid #9EC4F0!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html.sgw844-route-clientes body .sgw844-pagination-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  min-height:26px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #D0DDEC!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#153A61!important;
  -webkit-text-fill-color:#153A61!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
html.sgw844-route-clientes body .sgw844-pagination-link.sgw844-page-active,
html.sgw844-route-clientes body .sgw844-pagination-link[aria-current="page"]{
  background:#0F67ED!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#0F67ED!important;
}
html.sgw844-route-clientes body .sgw844-pagination-gap{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:20px!important;
  height:26px!important;
  color:#6A809A!important;
  font-weight:800!important;
}

/* ===================== FINANCEIRO / RESUMO ===================== */
html.sgw844-route-financeiro body .sgw844-fin-title,
html.sgw844-route-financeiro body .sgw844-fin-title *{
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
  text-shadow:none!important;
}

html.sgw844-route-financeiro body .sgw844-fin-card{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border:1px solid #C9DCF2!important;
  border-radius:14px!important;
  box-shadow:0 4px 14px rgba(9,40,90,.05)!important;
  color:#173A5E!important;
  -webkit-text-fill-color:#173A5E!important;
}
html.sgw844-route-financeiro body .sgw844-fin-card *{
  text-shadow:none!important;
}
html.sgw844-route-financeiro body .sgw844-fin-label{
  color:#5E7692!important;
  -webkit-text-fill-color:#5E7692!important;
  font-weight:800!important;
}
html.sgw844-route-financeiro body .sgw844-fin-value{
  font-weight:900!important;
  opacity:1!important;
  visibility:visible!important;
}
html.sgw844-route-financeiro body .sgw844-fin-card-0 .sgw844-fin-value{color:#17B86A!important;-webkit-text-fill-color:#17B86A!important;}
html.sgw844-route-financeiro body .sgw844-fin-card-1 .sgw844-fin-value{color:#1676E8!important;-webkit-text-fill-color:#1676E8!important;}
html.sgw844-route-financeiro body .sgw844-fin-card-2 .sgw844-fin-value{color:#7A48D8!important;-webkit-text-fill-color:#7A48D8!important;}
html.sgw844-route-financeiro body .sgw844-fin-card-3 .sgw844-fin-value{color:#E97A00!important;-webkit-text-fill-color:#E97A00!important;}
html.sgw844-route-financeiro body .sgw844-fin-card-4 .sgw844-fin-value{color:#D92525!important;-webkit-text-fill-color:#D92525!important;}
html.sgw844-route-financeiro body .sgw844-fin-card-5 .sgw844-fin-value{color:#617A98!important;-webkit-text-fill-color:#617A98!important;}

html.sgw844-route-financeiro body .sgw844-fin-grid,
html.sgw844-route-financeiro body .sgw844-fin-panel{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#173A5E!important;
  -webkit-text-fill-color:#173A5E!important;
  border-color:#D1E0F0!important;
  box-shadow:none!important;
}
html.sgw844-route-financeiro body .sgw844-fin-grid *:not(.sgw844-fin-value),
html.sgw844-route-financeiro body .sgw844-fin-panel *:not(.sgw844-fin-value){
  text-shadow:none!important;
}
html.sgw844-route-financeiro body .sgw844-fin-section-heading,
html.sgw844-route-financeiro body .sgw844-fin-section-heading *{
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}

/* ===================== ALERTAS ===================== */
html.sgw844-route-alertas body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active){
  background:#fff!important;
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}
html.sgw844-route-alertas body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active{
  background:#0F67ED!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

@media(max-width:980px){
  html.sgw844-route-clientes body .sgw844-client-cards-row{
    grid-template-columns:1fr!important;
  }
  html.sgw844-route-clientes body .sgw844-client-card{
    height:84px!important;
    min-height:84px!important;
    max-height:84px!important;
  }
}

/* SGW V849 — reforço de legibilidade do menu global.
   Corrige somente texto/visibilidade dos itens já classificados pela V844. */
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item *{
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active),
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active) *{
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active,
html.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* SGW V851 — /integracao/servidor usa o MESMO topo claro das outras páginas.
   Não cria outro header. Apenas neutraliza o tema escuro legado que ainda vence
   nessa rota específica depois que sistema_mikrotik.html passou a herdar só base.html. */
html.sgw851-integracao-light body #sgw450TopShell{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  background-image:none!important;
  border-bottom:1px solid #DCE8F5!important;
  box-shadow:0 2px 10px rgba(9,40,90,.045)!important;
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw450-navrow,
html.sgw851-integracao-light body #sgw450TopShell .sgw450-brand,
html.sgw851-integracao-light body #sgw450TopShell .sgw450-nav,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-subbar{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  background-image:none!important;
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
  border-color:#DCE8F5!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw450-brand *,
html.sgw851-integracao-light body #sgw450TopShell .sgw450-navrow > *:not(.sgw844-menu-item){
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw827-subbox{
  background:#F8FBFF!important;
  background-color:#F8FBFF!important;
  background-image:none!important;
  border:1px solid #BCD4F1!important;
  color:#20476F!important;
  -webkit-text-fill-color:#20476F!important;
  box-shadow:none!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw827-subbox *,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-search,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-status,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-clock,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-bell,
html.sgw851-integracao-light body #sgw450TopShell .sgw827-account{
  color:#20476F!important;
  -webkit-text-fill-color:#20476F!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw827-search input{
  background:transparent!important;
  background-color:transparent!important;
  color:#16395F!important;
  -webkit-text-fill-color:#16395F!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw827-search input::placeholder{
  color:#637093!important;
  -webkit-text-fill-color:#637093!important;
  opacity:1!important;
}

/* Menu continua sendo o menu global da V844/V849 */
html.sgw851-integracao-light.sgw844-ready body #sgw450TopShell .sgw844-menu-item{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  background-image:none!important;
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
  border-color:#6FA6E3!important;
  box-shadow:none!important;
}

html.sgw851-integracao-light.sgw844-ready body #sgw450TopShell .sgw844-menu-item:not(.sgw844-menu-active) *{
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
}

html.sgw851-integracao-light.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active{
  background:linear-gradient(135deg,#1878F2 0%,#0F67ED 100%)!important;
  background-color:#0F67ED!important;
  border-color:#0F67ED!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 5px 14px rgba(15,103,237,.20)!important;
}

html.sgw851-integracao-light.sgw844-ready body #sgw450TopShell .sgw844-menu-item.sgw844-menu-active *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Neutraliza especificamente fundos navy herdados em wrappers internos do shell */
html.sgw851-integracao-light body #sgw450TopShell > div,
html.sgw851-integracao-light body #sgw450TopShell > section,
html.sgw851-integracao-light body #sgw450TopShell > header{
  background-color:#FFFFFF!important;
  background-image:none!important;
}

/* SGW V852 — estado ativo de Integrações igual às outras páginas.
   A V852 só pinta o pill real já existente; não cria outra camada. */
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > a,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > button,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > .sgw450-navlink,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > .sgw450-navbutton,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host.sgw844-menu-item{
  background:linear-gradient(135deg,#1878F2 0%,#0F67ED 100%)!important;
  background-color:#0F67ED!important;
  background-image:linear-gradient(135deg,#1878F2 0%,#0F67ED 100%)!important;
  border-color:#0F67ED!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 5px 14px rgba(15,103,237,.20)!important;
}

html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host *,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > a *,
html.sgw851-integracao-light body #sgw450TopShell .sgw852-integracoes-active-host > button *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Nesta rota os demais pills continuam exatamente no padrão branco global. */
html.sgw851-integracao-light body #sgw450TopShell .sgw844-menu-item:not(.sgw852-integracoes-active-host):not(.sgw844-menu-active){
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  border-color:#6FA6E3!important;
  color:#09285A!important;
  -webkit-text-fill-color:#09285A!important;
  box-shadow:none!important;
}

/* SGW V854 — corrige apenas o estado visual ativo de Integrações.
   V853 já marca o item real com aria-current="page".
   Aqui pintamos o próprio item E o host visual que contém esse item. */
html.sgw851-integracao-light body #sgw450TopShell
  .sgw450-navitem:has(> [aria-current="page"]),
html.sgw851-integracao-light body #sgw450TopShell
  .sgw460-nav-item:has(> [aria-current="page"]),
html.sgw851-integracao-light body #sgw450TopShell
  [aria-current="page"]{
  background:#0F67ED!important;
  background-color:#0F67ED!important;
  background-image:linear-gradient(135deg,#1878F2 0%,#0F67ED 100%)!important;
  border-color:#0F67ED!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 5px 14px rgba(15,103,237,.20)!important;
}

html.sgw851-integracao-light body #sgw450TopShell
  .sgw450-navitem:has(> [aria-current="page"]) *,
html.sgw851-integracao-light body #sgw450TopShell
  .sgw460-nav-item:has(> [aria-current="page"]) *,
html.sgw851-integracao-light body #sgw450TopShell
  [aria-current="page"] *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* Mantém os demais itens exatamente no padrão branco global. */
html.sgw851-integracao-light body #sgw450TopShell
  .sgw450-navitem:not(:has(> [aria-current="page"])),
html.sgw851-integracao-light body #sgw450TopShell
  .sgw460-nav-item:not(:has(> [aria-current="page"])){
  box-shadow:none!important;
}