/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: avatar-cropper.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Styles for the reusable avatar crop-on-upload modal (components/avatar-cropper.js) - drag-to-reposition stage, circular crop guide, zoom slider.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-18 | Avatar Management P2 (ATH_PLATFORM_REQUIREMENTS.md section 1, "Implement avatar cropping and resizing on uploads"). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

.avatar-cropper-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: grab;
  touch-action: none;
}

.avatar-cropper-stage.is-dragging {
  cursor: grabbing;
}

.avatar-cropper-stage img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: top left;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-cropper-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}