/**
 * Professional dropdown styling for Fiacore
 * This provides enhanced styling for the user profile dropdown
 * Optimized for iPhone and other mobile devices
 */

/* Base style for user navigation dropdown */
.user-nav-dropdown {
  position: relative !important;
  display: inline-block;
}

/* Enhanced styling for the user dropdown button */
.user-dropdown-button {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-dropdown-button:hover, 
.user-dropdown-button:focus {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background-color: var(--hover-bg);
}

/* Completely fixed dropdown menu styling */
.user-dropdown-menu {
  /* Use fixed positioning to ensure it doesn't overlap with content */
  position: fixed !important;
  z-index: 9999 !important; /* Highest z-index to be above everything */
  
  /* Size and appearance */
  min-width: 220px !important;
  width: auto !important;
  background-color: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  overflow: hidden;
  transform-origin: top right;
  animation: dropdownFadeIn 0.2s ease-out;
  
  /* Mobile-friendly positioning */
  right: 10px !important;
  top: auto !important;
  bottom: 80px !important; /* Position from bottom to avoid overlap */
  left: auto !important; /* Clear any left positioning */
  max-width: 300px !important;
}

/* Special handling for iPhone in landscape mode */
@media (orientation: landscape) and (max-width: 926px) {
  .user-dropdown-menu {
    bottom: 60px !important; /* Adjusted bottom in landscape */
    max-height: 70vh !important; /* Limit height in landscape */
    overflow-y: auto !important; /* Allow scrolling if needed */
  }
}

/* Animation for dropdown appearance */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Force the dropdown to appear in the correct position */
.user-dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
}

/* Styled dropdown items */
.user-dropdown-item {
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  font-size: 1.1rem; /* Larger touch targets on mobile */
}

.user-dropdown-item:hover,
.user-dropdown-item:active {
  background-color: var(--hover-bg);
  border-left-color: var(--primary);
  color: var(--primary);
}

.user-dropdown-item i {
  color: var(--secondary);
  transition: all 0.2s ease;
  font-size: 1.2rem; /* Larger icons for better visibility */
}

.user-dropdown-item:hover i,
.user-dropdown-item:active i {
  color: var(--primary);
}

/* Styled divider */
.user-dropdown-divider {
  height: 1px;
  background-color: var(--border);
  margin: 0.5rem 0;
}

/* Danger action (logout) */
.user-dropdown-item.danger {
  color: var(--danger);
}

.user-dropdown-item.danger i {
  color: var(--danger);
}

.user-dropdown-item.danger:hover,
.user-dropdown-item.danger:active {
  background-color: rgba(239, 68, 68, 0.1);
  border-left-color: var(--danger);
}

/* User avatar styling */
.user-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  border-radius: 50%;
  font-size: 1.1rem;
}

/* Ensure dropdown is positioned properly */
.dropdown-toggle::after {
  display: none;
}

/* Special case for iPhone Pro Max sizes */
@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px),
  /* iPhone 15 Pro Max */
  only screen 
  and (device-width: 428px) 
  and (device-height: 926px),
  /* iPhone 14 Pro Max, 13 Pro Max */
  only screen 
  and (max-width: 430px) {
  
  .user-dropdown-button {
    padding: 0.4rem 0.75rem;
  }
  
  /* This creates a modal-like dropdown specifically for iPhones */
  .user-dropdown-menu {
    background-color: rgba(var(--card-bg-rgb), 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    right: 5% !important;
    left: 5% !important;
    width: 90% !important;
    max-width: none !important;
    bottom: 20% !important; 
    border-radius: 16px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  }
  
  /* Larger touch targets for iPhone */
  .user-dropdown-item {
    padding: 1rem 1.5rem;
  }
}

/* Fix for all screen rotations and orientations */
@media (orientation: landscape) {
  .user-dropdown-menu {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}