/**
 * DeckCraft Canvas Stage CSS - Thước đo, vùng làm việc, Smart Guides và 8 Resize Handles
 * Giấy phép: MIT
 */

.canvas-viewport-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Rulers */
.ruler-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #F1F5F9;
  border-right: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  z-index: 10;
}

.ruler-horizontal {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 20px;
  background-color: #F8FAFC;
  border-bottom: 1px solid var(--border-dark);
  z-index: 9;
  overflow: hidden;
}

.ruler-vertical {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  width: 20px;
  background-color: #F8FAFC;
  border-right: 1px solid var(--border-dark);
  z-index: 9;
  overflow: hidden;
}

.ruler-pointer {
  position: absolute;
  background-color: #EF4444;
  pointer-events: none;
}

#ruler-h-pointer {
  top: 0;
  width: 1px;
  height: 20px;
}

#ruler-v-pointer {
  left: 0;
  width: 20px;
  height: 1px;
}

/* Scrollable Container */
.canvas-scroll-container {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Slide Stage Card */
.deckcraft-slide-stage {
  position: relative;
  background-color: #FFFFFF;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  transform-origin: center center;
  transition: transform 0.05s ease-out;
}

.slide-content-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.snapping-guides-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.selection-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
}

/* Selection Bounding Box */
.element-selection-box {
  position: absolute;
  border: 1.5px solid var(--brand-primary);
  pointer-events: none;
  box-sizing: border-box;
}

/* Ctrl+Drag to Copy Visual State */
.element-selection-box.ctrl-drag-copy-active {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981, 0 4px 12px rgba(16, 185, 129, 0.28) !important;
}

.element-selection-box.ctrl-drag-copy-active .resize-handle {
  border-color: #10b981 !important;
}

/* 8 Resize Handles */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  border: 1.5px solid var(--brand-primary);
  border-radius: 1px;
  pointer-events: auto;
  box-sizing: border-box;
}

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

/* Rotate Handle */
.rotate-handle {
  position: absolute;
  top: -24px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  background-color: #10B981;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.rotate-handle::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 3.5px;
  width: 1px;
  height: 14px;
  background-color: var(--brand-primary);
}

/* Inline WYSIWYG Text Editor */
.deckcraft-inline-editor {
  border-radius: 2px;
  outline: none;
  word-break: break-word;
}