/**
 * Dropdown Override CSS
 *
 * This file contains styles that override all other dropdown styles
 * to ensure consistent behavior for the user profile dropdown.
 *
 * It uses high specificity selectors and !important flags where necessary
 * to ensure these styles take precedence.
 */

/* Reset all dropdown styles to prevent conflicts */
.nav-item.dropdown .dropdown-menu,
.navbar .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-menu-end,
.home-page .dropdown-menu,
.dropdown-menu.custom-dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  z-index: 1030 !important;
}

/* Mobile-specific reset - allow position to be overridden */
@media (max-width: 576px) {
  .nav-item.dropdown .dropdown-menu,
  .navbar .dropdown-menu,
  .navbar-nav .dropdown-menu,
  .dropdown-menu-end,
  .home-page .dropdown-menu,
  .dropdown-menu.custom-dropdown {
    position: fixed !important;
    top: auto !important;
  }
}

/* Only show dropdown when it has the .show class */
.nav-item.dropdown .dropdown-menu.show,
.navbar .dropdown-menu.show,
.navbar-nav .dropdown-menu.show,
.dropdown-menu-end.show,
.home-page .dropdown-menu.show,
.dropdown-menu.custom-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Super high specificity selector to ensure dropdown is visible on mobile */
html body .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.custom-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1050 !important; /* Higher than backdrop (1040) */
  pointer-events: auto !important; /* Ensure clicks are captured */
}

/* No backdrop for dropdown - removed as per user request */

/* Ensure proper positioning for the dropdown */
.nav-item.dropdown {
  position: relative !important;
}

/* Custom dropdown styling */
.dropdown-menu.custom-dropdown {
  width: 320px !important;
  background: linear-gradient(145deg, #211d2e, #1a1724) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 0 12px 12px !important; /* Sharp edges at top, rounded at bottom */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  margin-top: 0 !important; /* Remove top margin for a cleaner connection */
}

/* Animation classes - only apply when these classes are explicitly added */
.dropdown-menu.custom-dropdown.animate-entrance {
  animation: dropdownEntrance 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

.dropdown-menu.custom-dropdown.animate-exit {
  animation: dropdownExit 0.2s ease-in forwards !important;
}

/* Animation keyframes */
@keyframes dropdownEntrance {
  from {
    opacity: 0 !important;
    transform: translateY(-5px) !important; /* Smaller translation for sharper appearance */
    clip-path: inset(0 0 100% 0) !important; /* Reveal from top to bottom */
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
    clip-path: inset(0 0 0 0) !important; /* Fully revealed */
  }
}

@keyframes dropdownExit {
  from {
    opacity: 1 !important;
    transform: translateY(0) !important;
    clip-path: inset(0 0 0 0) !important;
  }
  to {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
    clip-path: inset(0 0 100% 0) !important; /* Hide from bottom to top */
  }
}

/* Dropdown items styling */
.dropdown-menu.custom-dropdown .dropdown-item {
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s ease !important;
  margin: 2px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background-color: transparent !important;
}

/* Shimmer effect on hover */
.dropdown-menu.custom-dropdown .dropdown-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  ) !important;
  transition: left 0.8s ease !important;
  z-index: 0 !important;
}

/* Hover state for dropdown items */
.dropdown-menu.custom-dropdown .dropdown-item:hover {
  background-color: rgba(253, 86, 49, 0.05) !important;
  color: #fd5631 !important;
  transform: translateX(4px) !important;
}

/* Trigger shimmer animation on hover */
.dropdown-menu.custom-dropdown .dropdown-item:hover::before {
  left: 100% !important;
}

/* Active/focus state for dropdown items */
.dropdown-menu.custom-dropdown .dropdown-item:active,
.dropdown-menu.custom-dropdown .dropdown-item:focus {
  outline: none !important;
  background-color: rgba(253, 86, 49, 0.1) !important;
  color: #fd5631 !important;
  transform: translateX(4px) !important;
}

/* Focus styles for keyboard navigation */
.dropdown-menu.custom-dropdown .dropdown-item:focus-visible {
  box-shadow: 0 0 0 2px #fd5631 !important;
}

