/*
 * W-Energy Client — Design System v2.0
 * Técnica: topbar height:0 + filhos fixed reposicionados
 * Baseado no padrão do admin-v2/dist/css/wenergy-theme.css
 * Override puro — nunca editar style.min.css ou colocar regras inline
 */

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

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Brand (roxo — idêntico ao Bootstrap primary do tema) */
  --p:    #7460EE;
  --p-d:  #5f4de0;
  --p-l:  #9d8ef4;
  --p-bg: #F3F0FD;
  --p-bd: #C4B8F8;

  /* Status */
  --ok:    #16A34A; --ok-bg:  #F0FDF4; --ok-bd: #BBF7D0;
  --err:   #DC2626; --err-bg: #FEF2F2; --err-bd:#FECACA;
  --warn:  #D97706; --warn-bg:#FFFBEB; --warn-bd:#FDE68A;
  --info:  #0891B2; --info-bg:#F0F9FF; --info-bd:#BAE6FD;

  /* Escala de cinza */
  --g1: #0F172A; --g2: #1E293B; --g3: #475569;
  --g4: #94A3B8; --g5: #CBD5E1; --g6: #E2E8F0;
  --g7: #F1F5F9; --g8: #F8FAFC;

  /* Superfícies */
  --surface:       #FFFFFF;
  --surface-glass: rgba(255,255,255,0.82);
  --bd-card:       rgba(255,255,255,0.40);
  --bd-inner:      rgba(15,23,42,0.07);

  /* Radius */
  --r-xs: 4px;  --r-sm: 8px;   --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px;  --r-2xl: 24px; --r-full: 9999px;

  /* Shadow */
  --sh-xs:   0 1px 2px rgba(15,23,42,.04);
  --sh-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:   0 4px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --sh-lg:   0 10px 36px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --sh-xl:   0 20px 56px rgba(15,23,42,.14), 0 8px 20px rgba(15,23,42,.07);
  --sh-p:    0 4px 14px rgba(116,96,238,.30);
  --sh-card: 0 2px 24px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);

  --ease:        .15s cubic-bezier(.4,0,.2,1);
  --ease-spring: .2s  cubic-bezier(.34,1.56,.64,1);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;

  /* Layout — idêntico ao admin-v2 */
  --sb-w:   240px;
  --h-off:  36px;
  --v-off:  26px;   /* margem topo/base */
  --gap:    18px;
  --hdr-h:  52px;   /* altura da linha breadcrumb/bell */
  --hdr2-h: 64px;
}

/* ═══════════════════════════════════════════════════
   2. RESET & TIPOGRAFIA
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  height:          100% !important;
  overflow:        hidden !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--g2) !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -.01em !important;

  /* Background — imagem corporativa W-Energy (igual ao admin-v2) */
  background-color:    #0F1C45 !important;
  background-image:    url('../images/background/backend_executive_full.png') !important;
  background-size:     cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat:   no-repeat !important;
  /* Bloqueia scroll do navegador — o scroll fica no .we-scroll-section interno.
     NÃO usar height:100vh aqui (quebra dimensionamento de gráficos ApexCharts). */
  overflow:            hidden !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--g1) !important;
  letter-spacing: -.02em !important;
  line-height: 1.25 !important;
}
h3 { font-size: 1.15rem !important; font-weight: 700 !important; }
h4 { font-size: 1rem    !important; font-weight: 600 !important; }
h5 { font-size: .875rem !important; font-weight: 600 !important; }
h6 { font-size: .8rem   !important; font-weight: 600 !important; }

a       { color: var(--p) !important; text-decoration: none !important; transition: color var(--ease) !important; }
a:hover { color: var(--p-d) !important; }

/* ═══════════════════════════════════════════════════
   3. MAIN WRAPPER
═══════════════════════════════════════════════════ */
#main-wrapper {
  background:  transparent !important;
  position:    relative;
  z-index:     1;
  overflow:    visible !important;
}

/* ═══════════════════════════════════════════════════
   4. TOPBAR — height:0, filhos são fixed independentes
═══════════════════════════════════════════════════ */
.topbar,
header.topbar,
#main-wrapper .topbar,
#main-wrapper[data-layout="vertical"]   .topbar,
#main-wrapper[data-layout="horizontal"] .topbar,
#main-wrapper[data-layout="vertical"]   .topbar[data-navbarbg],
#main-wrapper[data-layout="horizontal"] .topbar[data-navbarbg] {
  position:   fixed !important;
  top:        0 !important;
  left:       0 !important;
  right:      0 !important;
  height:     0 !important;
  overflow:   visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border:     none !important;
  z-index:    600 !important;
}

.top-navbar,
.top-navbar.navbar,
.top-navbar.navbar-dark {
  height:     0 !important;
  min-height: 0 !important;
  overflow:   visible !important;
  background: transparent !important;
  padding:    0 !important;
  margin:     0 !important;
}

/* ── 4a. NAVBAR-HEADER: topo do card sidebar (logo) ── */
.topbar .top-navbar .navbar-header,
#main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header,
#main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header[data-logobg],
#main-wrapper[data-layout="vertical"][data-sidebartype="full"] .topbar .top-navbar .navbar-header {
  position:         fixed !important;
  top:              var(--v-off) !important;
  left:             var(--h-off) !important;
  width:            var(--sb-w) !important;
  height:           calc(var(--hdr-h) + 50px) !important;
  background:       var(--surface) !important;
  background-color: var(--surface) !important;
  border-radius:    var(--r-lg) var(--r-lg) 0 0 !important;
  border-bottom:    none !important;
  z-index:          500 !important;
  display:          flex !important;
  align-items:      flex-end !important;
  /* Logo empurrada para a base do card (ocupa o espaço inferior) */
  padding:          0 var(--sp-4) var(--sp-3) !important;
  box-shadow:       none !important;
  overflow:         hidden !important;
}

/* Logo: sempre dark sobre fundo branco */
.topbar .top-navbar .navbar-header .dark-logo  { display: inline !important; }
.topbar .top-navbar .navbar-header .light-logo { display: none   !important; }

/* Toggles mobile: ocultos no desktop */
.navbar-header .nav-toggler,
.navbar-header .topbartoggler { display: none !important; }

/* ── 4b. NAVBAR-COLLAPSE: bell + search + avatar — única linha ── */
.navbar-collapse,
.navbar-collapse.collapse,
.navbar-collapse.show,
#navbarSupportedContent,
#main-wrapper[data-layout="vertical"] .topbar .navbar-collapse,
#main-wrapper[data-layout="vertical"] .topbar .navbar-collapse[data-navbarbg],
#main-wrapper[data-layout="horizontal"] .topbar .navbar-collapse,
#main-wrapper[data-layout="horizontal"] .topbar .navbar-collapse[data-navbarbg],
.navbar-collapse[data-navbarbg="skin1"],
.navbar-collapse[data-navbarbg="skin2"],
.navbar-collapse[data-navbarbg="skin3"],
.navbar-collapse[data-navbarbg="skin4"],
.navbar-collapse[data-navbarbg="skin5"],
.navbar-collapse[data-navbarbg="skin6"],
.navbar-collapse[data-navbarbg="skin7"],
.navbar-collapse[data-navbarbg="skin8"],
.navbar-collapse[data-navbarbg="skin9"] {
  position:        fixed !important;
  top:             var(--v-off) !important;
  left:            calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
  right:           var(--h-off) !important;
  height:          var(--hdr-h) !important;
  background:      transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border:          none !important;
  border-radius:   0 !important;
  box-shadow:      none !important;
  z-index:         550 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  padding:         0 var(--sp-5) !important;
  flex-direction:  row !important;
  flex-wrap:       nowrap !important;
  margin-left:     0 !important;
  gap:             var(--sp-1) !important;
}

/* ul → display:contents para order individual */
.navbar-collapse .navbar-nav { display: contents !important; }

/* Sidebar toggler: ocultar — não há mini-sidebar no nosso layout */
.navbar-nav.me-auto .sidebartoggler,
.navbar-nav.me-auto .nav-item.d-none,
#main-wrapper.mini-sidebar .left-sidebar .nav-toggler,
#main-wrapper.mini-sidebar .navbar-header .nav-toggler { display: none !important; }

/* mini-sidebar: navbar-collapse ainda alinha com --sb-w (sidebar fixada em --sb-w) */
#main-wrapper.mini-sidebar .navbar-collapse,
#main-wrapper[data-sidebartype="mini-sidebar"] .navbar-collapse {
  left: calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
}
/* mini-sidebar: hide-menu texts always visible */
#main-wrapper.mini-sidebar .sidebar-nav .hide-menu { display: inline !important; }

/* Bell: ordem 1 */
.navbar-collapse .navbar-nav.me-auto .nav-item.dropdown {
  order:       1 !important;
  display:     flex !important;
  align-items: center !important;
  position:    relative !important;
}
.navbar-collapse .navbar-nav.me-auto .nav-item.dropdown > .nav-link {
  position:    relative !important;
  overflow:    visible !important;
  padding:     0 var(--sp-2) !important;
  display:     flex !important;       /* elimina distorção do line-height herdado (1.5) */
  align-items: center !important;     /* altura = ícone (18px), sem line-box extra */
  line-height: 1 !important;
}

/* Search: alinhada com a linha do título (we-hdr-row);
   right usa h-off + sp-8 para que a borda direita fique rente
   ao limite interno do card (que tem padding: 0 sp-8) */
