/**
 * Corrections CSS pour le décalage du pointeur dans le canvas Fabric.js
 * Basé sur la documentation Fabric.js et les bonnes pratiques
 * Version: 1.0
 * Date: 2025-01-XX
 */

/* =============================
   CORRECTION 1: Positionnement du conteneur canvas
   ============================= */

/* Conteneur principal du canvas - positionnement fixe */
.cpp-canvas-container,
.canvas-container {
    position: relative !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================
   CORRECTION 2: Élément canvas principal
   ============================= */

/* Canvas principal - positionnement absolu */
#cpp-canvas,
.cpp-personalization-canvas {
    position: relative !important;
    transform: none !important;
    transform-origin: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* =============================
   CORRECTION 3: Canvas Fabric.js (upper et lower)
   ============================= */

/* Canvas upper (interactif) - positionnement absolu */
.upper-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    cursor: default !important;
}

/* Canvas lower (arrière-plan) - positionnement absolu */
.lower-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    pointer-events: none !important;
}

/* =============================
   CORRECTION 4: Éléments Fabric.js
   ============================= */

/* Objets Fabric.js - correction des transformations */
.fabric-object {
    transform-origin: center center !important;
}

/* Contrôles de sélection Fabric.js */
.fabric-object .canvas-container {
    transform: none !important;
}

/* =============================
   CORRECTION 5: Événements de pointeur
   ============================= */

/* Amélioration des événements de pointeur */
.upper-canvas,
.lower-canvas {
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* =============================
   CORRECTION 6: Zoom et transformations
   ============================= */

/* S'assurer que les transformations de zoom n'affectent pas le positionnement */
.cpp-canvas-container.zoomed,
.canvas-container.zoomed {
    transform: none !important;
}

/* Correction pour les transformations de viewport */
.cpp-canvas-container[style*="transform"],
.canvas-container[style*="transform"] {
    transform: none !important;
}

/* =============================
   CORRECTION 7: Mobile et tactile
   ============================= */

@media (max-width: 768px) {
    /* Amélioration des événements tactiles sur mobile */
    .upper-canvas,
    .lower-canvas {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Correction du positionnement sur mobile */
    .cpp-canvas-container {
        position: relative !important;
        transform: none !important;
        transform-origin: top left !important;
    }
}

/* =============================
   CORRECTION 8: Debug et visibilité
   ============================= */

/* Indicateur visuel pour debug (à supprimer en production) */
.cpp-canvas-container::after {
    content: "Pointer Fix Active" !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: rgba(0, 255, 0, 0.7) !important;
    color: white !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
    z-index: 1000 !important;
    display: none !important; /* Masqué par défaut */
}

/* Activer l'indicateur de debug si nécessaire */
.cpp-debug-mode .cpp-canvas-container::after {
    display: block !important;
}

/* =============================
   CORRECTION 9: Performance
   ============================= */

/* Optimisations de performance */
.cpp-canvas-container,
.canvas-container,
.upper-canvas,
.lower-canvas {
    will-change: auto !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* =============================
   CORRECTION 10: Compatibilité navigateurs
   ============================= */

/* Correction pour les navigateurs WebKit */
@supports (-webkit-appearance: none) {
    .upper-canvas,
    .lower-canvas {
        -webkit-transform: none !important;
        -webkit-transform-origin: top left !important;
    }
}

/* Correction pour Firefox */
@-moz-document url-prefix() {
    .upper-canvas,
    .lower-canvas {
        -moz-transform: none !important;
        -moz-transform-origin: top left !important;
    }
}

/* =============================
   CORRECTION 11: États spéciaux
   ============================= */

/* Correction pour les états de sélection */
.cpp-canvas-container:focus,
.canvas-container:focus {
    outline: none !important;
}

/* Correction pour les états actifs */
.cpp-canvas-container:active,
.canvas-container:active {
    transform: none !important;
}

/* =============================
   CORRECTION 12: Overrides de sécurité
   ============================= */

/* Forcer la correction même si d'autres styles interfèrent */
.cpp-canvas-container *,
.canvas-container * {
    box-sizing: border-box !important;
}

/* S'assurer que les canvas ne sont pas affectés par les styles du thème */
#cpp-canvas,
.cpp-personalization-canvas,
.upper-canvas,
.lower-canvas {
    all: unset !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Réappliquer les propriétés nécessaires */
#cpp-canvas,
.cpp-personalization-canvas {
    position: relative !important;
}

.upper-canvas,
.lower-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}