/* ULTIMATE NAVBAR FIX - Load this after main.css to override everything */
/* Use maximum specificity to force flexbox layout - NO MEDIA QUERIES */

html body nav.nav {
  position: relative !important;
  z-index: 100 !important;
}

/* Desktop nav-content */
@media screen and (min-width: 768px) {
  html body nav.nav .nav-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: var(--space-sm) var(--space-lg) !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-height: 70px !important;
    overflow: visible !important;
    gap: 0 !important; /* Remove gap - we'll handle spacing differently */
  }
  
  /* Ensure nav-content doesn't create a new positioning context that breaks dropdowns */
  html body nav.nav .nav-content {
    transform: none !important;
    will-change: auto !important;
  }
}

/* Mobile nav-content */
@media screen and (max-width: 767px) {
  html body nav.nav .nav-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--space-sm) var(--space-md) !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-height: 60px !important;
    overflow: visible !important;
    gap: var(--space-sm) !important;
  }
  
  html body nav.nav .nav-content > .nav-logo,
  html body nav.nav .nav-content > div:first-child {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    order: 1 !important;
  }
  
  html body nav.nav .nav-content > .nav-logo img,
  html body nav.nav .nav-content > div:first-child img {
    width: 50px !important;
    height: 50px !important;
  }
}

html body nav.nav .nav-content > .nav-logo,
html body nav.nav .nav-content > div:first-child.nav-logo {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  order: 1 !important;
}

  /* Desktop: Logo on left, nav links in center, settings on right */
@media screen and (min-width: 768px) {
  html body nav.nav .nav-content > .nav-logo,
  html body nav.nav .nav-content > div:first-child.nav-logo {
    flex: 0 0 auto !important;
    margin-right: var(--space-lg, 1.5rem) !important;
  }
  
  html body nav.nav .nav-content .nav-links,
  html body nav.nav .nav-content #navLinks {
    flex: 1 1 0% !important; /* Take up remaining space */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important; /* Center the nav-links container */
    padding: 0 !important;
    position: relative !important;
    min-width: 0 !important;
  }
  
  /* Ensure ALL nav items (including dropdowns) are properly aligned */
  html body nav.nav .nav-content .nav-links > *,
  html body nav.nav .nav-content #navLinks > * {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }
  
  /* Settings and notifications - keep in normal flow with uniform gap spacing */
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#settingsDropdown),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#settingsDropdown),
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#settingsDropdownBandLeader),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#settingsDropdownBandLeader) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
  }
  
  /* Notifications dropdown - before settings, with uniform gap */
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#bookerNotificationsButtonDesktop) {
    order: 998 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Constrain settings button to match notifications button width */
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-dropdown-toggle,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdownBandLeader) .nav-dropdown-toggle {
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap !important;
    padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem) !important;
    flex: 0 0 auto !important;
  }
}

