/* CONTENT */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-content); }

/* HEADER */
.page-header { background:#d0d0d0; border-bottom:1px solid var(--border-panel); padding:10px 18px 8px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.page-header h1 { font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700; color:var(--text-dark); letter-spacing:0.5px; }
.breadcrumb { font-size:11px; color:var(--text-label); margin-top:2px; }
.breadcrumb span { color:var(--teal); }
.header-controls { display:flex; gap:7px; align-items:center; }
.mode-badge { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; background:var(--accent-yellow); color:#fff; padding:3px 9px; border-radius:3px; }
.btn { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.4px; border:none; border-radius:3px; padding:4px 11px; cursor:pointer; transition:background 0.15s; }
.btn-gray   { background:#bbb; color:#333; } .btn-gray:hover   { background:#aaa; }
.btn-teal   { background:var(--teal); color:#fff; } .btn-teal:hover   { background:var(--teal-light); }
.btn-danger { background:var(--accent-red); color:#fff; } .btn-danger:hover { opacity:0.85; }
.btn-sm { padding:3px 9px; font-size:11px; }

/* EDIT LAYOUT */
.edit-body { flex:1; display:flex; overflow:hidden; }
.canvas-col { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* Resizable Layout */
.resizable-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.resizable-horizontal {
  position: relative;
  min-width: 220px;
  max-width: 600px;
  width: 320px;
  transition: width 0.2s;
  background: var(--bg-panel);
  box-shadow: -2px 0 8px rgba(0,0,0,0.07);
  z-index: 10;
}
.resize-handle-horizontal {
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 100%;
  cursor: ew-resize;
  background: #1a8f7a;
  z-index: 20;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 0 12px #1a8f7a;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

/* Horizontal triple lines inside the handle, sized to 75% of the handle width */
.resize-handle-horizontal .handle-lines {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.resize-handle-horizontal .handle-lines .line {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12) inset;
}

/* BOTTOM TRAY */
.bottom-tray {
  height: 200px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-panel);
  background: #cacaca;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Vertical resize handle for bottom tray — thin gray line with centered pip */
.resize-handle-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  cursor: ns-resize;
  background: #b0b0b0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.resize-handle-vertical::after {
  content: '|||';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #b8b8b8;
  color: #666;
  font-size: 11px;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Tray sections fill parent height via flex */
.tray-section {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-panel);
  overflow: hidden;
  flex: 1;
  height: 100%;
}
.tray-section:last-child { border-right: none; }

/* Centered middle handle — thin gray line spanning full width */
.middle-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  cursor: ns-resize;
  background: #b0b0b0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overflow: visible;
}
.middle-resize::after {
  content: '|||';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #b8b8b8;
  color: #666;
  font-size: 11px;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Return Drop Zone */
.return-drop-zone {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(192,57,43,0.15);
  border:3px dashed var(--accent-red);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  pointer-events:none;
}
.return-drop-zone.active {
  display:flex;
  pointer-events:all;
}
.return-drop-zone-content {
  background:rgba(192,57,43,0.9);
  color:#fff;
  padding:20px 40px;
  border-radius:6px;
  font-family:'Rajdhani',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.5px;
  text-align:center;
  display:flex;
  align-items:center;
  gap:10px;
}
.return-drop-zone-content svg {
  width:24px;
  height:24px;
}
.return-drop-zone.drag-over {
  background:rgba(192,57,43,0.25);
  border-color:#fff;
}
.return-drop-zone.drag-over .return-drop-zone-content {
  background:var(--accent-red);
  transform:scale(1.05);
}

.tray-header { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-label); padding:4px 10px; background:#c4c4c4; border-bottom:1px solid var(--border-panel); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.tray-btn { font-family:'Rajdhani',sans-serif; font-size:9px; font-weight:700; border:1px solid #b0b0b0; background:#bbb; border-radius:2px; padding:1px 7px; cursor:pointer; color:var(--text-dark); }
.tray-btn:hover { background:#aaa; }

/* Tray scroll fills remaining height after header */
.tray-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
}
.tray-scroll::-webkit-scrollbar { height:5px; }
.tray-scroll::-webkit-scrollbar-thumb { background:#999; border-radius:3px; }
.tray-scroll::-webkit-scrollbar-track { background:#c0c0c0; }

/* Operators tray only: 2-row horizontal grid */
.tray-section:last-child .tray-scroll { display:grid; grid-template-rows:repeat(2, max-content); grid-auto-flow:column; grid-auto-columns:max-content; align-items:flex-start; align-content:flex-start; row-gap:6px; }

/* TOOLBAR */
.edit-toolbar { display:flex; align-items:center; gap:5px; padding:5px 12px; background:#ccc; border-bottom:1px solid var(--border-panel); flex-shrink:0; }
.tool-btn { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.3px; border:1px solid #b8b8b8; border-radius:3px; background:#c8c8c8; color:var(--text-dark); padding:3px 9px; cursor:pointer; display:flex; align-items:center; gap:4px; transition:background 0.12s,border-color 0.12s; }
.tool-btn:hover  { background:#bbb; }
.tool-btn.active { background:var(--teal-glow); border-color:var(--teal); color:var(--teal); }
.tool-btn svg { width:12px; height:12px; }
.toolbar-sep { width:1px; height:16px; background:#b0b0b0; margin:0 3px; }
.toolbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.snap-toggle { font-size:10px; color:var(--text-label); display:flex; align-items:center; gap:4px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-weight:600; }
.snap-toggle input { accent-color:var(--teal); }
.node-counter { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; color:var(--text-label); }

/* CANVAS */
.canvas-wrap { flex:1; overflow:auto; position:relative;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0,0,0,0.055) 27px, rgba(0,0,0,0.055) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(0,0,0,0.055) 27px, rgba(0,0,0,0.055) 28px),
    #c8c8c8;
}
.canvas-wrap::-webkit-scrollbar { width:5px; height:5px; }
.canvas-wrap::-webkit-scrollbar-thumb { background:#aaa; border-radius:3px; }

#arrowSvg { position:absolute; top:0; left:0; pointer-events:none; z-index:1; overflow:visible; }

/* Zone grouping boxes */
.rot-zone { 
  position:relative; 
  border:2px solid #aaa; 
  border-radius:8px; 
  background:rgba(200,200,200,0.4); 
  padding:14px;
  height:100%;
  display:flex;
  flex-direction:column;
}
.rot-zone-label { 
  font-family:'Rajdhani',sans-serif; 
  font-size:11px; 
  font-weight:700; 
  color:var(--text-label); 
  text-transform:uppercase; 
  letter-spacing:0.5px; 
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid #b8b8b8;
}

/* Template Grid */
.template-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:auto;
  gap:14px;
  flex:1;
  overflow-y:auto;
  padding:4px;
}
.template-grid::-webkit-scrollbar { width:4px; }
.template-grid::-webkit-scrollbar-thumb { background:#aaa; border-radius:2px; }

/* Template Boxes */
.template-box {
  background:#dadada;
  border:3px dashed #b0b0b0;
  border-radius:6px;
  padding:10px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
  position:relative;
  height:fit-content;
}
.template-box:hover {
  border-color:#999;
  background:#d4d4d4;
}
.template-box.selected {
  border-color:var(--teal);
  border-style:solid;
  background:rgba(26,143,122,0.08);
}
.template-box.drag-over {
  border-color:var(--teal-light);
  background:rgba(26,143,122,0.15);
  border-style:solid;
}
.template-box-number {
  position:absolute;
  top:6px;
  left:6px;
  width:20px;
  height:20px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Rajdhani',sans-serif;
  font-size:12px;
  font-weight:700;
  z-index:10;
}

/* Template Box Header */
.template-box-header {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid #b8b8b8;
}
.template-box-ride {
  font-family:'Rajdhani',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--text-dark);
  letter-spacing:0.3px;
}

/* Position Slots */
.template-box-positions {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rotation-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  height:16px;
  margin:-3px 0;
}
.rotation-arrow svg {
  width:16px;
  height:16px;
  stroke:var(--teal);
  opacity:0.7;
}
.position-slot {
  background:#c8c8c8;
  border:1px solid #b0b0b0;
  border-radius:4px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:5px;
  transition:border-color 0.15s;
}
.position-slot:hover {
  border-color:#999;
}
.position-slot-name {
  font-family:'Rajdhani',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--text-dark);
  letter-spacing:0.2px;
}
.position-slot-operator {
  font-size:10px;
  font-weight:600;
  padding:4px 7px;
  border-radius:3px;
  transition:background 0.15s, border-color 0.15s;
  display:flex;
  align-items:center;
  gap:4px;
}
.position-slot-operator.filled {
  background:rgba(26,143,122,0.15);
  color:var(--teal);
  border:1px solid rgba(26,143,122,0.3);
  cursor:grab;
}
.position-slot-operator.filled:active { cursor:grabbing; }
.op-drag-handle {
  font-size:12px;
  opacity:0.5;
  flex-shrink:0;
  line-height:1;
  user-select:none;
}
.position-slot-operator.empty {
  background:rgba(192,57,43,0.1);
  color:var(--accent-red);
  border:1px solid rgba(192,57,43,0.2);
}
.position-slot-operator.drag-over {
  background:rgba(26,143,122,0.25);
  border-color:var(--teal);
}

/* Position Edit Rows in Properties Panel */
.position-slots-container {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:280px;
  overflow-y:auto;
}
.position-slots-container::-webkit-scrollbar { width:3px; }
.position-slots-container::-webkit-scrollbar-thumb { background:#aaa; border-radius:2px; }

.position-edit-row {
  display:flex;
  gap:4px;
  align-items:center;
  padding:5px;
  background:#c4c4c4;
  border-radius:3px;
  border:1px solid #b0b0b0;
}
.position-edit-row input {
  flex:1;
  min-width:0;
}
.position-edit-row select {
  flex:1.2;
  min-width:0;
  font-size:10px;
}
.prop-btn-small {
  width:20px;
  height:20px;
  padding:0;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* Make draggable items have grab cursor */
.attr-thumb[draggable="true"],
.op-chip[draggable="true"] {
  cursor:grab;
}
.attr-thumb[draggable="true"]:active,
.op-chip[draggable="true"]:active {
  cursor:grabbing;
}

/* Attraction thumbs */
.attr-thumb { flex-shrink:0; width:118px; height:78px; border-radius:4px; background:linear-gradient(135deg,#999,#777); border:2px solid #aaa; position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; cursor:grab; transition:border-color 0.13s, opacity 0.13s; overflow:hidden; user-select:none; padding-top:4px; }
.attr-thumb:hover { border-color:var(--teal); }
.attr-thumb svg { position:absolute; inset:0; margin:auto; width:28px; height:28px; opacity:0.18; stroke:#fff; z-index:0; }
.attr-thumb-label { position:relative; width:100%; background:rgba(0,0,0,0.55); color:#fff; font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; padding:4px 6px; z-index:2; text-align:center; white-space:normal; line-height:1.1; max-height:36px; display:flex; align-items:flex-start; justify-content:center; }
.attr-thumb .tnum { position:absolute; top:4px; right:5px; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; color:rgba(255,255,255,0.55); }
.attr-thumb.placed { 
  border-color:#888; 
  opacity:0.4; 
  cursor:not-allowed;
  filter:grayscale(0.7);
}
.attr-thumb.placed:hover {
  border-color:#888;
}

/* Prevent text selection inside bottom tray and resize handles */
.bottom-tray, .bottom-tray *,
.tray-section, .tray-section *,
.tray-scroll, .return-drop-zone, .tray-header,
.resize-handle-horizontal, .resize-handle-vertical {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Operator chips */
.op-chip { flex-shrink:0; background:#d0d0d0; border:1px solid #b8b8b8; border-radius:3px; padding:3px 7px; cursor:grab; transition:border-color 0.13s; user-select:none; align-self:flex-start; display:flex; align-items:center; }
.op-chip:hover { border-color:var(--teal); }
.op-chip-name { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; color:var(--text-dark); white-space:nowrap; }
.op-chip-tier { display:none !important; font-size:8px; color:var(--text-label); margin-top:1px; }

/* PROPERTIES PANEL */
.props-panel { width:206px; flex-shrink:0; background:#d0d0d0; border-left:2px solid var(--border-panel); display:flex; flex-direction:column; overflow:hidden; }
.props-header { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--teal); letter-spacing:0.4px; padding:10px 12px 7px; padding-right:18px; border-bottom:1px solid var(--border-panel); background:#c8c8c8; position:relative; z-index:30; flex-shrink:0; }
.props-empty { flex:1; display:flex; align-items:center; justify-content:center; }
.props-empty-msg { font-size:11px; color:#aaa; text-align:center; padding:20px; line-height:1.6; }
.props-body { flex:1; overflow-y:auto; padding:10px; }
.props-body::-webkit-scrollbar { width:3px; }
.props-body::-webkit-scrollbar-thumb { background:#aaa; border-radius:2px; }
.prop-group { margin-bottom:12px; }
.prop-group-title { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-label); margin-bottom:6px; padding-bottom:3px; border-bottom:1px solid #c0c0c0; }
.prop-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.prop-label { font-size:10px; font-weight:600; color:var(--text-label); text-transform:uppercase; letter-spacing:0.3px; min-width:46px; }
.prop-input,.prop-select { flex:1; background:var(--bg-input); border:1px solid #b4b4b4; color:var(--text-dark); padding:3px 6px; font-size:11px; border-radius:3px; outline:none; font-family:'Inter',sans-serif; }
.prop-input:focus,.prop-select:focus { border-color:var(--teal); }
.prop-select { cursor:pointer; }
.prop-xy { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:5px; }
.prop-xy > div { display:flex; flex-direction:column; gap:2px; }
.prop-xy > div > span { font-size:9px; font-weight:700; color:var(--text-label); text-transform:uppercase; }
.prop-divider { border:none; border-top:1px solid #c0c0c0; margin:8px 0; }
.prop-btn-row { display:flex; gap:5px; }
.prop-btn { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:600; border:1px solid transparent; border-radius:3px; padding:4px 8px; cursor:pointer; flex:1; text-align:center; }
.pbtn-del { background:rgba(192,57,43,0.12); color:var(--accent-red); border-color:rgba(192,57,43,0.3); }
.pbtn-del:hover { background:rgba(192,57,43,0.22); }
.pbtn-dup { background:#c4c4c4; color:var(--text-dark); border-color:#b4b4b4; }
.pbtn-dup:hover { background:#bbb; }