/* ============================================
   NAVBAR SCROLL USERNAME COLOR FIX
   Changes username to Buggy Teal when scrolled
   ============================================ */

/* Default state - when at top (scrollY = 0) */
.navbar:not(.navbar-scrolled) .user-display-name {
  color: #2ac8c8; /* Buggy Teal - default */
}

/* When navbar is scrolled and becomes darker */
.navbar-scrolled {
  background: rgba(33, 37, 41, 0.95) !important; /* Dark background */
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Username color when scrolled - make it lighter/visible */
.navbar-scrolled .user-display-name {
  color: #78c2ad !important; /* Lighter teal for visibility on dark background */
  transition: color 0.3s ease;
}

/* Hover state when scrolled */
.navbar-scrolled .user-display-name:hover {
  color: #9fd4c2 !important; /* Even lighter on hover */
}

/* Role badge adjustment when scrolled */
.navbar-scrolled .user-role-badge {
  background: rgba(120, 194, 173, 0.15);
  color: #9fd4c2;
}

/* Alternative: Use white text when scrolled for maximum contrast */
.navbar-scrolled.high-contrast .user-display-name {
  color: #ffffff !important;
}

.navbar-scrolled.high-contrast .user-display-name:hover {
  color: #78c2ad !important;
}

/* Smooth transition for all color changes */
.user-display-name,
.user-role-badge {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Mobile responsive - ensure visibility on smaller screens */
@media (max-width: 768px) {
  .navbar-scrolled .user-display-name {
    color: #9fd4c2 !important; /* Ensure visibility on mobile */
    font-weight: 600;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  .navbar-scrolled .user-display-name {
    color: #a8e6cf !important;
  }
  
  .navbar-scrolled .user-display-name:hover {
    color: #ffffff !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .navbar-scrolled .user-display-name {
    color: #ffffff !important;
    font-weight: 700;
  }
}

/* Print styles */
@media print {
  .user-display-name {
    color: #000000 !important;
  }
}