/* Desktop nav-links styles - only apply on desktop */
@media screen and (min-width: 768px) {
  html body nav.nav .nav-content .nav-links,
  html body nav.nav .nav-content #navLinks {
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important; /* Increased for uniform spacing - fixes "british teeth" alignment */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    float: none !important;
    clear: none !important;
    order: 2 !important;
  }
  
  /* CRITICAL: Remove ALL margins and padding from direct children to ensure gap works */
  html body nav.nav .nav-content .nav-links > *,
  html body nav.nav .nav-content #navLinks > * {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* CRITICAL: Ensure gap spacing is uniform - override any inline styles or other rules */
  html body nav.nav .nav-content .nav-links,
  html body nav.nav .nav-content #navLinks {
    gap: 1rem !important; /* Force uniform 1rem spacing between ALL items */
  }
  
  /* Ensure ALL nav items have consistent spacing - links, dropdowns, buttons */
  html body nav.nav .nav-content .nav-links .nav-link,
  html body nav.nav .nav-content #navLinks .nav-link,
  html body nav.nav .nav-content .nav-links .nav-dropdown-toggle,
  html body nav.nav .nav-content #navLinks .nav-dropdown-toggle,
  html body nav.nav .nav-content .nav-links button.nav-link,
  html body nav.nav .nav-content #navLinks button.nav-link,
  html body nav.nav .nav-content .nav-links a.nav-link,
  html body nav.nav .nav-content #navLinks a.nav-link {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center text/content within links */
    vertical-align: middle !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  
  html body nav.nav .nav-content .nav-links .nav-dropdown,
  html body nav.nav .nav-content #navLinks .nav-dropdown {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }
  
  /* CRITICAL: Ensure dropdown toggles are properly aligned */
  html body nav.nav .nav-content .nav-links .nav-dropdown .nav-dropdown-toggle,
  html body nav.nav .nav-content #navLinks .nav-dropdown .nav-dropdown-toggle {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }
  
  /* Center settings button content without expanding width */
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-dropdown-toggle,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdownBandLeader) .nav-dropdown-toggle {
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Center the cog icon within the button */
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-dropdown-toggle .nav-icon,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdownBandLeader) .nav-dropdown-toggle .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure dropdown toggles inside dropdowns also have no margin */
  html body nav.nav .nav-content .nav-links .nav-dropdown .nav-dropdown-toggle,
  html body nav.nav .nav-content #navLinks .nav-dropdown .nav-dropdown-toggle {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    align-self: center !important;
  }
  
  /* CRITICAL: Ensure ALL nav items (including Repertoire dropdown) are vertically aligned */
  html body nav.nav .nav-content .nav-links > *,
  html body nav.nav .nav-content #navLinks > * {
    vertical-align: middle !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  /* CRITICAL: Override main.css rule that hides notifications dropdown container on mobile */
  /* This rule in main.css (line 1434-1437) is NOT in a media query, so we need to override it on desktop */
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body .nav-links .nav-dropdown:has(#gigOffersButtonDesktop),
  html body .nav-links .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body #navLinks .nav-dropdown:has(#gigOffersButtonDesktop),
  html body #navLinks .nav-dropdown:has(#bookerNotificationsButtonDesktop) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  /* ABSOLUTE PRIORITY: Force notifications dropdown menu to show when .show class is present */
  html body #notificationsDropdownDesktop.show,
  html body #bookerNotificationsDropdownDesktop.show,
  html body .nav-dropdown-menu#notificationsDropdownDesktop.show,
  html body .nav-dropdown-menu#bookerNotificationsDropdownDesktop.show,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu#notificationsDropdownDesktop.show,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu#bookerNotificationsDropdownDesktop.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
  }
  
  /* CRITICAL: Ensure ALL dropdown parents have relative positioning */
  html body nav.nav .nav-content .nav-dropdown,
  html body nav.nav .nav-content .nav-links .nav-dropdown,
  html body nav.nav .nav-content #navLinks .nav-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* CRITICAL: Override main.css rule that hides the entire notifications dropdown container */
  /* This must override the rule at main.css line 1434-1437 */
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#gigOffersButtonDesktop),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body .nav-links .nav-dropdown:has(#gigOffersButtonDesktop),
  html body .nav-links .nav-dropdown:has(#bookerNotificationsButtonDesktop),
  html body #navLinks .nav-dropdown:has(#gigOffersButtonDesktop),
  html body #navLinks .nav-dropdown:has(#bookerNotificationsButtonDesktop) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  /* Ensure desktop notifications dropdown is visible */
  html body nav.nav .nav-content .nav-links .nav-dropdown,
  html body nav.nav .nav-content #navLinks .nav-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure desktop notification button is visible */
  html body nav.nav .nav-content .nav-links .nav-dropdown .nav-link,
  html body nav.nav .nav-content #navLinks .nav-dropdown .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure desktop notification icon and badge are visible */
  html body nav.nav .nav-content .nav-links .nav-dropdown .nav-icon,
  html body nav.nav .nav-content #navLinks .nav-dropdown .nav-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Desktop dropdown menus - position under buttons, not at bottom */
  /* Must override ALL possible conflicting rules */
  html body nav.nav .nav-content .nav-dropdown-menu,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu,
  html body nav.nav .nav-content #navLinks .nav-dropdown-menu,
  html body nav.nav .nav-content .nav-dropdown .nav-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: 400px !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 1000 !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    transform: none !important;
    display: none !important; /* Hidden by default, shown with .show class */
    padding: 0 !important;
    overflow: hidden !important;
    max-height: 500px !important;
    overflow-y: auto !important;
  }
  
  /* Style dropdown items for proper spacing and readability */
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu .nav-dropdown-item,
  html body nav.nav .nav-content #navLinks .nav-dropdown-menu .nav-dropdown-item {
    display: block !important;
    padding: var(--space-md) !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item:hover {
    background: var(--bg-muted) !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item:last-child {
    border-bottom: none !important;
  }
  
  /* Style notification content within dropdown items */
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item > div {
    display: block !important;
    width: 100% !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item > div > div {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item > div > div:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Ensure text elements have proper spacing and don't merge */
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item * {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-weight: 600"],
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-weight:600"] {
    margin-bottom: 6px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.4 !important;
    display: block !important;
    width: 100% !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-size: 0.875rem"],
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-size:0.875rem"] {
    margin-bottom: 4px !important;
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
    display: block !important;
    width: 100% !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-size: 0.75rem"],
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item div[style*="font-size:0.75rem"] {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Fix for "no notifications" message */
  html body nav.nav .nav-content .nav-dropdown-menu .nav-dropdown-item[style*="text-align: center"] {
    text-align: center !important;
    padding: var(--space-lg) !important;
    color: var(--text-secondary) !important;
    font-style: italic !important;
  }
  
  /* Show dropdown when .show class is present */
  html body nav.nav .nav-content .nav-dropdown-menu.show,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu.show,
  html body nav.nav .nav-content #navLinks .nav-dropdown-menu.show,
  html body .nav-dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Override main.css rule that hides desktop notifications dropdowns */
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdownDesktop,
  html body nav.nav .nav-content .nav-dropdown-menu#bookerNotificationsDropdownDesktop,
  html body #notificationsDropdownDesktop,
  html body #bookerNotificationsDropdownDesktop {
    display: none !important; /* Hidden by default */
  }
  
  /* Show desktop notifications dropdowns when .show class is present - maximum specificity */
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdownDesktop.show,
  html body nav.nav .nav-content .nav-dropdown-menu#bookerNotificationsDropdownDesktop.show,
  html body #notificationsDropdownDesktop.show,
  html body #bookerNotificationsDropdownDesktop.show,
  html body .nav-dropdown-menu#notificationsDropdownDesktop.show,
  html body .nav-dropdown-menu#bookerNotificationsDropdownDesktop.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Override any inline styles that might hide the dropdown */
  html body .nav-dropdown-menu#notificationsDropdownDesktop[style*="display"],
  html body .nav-dropdown-menu#bookerNotificationsDropdownDesktop[style*="display"] {
    display: block !important;
  }
  
  /* Ensure dropdown shows when it has both .show class and is in nav-links */
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu#notificationsDropdownDesktop.show,
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu#bookerNotificationsDropdownDesktop.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
  }
  
  /* Settings dropdown - position to the right */
  html body nav.nav .nav-content .nav-dropdown-menu#settingsDropdown,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
  }
  
  /* Center settings cog icon horizontally and vertically in its column */
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-dropdown-toggle,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdownBandLeader) .nav-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) .nav-icon,
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdownBandLeader) .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
  }
  
  /* Center the entire settings dropdown container */
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#settingsDropdown),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#settingsDropdown),
  html body nav.nav .nav-content .nav-links .nav-dropdown:has(#settingsDropdownBandLeader),
  html body nav.nav .nav-content #navLinks .nav-dropdown:has(#settingsDropdownBandLeader) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Notifications dropdown - position to the right */
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdownDesktop,
  html body nav.nav .nav-content .nav-dropdown-menu#bookerNotificationsDropdownDesktop,
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdown,
  html body nav.nav .nav-content .nav-dropdown:has(#gigOffersButtonDesktop) .nav-dropdown-menu,
  html body nav.nav .nav-content .nav-dropdown:has(#bookerNotificationsButtonDesktop) .nav-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
  }
  
  /* CRITICAL: Override JavaScript inline styles that set position: fixed */
  /* These must override the inline styles set by ubPositionNavDropdown */
  html body nav.nav .nav-content .nav-dropdown-menu[style],
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu[style],
  html body nav.nav .nav-content #navLinks .nav-dropdown-menu[style],
  html body nav.nav .nav-content .nav-dropdown .nav-dropdown-menu[style] {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
  
  /* Specifically override settings dropdown inline styles */
  html body nav.nav .nav-content .nav-dropdown-menu#settingsDropdown[style] {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
  }
  
  /* Specifically override notifications dropdown inline styles */
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdownDesktop[style],
  html body nav.nav .nav-content .nav-dropdown-menu#bookerNotificationsDropdownDesktop[style],
  html body nav.nav .nav-content .nav-dropdown-menu#notificationsDropdown[style] {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
  }
  
  /* Override any static positioning from main.css */
  html body nav.nav .nav-content .nav-links .nav-dropdown-menu,
  html body nav.nav .nav-content #navLinks .nav-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
  }
}

