/**
 * 5alas — unified validation & alert colours (Bootstrap 5 forms + alerts).
 * Loads after Bootstrap; uses brand green for success and shared semantic tokens.
 */
:root {
  /* Shared with forms-5alas.css — validation stroke thickness */
  --5alas-form-border-width: 2px;
  --5alas-validation-success: var(--primary-color, #036441);
  --5alas-validation-success-rgb: 3, 100, 65;
  --5alas-validation-danger: #b42318;
  --5alas-validation-danger-rgb: 180, 35, 24;
  --5alas-validation-warning: #ff9f29;
  --5alas-validation-warning-rgb: 255, 159, 41;
  --5alas-validation-info: #245e52;
  --5alas-validation-info-rgb: 36, 94, 82;
  --5alas-success-surface: #e8f5ef;
  --5alas-danger-surface: #fdebea;
  --5alas-warning-surface: #fff8eb;
  --5alas-info-surface: #e8f3f1;
}

/* ----- Bootstrap form validation ----- */
.valid-feedback {
  color: var(--5alas-validation-success) !important;
}

.invalid-feedback {
  color: var(--5alas-validation-danger) !important;
}

/* Match custom .error-message / forms-5alas helper text rhythm */
.invalid-feedback,
.valid-feedback {
  font-size: 0.875rem;
  line-height: 1.35;
  margin-top: 0.375rem;
  font-weight: 500;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--5alas-validation-success) !important;
  border-width: var(--5alas-form-border-width) !important;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--5alas-validation-success) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--5alas-validation-success-rgb), 0.22) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--5alas-validation-danger) !important;
  border-width: var(--5alas-form-border-width) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b42318'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b42318' stroke='none'/%3e%3c/svg%3e") !important;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--5alas-validation-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--5alas-validation-danger-rgb), 0.22) !important;
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--5alas-validation-danger) !important;
  border-width: var(--5alas-form-border-width) !important;
}

.was-validated .form-select:invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b42318'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b42318' stroke='none'/%3e%3c/svg%3e") !important;
}

.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--5alas-validation-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--5alas-validation-danger-rgb), 0.22) !important;
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: var(--5alas-validation-success) !important;
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: var(--5alas-validation-success) !important;
  border-color: var(--5alas-validation-success) !important;
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: var(--5alas-validation-danger) !important;
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: var(--5alas-validation-danger) !important;
  border-color: var(--5alas-validation-danger) !important;
}

.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--5alas-validation-danger-rgb), 0.22) !important;
}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--5alas-validation-danger) !important;
}

.invalid-tooltip {
  background-color: rgba(var(--5alas-validation-danger-rgb), 0.92) !important;
}

.valid-tooltip {
  background-color: rgba(var(--5alas-validation-success-rgb), 0.92) !important;
}

/* ----- Bootstrap alerts ----- */
.alert-success {
  color: var(--5alas-validation-success) !important;
  background-color: var(--5alas-success-surface) !important;
  border-color: rgba(var(--5alas-validation-success-rgb), 0.35) !important;
}

.alert-success .alert-link {
  color: var(--5alas-validation-success) !important;
}

.alert-danger {
  color: var(--5alas-validation-danger) !important;
  background-color: var(--5alas-danger-surface) !important;
  border-color: rgba(var(--5alas-validation-danger-rgb), 0.35) !important;
}

.alert-danger .alert-link {
  color: var(--5alas-validation-danger) !important;
}

.alert-warning {
  color: #7a4b08 !important;
  background-color: var(--5alas-warning-surface) !important;
  border-color: rgba(var(--5alas-validation-warning-rgb), 0.45) !important;
}

.alert-warning .alert-link {
  color: #5c3806 !important;
}

.alert-info {
  color: var(--5alas-validation-info) !important;
  background-color: var(--5alas-info-surface) !important;
  border-color: rgba(var(--5alas-validation-info-rgb), 0.35) !important;
}

.alert-info .alert-link {
  color: var(--5alas-validation-info) !important;
}