.navbar-collapse .nav-item.search-box {
  position:    fixed !important;
  top:         calc(var(--v-off) + var(--hdr-h) + (var(--hdr2-h) - 36px) / 2) !important;
  right:       calc(var(--h-off) + var(--sp-8)) !important;
  left:        auto !important;
  height:      36px !important;
  display:     flex !important;
  align-items: center !important;
  z-index:     540 !important;
  order:       0 !important;
}

/* Avatar: card fixo no rodapé da sidebar (sai do topo e vai para baixo do menu lateral) */
.navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown {
  position:      fixed !important;
  bottom:        var(--v-off) !important;
  left:          var(--h-off) !important;
  width:         var(--sb-w) !important;
  height:        64px !important;
  background:    var(--surface) !important;
  border-top:    1px solid var(--g6) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow:    var(--sh-lg) !important;
  z-index:       450 !important;
  display:       flex !important;
  align-items:   center !important;
  padding:       0 var(--sp-4) !important;
  order:         0 !important;
  margin:        0 !important;
  /* overflow:visible permite que o dropdown menu escape do card de 64px e
     apareça acima dele. A truncação de nome/e-mail é feita por .we-user-info. */
  overflow:      visible !important;
}

/* Link do avatar: flex deixando espaço para o botão de logout */
.navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown > .nav-link {
  flex:        1 !important;
  min-width:   0 !important;
  display:     flex !important;
  align-items: center !important;
  gap:         var(--sp-3) !important;
  padding:     0 !important;
  color:       var(--g2) !important;
}

/* Bloco de texto: nome + role */
.we-user-info {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 !important;
  min-width:      0 !important;
  overflow:       hidden !important;
}
.we-user-name {
  font-size:     13px !important;
  font-weight:   600 !important;
  color:         var(--g1) !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  line-height:   1.3 !important;
}
.we-user-role {
  font-size:     11px !important;
  font-weight:   400 !important;
  color:         var(--g4) !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  line-height:   1.3 !important;
  margin-top:    1px !important;
}

/* Botão de logout: ícone separado à direita do card */
.we-logout-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           36px !important;
  min-width:       36px !important;
  height:          36px !important;
  border-radius:   var(--r-sm) !important;
  color:           var(--g4) !important;
  border:          none !important;
  background:      transparent !important;
  transition:      all var(--ease) !important;
  text-decoration: none !important;
  flex-shrink:     0 !important;
}
.we-logout-btn:hover {
  background: var(--err-bg) !important;
  color:      var(--err) !important;
}
.we-logout-btn svg,
.we-logout-btn i {
  width:  16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

/* Dropdown menu do avatar: abre para cima, com z-index alto para
   ficar acima do conteúdo da página (.page-wrapper, sidebar, etc.) */
.navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown .dropdown-menu {
  bottom:    calc(64px + 6px) !important;
  top:       auto !important;
  left:      0 !important;
  right:     auto !important;
  min-width: var(--sb-w) !important;
  transform: none !important;
  z-index:   100040 !important;
}
/* Quando aberto, garante que está visível por cima de qualquer overlay */
.navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown .dropdown-menu.show {
  display: block !important;
}

/* mini-sidebar: avatar card acompanha a sidebar */
#main-wrapper.mini-sidebar .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown,
#main-wrapper[data-sidebartype="mini-sidebar"] .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown {
  left:  var(--h-off) !important;
  width: var(--sb-w)  !important;
}

/* Nav links — ícones escuros sobre bg translúcido */
.top-navbar .nav-link,
.top-navbar .nav-link i,
.top-navbar .nav-link svg {
  color:  var(--g2) !important;
  stroke: var(--g2) !important;
  transition: all var(--ease) !important;
}
.top-navbar .nav-link:hover     { color: var(--p) !important; }
.top-navbar .nav-link:hover svg { stroke: var(--p) !important; }

/* Bell badge — cores */
.notify .heartbit { border-color: var(--err) !important; }
.notify .point     { background:   var(--err) !important; }

/* Notify: posição controlada por JS (positionNotifyBadge em main.php).
   JS usa getBoundingClientRect() no SVG feather-bell e aplica
   position:fixed com coordenadas exatas de viewport.
   Aqui apenas geometria dos filhos (heartbit e point são absolutos
   relativos ao .notify, que tem width:0/height:0 — âncora de ponto). */
.notify {
  /* Posição inicial — JS sobrescreve com inline style !important */
  position: fixed !important;
  width:    0 !important;
  height:   0 !important;
  overflow: visible !important;
  transform: none !important;
  /* z-index acima do .preloader (99999) para que o indicador fique
     visível mesmo durante a animação de fade do preloader */
  z-index:  100001 !important;
}
/* heartbit(25px) e point(6px) centrados no canto sup-dir do sino:
   center = -size/2 nas duas dimensões (left e top a partir do ponto 0×0) */
.notify .heartbit {
  position: absolute !important;
  top:   -13px !important;  /* -25/2 ≈ -13px */
  left:  -13px !important;  /* usando left (não right) para evitar ambiguidade */
}
.notify .point {
  position: absolute !important;
  top:   -3px !important;   /* -6/2 = -3px */
  left:  -3px !important;
}

/* Dropdown do sino: fixed + constrained no card principal.
   position:fixed + inset:auto + transform:none override Popper.js / Bootstrap 5.
   Aparece logo abaixo do bc-row, alinhado à direita do conteúdo do card. */
.navbar-collapse .navbar-nav.me-auto .nav-item.dropdown .dropdown-menu,
.navbar-collapse .navbar-nav.me-auto .nav-item.dropdown .dropdown-menu.show {
  position:   fixed !important;
  inset:      auto !important;
  top:        calc(var(--v-off) + var(--hdr-h) + 8px) !important;
  right:      calc(var(--h-off) + var(--sp-8)) !important;
  left:       auto !important;
  bottom:     auto !important;
  transform:  none !important;
  min-width:  260px !important;
  max-width:  340px !important;
  max-height: calc(100vh - var(--v-off) * 2 - var(--hdr-h) - 60px) !important;
  overflow-y: auto !important;
  z-index:    700 !important;
}

/* ── 4c. SEARCH INPUT ── */
.app-search { position: relative !important; }

.app-search::before {
  content:            '' !important;
  position:           absolute !important;
  left:               12px !important;
  top:                50% !important;
  transform:          translateY(-50%) !important;
  width:              14px !important;
  height:             14px !important;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat:  no-repeat !important;
  background-size:    contain !important;
  pointer-events:     none !important;
  z-index:            1 !important;
}

.app-search .form-control,
.search-box .app-search .form-control {
  height:        36px !important;
  width:         228px !important;
  background:    rgba(255,255,255,0.72) !important;
  border:        1px solid rgba(255,255,255,0.80) !important;
  border-radius: var(--r-md) !important;
  font-size:     13px !important;
  color:         var(--g2) !important;
  padding:       0 var(--sp-4) 0 34px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow:    var(--sh-xs) !important;
  transition:    border-color var(--ease), box-shadow var(--ease) !important;
}
.app-search .form-control:focus,
.search-box .app-search .form-control:focus {
  background:   rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,1) !important;
  box-shadow:   0 0 0 3px rgba(116,96,238,.15) !important;
  outline:      none !important;
}
.app-search .form-control::placeholder { color: rgba(100,116,139,0.8) !important; }

/* Avatar — tamanho maior para o card do rodapé da sidebar */
.navbar-collapse .profile-pic {
  width:         36px !important;
  height:        36px !important;
  min-width:     36px !important;
  border-radius: var(--r-full) !important;
  border:        2px solid var(--g6) !important;
  object-fit:    cover !important;
}
.navbar-collapse .navbar-nav > li.nav-item.dropdown > a.nav-link {
  display:     flex !important;
  align-items: center !important;
  padding:     0 !important;
}

/* Dropdown da topbar */
.topbar .dropdown-menu {
  border:        1px solid var(--g6) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-xl) !important;
  background:    var(--surface) !important;
  padding:       var(--sp-2) !important;
  min-width:     220px !important;
}

/* ═══════════════════════════════════════════════════
   5. SIDEBAR — card branco flutuante
═══════════════════════════════════════════════════ */
.left-sidebar,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .left-sidebar,
.left-sidebar[data-sidebarbg],
.left-sidebar[data-sidebarbg="skin1"], .left-sidebar[data-sidebarbg="skin2"],
.left-sidebar[data-sidebarbg="skin3"], .left-sidebar[data-sidebarbg="skin4"],
.left-sidebar[data-sidebarbg="skin5"], .left-sidebar[data-sidebarbg="skin6"],
.left-sidebar[data-sidebarbg="skin7"], .left-sidebar[data-sidebarbg="skin8"],
.left-sidebar[data-sidebarbg="skin9"] {
  position:         fixed !important;
  /* Sobe ~20px para aproximar da logo (era +50px após o header).
     Como `bottom` permanece em var(--v-off), reduzir o `top` aumenta
     a altura útil em 20px — ajuda a caber todos os itens. */
  top:              calc(var(--v-off) + var(--hdr-h) + 30px) !important;
  left:             var(--h-off) !important;
  bottom:           var(--v-off) !important;
  width:            var(--sb-w) !important;
  height:           auto !important;
  background:       var(--surface) !important;
  background-color: var(--surface) !important;
  /* Sem rounding inferior — o card do avatar fornece os cantos arredondados */
  border-radius:    0 !important;
  box-shadow:       var(--sh-lg) !important;
  border:           none !important;
  overflow-y:       auto !important;
  overflow-x:       hidden !important;
  z-index:          400 !important;
  /* 64px = altura do card do avatar + 6px de breathing room.
     Reduzido de 80px → 70px para ganhar 10px adicionais de espaço
     útil — garante que o item "Sair" apareça sem precisar rolar. */
  padding-bottom:   70px !important;
  animation:        weFadeIn .28s ease both;
}

