/* Cropper.js v2 — crop editor styling */

/* ── Dark immersive viewport ── */

.cropper-container {
  height: min(50vh, 400px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--neutral-900);
  border-radius: var(--radius-lg, 0.5rem);
}

.dark .cropper-container {
  background: var(--neutral-950);
}

/* Cropper.js v2 Web Components must fill the container */
.cropper-container cropper-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Canvas background matches container (no flash on init) */
cropper-canvas {
  background: var(--neutral-900);
}

.dark cropper-canvas {
  background: var(--neutral-950);
}

/*
 * Touch/pointer interaction —
 * Cropper.js v2 relies on pointer events for drag, resize, and pinch-zoom.
 * touch-action:none prevents the browser from intercepting these gestures
 * for scrolling or native zoom.
 */
cropper-canvas,
cropper-handle,
cropper-selection,
cropper-shade {
  touch-action: none;
}

/* ── Circular crop overlay ── */

/* Selection clips to circle — export stays rectangular */
cropper-selection {
  border-radius: 50%;
  overflow: hidden;
}

/* Circular white outline */
cropper-selection[outlined] {
  outline: 2px solid white;
  outline-offset: -1px;
}

/* Move handle matches circular shape */
cropper-selection > cropper-handle[action="move"] {
  border-radius: 50%;
}

/* Dimmed overlay outside selection */
cropper-shade {
  background: rgba(0, 0, 0, 0.5);
}

/* Corner resize handles — visible grab points at bounding box corners */
cropper-selection cropper-handle[action$="-resize"] {
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--color-interactive, #0284c7);
  border-radius: 50%;
}

/* Hide the original img once Cropper.js takes over */
.cropper-container img[data-cropper-image] {
  display: none;
}

/* ── Dimension badge ── */

.crop-dimension-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.75rem;
  line-height: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  pointer-events: none;
  z-index: 10;
}

/* Two-column layout for crop view is handled by Tailwind utilities
   on the elements in _identity_picker.html.erb:
   grid gap-6 sm:grid-cols-[1fr_300px] on the grid wrapper
   sm:col-span-full on the footer */