/* ============================================================
   MENU LATERAL — G3 Maps  (novo visual, estilo Grafana/Zabbix)
   ============================================================ */

/* ---- Cores do tema (mude aqui) ---- */
.sidebar-g3{
  --sb-bg:#0a0e15;                 /* fundo do menu */
  --sb-line:rgba(255,255,255,.07); /* divisórias/borda */
  --sb-txt:#9aa4b2;                /* texto dos itens */
  --sb-ico:#7d8794;                /* ícones inativos */
  --sb-hi:#e8ecf1;                 /* texto em destaque/hover */
  --sb-acc:#2fb14a;                /* VERDE da marca (item ativo) */
  --sb-accbg:rgba(47,177,74,.14);  /* fundo do item ativo */
  --sb-lbl:#5b6472;                /* textos secundários */
  --sb-sub:#111b2b;                /* fundo do submenu */
  --sb-subacc:#4aa8ff;             /* AZUL do submenu */
}

/* ---- Container ---- */
.sidebar-g3{
  background:var(--sb-bg);
  color:var(--sb-txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.sidebar-g3 .sidebar-body{
  display:flex; flex-direction:column;
  height:100%; padding:0;
}
.sidebar-g3 button{ outline:none; -webkit-tap-highlight-color:transparent; }
/* Foco só no teclado (Tab); some no clique de mouse */
.sidebar-g3 a:focus-visible,
.sidebar-g3 button:focus-visible,
.sidebar-g3 summary:focus-visible{ box-shadow:0 0 0 2px var(--sb-subacc); border-radius:8px; }

/* ---- Cabeçalho / logo ---- */
.sidebar-g3 .sidebar-brand{
  display:flex; align-items:center; gap:9px;
  padding:16px 16px 12px;
}
.sidebar-g3 .sidebar-brand img{ width:26px; height:26px; object-fit:contain; }
.sidebar-g3 .sidebar-brand span{ font-size:19px; font-weight:400; color:#fff; }
.sidebar-g3 .sidebar-brand span b{ font-weight:600; }
.sidebar-g3 .btn-toggle-menu{
  margin-left:auto;
  background:transparent; border:0; color:var(--sb-ico);
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:18px; line-height:1;
}
.sidebar-g3 .btn-toggle-menu:hover{ color:var(--sb-hi); }

/* ---- Navegação ---- */
.sidebar-g3 .sidebar-nav{
  flex:1; overflow-y:auto;
  padding:4px 8px;
  display:flex; flex-direction:column;
  /* barra escondida por padrão; aparece ao passar o mouse */
  scrollbar-width:thin;                                  /* Firefox */
  scrollbar-color:transparent transparent;
  transition:scrollbar-color .2s;
}
.sidebar-g3 .sidebar-nav:hover{ scrollbar-color:rgba(255,255,255,.22) transparent; }
.sidebar-g3 .sidebar-nav::-webkit-scrollbar{ width:8px; }               /* Chrome/Edge/Safari */
.sidebar-g3 .sidebar-nav::-webkit-scrollbar-track{ background:transparent; }
.sidebar-g3 .sidebar-nav::-webkit-scrollbar-thumb{ background:transparent; border-radius:4px; transition:background .2s; }
.sidebar-g3 .sidebar-nav:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); }
.sidebar-g3 .sidebar-nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.38); }

/* Item de topo (links diretos) */
.sidebar-g3 .sidebar-link,
.sidebar-g3 .sidebar-group > summary{
  display:flex; align-items:center; gap:11px;
  width:100%; box-sizing:border-box;
  padding:10px 12px; margin:1px 0;
  border:0; background:transparent; border-radius:8px;
  color:var(--sb-txt); font-size:13.5px;
  text-decoration:none; cursor:pointer; position:relative;
  font-family:inherit; text-align:left;
  transition:background .12s,color .12s;
}
/* Ícone de cada item */
.sidebar-g3 .sidebar-link > i,
.sidebar-g3 .sidebar-group > summary > i:first-child{
  font-size:18px; color:var(--sb-ico);
  width:20px; text-align:center; flex:none;
}
.sidebar-g3 .sidebar-link:hover,
.sidebar-g3 .sidebar-group > summary:hover{
  background:rgba(255,255,255,.045); color:var(--sb-hi);
}
.sidebar-g3 .sidebar-link:hover > i,
.sidebar-g3 .sidebar-group > summary:hover > i:first-child{ color:var(--sb-hi); }

