.label-scroll-container {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
  scroll-behavior: smooth;
  padding-bottom: 20vh;
}

.label-wrapper {
  scroll-snap-align: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.label-canvas {
  width: 6in;
  height: 4in;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
}

.label-canvas.portrait {
  width: 4in;
  height: 6in;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: Arial, sans-serif;
  font-size: 3rem;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.05);
  background-image: url('data:image/svg+xml;utf8,<svg width="4" height="4" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="black"/></svg>');
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
}

.tool-item {
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tool-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.tool-item:active {
  cursor: grabbing;
}

/* Snap guidelines */

.snap-guide {
  position: absolute;
  pointer-events: none;
  z-index: 999;
}

/* Vertical guides (full height lines) */

.snap-guide-v {
  top: 0;
  bottom: 0;
  width: 0;
  border-left-width: 1px;
  border-left-style: dashed;
}

/* Horizontal guides (full width lines) */

.snap-guide-h {
  left: 0;
  right: 0;
  height: 0;
  border-top-width: 1px;
  border-top-style: dashed;
}

/* Label edge/center snaps = blue */

.snap-guide-canvas {
  border-color: #0d6efd;
}

/* Element-to-element snaps = orange */

.snap-guide-element {
  border-color: #fd7e14;
}

/* Clips only decorative content (watermark, border layer) to label boundary */

.label-content-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

/* The outer wrapper must be overflow:visible so handles/toolbars show outside the canvas */

.label-canvas-outer {
  position: relative;
  overflow: visible !important;
}

/* Canvas elements are positioned relative to label-canvas-outer, overlapping the canvas */

.canvas-element {
  position: absolute;
  cursor: move;
  z-index: 10;
  padding: 4px;
  border: 1px dashed transparent;
  user-select: none;
}

/* Placed elements on canvas */

.canvas-element:hover {
  border-color: #0d6efd;
}

.canvas-element:focus-within {
  border-color: #0d6efd;
  outline: none;
}

[contenteditable="true"] {
  user-select: text;
}

[contenteditable="true"]:focus {
  outline: none;
}

/* Active Element Tooling */

.canvas-element.active-element {
  border-color: #0d6efd;
  z-index: 100;
}

.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #0d6efd;
  border: 2px solid #fff;
  border-radius: 50%;
  display: none;
  z-index: 10;
}

.active-element .resize-handle {
  display: block;
}

.resize-handle.nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.resize-handle.ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.resize-handle.sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

.resize-handle.se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

.resize-handle.n {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resize-handle.s {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resize-handle.e {
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.resize-handle.w {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.element-toolbar {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px;
  display: none;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
  z-index: 101;
  cursor: default;
}

.active-element .element-toolbar {
  display: flex;
}

.label-border-layer {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* Mobile layout */

/* Scroll container is the pan/zoom viewport on mobile */

@media (max-width: 767px) {
  .label-scroll-container {
    scroll-snap-type: none;
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
  }
}

@media (max-width: 767px) {
  .label-wrapper {
    padding: 0;
    min-height: 100%;
    position: relative;
  }
}

/* Outer div is the transform anchor — JS applies translate+scale to it */

@media (max-width: 767px) {
  .label-canvas-outer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
  }
}

/* On mobile the toolbar is moved to a fixed overlay — hide the in-canvas one */

@media (max-width: 767px) {
  .element-toolbar {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #mobile-toolbar-overlay .element-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

/* Larger touch targets for resize handles on mobile */

@media (max-width: 767px) {
  .resize-handle {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 767px) {
  .resize-handle.nw {
    top: -10px;
    left: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.ne {
    top: -10px;
    right: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.sw {
    bottom: -10px;
    left: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.se {
    bottom: -10px;
    right: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.n {
    top: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.s {
    bottom: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.e {
    right: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.w {
    left: -10px;
  }
}

@media (max-width: 767px) {
  .resize-handle.ne {
    top: -9px;
    right: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.sw {
    bottom: -9px;
    left: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.se {
    bottom: -9px;
    right: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.n {
    top: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.s {
    bottom: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.e {
    right: -9px;
  }
}

@media (max-width: 767px) {
  .resize-handle.w {
    left: -9px;
  }
}

/* Print styles */