/* Override mini-sidebar — força sidebar width + posição idênticos ao modo full */
#main-wrapper.mini-sidebar .left-sidebar,
#main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar,
#main-wrapper[data-sidebartype="iconbar"]      .left-sidebar {
  width:  var(--sb-w) !important;
  top:    calc(var(--v-off) + var(--hdr-h) + 30px) !important;
  left:   var(--h-off) !important;
  bottom: var(--v-off) !important;
}

/* Override inline styles do JS */
.left-sidebar ul,
.left-sidebar[data-sidebarbg] ul,
.left-sidebar[data-sidebarbg="skin1"] ul,
.left-sidebar[data-sidebarbg="skin2"] ul,
.left-sidebar[data-sidebarbg="skin3"] ul,
.left-sidebar[data-sidebarbg="skin4"] ul,
.left-sidebar[data-sidebarbg="skin5"] ul,
.left-sidebar[data-sidebarbg="skin6"] ul,
.left-sidebar[data-sidebarbg="skin7"] ul,
.left-sidebar[data-sidebarbg="skin8"] ul,
.left-sidebar[data-sidebarbg="skin9"] ul,
.scroll-sidebar,
.sidebar-nav,
.sidebar-nav ul,
ul#sidebarnav,
ul#sidebarnav ul {
  background: var(--surface) !important;
}

/* ── 5a. Nav items ── */
.sidebar-nav ul,
.sidebar-nav ul li { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.sidebar-nav ul .sidebar-item .sidebar-link,
.sidebar-nav ul .sidebar-item a.sidebar-link {
  display:      flex !important;
  align-items:  center !important;
  gap:          var(--sp-3) !important;
  height:       42px !important;
  padding:      0 var(--sp-4) !important;
  margin:       2px var(--sp-3) !important;
  border-radius: var(--r-sm) !important;
  color:        var(--g3) !important;
  font-size:    13px !important;
  font-weight:  500 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  transition:   background var(--ease), color var(--ease) !important;
  white-space:  nowrap !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: var(--g7) !important;
  color:      var(--g1) !important;
}

/* Item ativo */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.active  > .sidebar-link {
  background:  var(--p-bg) !important;
  color:       var(--p) !important;
  font-weight: 600 !important;
  position:    relative !important;
}

/* Barra de acento esquerda — igual ao admin-v2 */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
.sidebar-nav ul .sidebar-item.active   > .sidebar-link::before {
  content:       '' !important;
  position:      absolute !important;
  left:          0 !important;
  top:           8px !important;
  bottom:        8px !important;
  width:         3px !important;
  background:    var(--p) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* Ícones feather */
.sidebar-nav ul .sidebar-item .sidebar-link i,
.sidebar-nav ul .sidebar-item .sidebar-link svg,
.sidebar-nav ul .sidebar-item .sidebar-link [data-feather] {
  color:     var(--g4) !important;
  stroke:    var(--g4) !important;
  width:     16px !important;
  height:    16px !important;
  flex-shrink: 0 !important;
  transition: color var(--ease), stroke var(--ease) !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover i,
.sidebar-nav ul .sidebar-item .sidebar-link:hover svg,
.sidebar-nav ul .sidebar-item.active > .sidebar-link i,
.sidebar-nav ul .sidebar-item.active > .sidebar-link svg {
  color:  var(--p) !important;
  stroke: var(--p) !important;
}

/* Sub-menu */
.sidebar-nav ul .first-level {
  padding-left: var(--sp-3) !important;
  border-left:  2px solid var(--g6) !important;
  margin-left:  22px !important;
  margin-right: var(--sp-2) !important;
}
.sidebar-nav ul .first-level .sidebar-item .sidebar-link {
  height:    36px !important;
  font-size: 12.5px !important;
  margin:    1px 0 !important;
  padding:   0 var(--sp-3) !important;
}

/* nav-small-cap */
.sidebar-nav .nav-small-cap,
.sidebar-nav #sidebarnav > li.nav-small-cap {
  color:          var(--g4) !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding:        var(--sp-4) var(--sp-4) var(--sp-2) !important;
  margin-top:     var(--sp-2) !important;
  display:        flex !important;
  align-items:    center !important;
  height:         32px !important;
  border:         none !important;
  background:     none !important;
}
.sidebar-nav .nav-small-cap i,
.sidebar-nav .nav-small-cap .mdi { display: none !important; }
.sidebar-nav .nav-small-cap .hide-menu {
  display:    block !important;
  opacity:    1 !important;
  visibility: visible !important;
}

/* Separador — oculto (design limpo sem divisórias entre itens) */
.sidebar-nav .nav-devider,
li.nav-devider,
#sidebarnav .nav-devider {
  display: none !important;
}

/* Oculta TODOS os nav-small-cap (section headers) — elimina ~55px de gap antes do 1º item */
.sidebar-nav #sidebarnav > li.nav-small-cap,
.sidebar-nav .nav-small-cap,
li.nav-small-cap { display: none !important; }

/* Zera TODOS os espaços no topo da sidebar para aproximar itens da logo.
   Seletores duplos garantem override sobre qualquer regra do template com
   especificidade (0,2,0) que bata nossa regra (0,1,0) anterior. */
.scroll-sidebar,
.left-sidebar .scroll-sidebar { padding-top: 0 !important; margin-top: -50px !important; }

.sidebar-nav,
.left-sidebar .sidebar-nav { padding-top: 0 !important; padding-bottom: 0 !important; }

ul#sidebarnav,
.left-sidebar ul#sidebarnav { padding-top: 4px !important; margin-top: 0 !important; }

/* Seta sub-menu — chevron ▼ mais espesso e definido.
   - Apenas border-bottom + border-right visíveis (forma L)
   - rotate(45deg) transforma a forma L em chevron apontando para baixo
   - top: calc(47% - 2px) — 1px mais baixo que a versão anterior, ainda alinhado opticamente */
.sidebar-nav .has-arrow::after {
  border-color:        var(--g4) !important;
  border-style:        solid !important;
  border-width:        0 2.75px 2.75px 0 !important;  /* top, right, bottom, left */
  width:               0.5em !important;
  height:              0.5em !important;
  top:                 calc(47% - 2px) !important;
  transform:           rotate(45deg) translate(0, -50%) !important;
  transform-origin:    center !important;
  opacity:             1 !important;
  transition:          transform .25s ease, border-color .15s ease !important;
}
/* Quando expandido, vira para cima (▲) — feedback visual claro */
.sidebar-nav .has-arrow[aria-expanded="true"]::after,
.sidebar-item.active > .has-arrow::after {
  border-color: var(--p) !important;
  transform:    rotate(-135deg) translate(0, 50%) !important;
}

/* ═══════════════════════════════════════════════════
   6. PAGE WRAPPER — card conteúdo glass flutuante
═══════════════════════════════════════════════════ */
.page-wrapper,
#main-wrapper[data-layout="vertical"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .page-wrapper,
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper {
  /* Aparência glass */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.68) 30%,
    rgba(255,255,255,0.88) 100%
  ) !important;
  backdrop-filter:         blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: var(--r-lg) !important;
  border:        1px solid var(--bd-card) !important;
  box-shadow:    var(--sh-xl) !important;

  /* Posicionamento FIXED — mesma origem que navbar-header/sidebar (top: --v-off),
     elimina qualquer desalinhamento causado por offset de fluxo no #main-wrapper */
  position: fixed !important;
  top:      var(--v-off) !important;
  bottom:   var(--v-off) !important;
  left:     calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
  right:    var(--h-off) !important;
  margin:   0 !important;
  z-index:  1 !important;

  /* ── ARQUITETURA DE SCROLL INTERNO (igual ao admin-v2) ──
     page-wrapper ocupa exatamente a viewport menos as margens,
     sem scroll externo. Apenas .we-scroll-section rola internamente.
     padding-top: 0 cancela o "padding-top:70px" que style.css injeta
     quando data-header-position="fixed" está ativo via app.init.js. */
  padding:        0 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
}

/* mini-sidebar: page-wrapper left = same as full (sidebar locked to --sb-w) */
#main-wrapper.mini-sidebar .page-wrapper,
#main-wrapper[data-sidebartype="mini-sidebar"] .page-wrapper {
  left: calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
}

/* Neutraliza o padding-top:70px que style.css injeta via seletor de alta especificidade
   #main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper */
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper {
  padding-top: 0 !important;
}

/* Container-fluid: coluna flex que preenche o espaço restante abaixo do breadcrumb */
.page-wrapper .container-fluid,
.page-wrapper > .container-fluid {
  flex:           1 1 0% !important;
  min-height:     0 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  padding-top:    0 !important;
  padding-left:   var(--sp-8) !important;
  padding-right:  var(--sp-8) !important;
  padding-bottom: 0 !important;
  max-width:      none !important;
  box-sizing:     border-box !important;
  margin:         0 !important;
}

/* ═══════════════════════════════════════════════════
   7. PAGE BREADCRUMB — cabeçalho congelado (2 linhas)
   Técnica: page-wrapper é flex-column, breadcrumb é
   flex-shrink:0 (não rola). Sem sticky, sem background.
═══════════════════════════════════════════════════ */
.page-breadcrumb,
.page-wrapper > .page-breadcrumb {
  position:        static !important;
  flex-shrink:     0 !important;
  display:         block !important;
  width:           100% !important;
  max-width:       none !important;
  margin:          0 !important;
  padding:         0 !important;
  background:      transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom:   none !important;
  border-radius:   var(--r-lg) var(--r-lg) 0 0 !important;
  z-index:         auto !important;
  box-sizing:      border-box !important;
  box-shadow:      none !important;
}

