/* The admin sidebar: one soft gray for every word, icon and heading, small
   type, and white space rather than lines to set the groups apart. The page
   you are on shows in green text and icon, with no background. */
.admin-sidebar {
  --admin-sidebar-ink: #5b6b73;
}

/* The first link starts level with the page title, never above it: the
   page heading leads, the sidebar follows. */
.admin-sidebar .menu {
  padding: 2rem 0.75rem 0.75rem;
  gap: 0.125rem;
  font-size: 0.8125rem;
  color: var(--admin-sidebar-ink);
}

/* Rows about 30px tall, icon 12px from its label, icons and headings both
   starting 24px from the sidebar's edge (12px list padding + 12px row). */
.admin-sidebar .menu :where(li:not(.menu-title) > :not(ul, details, .menu-title)),
.admin-sidebar .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  gap: 0.75rem;
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
  line-height: 1.125rem;
  color: var(--admin-sidebar-ink);
}

.admin-sidebar .menu svg {
  width: 1.125rem;
  height: 1.125rem;
}

.admin-sidebar .menu-title {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--admin-sidebar-ink);
}

/* The page you are on. A folded group that holds it stays plain gray, so only
   one row in the sidebar is ever lit. */
.admin-sidebar .menu li > a.active {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 600;
}

/* Space before Settings and My Profile, in place of daisyUI's thin rule. */
.admin-sidebar .menu li.admin-sidebar-gap {
  height: 2rem;
  margin: 0;
  background: none;
  opacity: 1;
}