.sidebar-nav-items .nav-pill[data-has-submenu] {
  padding-right: 2rem;
}

.nav-pill[data-has-submenu]::before {
  content: '›';
  position: absolute;
  right: 0.8rem;
  color: var(--muted);
  font-size: 1.2rem;
}

.nav-pill[data-has-submenu][aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 14%, var(--control-bg));
  color: var(--text);
}

.sidebar-submenu {
  position: fixed;
  z-index: 91;
  width: max-content;
  min-width: 360px;
  max-width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--panel-elevated);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(1, 5, 14, 0.3);
}

.sidebar-submenu[hidden] { display: none; }
.sidebar-submenu-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.sidebar-submenu h3 { margin: 0; font-size: 1rem; }
.sidebar-submenu h4 { margin: 0 0 0.4rem; padding: 0 0.6rem; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.sidebar-submenu-columns { display: flex; align-items: flex-start; gap: 1rem; }
.sidebar-submenu-columns > div { display: grid; flex: 1; min-width: 0; }
.sidebar-submenu button { border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sidebar-submenu [data-submenu-item] { min-height: 40px; padding: 0.6rem; text-align: left; font-size: 0.85rem; line-height: 1.4; overflow-wrap: anywhere; }
.sidebar-submenu-close { width: 36px; height: 36px; font-size: 1.4rem !important; flex-shrink: 0; }
.sidebar-submenu button:hover,
.sidebar-submenu button[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, var(--control-bg)); color: var(--accent); }
.sidebar-submenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (min-width: 960px) {
  body.sidebar-collapsed .nav-pill[data-has-submenu] { padding: 0; }
  body.sidebar-collapsed .nav-pill[data-has-submenu]::before { right: 2px; font-size: 0.8rem; }
}

@media (max-width: 959px) {
  .sidebar-submenu { position: absolute; inset: 12px; width: auto; min-width: 0; max-width: none; max-height: none; }
  .sidebar-submenu-columns { flex-direction: column; }
  .sidebar-submenu-columns > div { width: 100%; }
  .sidebar-submenu [data-submenu-item] { min-height: 44px; }
}