/* --- Account Related Styles (Header Info & Dropdown) --- */

/* Header layout with user info */
.header-actions { /* Container for user-related actions in the header */
    display: flex;
    align-items: center;
    gap: 12px; /* Consider var(--spacing-unit) * 1.5 */
}

.user-profile-info { /* Display of user name/email in header */
    font-size: 0.85rem;
    color: #666; /* Consider var(--color-text-secondary) */
    margin-right: 8px; /* Consider var(--spacing-unit) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* Adjust as needed */
}

/* --- User Dropdown (for login, signup, account actions) --- */
.user-dropdown { /* The main container for the dropdown */
  position: relative;
  display: inline-block;
}

.dropdown-content { /* The content box that appears on hover/click */
  display: none; /* Hidden by default */
  position: absolute;
  right: 0; /* Align to the right of the dropdown container */
  top: 100%; /* Position below the dropdown trigger */
  background-color: var(--color-bg);
  min-width: 250px; /* Adjust as needed */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Standard shadow */
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  z-index: 100; /* Ensure dropdown is above other nearby content */
  overflow: hidden; /* Clip content like form elements if they overflow */
}

/* Show dropdown content on hover of parent, or if .show class is added by JS */
.user-dropdown:hover .dropdown-content,
.dropdown-content.show {
  display: block;
}

.dropdown-header { /* Header section within the dropdown */
  padding: calc(var(--spacing-unit) * 1.5);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-main);
  background-color: var(--color-bg-section); /* Slightly different bg for header */
}

.dropdown-form { /* Styling for forms within the dropdown (login/signup) */
  padding: calc(var(--spacing-unit) * 1.5);
}

.dropdown-form input { /* Input fields within the dropdown form */
  width: 100%;
  padding: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  box-sizing: border-box;
  /* Consider :focus styles similar to other inputs */
}
.dropdown-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 105, 199, 0.2);
}

.dropdown-buttons { /* Container for buttons at the bottom of the dropdown form */
  display: flex;
  gap: var(--spacing-unit);
  margin-top: var(--spacing-unit); /* Space above buttons */
}

.dropdown-button { /* General button style for dropdown actions */
  /* Can use .secondary-button or .primary-button from common.css */
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  flex: 1; /* Allow buttons to share space equally */
  text-align: center; /* Ensure text is centered */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-button:hover {
  background-color: var(--color-bg-section);
  color: var(--color-text-main);
}

.dropdown-button.primary { /* Primary action button in dropdown */
  /* Can use .primary-button from common.css and override text color if needed */
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.dropdown-button.primary:hover {
  background-color: var(--color-primary-hover);
}