/**
 * Modal Validation Styling
 * Provides consistent styling for validation across all modals
 */

/* Validation field states */
.form-control.is-valid {
    border-color: #198754;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 1.88-1.88L5.7 4.4 4.3 3l-1.88 1.88L2.3 6.73z'/%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);
    padding-right: calc(1.5em + 0.75rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    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 d='m5.8 4.6 1.4 1.4 1.4-1.4'/%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);
    padding-right: calc(1.5em + 0.75rem);
}

/* Validation error messages */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* ✅ CRITICAL: Global Rule 4 compliance - Hide validation states for ALL forms until form-submitted */
/* This ensures no validation feedback is shown before form submission */
form:not(.form-submitted) .form-control.is-invalid,
form:not(.form-submitted) .form-select.is-invalid,
form:not(.form-submitted) textarea.is-invalid,
form:not(.form-submitted) input[type="file"].is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

form:not(.form-submitted) .invalid-feedback {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.invalid-feedback.d-block {
    display: block !important;
}

.validation-errors {
    margin-top: 0.25rem;
}

.validation-errors .invalid-feedback {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #721c24;
}

.validation-errors .invalid-feedback:last-child {
    margin-bottom: 0;
}

/* Valid field styling */
.validation-errors .valid-feedback {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #0f5132;
}

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

.validation-summary ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.validation-summary li {
    color: #721c24;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Modal-specific validation styling */
.modal .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

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

/* Character count styling */
.character-count {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.character-count.text-muted {
    color: #6c757d !important;
}

.character-count.text-warning {
    color: #fd7e14 !important;
}

.character-count.text-danger {
    color: #dc3545 !important;
}

/* Required field indicators */
.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Loading state for validation */
.validation-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Animation for validation messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-errors .invalid-feedback {
    animation: slideDown 0.3s ease-out;
}

/* Responsive validation styling */
@media (max-width: 768px) {
    .validation-errors .invalid-feedback {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .form-control.is-invalid,
    .form-control.is-valid {
        background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem);
        padding-right: calc(1.2em + 0.6rem);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .validation-errors .invalid-feedback {
        background-color: #2d1b1b;
        border-color: #3d2323;
        color: #f1aeb5;
    }
    
    .validation-errors .valid-feedback {
        background-color: #1b2d1b;
        border-color: #233d23;
        color: #a3d9a3;
    }
    
    .validation-summary {
        background-color: #2d1b1b;
        border-color: #3d2323;
    }
    
    .validation-summary li {
        color: #f1aeb5;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-control.is-invalid {
        border-width: 2px;
        border-color: #000;
    }
    
    .form-control.is-valid {
        border-width: 2px;
        border-color: #000;
    }
    
    .validation-errors .invalid-feedback {
        border-width: 2px;
        font-weight: bold;
    }
}

/* Publication form validation spacing fix - More aggressive overrides */
.publication-article-fields .row.mb-3,
.publication-book-fields .row.mb-3,
.publication-form-fields .row.mb-3,
.modal .publication-form-fields .row.mb-3,
.modal .publication-article-fields .row.mb-3,
.modal .publication-book-fields .row.mb-3 {
    margin-bottom: 0.25rem !important;
}

.publication-article-fields .invalid-feedback,
.publication-book-fields .invalid-feedback,
.publication-form-fields .invalid-feedback,
.modal .publication-form-fields .invalid-feedback,
.modal .publication-article-fields .invalid-feedback,
.modal .publication-book-fields .invalid-feedback {
    margin-top: 0.05rem !important;
    margin-bottom: 0.25rem !important;
    padding-top: 0.05rem !important;
}

/* Ensure proper spacing for publication form fields */
.publication-article-fields .form-control + .invalid-feedback,
.publication-book-fields .form-control + .invalid-feedback,
.publication-form-fields .form-control + .invalid-feedback,
.publication-article-fields .form-select + .invalid-feedback,
.publication-book-fields .form-select + .invalid-feedback,
.publication-form-fields .form-select + .invalid-feedback,
.modal .publication-form-fields .form-control + .invalid-feedback,
.modal .publication-form-fields .form-select + .invalid-feedback,
.modal .publication-article-fields .form-control + .invalid-feedback,
.modal .publication-article-fields .form-select + .invalid-feedback,
.modal .publication-book-fields .form-control + .invalid-feedback,
.modal .publication-book-fields .form-select + .invalid-feedback {
    margin-top: 0.05rem !important;
    padding-top: 0.05rem !important;
}

/* Override Bootstrap's default spacing more aggressively */
.modal .row.mb-3 {
    margin-bottom: 0.25rem !important;
}

.modal .invalid-feedback {
    margin-top: 0.01rem !important;
    margin-bottom: 0.01rem !important;
    padding-top: 0.01rem !important;
    padding-bottom: 0.01rem !important;
    line-height: 1.1 !important;
    font-size: 0.8rem !important;
}

/* Ultra-aggressive spacing for publication modal validation */
#addPublicationModal .invalid-feedback,
#addPublicationModal .validation-errors,
#addPublicationModal .invalid-feedback.d-block {
    margin-top: 0.01rem !important;
    margin-bottom: 0.01rem !important;
    padding-top: 0.01rem !important;
    padding-bottom: 0.01rem !important;
    line-height: 1.0 !important;
    font-size: 0.75rem !important;
}

/* Target the specific validation message for title */
#titleError {
    margin-top: 0.01rem !important;
    margin-bottom: 0.01rem !important;
    padding-top: 0.01rem !important;
    padding-bottom: 0.01rem !important;
    line-height: 1.0 !important;
    font-size: 0.75rem !important;
}

/* Specific targeting for form fields with validation */
.modal .form-control.is-invalid + .invalid-feedback,
.modal .form-select.is-invalid + .invalid-feedback {
    margin-top: 0.05rem !important;
    padding-top: 0.05rem !important;
}

/* Ultra-specific targeting for publication modal validation spacing */
#addPublicationModal .modal-body .row.mb-3,
#addPublicationModal .modal-body .publication-form-fields .row.mb-3,
#addPublicationModal .modal-body .publication-article-fields .row.mb-3,
#addPublicationModal .modal-body .publication-book-fields .row.mb-3 {
    margin-bottom: 0.1rem !important;
}

#addPublicationModal .modal-body .invalid-feedback,
#addPublicationModal .modal-body .publication-form-fields .invalid-feedback,
#addPublicationModal .modal-body .publication-article-fields .invalid-feedback,
#addPublicationModal .modal-body .publication-book-fields .invalid-feedback {
    margin-top: 0.02rem !important;
    margin-bottom: 0.1rem !important;
    padding-top: 0.02rem !important;
    padding-bottom: 0.02rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

/* Force override any Bootstrap defaults */
#addPublicationModal .modal-body .form-control + .invalid-feedback,
#addPublicationModal .modal-body .form-select + .invalid-feedback {
    margin-top: 0.02rem !important;
    padding-top: 0.02rem !important;
}

