/* Basic resets */
*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}
body{display:flex;flex-direction:column;height:100vh;}
header.toolbar{background:#333;color:#fff;padding:8px;display:flex;gap:8px;}
header.toolbar button{padding:4px 8px;cursor:pointer;}

main{flex:1;display:flex;overflow:hidden;}
#stageWrapper{flex:1;display:flex;justify-content:flex-start;align-items:flex-start;background:#eee;position:relative;padding:40px;overflow:auto;}

/* Ticket stage (203-dpi 2"×5.5" example => 1122×288 dots) */
#stage{position:relative;width:800px;height:288px;background:#fff;border:1px solid #999;overflow:visible;}
#stage.grid-on{background-image:linear-gradient(to right,#ccc 1px,transparent 1px),linear-gradient(to bottom,#ccc 1px,transparent 1px);background-size:20px 20px;}

/* Scene items */
.item{position:absolute;user-select:none;cursor:move;touch-action:none;}
.item.selected{outline:1px dashed #0078d7;}
.item.barcode{position:relative;background:#fff;}
.item.barcode svg{display:block;max-width:100%;max-height:100%;}

/* Shape items styling */
.item.shape-item{cursor:move;position:relative;}
.item.shape-item.selected{outline:2px dashed #0078d7;}

/* Enhanced resize handle styling */
.item.shape-item.selected::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  pointer-events: none;
  border: 2px solid transparent;
  background: linear-gradient(45deg, transparent 0%, rgba(0, 120, 215, 0.1) 50%, transparent 100%);
  border-radius: 2px;
}

/* Visual indicators for resizable elements */
.item.shape-item:hover {
  box-shadow: 0 0 8px rgba(0, 120, 215, 0.3);
  transition: box-shadow 0.2s ease;
}

/* Text with inverse style */
.item[style*="background-color: rgb(0, 0, 0)"] {
  border-radius: 2px;
}

/* Resize handles (Interact.js adds) - Enhanced styling */
.resize-handle{
  width: 10px;
  height: 10px;
  background: #0078d7;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  z-index: 1000;
}

.resize-handle:hover {
  background: #005a9e;
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(0, 120, 215, 0.5);
}

/* Resize handle positions */
.resize-handle.br{bottom:-5px;right:-5px;cursor:se-resize;}
.resize-handle.bl{bottom:-5px;left:-5px;cursor:sw-resize;}
.resize-handle.tr{top:-5px;right:-5px;cursor:ne-resize;}
.resize-handle.tl{top:-5px;left:-5px;cursor:nw-resize;}
.resize-handle.r{top:50%;right:-5px;margin-top:-5px;cursor:e-resize;}
.resize-handle.l{top:50%;left:-5px;margin-top:-5px;cursor:w-resize;}
.resize-handle.t{left:50%;top:-5px;margin-left:-5px;cursor:n-resize;}
.resize-handle.b{left:50%;bottom:-5px;margin-left:-5px;cursor:s-resize;}

/* Dragging state visual feedback */
.item.is-dragging {
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

/* Resizing state visual feedback */
.item.is-resizing {
  outline: 2px solid #0078d7;
  background: rgba(0, 120, 215, 0.05);
}

/* Properties panel */
#properties{width:220px;padding:8px;border-right:1px solid #ccc;background:#fafafa;overflow-y:auto;}
#fileManager{width:240px;padding:8px;border-left:1px solid #ccc;background:#fafafa;overflow-y:auto;}
#properties input, #properties select{width:100%;margin-top:4px;margin-bottom:10px;}
#fileManager h3{margin-top:0;}
#fileManager ul{list-style:none;padding:0;margin:0;}
#fileManager li{padding:4px 4px;cursor:pointer;border-bottom:1px solid #e0e0e0;}
#fileManager li:hover{background:#e8e8e8;}
#fileManager button{margin-top:6px;width:100%;}
#fileManager input{width:100%; margin-top:4px; margin-bottom:6px;}

#fglOutput{resize:none;height:240px;}

#splitter{height:6px;background:#ccc;cursor:row-resize;}

/* =========================
   Vaporwave Theme Overrides
   ========================= */

:root {
  /* Ocean-sky palette */
  --vapor-bg1: #0e2545;          /* deep ocean */
  --vapor-bg2: #3273b7;          /* mid-blue */
  --vapor-sky: #d8ecff;          /* light sky */
  --vapor-accent: #60c5ff;       /* bright azure */
  --vapor-accent2: #ffe48a;      /* warm sunrise highlight */
  --vapor-text: #f0f8ff;         /* near-white */
}

body {
  /* Simulated sky→sea pano */
  background: linear-gradient(to bottom, var(--vapor-sky) 0%, var(--vapor-sky) 40%, var(--vapor-bg2) 60%, var(--vapor-bg1) 100%);
  color: var(--vapor-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

header.toolbar {
  background: linear-gradient(90deg, var(--vapor-bg1), var(--vapor-bg2));
  border-bottom: 2px solid var(--vapor-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

header.toolbar button {
  background: transparent;
  color: var(--vapor-text);
  border: 1px solid var(--vapor-accent);
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3) inset;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

header.toolbar button:hover {
  background: var(--vapor-accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 0 10px var(--vapor-accent), 0 0 20px var(--vapor-accent2);
}

#properties, #fileManager {
  background: rgba(14, 37, 69, 0.9); /* deep ocean translucent */
  color: var(--vapor-text);
  border-color: var(--vapor-accent);
}

#properties input, #properties select, #fileManager input {
  background: rgba(20, 0, 40, 0.8);
  color: var(--vapor-text);
  border: 1px solid var(--vapor-accent);
}

#stageWrapper {
  background: transparent;
}

#stage {
  border: 2px solid var(--vapor-accent);
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(2px);
}

#stage.grid-on {
  background-image: linear-gradient(to right, rgba(14,37,69,0.15) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(14,37,69,0.15) 1px, transparent 1px);
}

/* Ensure ticket content (items) remains pure black text unless explicitly styled */
#stage .item{
  color:#000;
}

/* Neon pulse for selected items */
@keyframes neonPulse {
  0% {
    box-shadow: 0 0 2px var(--vapor-accent); /* subtle */
  }
  100% {
    box-shadow: 0 0 8px var(--vapor-accent), 0 0 12px rgba(0,0,0,0.4);
  }
}

.item.selected {
  outline: 2px solid var(--vapor-accent);
  animation: neonPulse 1.6s ease-in-out infinite alternate;
  box-shadow: 0 0 6px var(--vapor-accent2);
}

/* Ensure barcode svg inherits glow */
.item.barcode.selected svg {
  filter: drop-shadow(0 0 4px var(--vapor-accent)) drop-shadow(0 0 8px var(--vapor-accent2));
}

/* Splitter neon */
#splitter {
  background: var(--vapor-accent2);
  box-shadow: 0 0 6px var(--vapor-accent2);
}