/* Image cropper (#607 person avatar circle, #610 dog profile-chip rounded square)
   — mask + live preview styling for the vendored Cropper.js DOM. Cropper injects
   its markup dynamically, so these rules live in a plain global stylesheet (scoped
   Razor CSS / ::deep cannot reach it). All rules are namespaced under
   .k9-avatar-cropper so nothing else is affected. The default is the circle; the
   .k9-cropper-square modifier (more specific, so it wins when present) rounds the
   corners into a square for the dog chip without touching the person path. */

.k9-avatar-cropper {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

/* The cropping window is square; the circular overlay communicates the final
   shape while the user still drags/zooms the full rectangular image beneath. */
.k9-avatar-cropper .cropper-container {
    margin-inline: auto;
}

.k9-avatar-cropper .cropper-view-box,
.k9-avatar-cropper .cropper-face {
    border-radius: 50%;
}

/* Rounded-square mask (#610 dog chip). Higher specificity (.k9-avatar-cropper +
   .k9-cropper-square) than the circle default, so it wins only when the modifier is
   present; the person (circle) path is untouched. */
.k9-avatar-cropper.k9-cropper-square .cropper-view-box,
.k9-avatar-cropper.k9-cropper-square .cropper-face {
    border-radius: 16%;
}

.k9-avatar-cropper .cropper-view-box {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -1px;
}

/* The bounded image the cropper initialises on — capped so a large photo does
   not blow out the dialog before Cropper measures it. */
.k9-avatar-cropper-image {
    display: block;
    max-width: 100%;
    /* Cropper replaces this element; height keeps layout stable pre-init. */
    max-height: 60vh;
}

/* Live preview circles (Cropper mirrors the crop into these). */
.k9-avatar-cropper-preview {
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color, #ced4da);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    flex: 0 0 auto;
}

/* Rounded-square preview for the dog chip (#610). */
.k9-avatar-cropper-preview.k9-cropper-square {
    border-radius: 16%;
}

.k9-avatar-cropper-preview-lg {
    width: 96px;
    height: 96px;
}

.k9-avatar-cropper-preview-sm {
    width: 40px;
    height: 40px;
}