/* ---------- Image crop dialog (Components/Shared/ImageCropDialog.razor) ----------

   Shared by every crop in the app — the 1:1 SKU photo and user avatar, and the 23:8 tenant logo.
   The dialog itself doesn't know which: it publishes the frame's intrinsic width and aspect ratio
   as custom properties on .image-crop-root, and the rules below size the stage from those. The
   canvas keeps its intrinsic (backing-store) size while its CSS box shrinks on narrow screens;
   image-crop.js converts pointer coordinates between the two so dragging tracks the finger at any
   rendered size. */

.image-crop-root {
    /* Fallbacks keep the stage sane if the component is ever rendered without the inline vars. */
    --image-crop-frame-width: 300px;
    --image-crop-frame-aspect: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    outline: none;
}

.image-crop-stage {
    position: relative;
    width: min(var(--image-crop-frame-width), 100%);
    aspect-ratio: var(--image-crop-frame-aspect);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--tm-bg);
    border: 1px solid var(--tm-border);
}

.image-crop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.image-crop-canvas:active {
    cursor: grabbing;
}

.image-crop-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tm-bg);
}

.image-crop-zoom {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(var(--image-crop-frame-width), 100%);
}

.image-crop-zoom .mud-slider {
    flex: 1 1 auto;
}