/* ========= Sidebar WD =========
 - Bootstrap primeiro, ESTE depois
 - Ativo neutro (sem neon)
 - Badge sempre visível (mostra 0)
 - Botão de fixar aparece só quando aberto ou fixado
 - Conteúdo empurrado com padding-left (mantém centralização)
*/

/* Paleta neutra e Variáveis */
:root{
  --hover-soft: rgba(0,0,0,.03);
  --hover-soft-strong: rgba(0,0,0,.06);

  --sb-collapsed: 86px;  /* 74 + padding */
  --sb-expanded: 246px;  /* 240 + padding */

  /*
  ==================================================================
    ATENÇÃO AQUI: Ajuste este valor para a altura exata do seu
    cabeçalho fixo no modo mobile. Ex: 56px, 60px, 70px.
  ==================================================================
  */
  --header-height-mobile: 60px;
}

.reduce-motion *{ transition:none !important; }

/* Normaliza box-sizing dentro da sidebar */
.sidebar, .sidebar * { box-sizing: border-box; }

/* ===== Layout base ===== */
.sidebar{
  background-color: var(--card-bg-color);
  border-right: 1px solid var(--border-color);
  height: 100vh;
  position: fixed; top: 0; left: 0;
  width: 74px;
  padding: 8px 6px;
  transition: width .28s ease;
  z-index: 1030;
  display: flex; flex-direction: column;
}
.sidebar:hover{ width:240px; }

/* Fixada (pin) */
.sidebar.pinned{ width:240px !important; }
body.sidebar-pinned .sidebar{ width:240px; }

/* ===== Conteúdo principal ===== */
.main-content{
  padding: 20px 20px 20px var(--sb-collapsed);
  transition: padding-left .28s ease;
}
@media (min-width: 769px){ /* Alterado para 769px para evitar sobreposição */
  body.sidebar-hover .main-content,
  body.sidebar-pinned .main-content{
    padding-left: var(--sb-expanded);
  }
}
@media (max-width: 768px){
  .main-content{ padding-left: 20px; }
}

/* Grupos */
.sidebar .nav-top, .sidebar .nav-bottom{ padding: 4px 2px; }

/* ===== Logo topo (a <img class="logo-topo">) ===== */
.logo-topo{
  height: 28px;  /* mobile */
  width: auto;
  object-fit: contain;
  display: block;
  max-width: 100%;
}
@media (min-width: 768px){
  .logo-topo{ height: 34px; }      /* desktop */
}

/* ===== Cabeçalho da sidebar e botão fixar ===== */
.logo{
  color: var(--title-color);
  font-size: 22px;
  text-align: center;
  padding: 16px 0;
  white-space: nowrap; overflow: hidden;
}

/* Botão de fixar: escondido por padrão */
.pin-btn{
  background: transparent;
  border: 0;
  color: var(--text-color);
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px;
  display: none;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s, transform .1s, color .2s;
}
.sidebar:hover .pin-btn,
.sidebar.pinned .pin-btn{ display: grid; }

.pin-btn:hover{
  background: var(--hover-soft-strong);
  transform: translateY(-1px);
}

.pin-btn[aria-pressed="true"]{
  background: var(--hover-soft-strong);
  color: var(--title-color);
}

.pin-btn[aria-pressed="true"] i{
  transform: rotate(-35deg);
}

/* ===== Links ===== */
.sidebar .nav .nav-link{ padding:10px 12px !important; } /* vence Bootstrap */
.sidebar .nav-link{
  width:100%;
  color: var(--text-color);
  border-radius: 14px;
  margin: 6px 6px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  transition: background-color .15s, color .15s, transform .1s, box-shadow .15s, border-color .15s;
  overflow: hidden;
  outline: none;
  border: 1px solid transparent;
}
.sidebar .nav-link i{ font-size: 1.1rem; min-width: 22px; }
.sidebar .nav-link .label{ display:none; }
.sidebar:hover .nav-link .label,
.sidebar.pinned .nav-link .label{ display:inline; }

.sidebar .nav-link::before{
  content:"";
  position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:3px; height:0; background: var(--title-color); border-radius:2px;
  transition: height .15s, opacity .15s;
  opacity:.6;
}

.sidebar .nav-link:hover{
  background: var(--hover-soft-strong);
  color: var(--title-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.sidebar .nav-link:hover i{ color: var(--title-color); }
.sidebar .nav-link:hover::before{ height:60%; background: var(--title-color); opacity:.9; }

.sidebar .nav-link.active{
  background: var(--hover-soft-strong);
  color: var(--title-color);
  font-weight: 700;
  border-color: var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.sidebar .nav-link.active i{ color: var(--title-color); opacity: .95; }
.sidebar .nav-link.active::before{ height:70%; background: var(--title-color); }

.sidebar:not(:hover):not(.pinned) .nav-link{
  justify-content: center; gap: 0;
}

.sidebar .nav-link[data-tooltip]{ position:relative; }
.sidebar:not(:hover):not(.pinned) .nav-link[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background: var(--card-bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 6px 10px; border-radius: 10px; font-size: .85rem; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.sidebar:not(:hover):not(.pinned) .nav-link:hover::after{ opacity: 1; }

/* ===== Badges ===== */
.sidebar .nav-link { position: relative; }
.sidebar .badge-pill{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 12px; line-height: 1;
  border-radius: 999px;
  background: var(--border-color);
  color: var(--title-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  margin-left: auto;
}
.sidebar .nav-link .badge-pill{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.sidebar:hover .nav-link .badge-pill,
.sidebar.pinned .nav-link .badge-pill{
  position: static; transform: none;
}
.badge-pill.is-zero{
  opacity: .7;
  background: rgba(0,0,0,.06);
  color: var(--text-color);
}

/* ===== RESPONSIVIDADE ATIVADA ===== */
@media (max-width: 768px){
  /* Esconde a sidebar de DESKTOP em telas pequenas */
  .sidebar{
    display: none !important;
  }
  
  /* Ajuste do conteúdo principal para mobile */
  .main-content{
    padding-left: 20px !important;
    margin-top: 0;
  }
  
  /* ======================================================= */
  /* ===== ESTILOS PARA O MENU MOBILE (BOOTSTRAP OFFCANVAS) ===== */
  /* ======================================================= */

  /* Fundo do menu */
  .offcanvas {
    background-color: var(--card-bg-color);
  }

  /* Título e Links */
  .offcanvas .offcanvas-title {
    color: var(--title-color);
  }
  .offcanvas .offcanvas-body .nav-link {
    color: var(--text-color);
    transition: all .2s ease;
  }
  
  /* Efeito Hover nos links */
  .offcanvas .offcanvas-body .nav-link:hover {
    background-color: var(--hover-soft-strong);
    color: var(--title-color);
    border-radius: 8px;
  }
  
  /* Cor do badge de logs */
  #logsBadgeMobile {
    background-color: var(--border-color);
    color: var(--title-color);
    padding: 0 8px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
  }
  
  /* Botão de fechar (garante visibilidade em ambos os temas) */
  .offcanvas-header .btn-close {
    /* O `filter` inverte a cor do ícone SVG, tornando-o escuro em fundos claros */
    filter: var(--title-color) == #111 ? invert(1) : none;
  }
}