/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: public/css/components/avatar-crop.css
 * @TITLE: SYNATHRA - Avatar crop modal
 * @DESCRIPTION: Styles for the drag-and-zoom square-crop widget shown before an
 *               avatar upload (T-E3). No inline styles in the JS that builds it.
 * @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.1
 * - File Created | Ary van der Pijl | 2026-08-29 | ATH-REQ-S11 | T-E3: avatar crop/resize modal. Square viewport, drag to pan, range slider to zoom; emits a source-pixel crop rect the /users/avatar endpoint already accepts. |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

.avatar-crop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.avatar-crop__stage {
    position: relative;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-2, #f0f0f0);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .04) inset;
    touch-action: none;
    cursor: grab;
}

.avatar-crop__stage:active {
    cursor: grabbing;
}

.avatar-crop__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.avatar-crop__stage::after {
    /* thin ring so the circular crop boundary is visible against pale images */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    pointer-events: none;
}

.avatar-crop__controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 256px;
}

.avatar-crop__zoom {
    flex: 1;
}

.avatar-crop__icon {
    font-size: 18px;
    color: var(--color-text-muted, #888);
}

.avatar-crop__hint {
    font-size: 11px;
    color: var(--color-text-muted, #888);
    text-align: center;
}