/* ==========================================================================
   Drawing Canvas Styles
   Kid-Friendly Tablet & Desktop Drawing Canvas
   ========================================================================== */

.drawing-canvas-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-sm);
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   Canvas Toolbar
   -------------------------------------------------------------------------- */
.canvas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  box-shadow: var(--shadow-sm);
  gap: var(--space-xs);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  border: 2px solid transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toolbar-btn:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
  border-color: var(--color-primary-light);
}

.toolbar-btn.active {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}

.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pen Size Dots */
.pen-size-dot {
  background-color: currentColor;
  border-radius: 50%;
}
.pen-size-sm { width: 4px; height: 4px; }
.pen-size-md { width: 8px; height: 8px; }
.pen-size-lg { width: 14px; height: 14px; }

/* Color Swatches Palette */
.color-palette {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.color-swatch:hover {
  transform: scale(1.2);
}

.color-swatch.active {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--color-primary);
}

/* --------------------------------------------------------------------------
   Canvas Container
   -------------------------------------------------------------------------- */
.canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  background-color: #FFFFFF;
  border: 3px dashed var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.drawing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none; /* Prevents scroll interference while drawing */
  cursor: crosshair;
}

.canvas-template-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.25;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Clear Confirmation Modal
   -------------------------------------------------------------------------- */
.canvas-confirm-modal {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 20;
}

.canvas-confirm-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 300px;
}

.canvas-confirm-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

@media (max-width: 767px) {
  .canvas-toolbar {
    padding: 4px;
  }
  .color-swatch {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
}