/* ============================================================
   Calibrate — Shared component styles
   Importato dopo tokens.css. Contiene regole di componente (validation,
   modal close, stati pulsante) condivise tra tutte le pagine v2 deployment.
   ============================================================ */

/* === Form validation (audit U-001) ============================
   :user-invalid si attiva solo DOPO che l'utente ha interagito col campo,
   a differenza di :invalid che è attivo da subito anche su campi vuoti.
   Supporto: Chrome 119+, Firefox 88+, Safari 16.5+ — sicuro per 2026. */

input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: var(--danger);
  background: var(--danger-bg);
}

input:user-invalid:focus,
textarea:user-invalid:focus,
select:user-invalid:focus {
  border-color: var(--danger);
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

/* Asterisco rosso sulle label per campi required.
   :has() ha buon supporto in 2026 (Chrome 105+, Firefox 121+, Safari 15.4+). */
.form-group:has(input[required]) label::after,
.form-group:has(select[required]) label::after,
.form-group:has(textarea[required]) label::after {
  content: ' *';
  color: var(--danger);
  font-weight: var(--weight-semibold);
}

/* Pulsanti disabled — cursor not-allowed esplicito */
button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading state per submit durante async — alternativa al disabled */
.btn.loading,
button.loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}

/* === Modal close button (audit U-006) ============================
   Riutilizzabile su qualunque modal il cui contenitore abbia position: relative. */

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-2);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover {
  color: var(--text);
  background: var(--bg2, var(--surface-2));
}
.modal-close:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* === Focus indicators globali (audit A-004) ============================
   :focus-visible si attiva solo quando l'utente naviga da tastiera (Tab),
   non al click del mouse. Indicatore chiaro per accessibilità WCAG. */

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Override per input/select/textarea che hanno già un border interno */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 0;
}