/* Horizontal top nav — overrides sidebar-menu.css + agent-shell sidebar rules */

nav.agent-topnav .menu-item,
nav.agent-topnav .menu-dropdown-item {
  width: auto !important;
}

body.agent-app .agent-topnav {
  width: var(--width-full);
  background: var(--color-bg-primary);
  border: var(--border-width-thin) solid color-mix(in srgb, var(--color-white) 65%, var(--agent-surface-border));
  border-radius: var(--border-radius-xl);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-black) 22%, transparent);
  overflow: visible;
  position: relative;
  z-index: 1;
}

body.agent-app .agent-topnav__inner {
  overflow: visible;
  scrollbar-width: none;
  padding: var(--spacing-1) var(--spacing-2);
}

body.agent-app .agent-topnav__menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--spacing-1) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: var(--size-xl);
  width: auto !important;
  max-width: 100%;
  overflow: visible;
}

body.agent-app .agent-topnav__inner::-webkit-scrollbar,
body.agent-app .agent-topnav__menu::-webkit-scrollbar {
  display: none;
}

body.agent-app .agent-topnav__menu > li {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Beat sidebar-menu.css width:100% on .menu-item */
body.agent-app .agent-topnav .menu-item,
body.agent-app .agent-topnav .menu-item-active,
body.agent-app .agent-topnav .menu-item-inactive,
body.agent-app .agent-topnav li.active > a.menu-item,
body.agent-app .agent-topnav li > a.menu-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--spacing-2) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: var(--button-height-sm) !important;
  padding: var(--spacing-2) var(--spacing-3) !important;
  margin: 0 !important;
  border-radius: var(--border-radius-lg) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--color-text-secondary) !important;
  float: none !important;
}

body.agent-app .agent-topnav .menu-item-text {
  flex: 0 1 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: var(--line-height-snug) !important;
}

body.agent-app .agent-topnav .menu-item i.material-icons,
body.agent-app .agent-topnav .menu-item .bi {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  font-size: var(--icon-size-md) !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
}

body.agent-app .agent-topnav .float-end,
body.agent-app .agent-topnav .menu-item .float-end,
body.agent-app .agent-topnav .menu-dropdown-item .float-end {
  float: none !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
}

body.agent-app .agent-topnav .menu-item-arrow {
  position: static !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  font-size: var(--font-size-lg) !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  color: var(--color-text-muted) !important;
  transition: transform 0.2s ease !important;
}

body.agent-app .agent-topnav .menu-item > .menu-item-arrow {
  transform: none !important;
}

body.agent-app .agent-topnav li.treeview.menu-open > .menu-item > .menu-item-arrow,
body.agent-app .agent-topnav li.treeview.menu-open > a.menu-item > .menu-item-arrow {
  transform: rotate(180deg) !important;
}

body.agent-app .agent-topnav .menu-item-inactive:hover {
  background: var(--color-bg-light-blue) !important;
  color: var(--color-info) !important;
}

body.agent-app .agent-topnav li.active > .menu-item,
body.agent-app .agent-topnav li.active > a.menu-item-active,
body.agent-app .agent-topnav .menu-item-active {
  background: var(--color-info) !important;
  background-image: none !important;
  color: var(--color-white) !important;
}

body.agent-app .agent-topnav li.active > .menu-item i.material-icons,
body.agent-app .agent-topnav .menu-item-active i.material-icons {
  color: var(--color-white) !important;
  background: transparent !important;
}

/* Top-level dropdown only — nested items stay in-flow inside the panel */
body.agent-app .agent-topnav .agent-topnav__menu > li.treeview > div.translate,
body.agent-app .agent-topnav .agent-topnav__menu > li.treeview > div.transform,
body.agent-app .agent-topnav .agent-topnav__menu > li.treeview > div.overflow-hidden,
body.agent-app .agent-topnav .agent-topnav__menu > li.treeview > div {
  display: none !important;
  position: absolute !important;
  top: calc(100% + var(--spacing-1)) !important;
  left: 0 !important;
  min-width: 220px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: calc(var(--z-index-fixed) + 20) !important;
}

