/* Styles for user dropdown menu (shared with index.html and questionnaire.html) */
#headerUserMenu {
  position: relative;
  transform: translateX(-50px); /* Move 50px to the left */
}
.user-menu-wrapper {
  position: relative;
  z-index: 1005;
  display: inline-block;
  margin-right: 50px; /* Add negative margin to move left */
}
#userMenuBtn, #userMenuToggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the text and arrow */
  gap: 0.5rem;
  position: relative; /* Ensure position context for z-index */
  z-index: 1005; /* Higher than global-portal-menu */
  margin-right: 1rem;
  text-align: center; /* Center text content */
}

.userMenuArrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
  margin-left: 8px; /* Add some space between text and arrow */
  position: relative; /* Make sure the arrow is positioned correctly */
}
.userMenuArrow.open {
  transform: rotate(360deg);
}
#userMenuToggle {
  position: relative;
  z-index: 1005; /* Higher than the portal menu */
  font-weight: bold;
  cursor: pointer;
  display: flex; /* Use flex to align text and arrow */
  align-items: center;
  justify-content: center; /* Center all content */
  font-size: 1.2rem;
  margin-right: 1rem;
  min-width: 180px; /* Match the dropdown width */
}
#userDropdown {
  display: none;
  position: absolute;
  top: 2.5rem; /* Increased slightly to ensure it's below the menu toggle */
  left: 50%; /* Center the dropdown */
  transform: translateX(-50%) translateX(-50px); /* Center it and apply the 50px left offset */
  background: #222;
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px #0008;
  min-width: 180px;
  z-index: 1010; /* Increased z-index to appear above the portal menu */
}

/* Add a pseudo-element for the vertical divider to help visualize alignment */
#userDropdown::before {
  content: '';
  position: absolute;
  top: -7px; /* Position it above the dropdown */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #222; /* Match dropdown background color */
}
#userDropdown > div {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #333;
  font-weight: bold;
}
#userDropdown a {
  display: block;
  padding: 0.8rem 1.2rem;
  color: #3a7;
  text-decoration: none;
  font-weight: bold;
}
#userDropdown a#logoutBtn {
  color: #fff;
  font-weight: normal;
}
#userDropdown a:hover {
  background: #3a7;
  color: #fff;
}