/* ── Linha 1: breadcrumb (caminho de navegação apenas) ── */
.we-bc-row {
  height:        var(--hdr-h) !important;
  display:       flex !important;
  align-items:   center !important;
  padding:       0 var(--sp-8) !important;
  border-bottom: none !important;
}

/* ol.breadcrumb dentro de we-bc-row */
.we-bc-row ol.breadcrumb,
.we-bc-row .breadcrumb {
  display:     flex !important;
  align-items: center !important;
  margin:      0 !important;
  padding:     0 !important;
  background:  transparent !important;
  flex-wrap:   nowrap !important;
}
/* Cada li vira flex row: ícone/link + separador ::before ficam todos na mesma linha.
   font-size aqui também — itens intermediários (texto solto, sem <a> e sem .active)
   precisam herdar o mesmo tamanho/peso dos links e do .active para visual coeso. */
.we-bc-row .breadcrumb-item,
.we-bc-row ol.breadcrumb li.breadcrumb-item {
  display:     flex !important;
  align-items: center !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       var(--g3) !important;
}
.breadcrumb-item a {
  color:       var(--g3) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}
.breadcrumb-item a:hover  { color: var(--p) !important; }
/* Sem top offset — alinhamento vertical é controlado pelo flex pai e pelo li flex */
.breadcrumb-item.active   { color: var(--g4) !important; font-size: 13px !important; font-weight: 400 !important; }
.breadcrumb-item + .breadcrumb-item::before {
  content:           "›" !important;
  color:             var(--g3) !important;   /* #475569 — visível em fundo claro */
  font-size:         16px !important;
  font-weight:       600 !important;
  line-height:       1 !important;
  padding:           0 6px !important;
  opacity:           1 !important;            /* anula opacidade do Bootstrap padrão */
  position:          relative !important;
  top:               -2px !important;          /* sobe 2px para alinhar opticamente */
  display:           inline-block !important;
}

/* ── Desce 2px os textos do breadcrumb, exceto o ícone de home/casa ──── */
/* Itens intermediários (com <a>): exclui o primeiro li (ícone home) */
.we-bc-row .breadcrumb-item:not(:first-child) > a {
  position: relative !important;
  top:      2px !important;
}
/* Item ativo (texto solto no li): desce o li inteiro 2px... */
.we-bc-row .breadcrumb-item.active {
  position: relative !important;
  top:      2px !important;
}
/* ...e compensa o separador para que ele NÃO desça junto
   (mantém o -2px efetivo: 2px do pai + (-4px) do ::before = -2px) */
.we-bc-row .breadcrumb-item.active::before {
  top: -4px !important;
}

/* ── Linha 2: título (esquerda) + ações (direita) ── */
.we-hdr-row {
  height:          var(--hdr2-h) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         0 var(--sp-8) !important;
}

.we-hdr-left {
  display:        flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap:            2px !important;
  flex:           1 !important;
  min-width:      0 !important;
}
.we-hdr-left .page-title,
.we-hdr-left h3.page-title {
  padding:        0 !important;
  margin:         0 !important;
  font-size:      1.35rem !important;
  font-weight:    700 !important;
  color:          var(--g1) !important;
  letter-spacing: -.03em !important;
  line-height:    1.2 !important;
}
.we-page-subtitle,
.we-hdr-left .we-subtitle {
  margin:      0 !important;
  padding:     0 !important;
  font-size:   12.5px !important;
  color:       var(--g4) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.we-hdr-right {
  display:      flex !important;
  align-items:  center !important;
  gap:          var(--sp-2) !important;
  flex-shrink:  0 !important;
  /* Reserva espaço para o search fixo: 228px (width) + sp-6 (gap)
     O h-off já está absorvido no right do search (calc h-off + sp-8) */
  padding-right: calc(228px + var(--sp-6)) !important;
}

/* Nav-pills do sitesMenu dentro de we-bc-row ou we-hdr-right: remove card styling */
.we-bc-row > .nav.nav-pills,
.we-bc-row .nav.nav-pills,
.we-hdr-right > .nav.nav-pills,
.we-hdr-right .nav.nav-pills {
  background:    transparent !important;
  padding:       0 !important;
  margin:        0 !important;
  border-radius: 0 !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           var(--sp-1) !important;
}
.we-bc-row .nav-pills .nav-link,
.we-hdr-right .nav-pills .nav-link {
  background:     transparent !important;
  color:          var(--g3) !important;
  padding:        6px var(--sp-3) !important;
  border-radius:  var(--r-full) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  border:         1px solid var(--g6) !important;
  transition:     all var(--ease) !important;
  white-space:    nowrap !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
}
.we-bc-row .nav-pills .nav-link.active,
.we-bc-row .nav-pills .nav-link:focus,
.we-hdr-right .nav-pills .nav-link.active,
.we-hdr-right .nav-pills .nav-link:focus {
  background:    var(--p) !important;
  border-color:  var(--p) !important;
  color:         #fff !important;
  box-shadow:    var(--sh-p) !important;
}
.we-bc-row .nav-pills .nav-link:hover:not(.active),
.we-hdr-right .nav-pills .nav-link:hover:not(.active) {
  background:   var(--g7) !important;
  border-color: var(--g5) !important;
  color:        var(--g1) !important;
}

/* ── we-page-header: legado (páginas não migradas para we-hdr-row) ── */
.we-page-header {
  flex-shrink:   0 !important;
  padding:       var(--sp-4) 0 !important;
  margin-bottom: var(--sp-3) !important;
}
.we-page-header .page-title {
  font-size: 1.35rem !important; font-weight: 700 !important;
  color: var(--g1) !important; letter-spacing: -.03em !important;
  margin: 0 0 4px !important; line-height: 1.2 !important;
}
.we-page-header .we-subtitle { font-size: 13px !important; color: var(--g4) !important; margin: 0 !important; }
.we-page-header .we-filters { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--sp-2) !important; }

/* ── KPI row: congelado acima do scroll (flex-shrink:0) ── */
.we-kpi-row {
  flex-shrink:     0 !important;
  position:        static !important;
  background:      transparent !important;
  backdrop-filter: none !important;
  box-shadow:      none !important;
  z-index:         auto !important;
  margin-bottom:   var(--sp-4) !important;
  padding-bottom:  0 !important;
}

/* ── we-scroll-section: ÚNICO container que rola ──
   display:block (não flex) é essencial: com flex-direction:column os filhos
   receberiam flex-shrink:1 por padrão e seriam comprimidos para caber na
   altura disponível — cancelando o overflow e o scrollbar.
   Com display:block os cards têm altura natural (conteúdo total) e o
   overflow-y:auto gera o scroll corretamente. */
.we-scroll-section {
  flex:            1 1 0% !important;   /* flex-item do container-fluid */
  min-height:      0 !important;
  display:         block !important;    /* filhos = block, sem shrink automático */
  overflow-y:      auto !important;
  /* clip (não hidden) — não cria scroll-container, logo não corta filhos
     position:absolute (como o tooltip do eCharts) ao contrário de hidden */
  overflow-x:      clip !important;
  /* Margem negativa anti-clipping de sombras/border-radius */
  padding:         8px 8px var(--sp-8) !important;
  margin-left:     -8px !important;
  margin-right:    -8px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.40) transparent;
}
.we-scroll-section::-webkit-scrollbar       { width: 4px; }
.we-scroll-section::-webkit-scrollbar-track { background: transparent; }
.we-scroll-section::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.40); border-radius: 4px; }
.we-scroll-section::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.70); }

/* ── we-kpi-frozen: KPI cards congelados acima da área de scroll ─────────── */
.we-kpi-frozen {
  flex:           0 0 auto !important;  /* cancela flex:1 herdado */
  display:        block !important;     /* cancela flex-direction:column herdado */
  overflow:       visible !important;   /* cancela overflow:hidden herdado */
  padding:        var(--sp-3) var(--sp-8) 0 !important;  /* top 12px | lados 32px | sem bottom */
}
.we-kpi-frozen .card {
  margin-bottom:  var(--sp-3) !important;  /* reduz gap abaixo dos KPIs */
}

/* ── KPI: reduzir altura do card em ~10px e fonte do texto em ~3px ─────── */
/* Aplica-se a TODOS os KPIs em .we-kpi-frozen (todas as páginas)        */
.we-kpi-frozen .card .card-body {
  padding-top:    10px !important;   /* era ~20px (var(--sp-5)) → -10px no eixo Y */
  padding-bottom: 10px !important;   /* total: -10px de altura no card */
}
/* Valor principal — <span class="display-6" style="font-size:22px;"> */
.we-kpi-frozen .display-6,
.we-kpi-frozen span.display-6,
.we-kpi-frozen .card-body .display-6 {
  font-size: 19px !important;        /* era 22px → -3px */
  line-height: 1.15 !important;
}
/* Valor principal — <h3 class="mb-0"> (versão sem display-6) */
.we-kpi-frozen .card h3.mb-0,
.we-kpi-frozen .card-body h3.mb-0 {
  font-size: calc(2rem - 3px) !important;   /* era 2rem (32px) → 29px */
}
/* Label do KPI — <h6 style="font-size:12px"> */
.we-kpi-frozen .card h6,
.we-kpi-frozen .card-body h6,
.we-kpi-frozen .card-body h6.text-muted {
  font-size: 11px !important;        /* era 12px → -1px (mantem legivel) */
}

