/* Estilo da faixa lateral (estado recolhido) */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px; /* Estado recolhido */
  height: 100%;
  background-color: #b751e1;
  transition: all 0.3s ease; /* Transição suave para largura, sombra e outras propriedades */
  overflow: hidden;
  z-index: 1000;
  border-right: none; /* Remove qualquer borda residual */
  box-shadow: none; /* Remove sombra residual no estado recolhido */
}

/* Efeito de expansão horizontal ao passar o mouse */
#sidebar:hover {
  transform: scaleX(1.1); /* Expande apenas na horizontal */
  transform-origin: left; /* Fixa a origem da transformação à esquerda */
}

/* Barra superior com ícone de hambúrguer */
.menu-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px; /* Altura fixa para o ícone */
  background-color: #8b20bb;
  cursor: pointer;
}

.toggle-btn.expand-btn,
.close-btn.collapse-btn {
  font-size: 24px;
  color: white;
  transition: transform 0.2s ease;
}

/* Ícone de hambúrguer visível no estado recolhido */
.toggle-btn.expand-btn {
  display: block;
}

/* Ícone "X" visível no estado expandido */
.close-btn.collapse-btn {
  display: none;
}

/* Alterna entre os ícones no estado expandido */
#sidebar.expanded .toggle-btn.expand-btn {
  display: none;
}

#sidebar.expanded .close-btn.collapse-btn {
  display: block;
}

/* Estado expandido */
#sidebar.expanded {
  width: calc(350px + 5px); /* Largura do menu expandido + espaço extra */
  padding: 15px; /* Espaçamento interno em todas as direções */
  box-sizing: border-box; /* Garante que o padding não aumente a largura total */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave apenas no estado expandido */
}

#sidebar.expanded .menu-bar {
  justify-content: flex-end; /* Alinha o botão à direita */
  padding-right: 10px;
}

/* Itens do menu */
#menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Ocultar itens no estado recolhido */
}

#sidebar.expanded #menu-items {
  display: block; /* Mostrar itens no estado expandido */
}

#menu-items li {
  list-style: none; /* Remove marcadores de lista */
  margin: 0;
  padding: 0;
  position: relative; /* Permite posicionamento relativo ao elemento pai */
  cursor: pointer; /* Indica que é clicável */
}

/* Links dentro do menu */
#menu-items li a {
  display: block; /* Faz com que o link ocupe todo o espaço do <li> */
  text-decoration: none; /* Remove o sublinhado padrão dos links */
  color: white; /* Cor do texto */
  font-size: 14px; /* Tamanho de fonte */
  padding: 12px 10px; /* Adiciona espaçamento interno para melhorar a área clicável */
  width: 100%; /* Garante que o link ocupe toda a largura do <li> */
  height: 100%; /* Garante que o link ocupe toda a altura do <li> */
  box-sizing: border-box; /* Inclui padding e bordas no cálculo do tamanho total */
  border-radius: 5px; /* Bordas arredondadas */
  transition: background-color 0.2s ease; /* Transição suave para o fundo */
}

/* Efeito de hover nos links */
#menu-items li a:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Fundo levemente destacado ao passar o mouse */
  transform: scale(1.02); /* Efeito de ampliação sutil */
}

/* Separadores entre os itens do menu */
#menu-items li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha sutil de separação */
}

/* Responsividade */
@media (max-width: 768px) {
  #sidebar {
    width: 100%;
    height: auto;
  }

  #sidebar.expanded {
    width: 100%;
  }
}