/**
 * Corrections spécifiques pour l'adaptation du canvas mobile
 * et le décalage du pointeur
 * Version: 1.0
 * Date: 2025-01-XX
 */

/* =============================
   CORRECTION 1: Canvas mobile adaptatif
   ============================= */

/* Conteneur du canvas mobile - dimensions adaptatives */
@media (max-width: 768px) {
    .cpp-canvas-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 300px !important;
        max-height: 50vh !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin: 10px 0 !important;
    }
    
    /* Canvas principal - dimensions responsives */
    #cpp-canvas {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Canvas Fabric.js - correction des dimensions */
    .canvas-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .canvas-container .upper-canvas,
    .canvas-container .lower-canvas {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Layout mobile du customizer */
    .cpp-editor-container {
        height: 100vh !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .cpp-left-column {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .cpp-right-column {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
        border-top: 1px solid #e0e0e0 !important;
    }
    
    .cpp-right-column.cpp-mobile-active {
        flex: 1 !important;
        max-height: 60vh !important;
    }
    
    /* Toolbar mobile optimisée */
    .cpp-toolbar {
        overflow:hidden;
        flex-shrink: 0 !important;
        height: 60px !important;
        padding: 8px 12px !important;
        background: #fff !important;
        border-bottom: 1px solid #e0e0e0 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .cpp-tool-icon {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 4px !important;
        font-size: 16px !important;
    }
}

/* =============================
   CORRECTION 2: Décalage du pointeur
   ============================= */

/* Correction des transformations CSS qui causent le décalage */
.cpp-canvas-container,
.canvas-container {
    transform: none !important;
    transform-origin: top left !important;
    position: relative !important;
}

#cpp-canvas,
.cpp-personalization-canvas {
    transform: none !important;
    transform-origin: top left !important;
    position: relative !important;
}

/* Canvas Fabric.js - correction du décalage */
.upper-canvas,
.lower-canvas {
    transform: none !important;
    transform-origin: top left !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Correction spécifique pour les éléments sélectionnés */
.fabric-object {
    transform-origin: center center !important;
}

/* Correction des contrôles de sélection */
.fabric-object .canvas-container {
    transform: none !important;
}

/* =============================
   CORRECTION 3: Améliorations mobile
   ============================= */

@media (max-width: 768px) {
    /* Amélioration de la zone de travail mobile */
    .cpp-left-column {
        padding: 0 !important;
    }
    
    /* Canvas container avec padding adaptatif */
    .cpp-canvas-container {
        padding: 10px !important;
        margin: 0 !important;
    }
    
    /* Correction des proportions sur très petits écrans */
    @media (max-width: 480px) {
        .cpp-canvas-container {
            min-height: 250px !important;
            max-height: 40vh !important;
            padding: 5px !important;
        }
        
        .cpp-toolbar {
            height: 50px !important;
            padding: 6px 8px !important;
        }
        
        .cpp-tool-icon {
            width: 40px !important;
            height: 40px !important;
            font-size: 14px !important;
        }
    }
}

/* =============================
   CORRECTION 4: Gestion des événements tactiles
   ============================= */

@media (max-width: 768px) {
    /* Amélioration des événements tactiles */
    .canvas-container,
    .upper-canvas,
    .lower-canvas {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Correction des événements de sélection */
    .fabric-object {
        touch-action: manipulation !important;
    }
}

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

/* Indicateur visuel pour debug (à supprimer en production) */
.cpp-canvas-container::before {
    content: "Canvas Mobile" !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    background: rgba(0,0,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::before {
    display: block !important;
}

/* =============================
   CORRECTION 6: Performance mobile
   ============================= */

@media (max-width: 768px) {
    /* Optimisations de performance pour mobile */
    .cpp-canvas-container {
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    
    /* Réduction des animations sur mobile */
    .cpp-tool-icon,
    .cpp-btn {
        transition: transform 0.2s ease !important;
    }
    
    .cpp-tool-icon:active,
    .cpp-btn:active {
        transform: scale(0.95) !important;
    }
}