// The host element owns the sidebar envelope (width + chrome) so
// the gray background + right border cover the full column, not
// just the rail of links. The inner <nav> handles the scrolling
// list inside that envelope.
:host {
  display: flex;
  flex-direction: column;
  width: 16rem;
  flex: 0 0 16rem;
  background-color: #f3f4f6;
  border-right: 1px solid #e5e7eb;
}

:host-context(.dark) {
  background-color: #0f172a;
  border-right-color: #1f2937;
  color: #e5e7eb;
}

.admin-sidebar {
  flex: 1 1 auto;
  padding: 0.75rem 0;
  overflow-y: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 0 0.5rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.875rem;

  &:focus-visible {
    outline: 2px solid var(--color-brand-primary-500, #2563eb);
    outline-offset: 2px;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

:host-context(.dark) .nav-link {
  color: #e5e7eb;

  &:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }
}

.nav-link--active {
  background-color: rgba(29, 78, 216, 0.12);
  color: var(--color-brand-primary-700, #1e40af);
  font-weight: 600;
}

:host-context(.dark) .nav-link--active {
  background-color: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.nav-link--disabled {
  color: #9ca3af;
  cursor: default;

  &:hover {
    background-color: transparent;
  }
}

:host-context(.dark) .nav-link--disabled {
  color: #6b7280;
}

.nav-icon {
  display: inline-flex;
  width: 1.25rem;
  flex: 0 0 1.25rem;
}

.nav-label {
  flex: 1 1 auto;
}

.nav-badge {
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.06);
  color: #6b7280;
}

:host-context(.dark) .nav-badge {
  background-color: rgba(255, 255, 255, 0.08);
}
