/* =========================================================================
   SIDEBAR TOGGLE — versão melhorada
   - Centralizado verticalmente na sidebar
   - Posicionado completamente PARA FORA da sidebar (não corta mais)
   - Resolve o problema de overflow:hidden cortando o botão
   ========================================================================= */

/* CRÍTICO: o app.css base aplica overflow-y: auto na sidebar, o que
   cortava o botão posicionado em right: -14px. Removemos esse clipping
   apenas no eixo horizontal, mantendo o scroll vertical funcional via
   um wrapper interno. Solução simples e segura: visible no overflow. */
.sidebar {
  position: relative;
  overflow: visible !important;
}

/* Wrapper de scroll interno (caso a navegação fique grande) */
.sidebar > .nav-bottom { margin-top: auto; }

/* Sobrescreve o .sidebar-toggle pequeno do app.css base */
.sidebar .sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 30;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: 0 3px 10px rgba(0, 168, 132, .35);
}
.sidebar .sidebar-toggle:hover {
  background: var(--brand-soft);
  color: #fff;
  /* Apenas escalonar — o translateY de centralização precisa ser mantido */
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 5px 16px rgba(0, 168, 132, .5);
}
.sidebar .sidebar-toggle:active {
  transform: translateY(-50%) scale(.96);
}
.sidebar .sidebar-toggle i {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}

/* Rotação do ícone quando colapsado */
.app-shell.sidebar-compact .sidebar .sidebar-toggle i {
  transform: rotate(180deg);
}

/* Mantém a posição -16px também no modo compacto */
.app-shell.sidebar-compact .sidebar .sidebar-toggle {
  right: -16px;
}

/* MOBILE — esconde o toggle (sidebar vira tabbar inferior) */
@media (max-width: 768px) {
  .sidebar .sidebar-toggle {
    display: none;
  }
}