/**
 * Corrections FOUC - Transitions Anti-Scintillement
 * 
 * Empêche le Flash of Unstyled Content lors des mises à jour
 * dynamiques d'interface (AJAX, DOM updates, etc.)
 * 
 * @package KoldKaze
 * @version 1.0.0
 * @since 05/09/2025
 */

/* ========================================
   TRANSITIONS GLOBALES ANTI-FOUC
======================================== */

/* Transitions pour tous les éléments mis à jour dynamiquement */
.vendor-interface-container *,
.customer-interface-container *,
.tjm-modal *,
.wcfm-container * {
    transition: 
        opacity 0.15s ease-out,
        background-color 0.15s ease-out,
        color 0.15s ease-out,
        border-color 0.15s ease-out,
        transform 0.15s ease-out;
}

/* ========================================
   BOUTONS D'ACTIONS - ANTI-SCINTILLEMENT
======================================== */

/* Transitions pour les boutons de l'interface vendeur */
button[onclick*="acceptClientTjmRequest"],
button[onclick*="refuseClientTjmRequest"],
button[onclick*="vendor_action"],
.vendor-action-button,
.tjm-action-button {
    transition: 
        all 0.2s ease-out !important;
    will-change: auto;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* États de boutons avec transition fluide */
button[onclick*="acceptClientTjmRequest"]:hover,
button[onclick*="refuseClientTjmRequest"]:hover,
.vendor-action-button:hover {
    transform: translateZ(0);
    transition: all 0.15s ease-out;
}

/* ========================================
   MISES À JOUR AJAX - CONTENUS
======================================== */

/* Conteneurs qui reçoivent des mises à jour AJAX */
.tjm-modal-body,
.vendor-messages-container,
.order-timeline-container,
.wcfm-content {
    transition: opacity 0.2s ease-out;
}

/* Classe temporaire pour les mises à jour */
.updating-content {
    opacity: 0.7;
    pointer-events: none;
}

.updating-content.updated {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-out;
}

/* ========================================
   MODALES ET POPUPS - ANTI-FOUC
======================================== */

/* Transitions pour l'ouverture/fermeture de modales */
.tjm-modal,
.vendor-popup,
.customer-popup {
    transition: 
        opacity 0.25s ease-out,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* États de chargement avec animation fluide */
.loading-content {
    opacity: 0.5;
    filter: blur(1px);
    transition: all 0.2s ease-out;
}

.loading-content.loaded {
    opacity: 1;
    filter: blur(0);
    transition: all 0.3s ease-out;
}

/* ========================================
   TABLEAUX ET LISTES - MISES À JOUR
======================================== */

/* Transitions pour les lignes ajoutées/supprimées dynamiquement */
.wcfm-order-table tr,
.vendor-timeline-item,
.customer-message-item {
    transition: 
        opacity 0.25s ease-out,
        transform 0.25s ease-out,
        max-height 0.3s ease-out;
}

/* Animation d'apparition pour nouveaux éléments */
.newly-added {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */

/* Force la couche de composition pour éviter les reflows */
.vendor-interface-container,
.customer-interface-container,
.tjm-modal-container {
    transform: translateZ(0);
    will-change: auto;
}

/* Optimisation pour les animations fréquentes */
button[data-updating="true"] {
    will-change: contents, color, background-color;
}

button[data-updating="false"] {
    will-change: auto;
}

/* ========================================
   FALLBACKS POUR ANCIENS NAVIGATEURS
======================================== */

/* Support pour navigateurs sans transition */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}