/* COMPLETE CSS - Desktop AND Mobile Working */

/* Base spacing */
.navbar-nav > .nav-item > .nav-link {
  padding: .5rem 1rem;
  font-weight: 500;
}

/* DESKTOP STYLES */
@media (min-width: 768px) {
  /* Let Bootstrap handle top-level dropdowns completely */
  /* We only style submenus */

  .dropdown-submenu {
    position: relative;
  }

  /* Submenu positioning (nested dropdowns) */
  .dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -0.25rem;
    margin-left: .1rem;
    z-index: 1001;
  }

  /* Hide submenu by default */
  .dropdown-submenu > .dropdown-menu {
    display: none;
  }

  /* Show submenu when .show class is added */
  .dropdown-submenu > .dropdown-menu.show {
    display: block;
  }

}

/* MOBILE STYLES */
@media (max-width: 767.98px) {
  /* Remove absolute positioning on mobile */
  .dropdown-menu {
    position: static !important;
    float: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  /* Hide dropdown menus by default on mobile */
  .dropdown-menu {
    display: none;
  }

  /* Show when parent has .show class */
  .dropdown.show > .dropdown-menu,
  .dropdown-submenu > .dropdown-menu.show {
    display: block;
  }

  /* Indent nested items for visual hierarchy */
  .navbar-nav .nav-item {
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  .dropdown-item {
    padding: .75rem 1.25rem;
    font-size: 0.95rem;
  }

  /* Level 1 items (direct children of top-level dropdown) */
  .dropdown-menu > .dropdown-item,
  .dropdown-menu > .dropdown-submenu > .dropdown-item {
    padding-left: 2rem;
  }

  /* Level 2 items (nested submenus) */
  .dropdown-submenu .dropdown-menu > .dropdown-item,
  .dropdown-submenu .dropdown-menu > .dropdown-submenu > .dropdown-item {
    padding-left: 3rem;
  }

  /* Level 3 items */
  .dropdown-submenu .dropdown-submenu .dropdown-menu > .dropdown-item {
    padding-left: 4rem;
  }

  /* Visual indicator for expandable items on mobile */
  .submenu-toggle::after {
    content: "â–¼";
    float: right;
    margin-left: .5rem;
    font-size: 0.7em;
    transition: transform 0.2s ease;
  }

  .dropdown-submenu > .dropdown-menu.show + .submenu-toggle::after,
  .submenu-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Better spacing for mobile */
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Right-aligned items on mobile */
  .navbar-nav.ms-auto {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(0,0,0,.1);
  }

  .navbar-nav.ms-auto .nav-item {
    border-bottom: none;
  }
}

/* SHARED STYLES (both mobile and desktop) */

/* Hover effects */
.dropdown-item:hover,
.dropdown-item:focus {
  text-decoration: none;
  background-color: rgba(0,0,0,.08);
  cursor: pointer;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  text-decoration: none;
}

/* Active/current items */
.dropdown-item.active,
.nav-link.active {
  font-weight: 600;
  background-color: rgba(13, 110, 253, 0.1);
}

/* Disabled items */
.dropdown-item.disabled,
.navbar .nav-link.disabled {
  pointer-events: none;
  opacity: .5;
  cursor: not-allowed;
}

/* Theme selector */
#theme-mode-select {
  min-width: 8rem;
  max-width: 100%;
}

/* Focus styles for accessibility */
.nav-link:focus-visible,
.dropdown-item:focus-visible,
#theme-mode-select:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Smooth transitions */
.dropdown-menu {
  transition: opacity 0.15s ease;
}

/* Make sure dropdowns don't overflow viewport */
.dropdown-menu {
  max-width: 100vw;
}

/* Arrow indicators for items with children */
.has-children > .dropdown-toggle::after,
.has-children > .submenu-toggle::after {
  margin-left: .4rem;
}

/* Submenu arrow styling */
.submenu-arrow {
  float: right;
  margin-left: 0.5rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.submenu-toggle[aria-expanded="true"] .submenu-arrow {
  transform: rotate(90deg);
}

/* Permission badge styling (for debug mode) */
.badge.bg-warning {
  font-size: 0.6em !important;
  vertical-align: middle;
  padding: 0.15em 0.4em;
}