/**
 * Corrections CSS pour les problèmes de positionnement et dimensionnement
 * Version corrigée pour résoudre les problèmes de layout et d'opacité
 */

/* Reset et base */
.qlr-cpp * {
    box-sizing: border-box !important;
}

/* Corrections générales pour le layout */
.qlr-cpp .cpp-editor-container {
    display: flex !important;
    flex-direction: row !important;
  
    background: #f8f9fa !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    min-height: 600px !important;
}

.qlr-cpp .cpp-left-column {
    display: flex !important;
    flex-direction: column !important;
    width: 70% !important;
    height: 100% !important;
    position: relative !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

.qlr-cpp .cpp-right-column {
    display: flex !important;
    flex-direction: column !important;
    width: 30% !important;
    height: 100% !important;
    background: #fff !important;
    border-left: 1px solid #e0e0e0 !important;
    overflow: hidden !important;
    position: relative !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Corrections pour le canvas */
.qlr-cpp .cpp-canvas-container {
    flex: 1 !important;
    position: relative !important;
    background: #fff !important;
    margin: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
    overflow: hidden !important;
    min-height: 400px !important;
    width: calc(100% - 20px) !important;
}

.qlr-cpp #cpp-canvas {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* 🔧 CORRECTION CRITIQUE : Supprimer les transformations qui causent le décalage du pointeur */
.qlr-cpp .canvas-container {
    position: relative !important;
    margin: 0 auto !important;
    width: auto !important; /* laisser Fabric gérer la taille exacte */
    height: auto !important; /* laisser Fabric gérer la taille exacte */
    /* SUPPRIMÉ: display flex et align-items qui causaient le décalage */
}

.qlr-cpp .upper-canvas,
.qlr-cpp .lower-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* SUPPRIMÉ: transform translate qui causait le décalage du pointeur */
}

/* Corrections pour les sections */
.qlr-cpp .cpp-circumstance-section {
    height: 100% !important;
    padding: 15px !important;
    overflow-y: auto !important;
    border-bottom: 1px solid #e0e0e0 !important;
    background: #f8f9fa !important;
    position: relative !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
}

.qlr-cpp .cpp-qrcode-section {
    height: 100% !important;
    padding: 15px !important;
    background: #fff !important;
    overflow-y: auto !important;
    border-top: 1px solid #e0e0e0 !important;
    position: relative !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
}

/* Corrections pour la toolbar */
.qlr-cpp .cpp-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg,#A020F0,#FF6D00) !important;
    padding: 12px 20px !important;
    height: 60px !important;
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

/* Corrections pour les boutons d'outils */
.cpp-tool-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #2d3748 !important;
    border: 2px solid #e2e8f0 !important;
    margin: 0 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.cpp-tool-icon:hover {
    background: #f7fafc !important;
    border-color: #cbd5e0 !important;
}

/* Corrections pour les éléments de fond rouge - OPACITÉ FORCÉE */
.qlr-cpp .cpp-red-background,
.qlr-cpp .fabric-canvas-wrapper .fabric-object[data-type="red-background"],
.qlr-cpp canvas .red-background-rect {
    position: absolute !important;
    background: rgba(255, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 0, 0, 0.7) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0.4 !important;
}

/* Corrections spécifiques pour Fabric.js canvas */
.qlr-cpp .canvas-container .upper-canvas,
.qlr-cpp .canvas-container .lower-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* S'assurer que l'overlay capte bien les événements */
.qlr-cpp .canvas-container .upper-canvas { pointer-events: auto !important; }
.qlr-cpp .canvas-container .lower-canvas { pointer-events: none !important; }

/* Forcer l'opacité des objets rouges dans Fabric.js */
.qlr-cpp .fabric-canvas-wrapper .fabric-object[fill*="255,0,0"],
.qlr-cpp .fabric-canvas-wrapper .fabric-object[fill*="red"] {
    opacity: 0.4 !important;
}

/* Corrections pour les éléments blancs avec bordure déchirée */
.cpp-white-element {
    position: absolute !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    z-index: 6 !important;
}

/* Corrections pour les éléments sombres */
.cpp-dark-element {
    position: absolute !important;
    background: #2d3748 !important;
    border: 2px solid #4a5568 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    z-index: 7 !important;
}

/* Corrections pour les lignes horizontales */
.cpp-horizontal-line {
    position: absolute !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    width: 100% !important;
    z-index: 4 !important;
}

/* Corrections pour le responsive */
@media (max-width: 768px) {
    .cpp-editor-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 600px !important;
    }
    
    .cpp-left-column,
    .cpp-right-column {
        width: 100% !important;
        height: auto !important;
    }
    
    .cpp-left-column {
        order: 2 !important;
    }
    
    .cpp-right-column {
        order: 1 !important;
    }
    
    .cpp-canvas-container {
        min-height: 300px !important;
    }
}

