/**
 * DOM-based Moodboard Viewer Styles
 */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Container */
.moodboard-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  user-select: none;
}

/* Canvas - the pannable/zoomable surface */
.moodboard-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Base item styles */
.moodboard-item {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  overflow: hidden;
}

.moodboard-item img,
.moodboard-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.moodboard-item video {
  pointer-events: auto;
}

/* Image items */
.moodboard-item.image-item img {
  display: block;
}

/* Video items */
.moodboard-item.video-item {
  background: #000;
}

.moodboard-item.video-item video {
  width: 100%;
  height: 100%;
}

/* Audio items */
.moodboard-item.audio-item {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.audio-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.audio-icon {
  font-size: 48px;
  color: #e94560;
}

.audio-waveform {
  width: 100%;
  height: 60px;
  object-fit: contain;
  opacity: 0.8;
}

.audio-item audio {
  width: 100%;
  height: 40px;
}

/* Text items */
.moodboard-item.text-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  padding: 16px;
  overflow: auto;
}

.text-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.text-content p {
  margin: 0 0 1em 0;
}

.text-content p:last-child {
  margin-bottom: 0;
}

/* PDF items */
.moodboard-item.pdf-item {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pdf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 14px;
}

.pdf-item canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdf-controls {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 12px;
  border-radius: 20px;
}

.pdf-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

.pdf-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pdf-controls span {
  color: white;
  font-size: 12px;
  line-height: 28px;
}

.pdf-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 107, 53, 0.9);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

/* SVG items */
.moodboard-item.svg-item img,
.moodboard-item.svg-item svg {
  width: 100%;
  height: 100%;
}

/* GIF items */
.moodboard-item.gif-item {
  position: relative;
}

.gif-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 140, 0, 0.9);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 3D items */
.moodboard-item.three-d-item {
  background: transparent;
  border-radius: 4px;
}

.three-d-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
}

.three-d-placeholder .icon {
  font-size: 32px;
  font-weight: bold;
  color: #0066cc;
  margin-bottom: 8px;
}

.three-d-placeholder .hint {
  font-size: 12px;
  opacity: 0.7;
}

.three-d-item.active {
  z-index: 100;
}

.three-d-item canvas {
  width: 100%;
  height: 100%;
}

.three-d-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}

.three-d-controls button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid white;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.three-d-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 12px;
}

/* Web embed items */
.moodboard-item.web-item {
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.web-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #495057;
}

.web-placeholder .icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.web-placeholder .url {
  font-size: 14px;
  font-family: monospace;
  margin-bottom: 8px;
}

.web-placeholder .hint {
  font-size: 12px;
  color: #6c757d;
  font-style: italic;
}

.web-item.active {
  z-index: 100;
}

.web-item iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.web-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid white;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Group items */
.moodboard-item.group-item {
  border: 2px dashed #666;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}

.group-item.selected {
  border-color: #0066cc;
  border-width: 3px;
}

/* Loading state */
.moodboard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #888;
}

.moodboard-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top-color: #0066cc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.moodboard-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #888;
  text-align: center;
  padding: 20px;
}

.moodboard-error h2 {
  color: #e94560;
  margin-bottom: 8px;
}

.moodboard-error p {
  max-width: 400px;
}

/* Zoom controls overlay */
.zoom-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 1000;
}

.zoom-controls button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.zoom-controls button:hover {
  background: rgba(0, 0, 0, 0.9);
}

.zoom-level {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  min-width: 60px;
  text-align: center;
}

/* Minimap (optional) */
.minimap {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 150px;
  height: 100px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
}

.minimap-viewport {
  position: absolute;
  border: 2px solid #0066cc;
  background: rgba(0, 102, 204, 0.2);
}

/* Selection box (for future multi-select) */
.selection-box {
  position: absolute;
  border: 1px solid #0066cc;
  background: rgba(0, 102, 204, 0.1);
  pointer-events: none;
  z-index: 1000;
}

/* Item hover state */
.moodboard-item:hover {
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.5);
}

/* Item selected state */
.moodboard-item.selected {
  box-shadow: 0 0 0 3px #0066cc;
}

/* Cursor states */
.moodboard-container.panning {
  cursor: grabbing;
}

.moodboard-container.pan-ready {
  cursor: grab;
}

.moodboard-container.transforming {
  cursor: move;
}

/* Transform overlay */
.transform-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 10000;
  transform-origin: center center;
}

.transform-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #0066cc;
  pointer-events: none;
}

/* Transform handles */
.transform-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #0066cc;
  border-radius: 2px;
  pointer-events: auto;
  z-index: 10001;
}

.transform-handle:hover {
  background: #0066cc;
}

/* Corner handles */
.handle-nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

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

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

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

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

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

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

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

/* Edge resize zones - larger hit areas along edges for easier scaling */
.resize-edge {
  position: absolute;
  pointer-events: auto;
  z-index: 9998;
  /* background: rgba(255, 0, 0, 0.1); /* Uncomment to debug hit areas */
}

.edge-n {
  top: -8px;
  left: 20px;
  right: 20px;
  height: 16px;
  cursor: ns-resize;
}

.edge-s {
  bottom: -8px;
  left: 20px;
  right: 20px;
  height: 16px;
  cursor: ns-resize;
}

.edge-e {
  top: 20px;
  right: -8px;
  bottom: 20px;
  width: 16px;
  cursor: ew-resize;
}

.edge-w {
  top: 20px;
  left: -8px;
  bottom: 20px;
  width: 16px;
  cursor: ew-resize;
}

/* Rotation zones - invisible clickable areas at corners */
.rotation-zone {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: auto;
  z-index: 9999;
  /* Rotate cursor */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15'/%3E%3C/svg%3E") 12 12, grab;
}

/* Position rotation zones outside corners - larger hit areas */
.rotation-nw {
  top: -40px;
  left: -40px;
}

.rotation-ne {
  top: -40px;
  right: -40px;
}

.rotation-se {
  bottom: -40px;
  right: -40px;
}

.rotation-sw {
  bottom: -40px;
  left: -40px;
}

/* Box select (marquee) */
.box-select {
  position: absolute;
  border: 2px dashed #0066cc;
  background: rgba(0, 102, 204, 0.1);
  pointer-events: none;
  z-index: 10002;
}

/* Multi-select overlay - dashed border instead of solid */
.transform-overlay.multi-select .transform-border {
  border-style: dashed;
}

/* Box select hover state for items */
.moodboard-item.box-select-hover {
  outline: 2px dashed #0066cc;
  outline-offset: 2px;
}

/* Selected item highlight */
.moodboard-item.selected {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}