/**
 * DAARA School - Transitions CSS Optimisées
 * 
 * Ce fichier centralise toutes les transitions pour améliorer les performances
 * et éviter les problèmes de double rendu et de lag visuel.
 * 
 * Optimisations :
 * - Remplacement de "transition: all" par des propriétés ciblées
 * - Durées réduites (0.1s - 0.2s max)
 * - Désactivation des animations longues problématiques
 * - Support de prefers-reduced-motion
 * - Optimisation mobile
 */

/* ============================================
   VARIABLES DE TRANSITION
   ============================================ */
:root {
    --daara-transition-fast: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
    --daara-transition-normal: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    --daara-transition-slow: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    --daara-transition-color: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* ============================================
   RESPECT DE PREFERS-REDUCED-MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES CARTES
   ============================================ */
/* Cartes : pas de translation / ombre animée au survol (inutile en admin) */
.card {
    transition: none;
    animation: none !important;
}


/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES BOUTONS
   ============================================ */
.btn,
.btn-daara-primary,
.btn-daara-secondary,
.btn-daara-outline-primary {
    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.btn:active {
    transition: background-color 0.05s ease, border-color 0.05s ease;
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES LIENS
   ============================================ */
a,
.nav-link,
.dropdown-item {
    transition: color 0.1s ease, background-color 0.1s ease;
}

a:hover,
.nav-link:hover,
.dropdown-item:hover {
    /* Pas de transform pour les liens */
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES FORMULAIRES
   ============================================ */
input,
textarea,
select {
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

input:focus,
textarea:focus,
select:focus {
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES MODALES
   ============================================ */
.modal {
    /* ❌ SUPPRIMÉ: Animations complexes et longues */
    /* ✅ OPTIMISÉ: Affichage immédiat */
}

.modal-dialog {
    /* ❌ SUPPRIMÉ: transform: scale(0.7); opacity: 0; transition: all 0.3s; */
    /* ✅ OPTIMISÉ: Pas d'animation d'entrée */
    animation: none !important;
    transition: none !important;
}

.modal.show .modal-dialog {
    /* ✅ Affichage immédiat */
    transform: none !important;
    opacity: 1 !important;
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES TABLEAUX
   ============================================ */
.table tbody tr {
    transition: background-color 0.08s ease;
}

.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES BADGES
   ============================================ */
.badge {
    animation: none !important;
    transition: none;
}

/* ============================================
   TRANSITIONS OPTIMISÉES POUR LES CARTES SPÉCIFIQUES
   ============================================ */
.classe-card,
.stat-box {
    transition: none;
}


/* ============================================
   DÉSACTIVATION DES ANIMATIONS LONGUES
   ============================================ */
/* Désactiver toutes les animations slideInUp, slideInLeft, slideInRight longues */
@keyframes slideInUp {
    /* ❌ SUPPRIMÉ: Animation de 0.6s */
    /* ✅ DÉSACTIVÉ */
}

@keyframes slideInLeft {
    /* ❌ SUPPRIMÉ: Animation de 0.5s */
    /* ✅ DÉSACTIVÉ */
}

@keyframes slideInRight {
    /* ❌ SUPPRIMÉ: Animation de 0.3s */
    /* ✅ DÉSACTIVÉ */
}

@keyframes fadeIn {
    /* ❌ SUPPRIMÉ: Animation de 0.3s */
    /* ✅ DÉSACTIVÉ */
}

@keyframes fadeInUp {
    /* ❌ SUPPRIMÉ: Animation de 0.6s */
    /* ✅ DÉSACTIVÉ */
}

@keyframes daaraFadeIn {
    /* ❌ SUPPRIMÉ: Animation de 0.6s */
    /* ✅ DÉSACTIVÉ */
}

/* ============================================
   OPTIMISATION MOBILE
   ============================================ */
@media (max-width: 767.98px) {
    /* Désactiver les transitions sur mobile pour économiser la batterie */
    *,
    *::before,
    *::after {
        transition-duration: 0.05s !important;
        animation-duration: 0.05s !important;
    }
    
    /* Garder uniquement les transitions essentielles */
    .btn:active,
    .card:active {
        transition: transform 0.05s ease !important;
    }
}

/* ============================================
   TRANSITIONS POUR LES ÉLÉMENTS INTERACTIFS
   ============================================ */
.dropdown-menu {
    transition: opacity 0.08s ease, visibility 0.08s ease;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
}

.tooltip {
    transition: opacity 0.08s ease;
}

/* ============================================
   TRANSITIONS POUR LES ALERTES
   ============================================ */
.alert {
    transition: opacity 0.1s ease;
}

.alert.fade {
    transition: opacity 0.1s ease;
}

/* ============================================
   TRANSITIONS POUR LES PROGRESS BARS
   ============================================ */
.progress-bar {
    transition: width 0.15s ease;
}

/* ============================================
   TRANSITIONS POUR LES TABS
   ============================================ */
.nav-tabs .nav-link {
    transition: color 0.1s ease, border-color 0.1s ease, background-color 0.1s ease;
}

.nav-tabs .nav-link.active {
    transition: color 0.1s ease, border-color 0.1s ease, background-color 0.1s ease;
}

/* ============================================
   TRANSITIONS POUR LES ACCORDÉONS
   ============================================ */
.accordion-button {
    transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.accordion-collapse {
    transition: height 0.15s ease;
}

/* ============================================
   NETTOYAGE GLOBAL
   ============================================ */
/* Désactiver les animations d'entrée sur les éléments de page */
.page-wrapper,
.content,
.container-fluid {
    animation: none !important;
}