/* Shared Midnight Enterprise Slate navigation and responsive controls. */
:root {
  --nav-active: var(--brand);
  --nav-active-ink: #fff;
  --nav-indent: 12px;
  --nav-radius: var(--radius-sm, 6px);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.sidebar #nav {
  min-height: 0;
  overscroll-behavior: contain;
}

.nav-button {
  min-height: 40px;
  border-radius: var(--nav-radius);
}

.nav-button span:last-child {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.nav-button.active {
  color: var(--nav-active-ink);
  background: var(--nav-active);
  box-shadow: inset 3px 0 var(--brand-2);
}

.submenu {
  padding-left: var(--nav-indent);
}

.submenu .submenu {
  margin-left: var(--nav-indent);
  border-left: 1px solid var(--line);
}

.submenu[hidden], .nav-button[hidden], .nav-group-title[hidden] {
  display: none !important;
}

.submenu .nav-parent {
  margin-top: var(--space-2, 8px);
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    width: min(var(--sidebar), calc(100vw - 24px));
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .topbar {
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
  }

  .topbar h1 {
    overflow-wrap: anywhere;
  }

  .top-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2, 8px);
  }

  .top-actions .global-search {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .top-actions button {
    min-height: 40px;
  }

  .top-actions .primary {
    flex: 1 1 130px;
    white-space: normal;
  }
}