/* Native disclosures remain usable if JavaScript is unavailable. */
.sidebar-nav { min-height: 0; }
.sidebar-nav > .nav-link { min-height: 49px; margin: 6px 0; padding: 12px; gap: 11px; font-weight: 600; }
.nav-group { margin: 6px 0; }
.nav-group > .nav-group-trigger {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 49px;
  margin: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #606977;
  font-size: 13px;
  font-weight: 600;
  transition: background .16s ease, color .16s ease;
}
.nav-group-trigger > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nav-group > .nav-group-trigger > .nav-group-icon { width: 19px; height: 19px; transform: none; }
.nav-group[open] > .nav-group-trigger > .nav-group-icon { transform: none; }
.nav-group > .nav-group-trigger > .nav-group-chevron { width: 15px; height: 15px; }
.nav-group > .nav-group-trigger:hover { color: var(--text); background: var(--surface-muted); }
.nav-group.has-current > .nav-group-trigger { color: var(--primary); background: var(--primary-tint); }
.nav-group[open] > .nav-group-trigger { border-color: var(--border); }
.nav-group-menu { padding: 4px 0 5px 12px; }
.nav-group-menu .nav-link { min-height: 43px; }

@media (min-width: 1041px) {
  .nav-enhanced .nav-group[open] > .nav-group-trigger > .nav-group-chevron { transform: rotate(180deg); }
  .nav-enhanced .nav-group-menu {
    position: fixed;
    z-index: 45;
    top: var(--nav-panel-top, 12px);
    left: var(--nav-panel-left, calc(var(--sidebar-width) + 8px));
    width: 278px;
    max-width: calc(100vw - var(--sidebar-width) - 20px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 38px rgb(30 39 54 / 13%);
    animation: nav-flyout-in .16s ease-out;
  }
  .nav-enhanced .nav-group-menu .nav-link { margin: 2px 0; }
}

@media (max-width: 1040px) {
  .nav-group[open] > .nav-group-trigger > .nav-group-chevron { transform: rotate(90deg); }
  .nav-group-menu { margin: 4px 0 9px 20px; padding: 0 0 0 8px; border-left: 1px solid var(--border); }
  .nav-group-menu .nav-link { padding-inline: 10px; }
}

@keyframes nav-flyout-in {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-enhanced .nav-group-menu { animation: none; }
}