/**
 * @file
 * Form validation styles for NSIA Portal.
 */

/* Error state for form inputs */
.form-item input.error,
.form-item input.is-invalid,
.form-item select.error,
.form-item select.is-invalid,
.form-item textarea.error,
.form-item textarea.is-invalid,
input.error,
input.is-invalid,
select.error,
select.is-invalid,
textarea.error,
textarea.is-invalid {
  border-color: #dc3545 !important;
  background-color: #fff8f8;
}

.form-item input.error:focus,
.form-item input.is-invalid:focus,
.form-item select.error:focus,
.form-item select.is-invalid:focus,
.form-item textarea.error:focus,
.form-item textarea.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  outline: none;
}

/* Error message styling */
.form-item--error-message,
.invalid-feedback {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

.form-item--error-message:not(:empty),
.invalid-feedback:not(:empty) {
  display: block;
}

/* Success state */
.form-item input.valid,
.form-item input.is-valid,
.form-item select.valid,
.form-item select.is-valid,
.form-item textarea.valid,
.form-item textarea.is-valid {
  border-color: #28a745;
}

/* Character counter */
.char-counter {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: right;
  margin-top: 0.25rem;
}

.char-counter.warning {
  color: #ffc107;
}

.char-counter.danger {
  color: #dc3545;
}

/* Phone number input formatting hint */
input[type="tel"]::placeholder {
  color: #adb5bd;
}

/* Required field indicator */
.form-required::after {
  content: " *";
  color: #dc3545;
}

/* Form section with validation errors */
.form-section.has-errors {
  border-left: 3px solid #dc3545;
  padding-left: 1rem;
}

/* Inline validation icon */
.form-item.validated {
  position: relative;
}

.form-item.validated::after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

.form-item.validated.valid::after {
  content: "\2713";
  color: #28a745;
}

.form-item.validated.invalid::after {
  content: "\2717";
  color: #dc3545;
}

/* Loading state during async validation */
.form-item.validating input,
.form-item.validating select,
.form-item.validating textarea {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="35" stroke="%23ccc" stroke-width="10" fill="none"/><circle cx="50" cy="50" r="35" stroke="%230d6efd" stroke-width="10" fill="none" stroke-dasharray="164.93" stroke-dashoffset="82.46"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>');
  background-size: 20px 20px;
  background-position: calc(100% - 10px) center;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Form validation summary */
.form-validation-summary {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.form-validation-summary h4 {
  color: #721c24;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.form-validation-summary ul {
  margin: 0;
  padding-left: 1.5rem;
  color: #721c24;
}

.form-validation-summary li {
  margin-bottom: 0.25rem;
}

/* Tooltip for validation hints */
.validation-hint {
  position: relative;
  display: inline-block;
  margin-left: 0.5rem;
  cursor: help;
}

.validation-hint::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  font-size: 0.625rem;
  font-weight: bold;
}

.validation-hint .hint-text {
  visibility: hidden;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem;
  background-color: #333;
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

.validation-hint:hover .hint-text {
  visibility: visible;
  opacity: 1;
}

/* NZ Phone format helper */
.phone-format-helper {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* Bank account format helper */
.bank-format-helper {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* Password strength indicator */
.password-strength {
  height: 4px;
  background-color: #e9ecef;
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.password-strength-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s, background-color 0.3s;
}

.password-strength.weak .password-strength-bar {
  width: 25%;
  background-color: #dc3545;
}

.password-strength.fair .password-strength-bar {
  width: 50%;
  background-color: #ffc107;
}

.password-strength.good .password-strength-bar {
  width: 75%;
  background-color: #17a2b8;
}

.password-strength.strong .password-strength-bar {
  width: 100%;
  background-color: #28a745;
}

.password-strength-text {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.password-strength.weak .password-strength-text {
  color: #dc3545;
}

.password-strength.fair .password-strength-text {
  color: #ffc107;
}

.password-strength.good .password-strength-text {
  color: #17a2b8;
}

.password-strength.strong .password-strength-text {
  color: #28a745;
}