/*
 * ============================================================================
 * FILE: user-profile.css
 *
 * DESCRIPTION:
 * Contains all styles for the user profile page (/user).
 * ============================================================================
 */

.user-profile-page {
  max-width: 800px;
  margin: 0 auto;
}

.profile-section {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.section-title {
  margin-top: 0;
  font-size: 1.2rem;
  font-family: var(--font-sans);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
}

.profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.profile-label {
  font-weight: 500;
  color: var(--color-text-secondary);
  flex-basis: 25%;
}

.profile-value {
  flex-grow: 1;
  font-family: var(--font-sans);
}

/* Styles for inline edit forms */
.edit-fields {
  display: flex;
  flex-grow: 1;
  gap: var(--space-sm);
}
.edit-buttons {
  display: flex;
}

.message-area {
  min-height: 24px;
}

/*
* ============================================================================
* Informational Messages
* ============================================================================
*/

.info-message {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  line-height: 1.5;
  text-align: left;
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-accent);
}

.google-managed-message {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.google-managed-message img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}