/* Corrections pour les problèmes de z-index */
.cpp-modal {
    z-index: 9999 !important;
}

.cpp-modal-content {
    z-index: 10000 !important;
}

/* Corrections pour les problèmes de positionnement absolu */
.cpp-absolute-fix {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Corrections pour les problèmes de dimensionnement */
.cpp-size-fix {
    box-sizing: border-box !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Corrections pour les problèmes de débordement */
.cpp-overflow-fix {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Corrections pour les problèmes de flexbox */
.cpp-flex-fix {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Corrections pour les problèmes de grille */
.cpp-grid-fix {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
}

/* Corrections pour les problèmes de positionnement relatif */
.cpp-relative-fix {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Corrections pour les problèmes de marges et paddings */
.cpp-spacing-fix {
    margin: 0 !important;
    padding: 10px !important;
}

/* Corrections pour les problèmes de bordures */
.cpp-border-fix {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

/* Corrections pour les problèmes de couleurs de fond */
.cpp-bg-fix {
    background: #fff !important;
    color: #2d3748 !important;
}

/* Corrections pour les problèmes de texte */
.cpp-text-fix {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #2d3748 !important;
}

/* Corrections pour les problèmes d'interaction */
.cpp-interaction-fix {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Corrections pour les problèmes de transition */
.cpp-transition-fix {
    transition: all 0.2s ease !important;
    -webkit-transition: all 0.2s ease !important;
    -moz-transition: all 0.2s ease !important;
    -o-transition: all 0.2s ease !important;
}

/* Corrections pour les problèmes de focus */
.cpp-focus-fix:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

/* Corrections pour les problèmes d'accessibilité */
.cpp-accessibility-fix {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Corrections pour les problèmes de performance */
.cpp-performance-fix {
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    -moz-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    -o-transform: translateZ(0) !important;
}

/* Corrections pour les problèmes de compatibilité */
.cpp-compatibility-fix {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Corrections pour les problèmes de print */
@media print {
    .cpp-editor-container {
        display: none !important;
    }
}

/* Corrections pour les problèmes de high contrast */
@media (prefers-contrast: high) {
    .cpp-tool-icon {
        border-width: 3px !important;
    }
    
    .cpp-border-fix {
        border-width: 2px !important;
    }
}

/* Corrections pour les problèmes de reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cpp-transition-fix {
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
    }
}

/* Corrections pour les problèmes de positionnement du pointeur */
.cpp-canvas-container {
    position: relative !important;
    transform: none !important;
    transform-origin: top left !important;
    overflow: hidden !important;
}

#cpp-canvas {
    position: relative !important;
    transform: none !important;
    transform-origin: top left !important;
    cursor: crosshair !important;
    touch-action: none !important;
    display: block !important;
    visibility: visible !important;
}

/* Correction du décalage du calque coloré */
.cpp-color-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Correction pour les éléments Fabric.js */
.canvas-container {
    position: relative !important;
    transform: none !important;
    overflow: hidden !important;
}

/* Correction pour le zoom et le pan */
.cpp-canvas-container.zoomed {
    transform: none !important;
}

/* Correction pour les événements de souris */
#cpp-canvas:hover {
    cursor: crosshair !important;
}

/* Correction pour les éléments sélectionnés */
#cpp-canvas .upper-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

#cpp-canvas .lower-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Suppression de toutes les transformations CSS qui causent le décalage */
.cpp-editor-container * {
    transform: none !important;
}

.cpp-left-column,
.cpp-right-column,
.cpp-toolbar,
.cpp-canvas-container {
    transform: none !important;
    transform-origin: top left !important;
}

/* Correction spécifique pour Fabric.js */
.fabric-canvas {
    position: relative !important;
    transform: none !important;
}

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