/* =================================================================================
 * INLINE VALIDATION ICONS (DISABLED - علامات الصح والخطأ معطلة تماماً)
 * ================================================================================= */

.form-field-wrapper {
    position: relative;
    display: block;
}

/* ✅ إزالة padding لأن الأيقونات معطلة */
.form-field-wrapper .form-control {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* RTL Support */
[dir="rtl"] .form-field-wrapper .form-control {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ✅ إخفاء جميع validation icons بشكل كامل */
.validation-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.validation-icon.show {
    display: none !important;
}

.validation-icon.success,
.validation-icon.error {
    display: none !important;
}

/* Validation message under field */
span[data-valmsg-for],
[data-valmsg-for] {
    display: none !important;
    font-size: 0.875rem !important;
    color: #000000 !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    background: #fef2f2 !important;
    border-radius: 0.375rem !important;
    border-left: 3px solid #ef4444 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

[data-valmsg-for].show {
    display: block !important;
    animation: fadeInUp 0.2s ease-out;
}

[data-valmsg-for].field-validation-error {
    display: block !important;
    color: #000000 !important;
    background: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
}

[data-valmsg-for].field-validation-valid {
    display: none !important;
}

/* Ensure text-danger class doesn't override our styles */
.text-danger[data-valmsg-for],
span.text-danger[data-valmsg-for],
.text-danger.d-block[data-valmsg-for] {
    color: #000000 !important;
    background: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
    display: block !important;
}

/* Success state for input */
.form-control.is-valid {
    border-color: #10b981 !important;
    background-image: none !important;
    transition: border-color 0.3s ease;
}

.form-control.border-green-500 {
    border-color: #10b981 !important;
    transition: border-color 0.3s ease;
}

/* Error state for input */
.form-control.is-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
    transition: border-color 0.3s ease;
}

.form-control.border-red-500 {
    border-color: #ef4444 !important;
    transition: border-color 0.3s ease;
}

/* Success state for select */
.form-select.is-valid,
select.is-valid {
    border-color: #10b981 !important;
    background-image: none !important;
}

/* Error state for select */
.form-select.is-invalid,
select.is-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}

/* Select2 validation styling */
.select2-container.is-valid .select2-selection {
    border-color: #10b981 !important;
}

.select2-container.is-invalid .select2-selection {
    border-color: #ef4444 !important;
}

/* Dark mode support */
html.dark-style .validation-icon.success,
.dark .validation-icon.success {
    color: #34d399;
}

html.dark-style .validation-icon.error,
.dark .validation-icon.error {
    color: #f87171;
}

html.dark-style [data-valmsg-for],
.dark [data-valmsg-for] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.fv-error i {
    font-size: 0.85rem;
}

/* Animation for error messages */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* File input validation styling */
input[type="file"].is-valid {
    border-color: #10b981 !important;
}

input[type="file"].is-invalid {
    border-color: #ef4444 !important;
}

/* Textarea validation styling */
textarea.form-control.is-valid {
    border-color: #10b981 !important;
    background-image: none !important;
}

textarea.form-control.is-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}

/* Input group validation styling */
.input-group .form-control.is-valid ~ .input-group-text {
    border-color: #10b981;
}

.input-group .form-control.is-invalid ~ .input-group-text {
    border-color: #ef4444;
}

/* Additional Bootstrap compatibility */
.was-validated .form-control:valid,
.form-control.is-valid {
    padding-right: calc(1.5em + 0.75rem);
    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);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    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);
}

/* RTL Support for Arabic */
[dir="rtl"] [data-valmsg-for] {
    border-left: none !important;
    border-right: 3px solid #ef4444 !important;
}

[dir="rtl"] .text-danger[data-valmsg-for] {
    border-left: none !important;
    border-right: 3px solid #ef4444 !important;
}

/* Image Upload Box Validation Styles */
#imageUploadBox {
    transition: all 0.3s ease;
    position: relative;
    height: 220px;
    overflow: hidden;
}

#imageUploadBox.border-green-500 {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
}

#imageUploadBox.border-red-500 {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
}

#imageUploadBox:hover {
    border-color: #3575F1 !important;
    box-shadow: 0 4px 12px -2px rgba(53, 117, 241, 0.2);
}

