/**
 * Styles pour la validation en temps réel
 * États : Neutre, Valide, Invalide, En cours
 */

/* Conteneur de champ avec validation */
.realtime-validation-field {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Input wrapper */
.realtime-validation-input-wrapper {
    position: relative;
}

/* États des champs */
.realtime-validation-field input,
.realtime-validation-field textarea,
.realtime-validation-field select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* État neutre (par défaut) */
.realtime-validation-field input:not(.is-valid):not(.is-invalid),
.realtime-validation-field textarea:not(.is-valid):not(.is-invalid),
.realtime-validation-field select:not(.is-valid):not(.is-invalid) {
    border-color: #ced4da;
}

/* État valide */
.realtime-validation-field input.is-valid,
.realtime-validation-field textarea.is-valid,
.realtime-validation-field select.is-valid {
    border-color: #28a745;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%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);
}

.realtime-validation-field input.is-valid:focus,
.realtime-validation-field textarea.is-valid:focus,
.realtime-validation-field select.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* État invalide */
.realtime-validation-field input.is-invalid,
.realtime-validation-field textarea.is-invalid,
.realtime-validation-field select.is-invalid,
.input-group input.is-invalid,
.input-group textarea.is-invalid,
.input-group select.is-invalid {
    border-color: #dc3545;
    padding-right: 2.5rem;
    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 3.6 1.4 1.4M7.2 3.6l-1.4 1.4M6 8.4V6'/%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);
}

.realtime-validation-field input.is-invalid:focus,
.realtime-validation-field textarea.is-invalid:focus,
.realtime-validation-field select.is-invalid:focus,
.input-group input.is-invalid:focus,
.input-group textarea.is-invalid:focus,
.input-group select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* État valide pour input-group */
.input-group input.is-valid,
.input-group textarea.is-valid,
.input-group select.is-valid {
    border-color: #28a745;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%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);
}

.input-group input.is-valid:focus,
.input-group textarea.is-valid:focus,
.input-group select.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Retirer l'icône d'exclamation quand le champ devient valide */
.input-group input.is-valid:not(.is-invalid),
.input-group textarea.is-valid:not(.is-invalid),
.input-group select.is-valid:not(.is-invalid) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* Retirer l'icône d'exclamation quand le champ n'est ni valide ni invalide */
.input-group input:not(.is-invalid):not(.is-valid),
.input-group textarea:not(.is-invalid):not(.is-valid),
.input-group select:not(.is-invalid):not(.is-valid) {
    background-image: none !important;
    padding-right: inherit;
}

/* S'assurer que l'icône d'exclamation disparaît quand is-invalid est retiré */
.input-group input.is-valid,
.input-group textarea.is-valid,
.input-group select.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

/* Masquer complètement le feedback d'erreur quand le champ est valide */
.input-group input.is-valid ~ .realtime-validation-feedback,
.input-group textarea.is-valid ~ .realtime-validation-feedback,
.input-group select.is-valid ~ .realtime-validation-feedback,
.input-group.is-valid + .realtime-validation-feedback,
.input-group + .realtime-validation-feedback:has(+ .is-valid) {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Masquer le feedback d'erreur après un input-group quand le champ devient valide */
.input-group:has(input.is-valid) + .realtime-validation-feedback,
.input-group:has(textarea.is-valid) + .realtime-validation-feedback,
.input-group:has(select.is-valid) + .realtime-validation-feedback {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* État en cours de validation */
.realtime-validation-field input.is-validating,
.realtime-validation-field textarea.is-validating,
.realtime-validation-field select.is-validating {
    border-color: #ffc107;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffc107' d='M8 0a8 8 0 1 0 8 8A8 8 0 0 0 8 0zm0 2a6 6 0 1 1-6 6 6 6 0 0 1 6-6z'/%3e%3cpath d='M8 4a4 4 0 0 1 4 4H8z'/%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);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        background-position: right calc(0.375em + 0.1875rem) center;
    }
    to {
        background-position: right calc(0.375em + 0.1875rem) center;
    }
}

/* Messages d'erreur */
.realtime-validation-feedback {
    display: none !important;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #dc3545;
    animation: slideDown 0.3s ease-out;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}

/* Messages d'erreur pour input-group - ne pas casser le design */
.input-group + .realtime-validation-feedback {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.realtime-validation-feedback.show {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 1;
    max-height: 100px;
}

.realtime-validation-feedback-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.realtime-validation-feedback-message {
    flex: 1;
    line-height: 1.5;
}

/* Messages de succès (optionnel) */
.realtime-validation-success {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #28a745;
    animation: slideDown 0.3s ease-out;
}

.realtime-validation-success.show {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.realtime-validation-success-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.realtime-validation-success-message {
    flex: 1;
    line-height: 1.5;
}

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

/* Labels */
.realtime-validation-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.realtime-validation-field label.required::after {
    content: " *";
    color: #dc3545;
}

/* Groupes de champs (pour les radios/checkboxes) */
.realtime-validation-field-group {
    margin-bottom: 1rem;
}

.realtime-validation-field-group .form-check {
    margin-bottom: 0.5rem;
}

/* Champs désactivés */
.realtime-validation-field input:disabled,
.realtime-validation-field textarea:disabled,
.realtime-validation-field select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* Aide contextuelle */
.realtime-validation-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Compteur de caractères */
.realtime-validation-counter {
    position: absolute;
    bottom: -1.25rem;
    right: 0;
    font-size: 0.75rem;
    color: #6c757d;
}

.realtime-validation-counter.warning {
    color: #ffc107;
}

.realtime-validation-counter.danger {
    color: #dc3545;
}

/* Responsive */
@media (max-width: 576px) {
    .realtime-validation-feedback,
    .realtime-validation-success {
        font-size: 0.8125rem;
    }
}