:root {
  --admin-nav-utility-height: 52px;
  --admin-nav-workbar-height: 44px;
  --admin-nav-auth-height: calc(var(--admin-nav-utility-height) + var(--admin-nav-workbar-height));
  --admin-nav-drawer-width: 20rem;
}

/* Canonical application navigation. This file is loaded after site.css. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1035;
}

body .app-navbar {
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .app-header-authenticated,
body .app-header-authenticated .app-navbar {
  width: 100% !important;
  height: var(--admin-nav-auth-height) !important;
  min-height: var(--admin-nav-auth-height) !important;
  max-height: var(--admin-nav-auth-height) !important;
}

body .app-header-guest,
body .app-header-guest .app-navbar {
  min-height: var(--admin-nav-utility-height) !important;
}

body .app-nav-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  grid-template-areas:
    "brand env utility"
    "navigation navigation navigation" !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  column-gap: 0.8rem !important;
  row-gap: 0 !important;
  overflow: visible !important;
}

body .app-brand {
  grid-area: brand !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--admin-nav-utility-height) !important;
  margin: 0 0 0 clamp(1rem, 2.5vw, 3rem) !important;
  padding: 0 !important;
  color: var(--admin-text) !important;
  font-size: 1.8rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body .app-env-badge {
  grid-area: env !important;
  justify-self: start !important;
  min-height: 32px !important;
  max-width: 9rem !important;
  margin-left: 0.25rem !important;
  padding: 0.25rem 0.72rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .app-compact-actions,
body .navbar-expand-admin .navbar-toggler,
body .app-nav-backdrop {
  display: none !important;
}

body .app-navbar .navbar-collapse,
body .app-navbar .navbar-collapse.collapse:not(.show),
body .app-navbar .navbar-collapse.show {
  grid-area: navigation !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--admin-nav-workbar-height) !important;
  margin: 0 !important;
  padding: 0 clamp(1rem, 2.5vw, 3rem) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in oklab, var(--admin-surface) 96%, var(--admin-primary-soft)) !important;
  box-shadow: 0 5px 12px -12px rgba(15, 23, 42, 0.75) !important;
  overflow: visible !important;
  transform: none !important;
}

body .app-primary-nav,
body .navbar-expand-admin .app-primary-nav {
  display: flex !important;
  flex: 1 1 100% !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--admin-nav-workbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.25rem !important;
  overflow: visible !important;
  list-style: none !important;
}

body .app-primary-nav > .nav-item {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

body .app-primary-nav > .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: var(--admin-nav-workbar-height) !important;
  padding: 0.55rem 0.8rem !important;
  border-radius: 0.4rem !important;
  color: var(--admin-text) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body .app-primary-nav > .nav-item > .nav-link:hover,
body .app-primary-nav > .nav-item > .nav-link:focus-visible,
body .app-primary-nav > .nav-item > .nav-link.active,
body .app-primary-nav > .nav-item > .nav-link[data-current-section="true"] {
  color: var(--admin-primary-dark) !important;
  background: var(--admin-primary-soft) !important;
}

body .app-primary-nav > .nav-item > .nav-link:focus-visible,
body .app-primary-nav:focus-visible {
  outline: 2px solid var(--admin-focus) !important;
  outline-offset: -3px !important;
}

body .app-primary-nav .nav-link.active::after,
body .app-primary-nav .nav-link[data-current-section="true"]::after {
  inset: auto 0.75rem 0.15rem !important;
  width: auto !important;
}

body .app-user-actions,
body .navbar-expand-admin .app-user-actions {
  position: absolute !important;
  top: calc(-1 * var(--admin-nav-utility-height)) !important;
  right: clamp(1rem, 2.5vw, 3rem) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: var(--admin-nav-utility-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.55rem !important;
  border: 0 !important;
}

body .app-user-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 44px !important;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

body .app-user-actions form {
  display: flex !important;
  align-items: center;
  margin: 0;
}

body .app-user-actions .navbar-text {
  display: block !important;
  padding: 0;
  line-height: 1.25;
  max-width: min(20rem, 24vw) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .app-nav-search-shortcut {
  display: none !important;
}

/* Compact category list anchored to its area; one disclosure at a time. */
body .navbar-nav .dropdown-menu.app-workspace-menu {
  display: none !important;
  position: absolute !important;
  inset: calc(100% + 8px) auto auto 0 !important;
  width: 22rem !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(36rem, calc(100dvh - var(--admin-nav-auth-height) - 1.5rem)) !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  background: var(--admin-surface) !important;
  transform: none !important;
  box-shadow: none !important;
}
body .navbar-nav .dropdown-menu.app-workspace-menu.show {
  display: block !important;
}
.app-menu-group { min-width: 0; list-style: none; }
.app-menu-group + .app-menu-group { border-top: 1px solid var(--admin-border); }
.app-menu-group ul { list-style: none; margin: 0; padding: 0; }
.app-menu-audience > ul { padding-left: 0.5rem; }
.app-menu-audience > .app-menu-group-title { font-weight: 600; }
.app-menu-audience .app-menu-group-title { font-size: 0.875rem; }
.app-menu-group-title {
  min-height: 44px;
  padding: 0.7rem 0.65rem;
  color: var(--admin-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
body .app-workspace-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.5rem 0.65rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  border-radius: 6px !important;
}
.app-context-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--admin-muted);
}
.app-context-path > * + *::before { content: "/"; margin-right: 0.6rem; color: var(--admin-muted); }
.app-context-path a { text-underline-offset: 3px; }
.app-menu-group-title:focus-visible { outline: 2px solid var(--admin-focus); outline-offset: -2px; }
body .app-primary-nav button.nav-link { border: 0; background: transparent; font-family: inherit; }
body .app-user-actions .navbar-text { max-width: 12rem !important; font-size: 0.875rem; }
body .app-user-actions { gap: 0.4rem !important; }
@media (min-width: 1200px) {
  body .admin-brand-logo { width: 180px; height: auto; }
  body .app-primary-nav > .nav-item { flex: 0 0 auto !important; }
  body .app-primary-nav > .nav-item:nth-last-child(-n+2) .app-workspace-menu {
    left: auto !important;
    right: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .navbar-nav .dropdown-menu {
    transition: none !important;
  }
}