/* ── KPI: altura UNIFORME em todas as paginas (referencia: /sites/agua-express) ── */
/* Estrutura HTML varia: agua-express usa span+chevron+h6; unidades usa h3.mb-0 dentro
   do span.display-6; energia usa font-size:20px. Forca min-height igual + centraliza
   verticalmente para visual consistente em qualquer pagina.                       */
.we-kpi-frozen .card {
  min-height: 106px !important;   /* era 110px → -4px */
  display:         flex !important;
  flex-direction:  column !important;
}
.we-kpi-frozen .card .card-body {
  flex:        1 1 auto !important;
  display:     flex !important;
  align-items: center !important;   /* centra verticalmente o conteudo */
}
.we-kpi-frozen .card .card-body > .row {
  width:  100% !important;
  margin: 0 !important;
}
/* Quando o h3.mb-0 esta DENTRO do span.display-6 (unidades.php), neutralizar
   o tamanho/peso default do h3 para nao inflar o card — visual fica pelo span */
.we-kpi-frozen .card span.display-6 > h3.mb-0 {
  display:     inline !important;
  font-size:   inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  margin:      0 !important;
  padding:     0 !important;
  color:       inherit !important;
}

/* ═══════════════════════════════════════════════════
   8. CARDS — glassmorphism
═══════════════════════════════════════════════════ */
.card {
  background:              rgba(255,255,255,0.88) !important;
  backdrop-filter:         blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:                  1px solid rgba(255,255,255,0.60) !important;
  border-radius:           var(--r-2xl) !important;
  box-shadow:              var(--sh-card) !important;
  margin-bottom:           var(--sp-5) !important;
  transition:              transform var(--ease), box-shadow var(--ease), border-color var(--ease) !important;
  /* overflow: hidden removido — background e backdrop-filter são clipados pelo
     border-radius nativamente pelo browser; overflow:hidden cortava o DOM do
     tooltip do eCharts (position:absolute) impedindo sua exibição. */
  overflow: visible;
  /* z-index explícito: backdrop-filter cria stacking-context; sem z-index
     explícito os contextos de stacking irmãos pintam em ordem de DOM, então
     o tooltip de ec-mensal ficava coberto pelo card de ec-diario (posterior
     no DOM). z-index:1 normaliza a base; :hover sobe para 2 garantindo que
     o card ativo pinte por cima dos irmãos e o tooltip fique visível. */
  position:                relative;
  z-index:                 1;
}
.card:hover {
  transform:    translateY(-2px) !important;
  box-shadow:   var(--sh-lg) !important;
  border-color: rgba(255,255,255,0.80) !important;
  z-index:      2 !important;
}
.card-body   { padding: var(--sp-5) var(--sp-6) !important; }
.card-header {
  background:    transparent !important;
  border-bottom: 1px solid var(--bd-inner) !important;
  padding:       var(--sp-4) var(--sp-6) !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: space-between !important;
}
.card-footer {
  background: rgba(248,250,252,0.60) !important;
  border-top: 1px solid var(--bd-inner) !important;
  padding:    var(--sp-3) var(--sp-6) !important;
}
.card-title {
  font-size:      10px !important;   /* era 13px → -3px (titulos de componentes: "Consumo dinamico (m3)" etc.) */
  font-weight:    600 !important;
  color:          var(--g2) !important;
  letter-spacing: -.01em !important;
  margin-bottom:  2px !important;
}
/* Aplica a mesma reducao para h4/h5 dentro do .card-header (alguns componentes
   nao usam .card-title diretamente — caem na cascata h4/h5 default) */
.card-header h4,
.card-header h5,
.card-header .card-title,
.card-body > h4,
.card-body > h5 {
  font-size: calc(1rem - 3px) !important;   /* era 16px (1rem) → 13px */
  font-weight: 600 !important;
}
.card-subtitle { font-size: 9px !important; color: var(--g4) !important; font-weight: 400 !important; }  /* -3px tambem */

/* KPI numbers */
.card h3.mb-0, .card-body h3.mb-0 {
  font-size:   2rem !important;
  font-weight: 700 !important;
  color:       var(--g1) !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.card h6.text-muted, .card-body h6.text-muted {
  font-size:   12px !important;
  font-weight: 500 !important;
  color:       var(--g4) !important;
  margin-top:  4px !important;
}

/* ═══════════════════════════════════════════════════
   9. BOTÕES
═══════════════════════════════════════════════════ */
.btn {
  font-size:      13px !important;
  font-weight:    500 !important;
  border-radius:  var(--r-sm) !important;
  letter-spacing: -.01em !important;
  transition:     all var(--ease) !important;
  height:         36px !important;
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            6px !important;
}
.btn-primary, .btn-primary:not(:disabled) {
  background:   var(--p) !important;
  border-color: var(--p) !important;
  color:        #fff !important;
  box-shadow:   var(--sh-p) !important;
}
.btn-primary:hover {
  background:   var(--p-d) !important;
  border-color: var(--p-d) !important;
  transform:    translateY(-1px) !important;
  box-shadow:   0 6px 18px rgba(116,96,238,.38) !important;
}
.btn-success, .btn-success:not(:disabled) {
  background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important;
}
.btn-outline-primary {
  color: var(--p) !important; border-color: var(--p-bd) !important; background: var(--p-bg) !important;
}
.btn-outline-primary:hover {
  background: var(--p) !important; border-color: var(--p) !important; color: #fff !important;
}
.btn-rounded, .rounded-pill { border-radius: var(--r-full) !important; }
.btn:active  { transform: none !important; }

/* Botão "Novo Grupo": verde (diferencia das tabs roxas) + margem antes do search */
.we-novo-grupo-btn {
  background:   var(--ok) !important;
  border-color: var(--ok) !important;
  color:        #fff !important;
  box-shadow:   0 2px 8px rgba(22,163,74,.25) !important;
  margin-right: var(--sp-4) !important;  /* abre espaço visual antes do search fixo */
}
.we-novo-grupo-btn:hover {
  background:   #15803d !important;
  border-color: #15803d !important;
  transform:    translateY(-1px) !important;
  box-shadow:   0 4px 12px rgba(22,163,74,.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Pill Button — botão pílula com gradiente e sombra suave.
   Padrão visual usado em ações primárias do header (Novo, Configurar, etc).
   Variantes: .we-pill-btn--green, .we-pill-btn--slate
   ─────────────────────────────────────────────────────────────────────── */
.we-pill-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         9px 20px !important;
  background:      linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color:           #ffffff !important;
  border:          none !important;
  border-radius:   999px !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  line-height:     1 !important;
  box-shadow:      0 4px 12px rgba(79, 70, 229, 0.30) !important;
  transition:      transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  cursor:          pointer !important;
  white-space:     nowrap !important;
}
.we-pill-btn:hover,
.we-pill-btn:focus {
  color:           #ffffff !important;
  transform:       translateY(-1px) !important;
  box-shadow:      0 6px 18px rgba(79, 70, 229, 0.42) !important;
  background:      linear-gradient(135deg, #7c7eff 0%, #5b54f0 100%) !important;
  text-decoration: none !important;
}
.we-pill-btn i,
.we-pill-btn svg {
  color:  #ffffff !important;
  stroke: #ffffff !important;
}
.we-pill-btn span {
  color:       #ffffff !important;
  font-weight: 500 !important;
}
/* Variante verde — usada para ações de criação/confirmação */
.we-pill-btn.we-pill-btn--green {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.30) !important;
}
.we-pill-btn.we-pill-btn--green:hover,
.we-pill-btn.we-pill-btn--green:focus {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.42) !important;
}
/* Variante slate — ações secundárias / neutras */
.we-pill-btn.we-pill-btn--slate {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25) !important;
}
.we-pill-btn.we-pill-btn--slate:hover,
.we-pill-btn.we-pill-btn--slate:focus {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
  box-shadow: 0 6px 18px rgba(71, 85, 105, 0.36) !important;
}

/* Botão exportar: apenas ícone, tom neutro, sem destaque visual */
.we-export-btn {
  background:   transparent !important;
  border:       1px solid var(--g6) !important;
  color:        var(--g4) !important;
  height:       30px !important;
  width:        30px !important;
  padding:      0 !important;
  border-radius: var(--r-sm) !important;
  display:      inline-flex !important;
  align-items:  center !important;
  justify-content: center !important;
  transition:   all .15s ease !important;
}
.we-export-btn:hover {
  background:  var(--g7) !important;
  border-color: var(--g5) !important;
  color:        var(--g3) !important;
}

/* ═══════════════════════════════════════════════════
   10. CORES UTILITÁRIAS
═══════════════════════════════════════════════════ */
.text-primary { color: var(--p)   !important; }
.text-success { color: var(--ok)  !important; }
.text-danger  { color: var(--err) !important; }
.text-warning { color: var(--warn)!important; }
.text-muted   { color: var(--g4)  !important; }
.bg-primary   { background: var(--p)   !important; }
.bg-success   { background: var(--ok)  !important; }
.bg-danger    { background: var(--err) !important; }
.bg-warning   { background: var(--warn)!important; }
.btn-light-primary { background: var(--p-bg)  !important; border: none !important; color: var(--p)   !important; border-radius: var(--r-sm) !important; }
.btn-light-success { background: var(--ok-bg) !important; border: none !important; color: var(--ok)  !important; border-radius: var(--r-sm) !important; }
.btn-light-danger  { background: var(--err-bg)!important; border: none !important; color: var(--err) !important; border-radius: var(--r-sm) !important; }
.btn-light-warning { background: var(--warn-bg)!important;border: none !important; color: var(--warn)!important; border-radius: var(--r-sm) !important; }

