/* ==========================================================================
   canvas.css — Viewport / Canvas Area Styles
   Business Card Generator
   ========================================================================== */

/* ---------- Canvas Viewport ---------- */

.canvas-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Checkered transparency pattern */
  background-image:
    linear-gradient(45deg,
      #1a1a3e 25%, transparent 25%),
    linear-gradient(-45deg,
      #1a1a3e 25%, transparent 25%),
    linear-gradient(45deg,
      transparent 75%, #1a1a3e 75%),
    linear-gradient(-45deg,
      transparent 75%, #1a1a3e 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-color: #12122a;
}

/* The main SVG canvas */
.canvas-viewport svg {
  display: block;
  width: 100%;
  height: 100%;
  /* The SVG is positioned/scaled by JS via transform */
}

/* ---------- Cursor Modes ---------- */

.canvas-viewport--default {
  cursor: default;
}

.canvas-viewport--grab {
  cursor: grab;
}

.canvas-viewport--grabbing {
  cursor: grabbing;
}

.canvas-viewport--crosshair {
  cursor: crosshair;
}

.canvas-viewport--text {
  cursor: text;
}

.canvas-viewport--move {
  cursor: move;
}

/* ---------- Selection Marquee ---------- */

.selection-marquee {
  position: absolute;
  border: 1px dashed var(--accent-cyan);
  background: rgba(0, 240, 255, 0.06);
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

/* ---------- Transform Handles ----------
   8 resize handles (corners + edge midpoints)
   + rotation handle above top-center
*/

.transform-handles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 90;
}

.transform-handle {
  position: absolute;
  pointer-events: all;
  z-index: 91;
}

/* Corner handles — small squares */
.transform-handle--corner {
  width: 8px;
  height: 8px;
  background: var(--accent-cyan);
  border: 1px solid var(--bg-deep);
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
  transform: translate(-50%, -50%);
}

.transform-handle--nw { cursor: nw-resize; }
.transform-handle--ne { cursor: ne-resize; }
.transform-handle--sw { cursor: sw-resize; }
.transform-handle--se { cursor: se-resize; }

/* Edge midpoint handles — small circles */
.transform-handle--edge {
  width: 6px;
  height: 6px;
  background: var(--accent-cyan);
  border: 1px solid var(--bg-deep);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.4);
  transform: translate(-50%, -50%);
}

.transform-handle--n  { cursor: n-resize; }
.transform-handle--s  { cursor: s-resize; }
.transform-handle--e  { cursor: e-resize; }
.transform-handle--w  { cursor: w-resize; }

/* Rotation handle — circle above selection */
.transform-handle--rotate {
  width: 10px;
  height: 10px;
  background: var(--accent-purple);
  border: 1px solid var(--bg-deep);
  border-radius: 50%;
  box-shadow: var(--glow-purple);
  transform: translate(-50%, -50%);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 3a7 7 0 0 1 5 2' stroke='%23b026ff' fill='none' stroke-width='1.5'/%3E%3Cpath d='M13.5 3l1.5 2-2.2.5' fill='%23b026ff'/%3E%3C/svg%3E") 10 10, pointer;
}

/* Rotation line connecting top-center to rotation handle */
.transform-handle__rotation-line {
  position: absolute;
  width: 1px;
  background: var(--accent-purple);
  opacity: 0.5;
  pointer-events: none;
}

/* Selection bounding box outline */
.selection-outline {
  position: absolute;
  border: 1px solid var(--accent-cyan);
  pointer-events: none;
  z-index: 89;
  box-shadow:
    0 0 4px rgba(0, 240, 255, 0.2),
    inset 0 0 4px rgba(0, 240, 255, 0.1);
}

/* Multi-selection outline (when multiple layers selected) */
.selection-outline--multi {
  border-style: dashed;
  border-color: var(--accent-pink);
  box-shadow:
    0 0 4px rgba(255, 41, 117, 0.2),
    inset 0 0 4px rgba(255, 41, 117, 0.1);
}

/* ---------- Zoom Indicator ---------- */

.zoom-indicator {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  padding: 3px var(--space-sm);
  background: rgba(10, 10, 26, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 50;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Snap / Alignment Guides ---------- */

.snap-guide {
  position: absolute;
  background: var(--accent-pink);
  pointer-events: none;
  z-index: 95;
  opacity: 0.7;
}

.snap-guide--horizontal {
  height: 1px;
  left: 0;
  right: 0;
  box-shadow: 0 0 4px rgba(255, 41, 117, 0.5);
}

.snap-guide--vertical {
  width: 1px;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 4px rgba(255, 41, 117, 0.5);
}

/* ---------- Rulers (optional overlay) ---------- */

.ruler {
  position: absolute;
  background: var(--bg-surface);
  z-index: 80;
  pointer-events: none;
  opacity: 0.9;
}

.ruler--horizontal {
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.ruler--vertical {
  top: 0;
  left: 0;
  bottom: 0;
  width: 16px;
  border-right: 1px solid var(--border-subtle);
}

/* ---------- Canvas Drop Zone Highlight ---------- */

.canvas-viewport--dragover {
  outline: 2px dashed var(--accent-cyan);
  outline-offset: -2px;
}

.canvas-viewport--dragover::after {
  content: 'Drop to add';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-sm) var(--space-md);
  background: rgba(10, 10, 26, 0.9);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  color: var(--accent-cyan);
  font-size: var(--font-size-md);
  pointer-events: none;
  box-shadow: var(--glow-cyan);
}