/* Canvas Container */
.canvas-container {
  background-color: var(--color-canvas-bg);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: auto;
  height: 100%;
}

/* Canvas */
.canvas {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  background-color: var(--color-canvas-bg);
  cursor: default;
  user-select: none;
}

/* Canvas Message (Empty State) */
.canvas-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  pointer-events: none;
  z-index: 1;
}

.canvas-message p {
  margin: var(--space-xs) 0;
}

/* Hide message when canvas has content */
.canvas:has(.room, .object) .canvas-message {
  display: none;
}

/* Room Styles */
.room {
  position: absolute;
  background-color: var(--color-room-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
  min-width: 50px;
  min-height: 50px;
}

.room:hover {
  border-color: rgba(51, 255, 255, 0.5);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.02);
}

.room.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(51, 255, 255, 0.2), var(--shadow-lg);
  z-index: 20;
}

.room.dragging {
  opacity: 0.8;
  z-index: 50;
  transform: rotate(1deg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Object Styles */
.object {
  position: absolute;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 15;
  min-width: 20px;
  min-height: 20px;
}

.object:hover {
  border-color: rgba(51, 255, 255, 0.5);
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
}

.object.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(51, 255, 255, 0.3), var(--shadow-md);
  z-index: 25;
}

.object.dragging {
  opacity: 0.8;
  z-index: 50;
  transform: rotate(-1deg);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Entity Labels */
.entity-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-xs);
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}

.room .entity-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.object .entity-label {
  font-size: var(--font-size-sm);
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Adjust text color for light-colored objects */
.object[data-light-color="true"] .entity-label {
  color: var(--color-text-primary);
  text-shadow: none;
}

/* Rotation States */
.entity.rotated-90,
.entity.rotated-270 {
  /* Visual indicator that entity is rotated */
}

.entity.rotated-90::before,
.entity.rotated-270::before {
  content: '↻';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* Grid Overlay (Optional) */
.canvas.show-grid {
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Snap Guidelines */
.snap-guide {
  position: absolute;
  background-color: var(--color-primary);
  opacity: 0.6;
  pointer-events: none;
  z-index: 100;
}

.snap-guide.horizontal {
  height: 1px;
  left: 0;
  right: 0;
}

.snap-guide.vertical {
  width: 1px;
  top: 0;
  bottom: 0;
}

/* Entity Resize Handles (for future enhancement) */
.entity.selected .resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.8;
}

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

/* Canvas Context Menu (for future enhancement) */
.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  z-index: 1000;
  min-width: 120px;
}

.context-menu button {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  border-radius: calc(var(--border-radius) - 1px);
}

.context-menu button:hover {
  background-color: var(--color-bg-light);
}

/* Selection Box (for multi-select in future) */
.selection-box {
  position: absolute;
  border: 1px dashed var(--color-primary);
  background-color: rgba(51, 255, 255, 0.1);
  pointer-events: none;
  z-index: 30;
}

/* Entity Animation States */
.entity.creating {
  animation: entityCreate 0.3s ease-out;
}

.entity.deleting {
  animation: entityDelete 0.2s ease-in forwards;
}

@keyframes entityCreate {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes entityDelete {
  to {
    transform: scale(0);
    opacity: 0;
  }
}

/* Accessibility */
.entity:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.entity[aria-selected="true"] {
  border-color: var(--color-primary);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .room {
    border-width: 3px;
  }
  
  .object {
    border-width: 3px;
  }
  
  .entity-label {
    font-weight: var(--font-weight-bold);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .entity,
  .room,
  .object {
    transition: none;
  }
  
  .entity.creating,
  .entity.deleting {
    animation: none;
  }
}

/* Drag and Drop Enhancements */
.canvas.drag-active {
  cursor: grabbing;
}

.entity.snap-target {
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.6);
  animation: snapPulse 0.5s ease-in-out infinite alternate;
}

.entity.snap-target.snap-left::before,
.entity.snap-target.snap-right::before,
.entity.snap-target.snap-top::before,
.entity.snap-target.snap-bottom::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 193, 7, 0.8);
  z-index: 1000;
}

.entity.snap-target.snap-left::before {
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
}

.entity.snap-target.snap-right::before {
  right: -2px;
  top: 0;
  width: 2px;
  height: 100%;
}

.entity.snap-target.snap-top::before {
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
}

.entity.snap-target.snap-bottom::before {
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
}

@keyframes snapPulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Print Styles */
@media print {
  .canvas-container {
    overflow: visible;
    border: none;
  }
  
  .canvas {
    background-color: white;
  }
  
  .room,
  .object {
    box-shadow: none;
    border-color: black;
  }
  
  .snap-guide,
  .selection-box,
  .context-menu,
  .entity.snap-target::before {
    display: none;
  }
}