body.agent-app .agent-topnav .agent-topnav__menu > li.treeview.menu-open > div {
  display: block !important;
}

body.agent-app .agent-topnav .menu-dropdown > li.treeview {
  position: relative !important;
}

/* Nested flyout shell — out of parent panel flow */
body.agent-app .agent-topnav .menu-dropdown .treeview > div.translate,
body.agent-app .agent-topnav .menu-dropdown .treeview > div.transform,
body.agent-app .agent-topnav .menu-dropdown .treeview > div.overflow-hidden,
body.agent-app .agent-topnav .menu-dropdown .treeview > div {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + var(--spacing-1)) !important;
  min-width: 0 !important;
  width: max-content !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: calc(var(--z-index-fixed) + 25) !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview.menu-open > div {
  display: block !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview > div > .menu-dropdown {
  display: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  min-width: 220px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: var(--spacing-2) !important;
  padding-left: var(--spacing-2) !important;
  border: var(--border-width-thin) solid var(--agent-surface-border) !important;
  border-radius: var(--border-radius-xl) !important;
  background: var(--color-bg-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview.menu-open > div > .menu-dropdown {
  display: flex !important;
  height: auto !important;
}

body.agent-app .agent-topnav .menu-dropdown {
  display: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  min-width: 220px !important;
  width: auto !important;
  margin: 0 !important;
  padding: var(--spacing-2) !important;
  padding-left: var(--spacing-2) !important;
  border: var(--border-width-thin) solid var(--agent-surface-border) !important;
  border-radius: var(--border-radius-xl) !important;
  background: var(--color-bg-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  flex-direction: column !important;
  gap: var(--spacing-1) !important;
  list-style: none !important;
  overflow: visible !important;
}

body.agent-app .agent-topnav li.treeview.menu-open > div > .menu-dropdown,
body.agent-app .agent-topnav .treeview.menu-open > div > .menu-dropdown {
  display: flex !important;
  height: auto !important;
}

body.agent-app .agent-topnav .menu-dropdown li {
  width: auto !important;
  margin: 0 !important;
  position: relative;
}

body.agent-app .agent-topnav .menu-dropdown-item,
body.agent-app .agent-topnav .menu-dropdown .treeview > a.menu-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
  width: 100% !important;
  min-width: 100% !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-2) var(--spacing-3) !important;
  border-radius: var(--border-radius-md) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.agent-app .agent-topnav .menu-dropdown-item > span,
body.agent-app .agent-topnav .menu-dropdown .treeview > a.menu-dropdown-item > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

body.agent-app .agent-topnav .menu-dropdown-item > i.material-icons:first-child,
body.agent-app .agent-topnav .menu-dropdown .treeview > a.menu-dropdown-item > i.material-icons:first-child {
  flex: 0 0 auto !important;
}

body.agent-app .agent-topnav .menu-dropdown-item:hover,
body.agent-app .agent-topnav .menu-dropdown-item-active {
  background: var(--color-bg-light-blue) !important;
  color: var(--color-info) !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview > a.menu-dropdown-item {
  justify-content: flex-start !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview > a.menu-dropdown-item .menu-item-arrow {
  float: none !important;
  position: static !important;
  margin-left: auto !important;
  align-self: center !important;
  transform: rotate(-90deg) !important;
}

body.agent-app .agent-topnav .menu-dropdown .treeview.menu-open > a.menu-dropdown-item .menu-item-arrow-active,
body.agent-app .agent-topnav .menu-dropdown .treeview.menu-open > a.menu-dropdown-item .menu-item-arrow {
  transform: rotate(0deg) !important;
}

@media (max-width: 576px) {
  body.agent-app .agent-topnav .menu-item-text {
    display: none;
  }

  body.agent-app .agent-topnav .menu-item {
    padding: var(--spacing-2) !important;
  }

  /* On small screens, stack nested flyout below parent row */
  body.agent-app .agent-topnav .menu-dropdown .treeview > div {
    top: calc(100% + var(--spacing-1)) !important;
    left: 0 !important;
  }
}