/* ═══════════════════════════════════════════════════
   11. BADGES
═══════════════════════════════════════════════════ */
.badge {
  font-size:      10.5px !important;
  font-weight:    600 !important;
  border-radius:  var(--r-full) !important;
  padding:        3px 9px !important;
  letter-spacing: .01em !important;
}

/* ═══════════════════════════════════════════════════
   12. INPUTS & FORMS
═══════════════════════════════════════════════════ */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select.form-control {
  font-size:     13px !important;
  color:         var(--g2) !important;
  background:    rgba(255,255,255,0.80) !important;
  border:        1px solid var(--g6) !important;
  border-radius: var(--r-sm) !important;
  height:        36px !important;
  padding:       0 var(--sp-3) !important;
  transition:    all var(--ease) !important;
  box-shadow:    var(--sh-xs) !important;
}
.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, select.form-control:focus {
  border-color: var(--p) !important;
  box-shadow:   0 0 0 3px rgba(116,96,238,.12) !important;
  background:   var(--surface) !important;
  outline:      none !important;
}
.form-control::placeholder { color: var(--g4) !important; }
textarea.form-control { height: auto !important; padding: var(--sp-3) !important; }

label, .form-label {
  font-size:     12.5px !important;
  font-weight:   500 !important;
  color:         var(--g2) !important;
  margin-bottom: 5px !important;
}

select.form-control {
  appearance:          none !important;
  -webkit-appearance:  none !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
  padding-right:       36px !important;
}

/* ═══════════════════════════════════════════════════
   13. TABELAS
═══════════════════════════════════════════════════ */
.table {
  font-size: 13px !important;
  --bs-table-bg: transparent;
}
.table thead th {
  background:     var(--g8) !important;
  color:          var(--g4) !important;
  font-size:      10.5px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  border:         none !important;
  padding:        var(--sp-3) var(--sp-4) !important;
  white-space:    nowrap !important;
}
.table td {
  border-color:   var(--g7) !important;
  padding:        var(--sp-3) var(--sp-4) !important;
  color:          var(--g2) !important;
  vertical-align: middle !important;
  font-size:      13px !important;
}
.table-hover tbody tr { transition: background var(--ease) !important; }
.table-hover tbody tr:hover { background: var(--p-bg) !important; }
.table-bordered td, .table-bordered th { border-color: var(--g6) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(241,245,249,.5) !important; }

/* ═══════════════════════════════════════════════════
   14. DROPDOWNS
═══════════════════════════════════════════════════ */
.dropdown-menu {
  border:        1px solid var(--g6) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-xl) !important;
  padding:       var(--sp-1) !important;
  background:    var(--surface) !important;
  min-width:     180px !important;
}
.dropdown-item {
  border-radius: var(--r-sm) !important;
  padding:       7px var(--sp-3) !important;
  font-size:     13px !important;
  color:         var(--g2) !important;
  transition:    all var(--ease) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--p-bg) !important;
  color:      var(--p) !important;
}
.dropdown-divider { border-color: var(--g6) !important; margin: 4px 0 !important; }

/* jQuery UI Autocomplete */
.ui-autocomplete {
  position:      fixed !important;
  background:    var(--surface);
  border:        1px solid var(--g6);
  border-radius: var(--r-sm);
  box-shadow:    var(--sh-xl);
  font-size:     13px;
  max-height:    320px;
  overflow-y:    auto;
  min-width:     240px;
  z-index:       9999;
  padding:       var(--sp-2) 0;
}
.ui-menu-item-wrapper {
  padding:    var(--sp-2) var(--sp-3) !important;
  transition: background var(--ease) !important;
}
.ui-menu-item-wrapper.ui-state-active,
.ui-menu-item-wrapper:hover {
  background: var(--p-bg) !important;
  color:      var(--p) !important;
  border:     none !important;
}

/* jQuery UI Autocomplete — esconde o aria-live region visualmente
   (texto "X results are available…" injetado para screen readers).
   clip + position:absolute mantém acessibilidade sem exibir o texto. */
.ui-helper-hidden-accessible {
  position:   absolute !important;
  width:      1px !important;
  height:     1px !important;
  overflow:   hidden !important;
  clip:       rect(0,0,0,0) !important;
  clip-path:  inset(50%) !important;
  white-space: nowrap !important;
  border:     0 !important;
  margin:     -1px !important;
  padding:    0 !important;
}

/* ═══════════════════════════════════════════════════
   15. ALERTAS & MODAIS
═══════════════════════════════════════════════════ */
.alert {
  border:        1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  font-size:     13px !important;
  padding:       var(--sp-3) var(--sp-4) !important;
}
.alert-success { background: var(--ok-bg)  !important; color: #14532D !important; border-color: var(--ok-bd)  !important; }
.alert-danger  { background: var(--err-bg) !important; color: #7F1D1D !important; border-color: var(--err-bd) !important; }
.alert-warning { background: var(--warn-bg)!important; color: #78350F !important; border-color: var(--warn-bd)!important; }
.alert-info    { background: var(--info-bg)!important; color: #0C4A6E !important; border-color: var(--info-bd)!important; }

.modal-content {
  border:        1px solid var(--g6) !important;
  border-radius: var(--r-xl) !important;
  box-shadow:    var(--sh-xl) !important;
  background:    var(--surface) !important;
}
.modal-header  { border-bottom: 1px solid var(--g6) !important; padding: var(--sp-5) var(--sp-6) !important; }
.modal-title   { font-weight: 600 !important; color: var(--g1) !important; }
.modal-body    { padding: var(--sp-6) !important; }
.modal-footer  { border-top: 1px solid var(--g6) !important; padding: var(--sp-4) var(--sp-6) !important; }

/* ═══════════════════════════════════════════════════
   16. PAGINAÇÃO
═══════════════════════════════════════════════════ */
.page-item .page-link {
  border:        1px solid var(--g6) !important;
  border-radius: var(--r-sm) !important;
  color:         var(--g3) !important;
  margin:        0 2px !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  transition:    all var(--ease) !important;
  background:    rgba(255,255,255,.70) !important;
  padding:       5px 12px !important;
}
.page-item .page-link:hover  { background: var(--p-bg) !important; color: var(--p) !important; border-color: var(--p-bd) !important; }
.page-item.active .page-link { background: var(--p) !important; border-color: var(--p) !important; color: #fff !important; box-shadow: var(--sh-p) !important; }

/* ═══════════════════════════════════════════════════
   17. FOOTER
═══════════════════════════════════════════════════ */
.footer {
  /* Arquitetura W-Energy: body com overflow:hidden e .page-wrapper fixo.
     Sem positioning explícito o footer caía no topo do documento (sem
     espaço no fluxo). Fica fixo no rodapé do CONTAINER PRINCIPAL — ou seja,
     alinhado horizontalmente com .page-wrapper (após sidebar + gap), e no
     bottom da viewport com o mesmo offset vertical do tema. */
  position:       fixed !important;
  bottom:         var(--v-off) !important;
  left:           calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
  right:          var(--h-off) !important;
  z-index:        400 !important;
  text-align:     center !important;
  background:     transparent !important;
  border:         none !important;
  color:          rgba(71, 85, 105, 0.55) !important;
  font-size:      11px !important;
  font-weight:    500 !important;
  letter-spacing: 0.3px !important;
  padding:        6px 16px !important;
  pointer-events: none !important;       /* não bloqueia cliques no card */
}
.footer a {
  color:           rgba(71, 85, 105, 0.55) !important;
  text-decoration: none !important;
  pointer-events:  auto !important;       /* mas o link continua clicável */
}
.footer a:hover { color: var(--p) !important; }

/* Mini-sidebar: footer acompanha (ainda alinhado com page-wrapper) */
#main-wrapper.mini-sidebar .footer,
#main-wrapper[data-sidebartype="mini-sidebar"] .footer {
  left: calc(var(--h-off) + var(--sb-w) + var(--gap)) !important;
}

/* ═══════════════════════════════════════════════════
   18. SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g5); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--g4); }

/* ═══════════════════════════════════════════════════
   19. ANIMAÇÕES
═══════════════════════════════════════════════════ */
@keyframes weSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes weFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heartbit {
  0%   { transform: scale(0);   opacity: 0; }
  50%  { transform: scale(0.5); opacity: .3; }
  100% { transform: scale(1);   opacity: 0; }
}

.container-fluid > .row:first-child > div:nth-child(1) .card { animation: weSlideUp .24s .05s ease both; }
.container-fluid > .row:first-child > div:nth-child(2) .card { animation: weSlideUp .24s .10s ease both; }
.container-fluid > .row:first-child > div:nth-child(3) .card { animation: weSlideUp .24s .15s ease both; }
.container-fluid > .row:first-child > div:nth-child(4) .card { animation: weSlideUp .24s .20s ease both; }

.notify .heartbit { animation: heartbit 1s ease-out infinite; border-color: var(--err) !important; }
.notify .point    { background: var(--err) !important; }

/* ═══════════════════════════════════════════════════
   20. RESPONSIVIDADE
═══════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  :root { --h-off: 26px; --v-off: 22px; --gap: 14px; }
}

@media (max-width: 991px) {
  .left-sidebar,
  #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar {
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
    z-index: 800 !important;
  }
  .topbar .top-navbar .navbar-header,
  #main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header {
    top: 0 !important; left: 0 !important; width: 100% !important;
    height: 56px !important;
    background: rgba(116,96,238,.97) !important;
    border-radius: 0 !important; border-bottom: none !important;
  }
  .topbar .top-navbar .navbar-header .dark-logo  { display: none   !important; }
  .topbar .top-navbar .navbar-header .light-logo { display: inline !important; }

  .navbar-collapse, .navbar-collapse.collapse, #navbarSupportedContent {
    position:      static !important;
    height:        auto !important;
    background:    transparent !important;
    padding:       8px 0 !important;
    display:       flex !important;
    margin-left:   0 !important;
    left:          auto !important;
    right:         auto !important;
    gap:           0 !important;
  }
  .navbar-collapse .nav-item.search-box {
    position: static !important; height: auto !important;
    top: auto !important; right: auto !important; margin: 0 !important;
  }

  .page-wrapper,
  #main-wrapper[data-layout="vertical"] .page-wrapper {
    /* Reverte position: fixed do desktop para fluxo normal em mobile */
    position:        relative !important;
    top:             auto !important;
    bottom:          auto !important;
    left:            auto !important;
    right:           auto !important;
    margin:          0 !important;
    padding-top:     56px !important;
    border-radius:   0 !important;
    /* Em mobile: height auto, scroll normal do navegador */
    height:          auto !important;
    max-height:      none !important;
    min-height:      100vh !important;
    overflow:        visible !important;
    box-shadow:      none !important;
    background:      var(--surface) !important;
    backdrop-filter: none !important;
    border:          none !important;
    flex-direction:  column !important;
  }
  .page-wrapper .container-fluid,
  .page-wrapper > .container-fluid {
    flex:       none !important;
    overflow:   visible !important;
    padding:    var(--sp-3) var(--sp-4) var(--sp-8) !important;
    min-height: auto !important;
  }
  .we-scroll-section {
    overflow:   visible !important;
    padding:    0 !important;
    margin:     0 !important;
    flex:       none !important;
  }
  .page-breadcrumb { padding: 0 !important; }
  .we-bc-row {
    padding: 0 var(--sp-4) !important;
    height: 40px !important;
  }
  .we-hdr-row {
    height:   auto !important;
    flex-wrap: wrap !important;
    gap:      var(--sp-3) !important;
    padding:  var(--sp-3) var(--sp-4) !important;
  }
  .we-hdr-right { padding-right: 0 !important; }
  .we-page-header { padding: var(--sp-3) 0 !important; }
  /* Avatar: volta ao comportamento padrão em mobile */
  .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown {
    position: static !important;
    width:    auto !important;
    height:   auto !important;
    bottom:   auto !important;
    left:     auto !important;
    border:   none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding:  0 var(--sp-2) !important;
    overflow: visible !important;
  }
  .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown .dropdown-menu {
    bottom: auto !important;
    top:    100% !important;
  }
}

@media (max-width: 767px) {
  .card          { border-radius: var(--r-lg) !important; }
  .card-body     { padding: var(--sp-4) !important; }
  .card h3.mb-0  { font-size: 1.6rem !important; }
}

/* ═══════════════════════════════════════════════════
   21. GRID VIEW YII — ajustes
═══════════════════════════════════════════════════ */
.grid-view .summary { font-size: 12px; color: var(--g4); margin-bottom: var(--sp-2); }
.grid-view .filters input,
.grid-view .filters select {
  height: 28px !important; font-size: 12px !important;
  padding: 0 var(--sp-2) !important; border-radius: 4px !important;
}


/* ────────────────────────────────────────────────────────────────────────
   Preloader W-Energy — logo pulsante centralizado
   Carregado via AppAsset, aplica em main.php E authentication.php.
   IMPORTANTE: não tocamos no `display` do .preloader (caso contrário
   sobrescreveríamos o `style="display:none"` inline do #search-loading
   e o fadeOut do #loading via JS).
   ──────────────────────────────────────────────────────────────────── */
.preloader {
    background:      rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(2px) !important;
}
.we-preloader-wrap {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             14px;
}
.we-preloader-logo {
    width:  56px;
    height: 56px;
    animation: we-pulse 1.4s ease-in-out infinite;
    filter:    drop-shadow(0 4px 12px rgba(0, 158, 251, 0.25));
}
@keyframes we-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    50%      { transform: scale(0.88); opacity: 0.75; }
}

/* ═══════════════════════════════════════════════════
   21a. WE-EXPORT-BTN — botão sutil de export em cards
   Usado no header da tabela Sites da Conectividade (e reutilizável).
═══════════════════════════════════════════════════ */
.we-export-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   var(--r-md) !important;
  background:      transparent !important;
  color:           var(--g4) !important;
  border:          1px solid transparent !important;
  transition:      all var(--ease) !important;
  cursor:          pointer !important;
  text-decoration: none !important;
}
.we-export-btn:hover,
.we-export-btn:focus-visible {
  background:   var(--p-bg) !important;
  border-color: var(--p-bd) !important;
  color:        var(--p) !important;
  outline:      none !important;
  transform:    translateY(-1px);
  box-shadow:   0 2px 6px rgba(116,96,238,0.15);
}
.we-export-btn:active {
  transform: translateY(0);
}
.we-export-btn svg {
  stroke-width: 2;
}
html[data-theme="dark"] .we-export-btn {
  color: rgba(148,163,184,0.75) !important;
}
html[data-theme="dark"] .we-export-btn:hover,
html[data-theme="dark"] .we-export-btn:focus-visible {
  background:   rgba(34,211,238,0.10) !important;
  border-color: rgba(56,189,248,0.25) !important;
  color:        #22d3ee !important;
  box-shadow:   0 2px 8px rgba(34,211,238,0.20);
}