/* Target dynamically created validation elements */
#addPublicationModal .validation-errors .invalid-feedback,
#addPublicationModal .invalid-feedback.d-block {
    margin-top: 0.02rem !important;
    margin-bottom: 0.1rem !important;
    padding-top: 0.02rem !important;
    padding-bottom: 0.02rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

/* Ultra-specific targeting for publication modal validation spacing - override JavaScript created elements */
#addPublicationModal .modal-body .validation-errors,
#addPublicationModal .modal-body .publication-form-fields .validation-errors,
#addPublicationModal .modal-body .publication-article-fields .validation-errors,
#addPublicationModal .modal-body .publication-book-fields .validation-errors {
    margin-top: 0.02rem !important;
    margin-bottom: 0.1rem !important;
    padding-top: 0.02rem !important;
    padding-bottom: 0.02rem !important;
}

/* Target the specific validation error containers created by JavaScript */
#addPublicationModal .modal-body .row.mb-3 .validation-errors {
    margin-top: 0.02rem !important;
    margin-bottom: 0.1rem !important;
    padding-top: 0.02rem !important;
    padding-bottom: 0.02rem !important;
}

/* Print styles */
@media print {
    .validation-errors,
    .invalid-feedback,
    .valid-feedback {
        display: none !important;
    }
    
    .form-control.is-invalid,
    .form-control.is-valid {
        background-image: none !important;
        padding-right: 0.75rem !important;
    }
}

/* FINAL OVERRIDE - Force minimal spacing for all validation messages */
#addPublicationModal .invalid-feedback {
    margin: 0.01rem 0 !important;
    padding: 0.01rem 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
    display: none;
}

#addPublicationModal .invalid-feedback.d-block {
    display: block;
    margin: 0.01rem 0 !important;
    padding: 0.01rem 0 !important;
}

#addPublicationModal .row.mb-3 {
    margin-bottom: 0.1rem !important;
}

/* Override any remaining Bootstrap spacing */
#addPublicationModal .mb-3 {
    margin-bottom: 0.1rem !important;
}

/* Hide validation states until form is submitted - Publication Form */
#publicationForm:not(.form-submitted) .form-control.is-invalid,
#publicationForm:not(.form-submitted) .form-select.is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

#publicationForm:not(.form-submitted) .invalid-feedback {
    display: none !important;
}

