/* ========================================
   FD Form Validation - Inline error styling
   Works with fd-form-validation.js
   ======================================== */

/* Error icon for footnote (not inside field — avoids select chevron clash) */
:root {
  --fd-validation-error-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 8 4zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
  --fd-form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Ensure fd-field-error displays when shown — inset matches field value text */
.fd-field-error {
  display: none;
  font-size: var(--form-hint-size);
  margin-top: 0.25rem;
  padding-inline: var(--form-float-label-inset-x);
  color: var(--status-error);
}

.fd-field-error[style*="display: block"] {
  display: flex !important;
  align-items: flex-start;
  gap: var(--inset-xs, 0.25rem);
}

/* Validation icon in footnote row (not on field control) */
.fd-field-error[style*="display: block"]::before {
  content: "";
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.1em;
  background: var(--fd-validation-error-icon) center / contain no-repeat;
}

/* Form-floating: error div sits outside float shell — spacing on field wrapper */
.fd-form-field > .fd-field-error,
.form-floating .fd-field-error,
.mb-2 .fd-field-error,
.mb-3 .fd-field-error {
  margin-top: 0.25rem;
}

/* is-invalid border — reinforce for JS-toggled state */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--status-error) !important;
}

/* ========================================
   FD skin — strip Bootstrap in-field validation icons
   (border + footnote only; preserves select/date/time affordances)
   ======================================== */

.fd-skin .form-floating.fd-form-field-float > .form-control.is-invalid,
.fd-skin .form-floating.fd-form-field-float > textarea.form-control.is-invalid {
  background-image: none !important;
  padding-right: var(--inset-lg) !important;
}

.fd-skin .form-floating.fd-form-field-float > .form-select.is-invalid:not([multiple]):not([size]),
.fd-skin .form-floating.fd-form-field-float > .form-select.is-invalid:not([multiple])[size="1"] {
  background-image: var(--fd-form-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--inset-md) center !important;
  background-size: 16px 12px !important;
  padding-right: var(--form-float-select-chevron-inset) !important;
}

/* Date/time fields keep their picker icons when invalid */
.fd-skin .fd-form-field-float--date > input[type="date"].is-invalid,
.fd-skin .fd-form-field-float--date > .form-control[type="date"].is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px 14px !important;
  padding-right: 2.25rem !important;
}

.fd-skin .fd-form-field-float--time > input[type="time"].is-invalid,
.fd-skin .fd-form-field-float--time > .form-control[type="time"].is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px 14px !important;
  padding-right: 2.25rem !important;
}

/* Form-level error summary (top of form) */
.fd-form-error-summary {
  display: none;
  margin-bottom: 1rem;
}
.fd-form-error-summary[style*="display: block"] {
  display: block !important;
}