/* ============================================================================
   APP (glue del framework Blazor) - ancorato ai token.
   Ordine cascade: fonts → tokens → base → components → app.
   Qui solo gli agganci di Blazor: validazione EditForm e UI d'errore.
   Lo stile dei componenti vive in components.css.
   ============================================================================ */

/* -- Validazione EditForm (DataAnnotationsValidator) ----------------------- */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--success);
}

.invalid {
  outline: 1px solid var(--danger);
}

.validation-message {
  display: block;
  margin-top: var(--space-1);
  color: var(--danger-text);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* -- UI d'errore non gestito (#blazor-error-ui, in MainLayout) ------------- */
#blazor-error-ui {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-6);
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-top: 1px solid var(--warning);
  box-shadow: var(--elev-3);
  font-size: var(--text-sm);
}

#blazor-error-ui .reload {
  color: var(--primary-700);
  font-weight: var(--fw-semibold);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  float: inline-end;
  margin-inline-start: var(--space-4);
}

/* -- Error boundary di componente ------------------------------------------ */
.blazor-error-boundary {
  padding: var(--space-4) var(--space-6);
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
  content: "Si è verificato un errore.";
}