// =============================================================================
// Styles shared by the three settings pages (AccountSettingsPage,
// PreferencesPage, HouseholdSettingsPage) — colocated under pages/settings/
// since nothing outside that folder uses these classes. Field/label/input
// styling itself still comes from features/profile/profile-forms.scss
// (shared with the onboarding wizard); this file only covers page layout —
// direct continuation of what used to be HouseholdPage.scss before the
// household/regime/allergies page was split in three.
// =============================================================================

.settings-page {
  &__status {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
  }

  &__status--error {
    color: var(--color-error);
  }
}

// Each setting lives in its own card, same surface treatment used
// elsewhere (see .planning-table in HomePage.scss) — reads as a distinct,
// self-contained unit rather than one long form.
.settings-page__section {
  max-width: 32rem;
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.settings-page__section-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-md);
}

.settings-page__saving,
.settings-page__saved {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.settings-page__saving {
  color: var(--color-text-muted);
}

.settings-page__saved {
  color: var(--color-success);
}

.settings-page__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.settings-page button {
  padding: 0.5rem var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);

  &:hover:not(:disabled) {
    background: var(--color-surface-alt);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.settings-page__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.settings-page__invite-section {
  margin-top: var(--space-md);
}

// Household member list.
.settings-page__members {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-page__member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.settings-page__member-badge {
  margin-left: var(--space-xs);
  padding: 0.1rem 0.4rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: var(--radius-base);
}

// Invite code — meant to be read/copied, so it's set in a monospace font
// and never wraps mid-code.
.settings-page__invite-code {
  font-family: monospace;
  font-size: var(--font-size-md);
  letter-spacing: 0.08em;
}

// Destructive actions (delete household/account, remove a member) get a
// visually distinct, consistent "danger" treatment wherever they appear.
.settings-page__danger-zone {
  margin-top: var(--space-lg);
  border-color: var(--color-error);
}

.settings-page__danger-button {
  color: #fff;
  background: var(--color-error);
  border-color: var(--color-error);

  &:hover {
    opacity: 0.9;
  }
}

button.settings-page__link-button {
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}