/* Show validation states only after form submission - Publication Form */
#publicationForm.form-submitted .form-control.is-invalid,
#publicationForm.form-submitted .form-select.is-invalid {
    border-color: #dc3545 !important;
}

#publicationForm.form-submitted .invalid-feedback.d-block,
#publicationForm.form-submitted .invalid-feedback.show {
    display: block !important;
}

/* Hide validation states until form is submitted - Review Form */
#reviewForm:not(.form-submitted) .form-control.is-invalid,
#reviewForm:not(.form-submitted) .form-select.is-invalid,
#reviewForm:not(.form-submitted) textarea.is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

#reviewForm:not(.form-submitted) .invalid-feedback {
    display: none !important;
}

/* Hide Review Content textarea border until form is submitted (Rule 4 compliance) */
#reviewForm:not(.form-submitted) #reviewContent {
    border-color: #ced4da !important;
}

/* Show validation states only after form submission - Review Form */
#reviewForm.form-submitted .form-control.is-invalid,
#reviewForm.form-submitted .form-select.is-invalid,
#reviewForm.form-submitted textarea.is-invalid {
    border-color: #dc3545 !important;
}

/* Ensure Review Content textarea shows red border when invalid and form is submitted */
#reviewForm.form-submitted #reviewContent.is-invalid {
    border: 2px solid #dc3545 !important;
    border-color: #dc3545 !important;
    border-radius: 0.375rem !important;
    outline: none !important;
    box-shadow: none !important;
}

/* CRITICAL: Ensure Review Content contenteditable div remains typeable even with is-invalid class */
#reviewForm.form-submitted #reviewContent.is-invalid[contenteditable="true"] {
    pointer-events: auto !important;
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

#reviewForm.form-submitted .invalid-feedback.d-block,
#reviewForm.form-submitted .invalid-feedback.show {
    display: block !important;
}

/* Hide validation states until form is submitted - Post Form */
/* ✅ CRITICAL: Support #postForm, #addPostForm (create), and #editPostForm (edit) */
#postForm:not(.form-submitted) .form-control.is-invalid,
#postForm:not(.form-submitted) .form-select.is-invalid,
#postForm:not(.form-submitted) textarea.is-invalid,
#addPostForm:not(.form-submitted) .form-control.is-invalid,
#addPostForm:not(.form-submitted) .form-select.is-invalid,
#addPostForm:not(.form-submitted) textarea.is-invalid,
#addPostForm:not(.form-submitted) input[type="file"].is-invalid,
#editPostForm:not(.form-submitted) .form-control.is-invalid,
#editPostForm:not(.form-submitted) .form-select.is-invalid,
#editPostForm:not(.form-submitted) textarea.is-invalid,
#editPostForm:not(.form-submitted) input[type="file"].is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

#postForm:not(.form-submitted) .invalid-feedback,
#addPostForm:not(.form-submitted) .invalid-feedback,
#editPostForm:not(.form-submitted) .invalid-feedback {
    display: none !important;
}

/* Show validation states only after form submission - Post Form */
#postForm.form-submitted .form-control.is-invalid,
#postForm.form-submitted .form-select.is-invalid,
#postForm.form-submitted textarea.is-invalid,
#addPostForm.form-submitted .form-control.is-invalid,
#addPostForm.form-submitted .form-select.is-invalid,
#addPostForm.form-submitted textarea.is-invalid,
#addPostForm.form-submitted input[type="file"].is-invalid,
#editPostForm.form-submitted .form-control.is-invalid,
#editPostForm.form-submitted .form-select.is-invalid,
#editPostForm.form-submitted textarea.is-invalid,
#editPostForm.form-submitted input[type="file"].is-invalid {
    border-color: #dc3545 !important;
}

/* ✅ CRITICAL: Rule 5 - Clear validation border when field becomes valid (after form submission) */
/* This ensures that when user corrects an invalid field, the red border disappears immediately */
#postForm.form-submitted .form-control:not(.is-invalid),
#postForm.form-submitted .form-select:not(.is-invalid),
#postForm.form-submitted textarea:not(.is-invalid),
#addPostForm.form-submitted .form-control:not(.is-invalid),
#addPostForm.form-submitted .form-select:not(.is-invalid),
#addPostForm.form-submitted textarea:not(.is-invalid),
#addPostForm.form-submitted input[type="file"]:not(.is-invalid),
#editPostForm.form-submitted .form-control:not(.is-invalid),
#editPostForm.form-submitted .form-select:not(.is-invalid),
#editPostForm.form-submitted textarea:not(.is-invalid),
#editPostForm.form-submitted input[type="file"]:not(.is-invalid) {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

