/* ========================================
   Form Validation Styles
   Enhanced visual feedback for form validation
   ======================================== */

/* Base form control styles */
.form-control,
.form-select,
.form-check-input {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Valid state - only show after field has been modified (touched) */
.form-control.modified.valid,
.form-select.modified.valid,
.form-check-input.modified.valid {
    border-color: #198754;
    /* Removed green check background and extra padding */
    padding-right: 1rem;
    background-image: none;
}

.form-control.modified.valid:focus,
.form-select.modified.valid:focus,
.form-check-input.modified.valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.form-check-input.modified.valid {
    background-color: #198754;
    border-color: #198754;
}

/* Invalid state - only show after field has been modified (touched) */
.form-control.modified.invalid,
.form-select.modified.invalid,
.form-check-input.modified.invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    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='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.modified.invalid:focus,
.form-select.modified.invalid:focus,
.form-check-input.modified.invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Validation message styling */
.validation-message {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
    animation: slideDown 0.2s ease-out;
}

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

.validation-message::before {
    content: "⚠ ";
    font-weight: bold;
    margin-right: 0.25rem;
}

/* Validation summary styling */
.validation-summary {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: none;
}

.validation-summary ul li {
    color: #842029;
    margin-bottom: 0.25rem;
    position: relative;
}

.validation-summary ul li::before {
    content: "•";
    color: #dc3545;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Valid feedback text */
.valid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #198754;
    animation: slideDown 0.2s ease-out;
}

.valid-feedback::before {
    content: ""; /* Remove check mark prefix */
    margin-right: 0; 
}

/* Invalid feedback text */
.invalid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
    animation: slideDown 0.2s ease-out;
}

.invalid-feedback::before {
    content: "⚠ ";
    font-weight: bold;
    margin-right: 0.25rem;
}

/* Modified form group for better validation display */
.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

/* Required field indicator */
.form-label .text-danger,
.form-label .required {
    color: #dc3545;
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Tooltip for validation errors */
.validation-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: block;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: #dc3545;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    animation: fadeIn 0.2s ease-out;
}

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

.validation-tooltip::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    left: 1rem;
    width: 0;
    height: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.25rem solid #dc3545;
}

/* Form field with icon */
.input-group .form-control.modified.invalid {
    border-color: #dc3545;
}

.input-group .form-control.modified.valid {
    border-color: #198754;
}

/* Focus state improvements */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Disabled state */
.form-control:disabled,
.form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* Textarea specific */
textarea.form-control.modified.invalid,
textarea.form-control.modified.valid {
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

/* Date input specific */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control {
    padding-right: 0.75rem;
}

input[type="date"].form-control.modified.invalid,
input[type="datetime-local"].form-control.modified.invalid,
input[type="time"].form-control.modified.invalid,
input[type="date"].form-control.modified.valid,
input[type="datetime-local"].form-control.modified.valid,
input[type="time"].form-control.modified.valid {
    padding-right: 0.75rem;
    background-position: right 2.5rem center;
}

/* Select specific */
.form-select.modified.invalid,
.form-select.modified.valid {
    padding-right: 3rem;
    background-position: right 2rem center, center right 0.75rem;
}

/* Inline validation message layout */
.d-flex .validation-message {
    flex: 1 0 100%;
    order: 999;
}

/* Compact form validation */
.form-compact .form-group {
    margin-bottom: 0.75rem;
}

.form-compact .validation-message,
.form-compact .valid-feedback,
.form-compact .invalid-feedback {
    font-size: 0.8125em;
}

/* Dark mode support */
.dark-mode .validation-summary {
    background-color: #842029;
    border-color: #721c24;
}

.dark-mode .validation-summary ul li {
    color: #f8d7da;
}

.dark-mode .validation-message,
.dark-mode .invalid-feedback {
    color: #ff6b6b;
}

.dark-mode .valid-feedback {
    color: #51cf66;
}

.dark-mode .form-control.modified.valid,
.dark-mode .form-select.modified.valid {
    border-color: #51cf66;
    background-image: none; /* Remove check mark in dark mode */
}

.dark-mode .form-control.modified.valid:focus,
.dark-mode .form-select.modified.valid:focus {
    border-color: #51cf66;
    box-shadow: 0 0 0 0.25rem rgba(81, 207, 102, 0.25);
}

.dark-mode .form-control.modified.invalid,
.dark-mode .form-select.modified.invalid {
    border-color: #ff6b6b;
    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='%23ff6b6b'%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='%23ff6b6b' stroke='none'/%3e%3c/svg%3e");
}

.dark-mode .form-control.modified.invalid:focus,
.dark-mode .form-select.modified.invalid:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25);
}

.dark-mode .validation-tooltip {
    background-color: #ff6b6b;
}

.dark-mode .validation-tooltip::before {
    border-bottom-color: #ff6b6b;
}

.dark-mode .form-control:disabled,
.dark-mode .form-select:disabled {
    background-color: #2d3339;
    color: #6c757d;
}

/* Responsive design */
@media (max-width: 768px) {
    .validation-summary {
        font-size: 0.875rem;
    }
    
    .validation-message,
    .valid-feedback,
    .invalid-feedback {
        font-size: 0.8125em;
    }
}

/* Loading state during validation */
.validating {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.validating::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 2px solid #0d6efd;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner 0.75s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility improvements - only after modification */
.form-control.modified[aria-invalid="true"],
.form-select.modified[aria-invalid="true"] {
    border-color: #dc3545;
}

.form-control.modified[aria-invalid="false"],
.form-select.modified[aria-invalid="false"] {
    border-color: #198754;
}

/* Screen reader only validation messages */
.sr-only-validation {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}