/*
 * Admin Sidebar Navigation
 */

@layer components {

/* Logo / brand area */
.admin-nav-brand {
  display: block;
  /* As a flex item of .admin-sidebar-header, min-width defaults to auto —
     the logo img's natural 500px — which overflows the sidebar and makes
     the img's percentage width circular (it resolves against a container
     sized by the img itself, falling back to natural size). */
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.admin-nav-brand-logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

/* Navigation body — scrollable */
.admin-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0;
}

/* Group label */
.admin-nav-group-label {
  padding: 0.75rem 1.25rem 0.25rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Navigation item */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-nav-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.admin-nav-item[aria-current="page"] {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  font-weight: var(--font-weight-semibold);
  border-right: 3px solid var(--color-brand);
}

.admin-nav-item i {
  font-size: 0.95rem;
  width: 1.25rem;
  text-align: center;
}

/* Nested sub-items (Tables & sections disclosure group) */
.admin-nav-item--nested {
  padding-left: calc(1.25rem + var(--space-lg));
}

/* Disclosure group toggle (parent button) */
.admin-nav-item--group-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-nav-item--group-active {
  color: var(--color-text);
}

.admin-nav-item--group-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.admin-nav-item--group-toggle[aria-expanded="true"] .admin-nav-item--group-chevron {
  transform: rotate(180deg);
}

/* Disclosure group sub-list (collapsed by default) */
.admin-nav-group-sublist {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-nav-group-sublist.admin-nav-group--open {
  display: block;
}
}