/* ============================================
   USER DETAILS CARD (Top-Right Corner)
   ============================================ */

.user-details-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.1);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  max-width: 300px;
}

.user-details-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.user-details-card:active {
  transform: translateY(0);
}

/* User Avatar */
.user-avatar {
  font-size: 2rem;
  color: var(--text-white);
  line-height: 1;
}

/* User Info */
.user-info {
  flex: 1;
  min-width: 0;
  /* Allow text truncation */
}

.user-email {
  color: var(--text-white);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-department {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-xs);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Settings Icon */
.settings-icon {
  font-size: var(--font-lg);
  color: var(--text-white);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.user-details-card:hover .settings-icon {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .user-details-card {
    max-width: 200px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .user-avatar {
    font-size: 1.5rem;
  }

  .user-email {
    font-size: var(--font-xs);
  }

  .user-department {
    font-size: 10px;
  }

  .settings-icon {
    font-size: var(--font-md);
  }
}

@media (max-width: 480px) {
  .user-email {
    display: none;
  }

  .user-department {
    font-size: var(--font-xs);
  }
}

/* Dark Mode Override */
body.dark-mode .user-email {
  color: var(--text-dark);
  /* Evaluates to off-white (#f0f1ea) */
}

/* Gray Mode Override */
body.gray-mode .user-email {
  color: var(--text-dark);
}