/* Sidebar navigation grouping -- Phase 3 of the redesign.
   Pairs with navigation-groups.js. When the list is short it stays flat and
   none of this applies; .nav-list-grouped is only set on the long lists. */

.nav-group { display: flex; flex-direction: column; gap: 6px; }
.nav-group.hidden { display: none; }

/* The gap between groups is what does the grouping work -- the heading only
   names what the gap already separated. */
.nav-list-grouped { gap: 0; }
.nav-list-grouped .nav-group + .nav-group { margin-top: 22px; }

.nav-group-label {
  padding: 0 12px 8px;
  color: #77768a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav-group[data-nav-group="more"] {
  padding-top: 14px;
  border-top: 1px solid #f0eff5;
}

.nav-group[data-nav-group="more"] .nav-group-label,
.nav-group[data-nav-group="more"] .nav-item {
  color: #9694a4;
}

.nav-group[data-nav-group="more"] .nav-item.active {
  background: #f7f6fc;
  color: #6258ad;
  box-shadow: inset 2px 0 #aaa2e7;
}

.nav-group .nav-item.active {
  background: #eeecff;
  color: #5144c6;
  box-shadow: inset 3px 0 #6b5be8, 0 2px 8px rgba(81, 68, 198, .08);
}

.sidebar.operations-nav .plan-card { display: none; }

/* Collapsed sidebar shows icons only, so the headings would be nonsense.
   A hairline keeps the grouping legible without any text. */
.app-shell.sidebar-collapsed .nav-group-label { display: none; }
.app-shell.sidebar-collapsed .nav-list-grouped .nav-group + .nav-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eeedf4;
}

@media (max-width: 900px) {
  /* The sidebar becomes the slide-in mobile nav, where vertical room is
     tighter than on a desktop rail. */
  .nav-list-grouped .nav-group + .nav-group { margin-top: 14px; }
  .nav-group[data-nav-group="more"] { padding-top: 10px; }
}