/* Icon styles */
.dropdown-menu.custom-dropdown .dropdown-item i {
  margin-right: 10px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  color: #fd5631 !important;
  transition: transform 0.2s ease !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Icon animation on hover */
.dropdown-menu.custom-dropdown .dropdown-item:hover i {
  transform: translateX(2px) scale(1.1) !important;
}

/* Icon animation on active/focus */
.dropdown-menu.custom-dropdown .dropdown-item:active i,
.dropdown-menu.custom-dropdown .dropdown-item:focus i {
  transform: translateX(2px) !important;
}

/* Style for the logout item */
.dropdown-menu.custom-dropdown .dropdown-item.text-danger {
  color: #dc3545 !important;
}

.dropdown-menu.custom-dropdown .dropdown-item.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.05) !important;
  color: #dc3545 !important;
}

.dropdown-menu.custom-dropdown .dropdown-item.text-danger:active,
.dropdown-menu.custom-dropdown .dropdown-item.text-danger:focus {
  background-color: rgba(220, 53, 69, 0.15) !important;
}

.dropdown-menu.custom-dropdown .dropdown-item.text-danger i {
  color: #dc3545 !important;
}

/* Shimmer effect for danger item */
.dropdown-menu.custom-dropdown .dropdown-item.text-danger::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 53, 69, 0.05),
    rgba(220, 53, 69, 0.1),
    rgba(220, 53, 69, 0.05),
    transparent
  ) !important;
}

/* Badge styling */
.dropdown-menu.custom-dropdown .badge {
  transition: all 0.2s ease !important;
  background-color: #fd5631 !important;
  position: relative !important;
  z-index: 1 !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  min-width: 1.5rem !important;
  text-align: center !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  color: white !important;
}

/* My Listings badge specific styling - now matches inbox badge color for uniformity */
.dropdown-menu.custom-dropdown #myListingsCount {
  background-color: #fd5631 !important; /* Same accent color as inbox badge */
}

/* Profile Completion badge styling */
.dropdown-menu.custom-dropdown #profileCompletionBadge {
  background-color: #fd5631 !important; /* Same accent color as other badges */
  font-size: 0.7rem !important; /* Slightly smaller to fit text */
  white-space: nowrap !important; /* Prevent text wrapping */
  min-width: auto !important; /* Allow badge to expand based on content */
  padding: 0.25rem 0.5rem !important; /* Ensure adequate padding */
  max-width: none !important; /* Override any max-width restrictions */
}

/* Badge container styling */
.dropdown-menu.custom-dropdown .badge-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important; /* Prevent container from shrinking */
  margin-left: auto !important; /* Push to the right */
}

/* Profile completion badge color variations */
.dropdown-menu.custom-dropdown #profileCompletionBadge.profile-completion-low {
  background-color: #dc3545 !important; /* Red for low completion (<50%) */
}

.dropdown-menu.custom-dropdown #profileCompletionBadge.profile-completion-medium {
  background-color: #ffc107 !important; /* Yellow for medium completion (50-99%) */
  color: #212529 !important; /* Dark text for better contrast on yellow */
}

.dropdown-menu.custom-dropdown #profileCompletionBadge.profile-completion-complete {
  background-color: #28a745 !important; /* Green for complete profile (100%) */
}

.dropdown-menu.custom-dropdown .dropdown-item:hover .badge {
  transform: scale(1.1) !important;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2) !important;
}

