/*
 * Cropper.js Electric Pitch theme overrides.
 *
 * Cropper.js ships an unstyled-vendor look (light backdrop, black handles)
 * that clashes hard with the dark Electric Pitch system. These overrides
 * map Cropper's classes to project tokens so the editor reads as
 * "in-design" — no jarring vendor-CSS strip in the middle of the upload
 * flow. Loaded AFTER cropper.min.css so specificity wins.
 *
 * Tokens referenced live in app/assets/tailwind/application.css under
 * the @theme block. If a token is renamed, update here.
 */

/* The dim backdrop behind the crop area: pitch surface, not Cropper's
   default 50% gray (which reads washed-out on a dark page). */
.cropper-modal {
  background-color: var(--color-pitch-dark, #0D0D0F);
  opacity: 0.85;
}

/* Crop-frame outline. Electric lime so the active region pops. */
.cropper-view-box {
  outline: 2px solid var(--color-electric-lime, #CCFF00);
  outline-color: var(--color-electric-lime, #CCFF00);
}

/* Dashed centering grid. Subtle so it doesn't fight with the photo. */
.cropper-dashed {
  border-color: rgba(204, 255, 0, 0.4);
}

.cropper-center::before,
.cropper-center::after {
  background-color: rgba(204, 255, 0, 0.6);
}

/* Drag handles at the corners + edges of the crop frame. */
.cropper-line,
.cropper-point {
  background-color: var(--color-electric-lime, #CCFF00);
  opacity: 0.85;
}

.cropper-point.point-se,
.cropper-point.point-sw,
.cropper-point.point-ne,
.cropper-point.point-nw {
  background-color: var(--color-electric-lime, #CCFF00);
}

/* Hide the bottom-right resize triangle texture (it reads as a
   second-class affordance against our handles). */
.cropper-point.point-se::before {
  background-color: var(--color-electric-lime, #CCFF00);
}

/* Container background — when the cropped image has transparent areas
   (rare but possible), show pitch surface instead of stark white. */
.cropper-container {
  background-color: var(--color-pitch-surface, #1A1A1F);
}

/* Mobile: prevent browser pinch-zoom from fighting Cropper's gestures. */
.cropper-container,
.cropper-canvas,
.cropper-crop-box {
  touch-action: none;
}

/* Editor wrapper — no inline style= needed; this class is applied in
   the form partial so Tailwind JIT sees it at compile time. */
.cropper-editor-wrapper {
  touch-action: none;
}