/* Item ATIVO (adicione a classe "active" no item da página atual) */
.sidebar-g3 .sidebar-link.active{ background:var(--sb-accbg); color:#fff; }
.sidebar-g3 .sidebar-link.active > i{ color:var(--sb-acc); }
.sidebar-g3 .sidebar-link.active::before{
  content:""; position:absolute; left:-8px; top:5px; bottom:5px;
  width:3px; border-radius:0 3px 3px 0; background:var(--sb-acc);
}

/* Badge de alarmes */
.sidebar-g3 .badge-alarme-sidebar{
  margin-left:auto;
  background:#bf1823; color:#fff;
  font-size:10px; font-weight:600;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* ---- Grupos com submenu (<details>/<summary>) ---- */
.sidebar-g3 .sidebar-group{ display:block; }
/* remove a setinha nativa do <details> */
.sidebar-g3 .sidebar-group > summary{ list-style:none; }
.sidebar-g3 .sidebar-group > summary::-webkit-details-marker{ display:none; }
.sidebar-g3 .sidebar-group > summary::marker{ content:""; }
/* seta (chevron) à direita — vem no HTML como <i class="ti ti-chevron-right chev"> */
.sidebar-g3 .sidebar-group > summary .chev{
  margin-left:auto; font-size:15px; color:var(--sb-ico);
  transition:transform .18s;
}
.sidebar-g3 .sidebar-group[open] > summary .chev{ transform:rotate(90deg); }
.sidebar-g3 .sidebar-group[open] > summary{ color:var(--sb-hi); }
.sidebar-g3 .sidebar-group[open] > summary > i:first-child{ color:var(--sb-subacc); }

/* Painel do submenu (azul, destacado) */
.sidebar-g3 .sidebar-sub{
  margin:2px 4px 6px; border-radius:8px;
  background:var(--sb-sub);
  box-shadow:inset 3px 0 0 var(--sb-subacc);
  padding:5px 0;
}
.sidebar-g3 .sidebar-sub a,
.sidebar-g3 .sidebar-sub button{
  display:flex; align-items:center; gap:9px;
  width:100%; box-sizing:border-box;
  padding:8px 12px 8px 14px; margin:1px 6px;
  border:0; background:transparent; border-radius:6px;
  color:#c4d2e2; font-size:12.5px; font-family:inherit;
  text-decoration:none; text-align:left; cursor:pointer;
}
.sidebar-g3 .sidebar-sub a > i,
.sidebar-g3 .sidebar-sub button > i{
  font-size:15px; color:var(--sb-subacc);
  width:17px; text-align:center; flex:none;
}
.sidebar-g3 .sidebar-sub a:hover,
.sidebar-g3 .sidebar-sub button:hover{
  background:rgba(74,168,255,.16); color:#fff;
}

/* Linhas de controle (Espessura / Quadro) */
.sidebar-g3 .sidebar-sub .linha-controle{
  display:flex; align-items:center; gap:7px;
  padding:6px 12px 6px 14px; margin:1px 6px;
  color:#9fb0c4; font-size:12px;
}
.sidebar-g3 .sidebar-sub .linha-controle > span:first-child{ flex:1; }
.sidebar-g3 .sidebar-sub .linha-controle .btn{
  width:22px; height:22px; padding:0;
  border:1px solid var(--sb-line); background:transparent;
  color:#c4d2e2; border-radius:6px; cursor:pointer; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
}
.sidebar-g3 .sidebar-sub .linha-controle .btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-g3 .sidebar-sub .linha-controle [id^="label-"]{ min-width:34px; text-align:center; color:#fff; }

/* ---- Rodapé ---- */
.sidebar-g3 .sidebar-bottom{
  border-top:1px solid var(--sb-line); padding:12px;
}
.sidebar-g3 .status-rede-mini{
  background:rgba(255,255,255,.04); border-radius:9px;
  padding:9px 11px; margin-bottom:10px;
}
.sidebar-g3 .status-rede-mini .titulo{
  color:var(--sb-lbl); font-size:9.5px; letter-spacing:.8px;
  text-transform:uppercase; margin-bottom:2px;
}
.sidebar-g3 .status-rede-mini .valor{
  display:flex; align-items:center; gap:8px;
  color:#fff; font-size:13px; font-weight:500;
}
/* a cor do .dot é controlada pelo JS (inline style) — NÃO sobrescrever */
.sidebar-g3 .status-rede-mini .valor .dot{
  width:8px; height:8px; border-radius:50%; flex:none;
}
.sidebar-g3 .sidebar-user{
  display:flex; align-items:center; gap:10px; padding:6px 4px;
}
.sidebar-g3 .sidebar-user > span{ flex:1; color:var(--sb-hi); font-size:13px; }
.sidebar-g3 .sidebar-user form{ margin:0; }
.sidebar-g3 .sidebar-user form button{
  background:transparent; border:0; color:var(--sb-ico);
  cursor:pointer; font-size:12.5px; padding:4px 8px; border-radius:7px;
}
.sidebar-g3 .sidebar-user form button:hover{ color:#ff6b6b; background:rgba(255,107,107,.1); }
.sidebar-g3 .sidebar-credito{
  text-align:center; color:var(--sb-lbl); font-size:10px; padding-top:8px;
}
.sidebar-g3 .sidebar-credito a{ color:inherit; }

/* Cabeçalho do offcanvas (mobile) */
.sidebar-g3 .offcanvas-header .offcanvas-title{ color:#fff; }