/**
 * Optimisations de performance pour la page Opérations
 * Réduit les forced reflows et améliore l'INP (Interaction to Next Paint)
 */

/* Optimisation du conteneur de la table */
.operations-table-card {
    contain: layout style; /* Isolation du layout */
}

.operations-table-card .table-responsive {
    contain: layout; /* Éviter les reflows en cascade */
    will-change: scroll-position; /* Optimiser le scroll */
}

/* Optimisation des lignes du tableau */
.operations-table-card tbody tr {
    contain: layout style; /* Chaque ligne est isolée */
}

/* Éviter les reflows lors du hover */
.operations-table-card tbody tr:hover {
    contain: layout style paint;
}

/* Optimisation de la pagination */
.pagination {
    contain: layout style;
}

/* Optimisation du summary card */
.summary-card {
    contain: layout style;
}

/* Éviter les animations coûteuses lors des interactions */
.operations-table-card .btn,
.operations-table-card .page-link {
    transition: none; /* Désactiver les transitions pour réduire le temps de peinture */
}

/* Réactiver les transitions uniquement au hover (pas lors du clic) */
.operations-table-card .btn:hover,
.operations-table-card .page-link:hover {
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* Optimisation des champs inline-editable */
.operations-table-card input[type="text"],
.operations-table-card input[type="number"] {
    contain: layout;
}

/* Éviter le repaint du badge lors du hover de la ligne */
.operations-table-card .badge {
    contain: layout style paint;
}

/* Optimisation du rendu des icônes Bootstrap */
.operations-table-card .bi {
    contain: layout size;
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* Force GPU acceleration pour le scrolling */
.table-responsive {
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

/* Réduire le coût de rendu des tooltips */
.tooltip {
    contain: layout style paint;
    pointer-events: none; /* Éviter les event handlers sur les tooltips */
}

/* Optimisation des checkboxes de sélection */
.operation-select {
    contain: layout;
}