/* ═══════════════════════════════════════════════════
   21b. CONTEXTOS ESPECÍFICOS
   Esconde o search "Pesquisar ponto/site..." do topbar em
   páginas onde ele não faz sentido (módulo de usuários).
   Também zera o padding-right que .we-hdr-right reserva
   para o espaço do search, pra que botões possam ir até a borda.
═══════════════════════════════════════════════════ */
body.route-user .topbar .nav-item.search-box,
body.route-user #main-wrapper .topbar .nav-item.search-box {
  display: none !important;
}
body.route-user .we-hdr-right {
  padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════
   22. MOBILE — Bottom navigation + drawer
   Ativo em ≤991px. Esconde sidebar e adiciona barra fixa embaixo.
═══════════════════════════════════════════════════ */
.we-bottom-nav { display: none; }
.we-mobile-drawer { display: none; }

/* Força a logo-text a aparecer SEMPRE, mesmo no modo mini-sidebar.
   O template original esconde .logo-text quando data-sidebartype=mini-sidebar,
   liberando apenas em hover (.expand-logo). Aqui garantimos que a marca
   fique sempre visível no topo da sidebar. */
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header,
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header .navbar-brand {
  width: 240px !important;
}
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header .logo-text {
  display: inline-block !important;
}
#main-wrapper[data-layout="vertical"][data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header .navbar-brand .logo-icon {
  margin-right: 6px;
}

