/* 1. Force the dropdown-menu container to allow visible overflow */
.navbar-nav .dropdown-menu,
.dropdown-menu {
  position: absolute !important;
  overflow: visible !important;
}

/* 2. Establish the parent list item as a relative positioning anchor */
.dropdown-menu > li.dropdown-submenu,
.dropdown-menu li.dropdown-submenu {
  position: relative !important;
}

/* 3. Force the second-level menu entirely to the right with zero overlap */
.dropdown-menu > li.dropdown-submenu > .dropdown-menu,
.dropdown-menu li.dropdown-submenu > .dropdown-menu {
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: -9px !important;
  margin-left: 0 !important;
  transform: none !important;
}

/* 4. Ensure hover display works reliably on desktop */
@media (min-width: 768px) {
  .navbar-nav > .dropdown:hover > .dropdown-menu {
    display: block !important;
  }
  .dropdown-menu li.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
  }
}

/* 5. Ensure parent dropdown container positioning and hover bridge */
.navbar-nav .dropdown {
  position: relative;
}

.navbar-nav .dropdown > .dropdown-menu {
  margin-top: 0 !important;
}

.navbar-nav .dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

/* 6. Align items vertically and horizontally inside menus */
.navbar-nav .dropdown-menu > li > a,
.dropdown-menu .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  white-space: nowrap !important;
}