/* Mobile nav-links - hidden by default, shown when menu opens */
@media screen and (max-width: 767px) {
  html body nav.nav .nav-content .nav-links,
  html body nav.nav .nav-content #navLinks {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: var(--bg-surface) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 80px var(--space-md) var(--space-lg) !important;
    gap: var(--space-xs) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100 !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
  }
  
  html body nav.nav .nav-content .nav-links.nav-links-open,
  html body nav.nav .nav-content #navLinks.nav-links-open {
    right: 0 !important;
  }
}

/* Group logo + nav-links visually by ensuring they're centered together */
html body nav.nav .nav-content > .nav-logo + .nav-links,
html body nav.nav .nav-content > .nav-logo + #navLinks {
  margin-left: 0 !important;
}

/* Desktop: Settings dropdown on the right (handled in media query above) */
/* Mobile: Keep absolute positioning */
@media screen and (max-width: 767px) {
  html body nav.nav .nav-content .nav-links .nav-dropdown:last-child,
  html body nav.nav .nav-content #navLinks .nav-dropdown:last-of-type {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }
}

html body nav.nav .nav-content .nav-links .nav-link.nav-desktop-toggle {
  display: none !important;
}

/* Hide hamburger on desktop only */
@media screen and (min-width: 768px) {
  html body nav.nav .nav-content .nav-mobile-toggle,
  html body nav.nav .nav-content .nav-notifications-mobile {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    order: 999 !important;
  }
}

