/**
 * CardMaker Designer - Canvas Styles
 */

/* ========================================
   Canvas Wrapper
   ======================================== */
.canvas-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    background-image: 
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: hidden;
    position: relative;
}

/* ========================================
   Canvas Container
   ======================================== */
.canvas-container {
    position: relative;
    transform-origin: center center;
    transition: transform 0.1s ease;
}

/* ========================================
   Card Canvas
   ======================================== */
.card-canvas {
    /* Standard CR-80 business card: 85.6mm × 54mm */
    /* At 300 DPI: 1011 × 638 pixels */
    /* For screen display, we'll use a scaled version */
    width: 428px; /* 85.6mm * 5 */
    height: 270px; /* 54mm * 5 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    cursor: default;
}

.card-canvas.grid-visible {
    background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ========================================
   Card Elements
   ======================================== */
.card-element {
    position: absolute;
    cursor: move;
    user-select: none;
    transition: box-shadow 0.1s ease;
}

.card-element:hover {
    outline: 1px dashed rgba(99, 102, 241, 0.5);
}

.card-element.selected {
    outline: 2px solid var(--primary);
}

.card-element.dragging {
    opacity: 0.8;
    cursor: grabbing;
}

/* Text Elements */
.card-element-text {
    padding: 4px;
    min-width: 20px;
    min-height: 20px;
}

.card-element-text.editing {
    outline: 2px solid var(--primary) !important;
    cursor: text;
}

.card-element-text[contenteditable="true"]:focus {
    outline: 2px solid var(--primary);
}

/* Image Elements */
.card-element-image {
    background-size: cover;
    background-position: center;
}

.card-element-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* QR Code Elements */
.card-element-qr {
    background: white;
    padding: 8px;
    border-radius: 4px;
}

.card-element-qr canvas,
.card-element-qr img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shape Elements */
.card-element-shape {
    pointer-events: all;
}

.card-element-shape.rect {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.card-element-shape.circle {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.card-element-shape.line {
    height: 2px !important;
    background: rgba(255, 255, 255, 0.5);
}

/* ========================================
   Selection Handles
   ======================================== */
.selection-handles {
    position: absolute;
    pointer-events: none;
    z-index: 100;
}

.handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid var(--primary);
    border-radius: 2px;
    pointer-events: all;
    cursor: pointer;
}

.handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.handle-n { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.handle-e { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.handle-s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle-w { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }

.handle-rotate {
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: grab;
}

.handle-rotate::before {
    content: '↻';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: var(--primary);
}

/* ========================================
   Canvas Info
   ======================================== */
.canvas-info {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* ========================================
   Snap Guides
   ======================================== */
.snap-guide {
    position: absolute;
    background: var(--primary);
    z-index: 99;
    pointer-events: none;
}

.snap-guide-h {
    height: 1px;
    width: 100%;
    left: 0;
}

.snap-guide-v {
    width: 1px;
    height: 100%;
    top: 0;
}

/* ========================================
   Zoom States
   ======================================== */
.canvas-container[data-zoom="25"] { transform: scale(0.25); }
.canvas-container[data-zoom="50"] { transform: scale(0.5); }
.canvas-container[data-zoom="75"] { transform: scale(0.75); }
.canvas-container[data-zoom="100"] { transform: scale(1); }
.canvas-container[data-zoom="125"] { transform: scale(1.25); }
.canvas-container[data-zoom="150"] { transform: scale(1.5); }
.canvas-container[data-zoom="200"] { transform: scale(2); }
.canvas-container[data-zoom="300"] { transform: scale(3); }
.canvas-container[data-zoom="400"] { transform: scale(4); }