/* Form Validation Styles */

/* Form group with validation */
.form-group {
    position: relative;
    margin-bottom: var(--spacing-3);
}

/* Input validation states */
input.valid,
textarea.valid,
select.valid {
    border-color: var(--success-color);
    background-color: rgba(76, 175, 80, 0.05);
}

input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--error-color);
    background-color: rgba(255, 12, 62, 0.05);
}

/* Focus states override validation colors */
input.valid:focus,
textarea.valid:focus,
select.valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

input.invalid:focus,
textarea.invalid:focus,
select.invalid:focus {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(255, 12, 62, 0.1);
}

/* Validation icons */
.validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    margin-top: 14px; /* Half of label height to offset for label */
}

.validation-success {
    color: var(--success-color);
}

.validation-error {
    color: var(--error-color);
}

/* Field error messages */
.field-error {
    display: block;
    color: var(--error-color);
    font-size: 0.8125rem;
    margin-top: var(--spacing-1);
    line-height: 1.4;
}

/* Required field indicator */
.required-indicator {
    color: var(--error-color);
    margin-left: 4px;
}

/* Form legend for required fields */
.form-legend {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2);
}

.form-legend .required-indicator {
    color: var(--error-color);
}

/* Adjust form group when validation icons are present */
.form-group:has(.validation-icon) input,
.form-group:has(.validation-icon) textarea {
    padding-right: 40px; /* Make room for icon */
}

/* Animation for validation state changes */
.field-error {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Validation icon animation */
.validation-icon {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        scale: 0.8;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

/* Form help text */
.form-text {
    display: block;
    margin-top: var(--spacing-1);
    font-size: 0.875rem;
}

.form-text.text-muted {
    color: var(--text-secondary);
}

.form-text.text-tertiary {
    color: var(--text-tertiary);
}

/* Checkbox help text indentation */
.checkbox-help-text {
    display: block;
    margin-left: 26px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* State input uppercase */
.state-input {
    text-transform: uppercase;
}

/* Icon sizing for badges */
.icon-sm {
    font-size: 1rem;
}

/* Primary color link */
.link-primary {
    color: var(--primary-color);
    text-decoration: none;
}

.link-primary:hover {
    text-decoration: underline;
}

/* Hidden utility class */
.hidden {
    display: none !important;
}