/* Navbar superior: roxo, no estilo do exemplo do AdminLTE. */
.navbar-roxo {
  background: linear-gradient(135deg, #7c6cf0, #6a5af0);
}
.navbar-roxo .form-control {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.navbar-roxo .form-control::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.navbar-roxo .form-control:focus {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  color: #fff;
}

/* Item ativo no sidebar (folha ou pai aberto): fundo azul cheio, texto/ícone
   branco. Em modo colapsado o .nav-link já encolhe pra ~3.6rem (regra do
   AdminLTE), então essa mesma regra vira sozinha um quadrado arredondado;
   expandido vira a barra inteira — igual ao AdminLTE 3. */
.sidebar-menu > .nav-item > .nav-link.active,
.sidebar-menu > .nav-item.menu-open > .nav-link {
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0.375rem;
}
.sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.sidebar-menu > .nav-item > .nav-link.active .nav-arrow,
.sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-menu > .nav-item.menu-open > .nav-link .nav-arrow {
  color: #fff;
}

/* Submenu: cada item é um "pill" claro, inset sobre o fundo escuro do
   sidebar — não um bloco branco sólido ocupando tudo. */
.sidebar-menu .nav-treeview {
  padding: 0.25rem 0.5rem;
}
.sidebar-menu .nav-treeview > .nav-item {
  margin-bottom: 0.15rem;
}
.sidebar-menu .nav-treeview > .nav-item > .nav-link {
  background-color: #3d3f4100;
  color: #fcfdff;
  border-radius: 0.375rem;
}
.sidebar-menu .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-menu .nav-treeview > .nav-item > .nav-link:focus {
  background-color: #dee2e600;
  color: #fcfdff;
}
.sidebar-menu .nav-treeview > .nav-item > .nav-link.active {
  background-color: #ffffff00;
  color: #fcfdff;
  font-weight: 600;
}

/* Colapsado (sem hover): mostra só o ícone do primeiro item do submenu
   aberto, empilhado embaixo do ícone do pai — igual ao AdminLTE 3. */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu > .nav-item.menu-open > .nav-treeview {
  display: block !important;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu > .nav-item.menu-open > .nav-treeview > .nav-item {
  display: none;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu > .nav-item.menu-open > .nav-treeview > .nav-item:first-child {
  display: block;
}