/* ============================================================
Pagina Profilo Utente — Stili page-specific
============================================================ */

/* ── Loading ── */
.user-profile-loading {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-secondary);
}

.user-profile-loading__icon {
  /* FIX: Sostituito 32px hardcoded con token tipografico (2rem = 32px) */
  font-size: var(--font-headline-large);
  display: block;
  margin-bottom: var(--space-2);
}

.user-profile-loading__icon--error {
  font-size: var(--font-headline-large);
  color: var(--color-error);
}

/* ── Content toggle ── */
.user-profile-content {
  display: none;
}
/* FIX: Sostituisce style.display = 'block' */
.user-profile-content[hidden] {
  display: none !important;
}
.user-profile-content:not([hidden]) {
  display: block;
}

/* ── Form-row a 3 colonne ── */
.form-row--tre {
  display: flex;
  gap: var(--space-3);
}
.form-row--tre > :nth-child(1) { flex: 1; }
.form-row--tre > :nth-child(2) { flex: 2; }
.form-row--tre > :nth-child(3) { flex: 1.5; }

/* ── Azioni fine form ── */
.user-profile-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.user-profile-actions .button {
  flex: 1;
  min-width: 140px;
}

/* ── Sezione organizzazione ── */
.user-profile-org-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.user-profile-org-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-title-medium);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.user-profile-org-loading {
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-secondary);
}
.user-profile-org-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.user-profile-org-label {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  min-width: 100px;
}
.user-profile-org-value {
  font-size: var(--font-body-medium);
  color: var(--color-text-primary);
}
.user-profile-org-action {
  margin-top: var(--space-3);
}

/* ── Ruolo globale display ── */
.user-profile-ruolo {
  padding: var(--space-2) 0;
}
.user-profile-ruolo__none {
  color: var(--color-text-secondary);
  font-size: var(--font-body-medium);
}

/* ── FIX: Classi BEM per sostituire inline styles ── */
.user-profile__btn-modifica {
  margin-bottom: var(--space-3);
}

.user-profile__btn-icon {
  /* FIX: Sostituisce style="font-size:18px;" e style="font-size:32px;" */
  font-size: var(--font-title-large); 
}

/* ── Preview Certificato ── */
.user-profile-cert__preview-meta {
  /* FIX: Sostituisce style="font-size: var(--font-body-small)..." */
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.user-profile-cert__preview-icon {
  /* FIX: Sostituisce style="font-size:13px;" */
  font-size: var(--font-title-medium);
  vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .user-profile-actions {
    flex-direction: column;
  }
  .user-profile-actions .button {
    min-width: 0;
  }
}