/* ============================================================
   components/sidenav.css
   Console / CMS sidenav
   ============================================================ */

.plx-sidenav {
  width: 260px;
  min-height: 100vh;
  background: var(--plx-bg-secondary);
  border-right: 1px solid var(--plx-border-subtle);
  color: var(--plx-text-primary);
  display: flex;
  flex-direction: column;
  padding: var(--plx-space-4) var(--plx-space-3);
}

.plx-sidenav-brand {
  display: flex;
  align-items: center;
  gap: var(--plx-space-2);
  margin-bottom: var(--plx-space-5);
}

.plx-sidenav-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.plx-sidenav-link {
  display: flex;
  align-items: center;
  gap: var(--plx-space-2);
  padding: 0.55rem 0.75rem;
  border-radius: var(--plx-radius-md);
  font-size: var(--plx-font-size-sm);
  color: var(--plx-text-soft);
  cursor: pointer;
  transition: background var(--plx-transition-fast), color var(--plx-transition-fast), transform var(--plx-transition-fast);
}

.plx-sidenav-link:hover {
  background: rgba(var(--plx-brand-primary-raw), 0.1);
  color: var(--plx-text-primary);
}

.plx-sidenav-link.plx-active {
  background: var(--plx-brand-primary);
  color: #020617;
  font-weight: 600;
}

/* Collapsed Variants Structure */
.plx-sidenav-collapsed {
  width: 80px;
}

.plx-sidenav-collapsed .plx-sidenav-link span.plx-sidenav-label {
  display: none;
}