/* =========================================================
   SMART NESTED DROPDOWNS (Padding, Depth & Carets)
   ========================================================= */

.dropdown-menu {
  padding: 0.2rem 0 !important;
}

.dropdown-item {
  padding: 0.25rem 0.8rem !important;
  font-size: 0.95rem;
  font-weight: 600 !important;
}

.dropdown-submenu {
  position: relative;
}

  /* Active/Hover State */
  .dropdown-submenu:hover > .dropdown-toggle,
  .dropdown-submenu.is-active > .dropdown-toggle {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
  }

  /* Force Custom Caret & Nuke Bootstrap Defaults */
  .dropdown-submenu > .dropdown-toggle {
    position: relative;
    padding-right: 25px !important;
  }

    .dropdown-submenu > .dropdown-toggle::before {
      display: none !important; /* Kill dropstart native arrows */
    }

    .dropdown-submenu > .dropdown-toggle::after {
      display: inline-block !important;
      position: absolute !important;
      right: 12px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      content: "" !important;
      border-top: 0.35em solid transparent !important;
      border-bottom: 0.35em solid transparent !important;
      border-left: 0.35em solid !important; /* Default Right Arrow */
      border-right: 0 !important;
      opacity: 0.8;
      margin: 0 !important;
      transition: transform 0.2s ease;
    }

/* Smart Theme Contrast for Nested Menus */
[data-bs-theme="light"] .dropdown-submenu > .dropdown-menu {
  background-color: var(--bs-gray-200) !important;
}

[data-bs-theme="dark"] .dropdown-submenu > .dropdown-menu {
  background-color: var(--bs-gray-700) !important;
}

/* =========================================================
   DESKTOP (>= 992px): Fly-Out Logic
   ========================================================= */
@media (min-width: 992px) {
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: -4px;
    margin-left: 0px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--border-color-grey) !important;
  }

  /* [FIXED] Force display on hover OR when clicked (is-active) */
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu.is-active > .dropdown-menu {
    display: block;
  }

  /* Dynamic X-Axis Flip */
  .dropdown-submenu.drop-left > .dropdown-menu {
    left: auto !important;
    right: 100% !important;
  }

  .dropdown-submenu.drop-left > .dropdown-toggle::after {
    border-left: 0 !important;
    border-right: 0.35em solid !important; /* Flip Caret Left */
  }
}

/* =========================================================
   MOBILE (< 992px): Vertical Accordion Logic & Scrolling
   ========================================================= */
@media (max-width: 991.98px) {
  /* Force Main Menu to Scroll if it exceeds screen height */
  .navbar-nav > .nav-item > .dropdown-menu {
    max-height: calc(100vh - 65px);
    overflow-y: auto;
  }

  /* Turn Flyouts into Accordions */
  .dropdown-submenu > .dropdown-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding-left: 0.5rem !important; /* Indent */
    box-shadow: none !important;
    border: none !important;
    border-left: 2px solid var(--bs-secondary-bg) !important; /* Depth Line */
    background-color: transparent !important;
  }

  /* Point caret down when accordion opens */
  .dropdown-submenu.is-active > .dropdown-toggle::after {
    transform: translateY(-50%) rotate(90deg) !important;
  }
}