@media (max-width: 991px) {
  /* Esconde sidebar antiga completamente no mobile — alta especificidade */
  #main-wrapper .left-sidebar,
  #main-wrapper[data-layout="vertical"] .left-sidebar,
  #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar,
  #main-wrapper .left-sidebar[data-sidebarbg],
  #main-wrapper[data-layout="vertical"] .left-sidebar[data-sidebarbg] {
    display:   none !important;
    width:     0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    left:      -9999px !important;
  }

  /* ── TOPBAR MOBILE — header fixo, só logo pequeno ────────────────
     Todas as funções (busca, sino, user) migraram para bottom nav
     ou drawer. Aqui deixamos apenas a marca no topo.
     IMPORTANTE: usamos seletores com #main-wrapper para bater
     especificidade das regras desktop que também usam #main-wrapper. */
  #main-wrapper .topbar,
  #main-wrapper[data-layout="vertical"] .topbar,
  #main-wrapper[data-layout="vertical"][data-header-position="fixed"] .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 52px !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--g6) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
    z-index: 1020 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
  }
  #main-wrapper .topbar .top-navbar,
  #main-wrapper .topbar .navbar,
  #main-wrapper[data-layout="vertical"] .topbar .top-navbar,
  #main-wrapper[data-layout="vertical"] .topbar .navbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  #main-wrapper .topbar .nav-toggler.d-md-none,
  #main-wrapper .topbar .topbartoggler.d-md-none {
    display: none !important;
  }
  #main-wrapper .topbar .top-navbar .navbar-header,
  #main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header,
  #main-wrapper[data-layout="vertical"][data-header-position="fixed"] .topbar .top-navbar .navbar-header {
    position: static !important;
    width: auto !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border-bottom: none !important;
  }
  /* Logo centralizado no mobile */
  #main-wrapper .topbar .navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #main-wrapper .topbar .navbar-brand .logo-icon img { width: 26px !important; height: 26px !important; }
  #main-wrapper .topbar .navbar-brand .logo-text img { height: 22px !important; width: auto !important; max-width: 110px !important; }

  /* Esconde tudo que não é logo: search, sino, user avatar
     Especificidade alta para bater regras desktop com #main-wrapper */
  #main-wrapper .topbar .navbar-collapse,
  #main-wrapper .topbar #navbarSupportedContent,
  #main-wrapper[data-layout="vertical"] .topbar .navbar-collapse,
  #main-wrapper[data-layout="vertical"] .topbar #navbarSupportedContent,
  #main-wrapper[data-layout="vertical"][data-header-position="fixed"] .topbar .navbar-collapse,
  #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .topbar .navbar-collapse,
  #main-wrapper[data-layout="vertical"][data-header-position="fixed"][data-sidebar-position="fixed"] .topbar .navbar-collapse {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
  }

  /* ── SCROLL MOBILE ─────────────────────────────────────────────
     No desktop o body tem overflow:hidden e o scroll fica no
     .we-scroll-section interno. No mobile isso quebra o scroll
     de toque — devolvemos o scroll natural ao body.
     Também removemos o background azul corporativo (fica limpo
     em branco/cinza claro para uma experiência mobile clean). */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height:     auto !important;
    background-image: none !important;
    background-color: var(--g8) !important;
    background-attachment: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html[data-theme="dark"] body,
  html[data-theme="dark"] {
    background-color: #050a1f !important;
    background-image: none !important;
  }
  #main-wrapper {
    overflow: visible !important;
    height:   auto !important;
    min-height: 100vh !important;
  }

  /* Reseta layout do page-wrapper — sem margem lateral, largura full */
  .page-wrapper,
  #main-wrapper[data-layout="vertical"] .page-wrapper,
  #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .page-wrapper,
  #main-wrapper.mini-sidebar .page-wrapper,
  #main-wrapper[data-sidebartype="mini-sidebar"] .page-wrapper {
    position:       relative !important;
    top:            auto !important;
    left:           0 !important;
    right:          0 !important;
    bottom:         auto !important;
    margin:         0 !important;
    padding-top:    52px !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
    padding-bottom: 76px !important;
    width:          100% !important;
    max-width:      100% !important;
    min-height:     100vh !important;
    height:         auto !important;
    max-height:     none !important;
    overflow:       visible !important;
    display:        block !important;
    background:     transparent !important;
    border-radius:  0 !important;
    box-shadow:     none !important;
    border:         none !important;
  }
  /* Footer: no desktop é fixed relativo ao page-wrapper, causando
     coluna estreita no mobile. Reseta para fluxo normal. */
  .footer,
  #main-wrapper.mini-sidebar .footer,
  #main-wrapper[data-sidebartype="mini-sidebar"] .footer {
    position:      static !important;
    left:          auto !important;
    right:         auto !important;
    bottom:        auto !important;
    top:           auto !important;
    width:         100% !important;
    max-width:     100% !important;
    padding:       16px 24px 90px !important;
    text-align:    center !important;
    font-size:     11px !important;
    color:         rgba(71, 85, 105, 0.55) !important;
    pointer-events: auto !important;
    z-index:       1 !important;
  }

  /* Container-fluid: mesma largura em TODAS as páginas — padding fixo
     Padding lateral generoso pra respirar bem das bordas do viewport */
  .page-wrapper .container-fluid,
  .page-wrapper > .container-fluid,
  .container-fluid {
    padding-left:  24px !important;
    padding-right: 24px !important;
    padding-top:   0 !important;
    padding-bottom: 0 !important;
    margin:        0 !important;
    max-width:     100% !important;
    width:         100% !important;
    overflow:      visible !important;
    display:       block !important;
    box-sizing:    border-box !important;
  }

  /* .we-scroll-section vira container normal no mobile — sem scroll interno */
  .we-scroll-section {
    overflow:   visible !important;
    height:     auto !important;
    max-height: none !important;
    padding:    0 !important;
    margin:     0 !important;
    display:    block !important;
    flex:       none !important;
  }

  /* ── LARGURA CONSISTENTE ─────────────────────────────────────
     Force todas as rows/colunas a stack full-width no mobile.
     Assim cards, panels e sections ficam com a mesma largura,
     alinhados ao mesmo padding do container-fluid. */
  .page-wrapper .row,
  .page-wrapper .row > [class*="col-"] {
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
  .page-wrapper .row > [class*="col-"] {
    flex:         0 0 100% !important;
    max-width:    100% !important;
    width:        100% !important;
    margin-bottom: var(--sp-3) !important;
  }
  .page-wrapper .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
  /* Espaço vertical entre linhas quando row está direta */
  .page-wrapper .row + .row { margin-top: var(--sp-3) !important; }

  /* Cards com padding consistente */
  .page-wrapper .card {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
    max-width:    100% !important;
  }

  /* ── Wrappers internos que TÊM padding próprio no desktop ──
     .we-kpi-frozen é IRMÃO de .container-fluid (não filho), então
     precisa do MESMO padding lateral pra alinhar com os cards internos.
     .row/col_ ficam com margin/padding 0 pra não somar padding extra. */
  .we-kpi-frozen,
  .we-panel,
  .we-section {
    padding-left:  24px !important;
    padding-right: 24px !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    max-width:     100% !important;
    width:         100% !important;
    box-sizing:    border-box !important;
  }
  .we-kpi-frozen .row,
  .we-panel .row,
  .we-section .row,
  .we-scroll-section .row {
    padding-left:  0 !important;
    padding-right: 0 !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    max-width:     100% !important;
    width:         100% !important;
  }

  /* Garantia adicional: TODO elemento direto dentro do page-wrapper
     tem padding lateral IDÊNTICO — via CSS var --we-mobile-pad */
  .page-wrapper > .page-breadcrumb,
  .page-wrapper > .container-fluid,
  .page-wrapper > .we-kpi-frozen,
  .page-wrapper > div {
    box-sizing: border-box !important;
  }

  /* ── PAGE HEADER (breadcrumb + título) ───────────────────────
     Título alinhado à ESQUERDA no mesmo padding do container. */
  .page-breadcrumb {
    padding: 0 !important;
    margin:  0 !important;
  }
  .we-bc-row {
    padding: var(--sp-3) 24px 0 !important;
    height:  auto !important;
    min-height: 0 !important;
  }
  .we-hdr-row {
    padding: var(--sp-2) 24px var(--sp-3) !important;
    height:  auto !important;
    flex-wrap: nowrap !important;
    gap:     var(--sp-2) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .we-hdr-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .we-hdr-left .page-title,
  .we-hdr-left h3.page-title {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .we-hdr-left .we-subtitle {
    font-size: 12px !important;
    margin-top: 2px !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .we-hdr-right {
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-2) !important;
  }
  /* Botões de ação no header viram círculo "+" no mobile
     para economizar espaço horizontal ao lado do título.
     Aplica em TODO botão dentro de .we-hdr-right — regardless of class. */
  .we-hdr-right .btn,
  .we-hdr-right .we-pill-btn,
  .we-hdr-right .we-add-btn,
  .we-hdr-right a[class*="btn"] {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
    background: var(--p) !important;
    color: #fff !important;
    border: none !important;
  }
  .we-hdr-right .btn::before,
  .we-hdr-right .we-pill-btn::before,
  .we-hdr-right .we-add-btn::before,
  .we-hdr-right a[class*="btn"]::before {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
  }
  .we-hdr-right .btn > *,
  .we-hdr-right .we-pill-btn > *,
  .we-hdr-right .we-add-btn > *,
  .we-hdr-right a[class*="btn"] > * {
    display: none !important;
  }

  /* Legado: páginas com .we-page-header (não migradas) — mesmo comportamento */
  .we-page-header {
    padding: var(--sp-3) 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-2) !important;
  }
  .we-page-header .page-title {
    font-size: 1.15rem !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* ── Bottom nav ─────────────────────────────────── */
  .we-bottom-nav {
    display:          flex;
    position:         fixed;
    left:             0;
    right:            0;
    bottom:           0;
    height:           64px;
    background:       var(--surface);
    border-top:       1px solid var(--g6);
    box-shadow:       0 -4px 16px rgba(15,23,42,0.06);
    z-index:          1030;
    padding:          6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content:  space-around;
    align-items:      stretch;
  }
  .we-bn-item {
    flex:             1 1 0;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              3px;
    background:       transparent;
    border:           none;
    padding:          4px 2px;
    color:            var(--g3);
    text-decoration:  none;
    font-size:        11px;
    font-weight:      500;
    line-height:      1.1;
    border-radius:    var(--r-md);
    transition:       color var(--ease), background var(--ease);
    cursor:           pointer;
  }
  .we-bn-item svg {
    width:   22px;
    height:  22px;
    stroke-width: 2;
  }
  .we-bn-item:hover,
  .we-bn-item:focus-visible {
    color:      var(--p);
    background: var(--p-bg);
    outline:    none;
  }
  .we-bn-item.active {
    color: var(--p);
    background: var(--p-bg);
  }
  .we-bn-item.active svg { stroke-width: 2.4; }

  /* ── Drawer "Mais" ──────────────────────────────── */
  .we-mobile-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
  }
  .we-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.45);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .we-drawer-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 80vh;
    background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(15,23,42,0.20);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .we-mobile-drawer.open { pointer-events: auto; }
  .we-mobile-drawer.open .we-drawer-backdrop { opacity: 1; }
  .we-mobile-drawer.open .we-drawer-panel    { transform: translateY(0); }

  .we-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--g6);
    margin-bottom: 4px;
  }
  .we-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--g2);
  }
  .we-drawer-close {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: var(--r-full);
    color: var(--g3);
    cursor: pointer;
    display: inline-flex;
  }
  .we-drawer-close svg { width: 20px; height: 20px; }
  .we-drawer-close:hover { background: var(--g7); color: var(--g1); }

  .we-drawer-nav {
    display: flex;
    flex-direction: column;
  }
  .we-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: var(--g2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--ease);
  }
  .we-drawer-item svg { width: 20px; height: 20px; color: var(--g3); }
  .we-drawer-item:hover { background: var(--g8); color: var(--p); }
  .we-drawer-item:hover svg { color: var(--p); }

  .we-drawer-divider {
    height: 1px;
    background: var(--g6);
    margin: 4px 16px;
  }
  .we-drawer-logout { color: var(--err); }
  .we-drawer-logout svg { color: var(--err); }
  .we-drawer-logout:hover { background: var(--err-bg); color: var(--err); }
  .we-drawer-logout:hover svg { color: var(--err); }
}