/* ✅ إخفاء validation icons من جميع الحقول (عام لكل الفورم) */
form .validation-icon,
input ~ .validation-icon,
input + .validation-icon,
textarea ~ .validation-icon,
textarea + .validation-icon,
select ~ .validation-icon,
select + .validation-icon,
.form-control ~ .validation-icon,
.form-control + .validation-icon,
.form-field-wrapper .validation-icon,
div .validation-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Upload Placeholder Icon Animation */
#uploadPlaceholder svg {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Upload Box Drag & Drop States */
#imageUploadBox.dragging {
    border-color: #3575F1 !important;
    background: linear-gradient(135deg, rgba(53, 117, 241, 0.15) 0%, rgba(53, 117, 241, 0.05) 100%);
    transform: scale(1.02);
}

/* Image Preview Container */
#imagePreviewContainer {
    animation: fadeIn 0.3s ease-out;
    overflow-y: auto;
    padding: 0.5rem;
}

#imagePreviewContainer .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    justify-items: center;
    align-items: center;
}

/* Center single image */
#imagePreviewContainer .grid:has(.image-preview-item:only-child) {
    display: flex;
    justify-content: center;
    align-items: center;
}

#imagePreviewContainer::-webkit-scrollbar {
    width: 5px;
}

#imagePreviewContainer::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

#imagePreviewContainer::-webkit-scrollbar-thumb {
    background: rgba(53, 117, 241, 0.25);
    border-radius: 10px;
}

#imagePreviewContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(53, 117, 241, 0.4);
}

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

/* Individual Image Preview Item */
.image-preview-item {
    animation: popIn 0.25s ease-out;
    animation-fill-mode: both;
    width: fit-content;
    margin: 0 auto;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.image-preview-item:nth-child(1) { animation-delay: 0.02s; }
.image-preview-item:nth-child(2) { animation-delay: 0.04s; }
.image-preview-item:nth-child(3) { animation-delay: 0.06s; }
.image-preview-item:nth-child(4) { animation-delay: 0.08s; }
.image-preview-item:nth-child(5) { animation-delay: 0.1s; }
.image-preview-item:nth-child(6) { animation-delay: 0.12s; }
.image-preview-item:nth-child(7) { animation-delay: 0.14s; }
.image-preview-item:nth-child(8) { animation-delay: 0.16s; }
.image-preview-item:nth-child(9) { animation-delay: 0.18s; }
.image-preview-item:nth-child(10) { animation-delay: 0.2s; }

.image-preview-item:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.image-preview-item img {
    transition: transform 0.25s ease;
}

.image-preview-item:hover img {
    transform: scale(1.1);
}

/* Remove image button animation */
.remove-image-btn {
    transition: all 0.2s ease;
}

.remove-image-btn:active {
    transform: scale(0.9);
}

/* Upload Button Styles - Clean and Elegant */
#uploadImageBtn {
    position: relative;
    overflow: hidden;
}

#uploadImageBtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#uploadImageBtn:hover::before {
    width: 300px;
    height: 300px;
}

#uploadImageBtn:active {
    transform: scale(0.98);
}

/* Upload Button - Compact Styling */
#uploadImageBtn {
    background: linear-gradient(135deg, #3575F1 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(53, 117, 241, 0.25);
    transition: all 0.2s ease;
}

#uploadImageBtn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px rgba(53, 117, 241, 0.35);
    transform: translateY(-1px);
}

#uploadImageBtn svg {
    transition: transform 0.2s ease;
}

#uploadImageBtn:hover svg {
    transform: translateY(-1px);
}

/* RTL Support for Upload Button */
[dir="rtl"] #uploadImageBtn svg,
body.rtl #uploadImageBtn svg {
    transform: scaleX(-1);
}

[dir="rtl"] #uploadImageBtn:hover svg,
body.rtl #uploadImageBtn:hover svg {
    transform: scaleX(-1) translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #imageUploadBox {
        height: 200px;
    }
    
    #uploadImageBtn {
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
    }
    
    #uploadImageBtn svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    #imagePreviewContainer .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    
    .image-preview-item > div {
        width: 3rem !important;
        height: 3rem !important;
    }
}

@media (max-width: 480px) {
    #imagePreviewContainer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}