.dropdown-menu.custom-dropdown .dropdown-item:active .badge,
.dropdown-menu.custom-dropdown .dropdown-item:focus .badge {
  transform: scale(1.1) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* Mobile optimizations */
@media (max-width: 576px) {
  .dropdown-menu.custom-dropdown {
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    position: fixed !important;
    top: 60px !important; /* Fixed position from top of screen */
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    border-radius: 12px !important; /* Rounded corners on all sides for mobile */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; /* Stronger shadow for mobile */
  }

  /* Ensure dropdown is visible on mobile */
  .dropdown-menu.custom-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1060 !important; /* Higher z-index to ensure it appears above backdrop (1030) */
    pointer-events: auto !important; /* Critical: ensure clicks work */
  }

  /* Override any conflicting styles with maximum specificity */
  html body .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.custom-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1060 !important; /* Higher than backdrop (1030) */
    pointer-events: auto !important; /* Ensure clicks are captured */
    position: fixed !important; /* Force fixed positioning */
  }

  /* Adjust dropdown items for better touch targets */
  .dropdown-menu.custom-dropdown .dropdown-item {
    padding: 12px 15px !important;
    font-size: 1rem !important;
  }

  /* Make icons slightly larger on mobile for better visibility */
  .dropdown-menu.custom-dropdown .dropdown-item i {
    font-size: 18px !important;
    width: 24px !important;
  }

  /* Adjust badge size for better visibility on mobile */
  .dropdown-menu.custom-dropdown .badge {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Increase spacing between dropdown sections for better touch targets */
  .dropdown-menu.custom-dropdown .dropdown-section {
    margin-bottom: 8px !important;
    padding: 4px !important;
  }

  /* Adjust profile header for mobile */
  .dropdown-menu.custom-dropdown .profile-header {
    padding: 15px 10px !important;
  }

  /* Make profile avatar slightly larger on mobile */
  .dropdown-menu.custom-dropdown .profile-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  /* Disable hover transform effects on mobile for better performance */
  .dropdown-menu.custom-dropdown .dropdown-item:hover {
    transform: none !important;
  }

  /* Use active state for touch devices */
  .dropdown-menu.custom-dropdown .dropdown-item:active {
    background-color: rgba(253, 86, 49, 0.1) !important;
    color: #fd5631 !important;
  }
}

/* Ensure dropdown toggle has a pointer cursor */
.nav-link.dropdown-toggle {
  cursor: pointer !important;
  border-radius: 8px 8px 0 0 !important; /* Rounded at top, sharp at bottom */
  transition: all 0.2s ease !important;
}

/* Add a subtle active state for the dropdown toggle */
.nav-item.dropdown.show .nav-link.dropdown-toggle {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Profile picture container positioning for badge */
#navProfilePic {
  position: relative !important;
}

/* Profile notification badge */
#navProfileBadge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background-color: #fd5631 !important;
  color: white !important;
  border-radius: 10px !important; /* Reduced border radius by 50% */
  font-size: 0.7rem !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important; /* Shadow on the right side */
  transform: translateX(2px) !important; /* Slight offset to enhance raised effect */
  z-index: 10 !important;
  padding: 0 4px !important;
  font-weight: bold !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

/* Hover effect for profile badge */
#navProfilePic:hover #navProfileBadge {
  transform: translateX(3px) scale(1.1) !important;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Add a subtle pulse animation for the profile badge */
@keyframes badgePulse {
  0% { transform: translateX(2px) scale(1); }
  50% { transform: translateX(3px) scale(1.1); }
  100% { transform: translateX(2px) scale(1); }
}

/* Apply pulse animation when there are unread messages */
#navProfileBadge[style*="display: flex"] {
  animation: badgePulse 2s infinite ease-in-out !important;
}

/* Dropdown section hover effects */
.dropdown-menu.custom-dropdown .dropdown-section {
  transition: background-color 0.3s ease !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

.dropdown-menu.custom-dropdown .dropdown-section:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Profile header hover effects */
.dropdown-menu.custom-dropdown .profile-header {
  transition: all 0.3s ease !important;
}

.dropdown-menu.custom-dropdown .profile-header:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Profile avatar hover effects */
.dropdown-menu.custom-dropdown .profile-avatar {
  transition: transform 0.3s ease, border-color 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.dropdown-menu.custom-dropdown .profile-avatar:hover {
  transform: scale(1.05) !important;
  border-color: var(--accent-color, #fd5631) !important;
}

/* Shimmer effect for profile avatar */
.dropdown-menu.custom-dropdown .profile-avatar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  ) !important;
  transition: left 0.8s ease !important;
  z-index: 2 !important;
}

.dropdown-menu.custom-dropdown .profile-avatar:hover::before {
  left: 100% !important;
}