#postForm.form-submitted .invalid-feedback.d-block,
#postForm.form-submitted .invalid-feedback.show,
#addPostForm.form-submitted .invalid-feedback.d-block,
#addPostForm.form-submitted .invalid-feedback.show,
#editPostForm.form-submitted .invalid-feedback.d-block,
#editPostForm.form-submitted .invalid-feedback.show {
    display: block !important;
}

/* Hide validation states until form is submitted - Study Form */
#studyForm:not(.form-submitted) .form-control.is-invalid,
#studyForm:not(.form-submitted) .form-select.is-invalid,
#studyForm:not(.form-submitted) textarea.is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

#studyForm:not(.form-submitted) .invalid-feedback {
    display: none !important;
}

/* Show validation states only after form submission - Study Form */
#studyForm.form-submitted .form-control.is-invalid,
#studyForm.form-submitted .form-select.is-invalid,
#studyForm.form-submitted textarea.is-invalid {
    border-color: #dc3545 !important;
}

/* CRITICAL: Ensure Status select field shows red border when invalid */
#studyForm.form-submitted #Status.is-invalid,
#studyForm.form-submitted select#Status.form-select.is-invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

#studyForm.form-submitted .invalid-feedback.d-block,
#studyForm.form-submitted .invalid-feedback.show {
    display: block !important;
}

/* Custom file upload validation styling - for hidden file inputs like coverImage */
/* CRITICAL: File inputs are hidden with display:none, so validation border must be on the visible wrapper */
.custom-file-upload.is-invalid {
    border: 2px solid #dc3545 !important;
    border-radius: 0.375rem;
}

.custom-file-upload.is-invalid .custom-file-label {
    border-color: #dc3545 !important;
}

/* Show validation border only after form submission (Rule 4 compliance) */
#publicationForm:not(.form-submitted) .custom-file-upload.is-invalid,
#addPostForm:not(.form-submitted) .custom-file-upload.is-invalid,
#postForm:not(.form-submitted) .custom-file-upload.is-invalid {
    border-color: transparent !important;
}

#publicationForm.form-submitted .custom-file-upload.is-invalid,
#addPostForm.form-submitted .custom-file-upload.is-invalid,
#postForm.form-submitted .custom-file-upload.is-invalid {
    border-color: #dc3545 !important;
}

/* Book Modal Validation - Show error messages when form is submitted */
#addBookForm.form-submitted .invalid-feedback,
#addBookForm.form-submitted .invalid-feedback.d-block,
#addBooksellerBookForm.form-submitted .invalid-feedback,
#addBooksellerBookForm.form-submitted .invalid-feedback.d-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Book Modal Validation - Show invalid borders when form is submitted */
#addBookForm.form-submitted .form-control.is-invalid,
#addBookForm.form-submitted .form-select.is-invalid,
#addBooksellerBookForm.form-submitted .form-control.is-invalid,
#addBooksellerBookForm.form-submitted .form-select.is-invalid {
    border-color: #dc3545 !important;
}

/* Checkout Form Validation - Hide borders before submission */
#checkoutForm:not(.form-submitted) .form-control.is-invalid,
#checkoutForm:not(.form-submitted) .form-select.is-invalid,
#checkoutForm:not(.form-submitted) textarea.is-invalid,
#checkoutForm:not(.form-submitted) input.is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
    box-shadow: none !important;
}

/* Checkout Form Validation - Show invalid borders when form is submitted */
/* CRITICAL: Must use !important to override publication-form.css global rules and form:not(.form-submitted) rule */
/* Using higher specificity with ID + class combination */
#checkoutForm.form-submitted .form-control.is-invalid,
#checkoutForm.form-submitted .form-select.is-invalid,
#checkoutForm.form-submitted textarea.is-invalid,
#checkoutForm.form-submitted input.is-invalid,
#checkoutFormContainer.form-submitted .form-control.is-invalid,
#checkoutFormContainer.form-submitted .form-select.is-invalid,
#checkoutFormContainer.form-submitted textarea.is-invalid,
#checkoutFormContainer.form-submitted input.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_FirstName.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_LastName.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_PhoneNumber.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_AddressLine1.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_HouseNumber.is-invalid,
#checkoutForm.form-submitted #provinceSelect.is-invalid,
#checkoutForm.form-submitted #citySelect.is-invalid,
#checkoutForm.form-submitted #ShippingAddress_PostalCode.is-invalid {
    border-color: #dc3545 !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !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='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* Ensure checkout form invalid feedback is shown after submission */
#checkoutForm.form-submitted .invalid-feedback.d-block,
#checkoutForm.form-submitted .invalid-feedback.show {
    display: block !important;
}