.nav {
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  color: #a0a3bd;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  gap: 1rem;
}

.sidebar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-details {
  border-radius: 8px;
  overflow: hidden;
}

.sidebar-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  color: #a0a3bd;
  transition: all 0.2s ease;
}

.sidebar-details summary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-details .chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.sidebar-details[open] > .sidebar-link > .chevron {
  transform: rotate(180deg);
}

.sidebar-details .submenu {
  background: #1a1c2e;
  display: flex;
  flex-direction: column;
}

.sidebar-details .submenu .sidebar-link {
  padding: 0.5rem 1rem;
  color: #a0a3bd; 
}

.sidebar-details .submenu .sidebar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}