/* Show hamburger and notifications on mobile */
@media screen and (max-width: 767px) {
  html body nav.nav .nav-content .nav-mobile-toggle {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 999 !important;
    z-index: 101 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
  }
  
  /* Show notifications button on mobile - override any inline styles */
  html body nav.nav .nav-content .nav-notifications-mobile {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 var(--space-sm) 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 998 !important;
    z-index: 101 !important;
    flex-shrink: 0 !important;
  }
  
  /* Override any inline styles on notifications mobile container */
  html body nav.nav .nav-content .nav-notifications-mobile[style] {
    display: flex !important;
    position: relative !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  
  html body nav.nav .nav-content .nav-notifications-btn {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure notification button icon is visible */
  html body nav.nav .nav-content .nav-notifications-btn .nav-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure notification badge is visible */
  html body nav.nav .nav-content .nav-notifications-btn span:not(.sr-only) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Settings dropdown - fix positioning on mobile */
  html body nav.nav .nav-content .nav-dropdown:has(#settingsDropdown) {
    order: 997 !important;
  }
  
  html body nav.nav .nav-content .nav-dropdown-menu#settingsDropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  
  /* All dropdowns - bottom sheet style on mobile ONLY */
  html body nav.nav .nav-content .nav-dropdown-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  
  /* Notifications dropdown on mobile - position near button if possible */
  html body nav.nav .nav-content .nav-notifications-mobile .nav-dropdown-menu {
    position: fixed !important;
    right: var(--space-md) !important;
    left: auto !important;
    bottom: var(--space-md) !important;
    top: auto !important;
    width: calc(100% - 2 * var(--space-md)) !important;
    max-width: 400px !important;
    border-radius: var(--radius-lg) !important;
  }
}
  
  html body nav.nav .nav-content .nav-mobile-toggle-icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 20px !important;
    height: 16px !important;
    margin: 0 auto !important;
  }
  
  html body nav.nav .nav-content .nav-mobile-toggle-icon span {
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    background: var(--text-primary) !important;
    border-radius: 2px !important;
    transition: var(--transition) !important;
  }
}

/* Ensure nav-links stays INSIDE nav-content - prevent escaping */
html body nav.nav .nav-content::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

html body main.page-shell {
  clear: both !important;
  position: relative !important;
  margin-top: 0 !important;
}