/* Global validation styling for FluentUI components in EditForm */

/* Style invalid FluentUI form fields - use box-shadow to create red border effect */
/* FluentUI uses Shadow DOM, so we can't directly modify internal borders */
/* Instead, we add a red box-shadow that matches the border radius */
.invalid fluent-text-field,
.invalid fluent-text-area,
.invalid fluent-select,
.invalid fluent-number-field,
.invalid fluent-date-picker {
    /* Add red "border" using inset box-shadow to match FluentUI's border radius */
    box-shadow: 0 0 0 1px #d13438 !important;
    border-radius: calc(var(--control-corner-radius) * 1px);
}

/* Focus state - make the shadow more prominent */
.invalid fluent-text-field:focus-within,
.invalid fluent-text-area:focus-within,
.invalid fluent-select:focus-within,
.invalid fluent-number-field:focus-within,
.invalid fluent-date-picker:focus-within {
    box-shadow: 0 0 0 2px #d13438 !important;
}/* Style FluentValidationMessage */
fluent-validation-message {
  color: #d13438;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
  font-weight: 500;
}

/* Alternative selector for validation messages as regular spans */
.validation-message {
  color: #d13438;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
  font-weight: 500;
}

/* Add a subtle animation when validation fails */
@keyframes validation-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

.invalid {
  animation: validation-shake 0.3s ease-in-out;
}