/* ═══════════════════════════════════════════════════════════════════════════
   image-picker.css
   Styles for ImagePickerDialog, ImageCropZone (inline), ImageWidthPicker,
   the refactored ImageUploadWithCrop trigger button, and the generic
   JbfDialogShell layout used by every Radzen dialog body in the app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Generic Radzen dialog title - smaller, project-wide ────────────────── */

/* User wants compact dialog titles app-wide. Keeping this scoped to
   .rz-dialog-titlebar so it never bleeds outside Radzen dialog headers. */
.rz-dialog-titlebar .rz-dialog-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* ── JbfDialogShell ─────────────────────────────────────────────────────────
   Generic two-region dialog body: scrollable body + sticky footer.
   Use inside any Radzen dialog body so action buttons stay pinned at the
   bottom regardless of body content height.

   Sizing model: the dialog grows with content (callers should NOT set a fixed
   Height on the Radzen dialog) up to a body max-height of 70vh; beyond that
   the body scrolls and the footer stays attached.

   The :has() selector strips Radzen's default content padding ONLY when the
   shell is the direct child, so the shell owns body/footer padding itself.
   Other dialogs are untouched. */
.rz-dialog-content:has(> .jbf-dialog-shell) {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jbf-dialog-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jbf-dialog-shell-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.jbf-dialog-shell-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

/* ── JbfDialogShell FullScreen variant ──────────────────────────────────────
   Opt-in via <JbfDialogShell FullScreen="true">. Expands the dialog to occupy
   the available viewport so the body can host workspace layouts (left rail +
   tool pane, kanban, full-screen tag drilldown, etc.). The variant keys on a
   modifier class on the shell so the existing :has(> .jbf-dialog-shell)
   padding strip above still applies - no second :has rule needed.

   Sizing model: fill the dialog content box. Radzen dialogs in FullScreen
   mode should be opened with DialogService options that set width/height to
   ~100vw / ~100vh; we do not override Radzen positioning here so we don't
   break ones that opt out of the variant.

   Body is allowed to scroll inside whatever real estate Radzen gave us, with
   the body's own max-height taking precedence over the default 70vh cap. */
.jbf-dialog-shell-fullscreen {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.jbf-dialog-shell-fullscreen > .jbf-dialog-shell-body {
    max-height: none;
    height: 100%;
    padding: 0;
}

.jbf-dialog-shell-fullscreen > .jbf-dialog-shell-footer {
    /* Keep default footer chrome but allow callers to suppress with display:none on a wrapper. */
}

/* When the dialog content box hosts a FullScreen shell, let the shell own all
   sizing - Radzen's content padding is already stripped by the rule above. */
.rz-dialog-content:has(> .jbf-dialog-shell-fullscreen) {
    height: 100%;
    min-height: 0;
}

/* Mobile full-screen - at xs/sm tiers (anything below --bp-md = 768px) the
   dialog body fills the viewport so users get all the available real estate
   instead of a cramped 70vh sheet floating in the middle of the screen.
   Footer stays pinned to the actual viewport bottom; body scrolls between.
   The 767.98px literal stays in sync with --bp-md in site.css; CSS @media can't
   dereference custom properties. md+ behavior unchanged from desktop today. */
@media (max-width: 767.98px) {
    .rz-dialog:has(.jbf-dialog-shell) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .rz-dialog-content:has(> .jbf-dialog-shell) {
        flex: 1 1 auto;
        min-height: 0;
    }

    .jbf-dialog-shell {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .jbf-dialog-shell-body {
        max-height: none;       /* remove the 70vh cap so the body fills the screen */
        flex: 1 1 auto;
    }
}

/* ── ImagePickerDialog root ─────────────────────────────────────────────── */

.ipd-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    min-height: 180px;
}

/* ── Step 1: Gallery button ─────────────────────────────────────────────── */

.ipd-gallery-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1.5px solid var(--rz-primary, #7d5b81);
    background: var(--rz-primary-lighter, #f5eef6);
    color: var(--rz-primary, #7d5b81);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    line-height: 1.3;
}

.ipd-gallery-btn:hover {
    background: var(--rz-primary-light, #e8d9ea);
    box-shadow: 0 2px 8px rgba(125,91,129,.15);
}

/* ── Divider between gallery and upload ─────────────────────────────────── */

.ipd-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--cum-muted-foreground, #808c91);
    font-size: .8125rem;
}

.ipd-divider::before,
.ipd-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cum-border, #e2e8f0);
}

/* ── Step 2: Preview ────────────────────────────────────────────────────── */

.ipd-preview-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.ipd-preview-img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 1px 8px rgba(0,0,0,.10);
}

/* ── Alt text field ─────────────────────────────────────────────────────── */

.ipd-alt-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ipd-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cum-foreground, #1c2b33);
}

.ipd-label-hint {
    font-weight: 400;
    color: var(--cum-muted-foreground, #808c91);
    margin-left: .25rem;
}

.ipd-alt-input {
    width: 100%;
    padding: .45rem .65rem;
    border: 1.5px solid var(--cum-border, #e2e8f0);
    border-radius: 6px;
    font-size: .875rem;
    color: var(--cum-foreground, #1c2b33);
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

.ipd-alt-input:focus {
    border-color: var(--rz-primary, #7d5b81);
    box-shadow: 0 0 0 3px rgba(125,91,129,.12);
}

.ipd-input--error,
.ipd-input--error:focus {
    border-color: var(--jbf-red, #d80f3d);
    box-shadow: 0 0 0 3px rgba(216,15,61,.12);
}

.ipd-field-error {
    font-size: .75rem;
    color: var(--jbf-red, #d80f3d);
    margin-top: .15rem;
}

.ipd-label .required-star {
    color: var(--jbf-red, #d80f3d);
    margin-left: .15rem;
    font-weight: 700;
}

/* ── Dialog action buttons ──────────────────────────────────────────────── */

.ipd-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: .25rem;
}

.ipd-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, box-shadow .15s;
    border: none;
}

.ipd-btn--cancel {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}
.ipd-btn--cancel:hover { background: #e5e7eb; }

/* Delete-image action (edit mode only). Sits at the LEFT of the action row
   so it stays visually separated from the primary Update / Cancel cluster -
   prevents accidental clicks while still being immediately reachable. */
.ipd-btn--delete {
    margin-right: auto;
    background: #ffffff;
    color: var(--jbf-red, #d80f3d);
    border: 1px solid var(--jbf-red, #d80f3d);
}
.ipd-btn--delete:hover {
    background: var(--jbf-red, #d80f3d);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(216, 15, 61, .3);
}
.ipd-btn--delete:focus-visible {
    outline: 2px solid rgba(216, 15, 61, .45);
    outline-offset: 2px;
}

.ipd-btn--confirm {
    background: var(--rz-primary, #7d5b81);
    color: #fff;
    border: none;
}
/* Inverted hover: white background + primary text/border. Replaced the
   previous --rz-primary-dark fallback (#6a4d6e) which was retired app-wide
   - see the matching rule in event-landing.css. */
.ipd-btn--confirm:hover {
    background: #ffffff;
    color: var(--rz-primary, #7d5b81);
    border: 1px solid var(--rz-primary, #7d5b81);
    box-shadow: 0 2px 6px rgba(125,91,129,.3);
}

/* ── ImageWidthPicker ───────────────────────────────────────────────────── */

.ipw-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ipw-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cum-foreground, #1c2b33);
    white-space: nowrap;
    margin-right: .25rem;
}

.ipw-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .75rem;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1.4;
}

.ipw-chip:hover {
    border-color: var(--rz-primary, #7d5b81);
    color: var(--rz-primary, #7d5b81);
}

.ipw-chip--active {
    border-color: var(--rz-primary, #7d5b81) !important;
    background: var(--rz-primary, #7d5b81) !important;
    color: #fff !important;
}

.ipw-custom {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-left: .25rem;
}

.ipw-custom-input {
    width: 4.5rem;
    padding: .2rem .5rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    text-align: center;
    outline: none;
    transition: border-color .15s;
}

.ipw-custom-input:focus {
    border-color: var(--rz-primary, #7d5b81);
}

.ipw-custom-hint {
    font-size: .75rem;
    color: #9ca3af;
}

/* ── ImageUploadWithCrop - compact trigger button (no-image state) ──────── */

/*
 * The refactored IUWC renders a <button class="iuwc-upload-zone iuwc-upload-zone--trigger">
 * that opens the ImagePickerDialog on click. Since all the actual upload/crop
 * experience is now inside the dialog, this trigger only needs to communicate
 * "click to choose an image" - not replicate the full drop zone.
 *
 * We reset the inherited stacked/padded iuwc-upload-content and replace it
 * with a compact horizontal row that looks like a standard form control.
 */

.iuwc-upload-zone--trigger {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

/* Override the inner content box to be compact + horizontal */
.iuwc-upload-zone--trigger .iuwc-upload-content {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    padding: .55rem .9rem;
    border: 1.5px dashed var(--cum-border, #cbd5e0);
    border-radius: 8px;
    background: var(--cum-background, #fafafa);
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.iuwc-upload-zone--trigger:hover .iuwc-upload-content,
.iuwc-upload-zone--trigger:focus-visible .iuwc-upload-content {
    border-color: var(--rz-primary, #7d5b81);
    background: var(--rz-primary-lighter, #f5eef6);
    box-shadow: 0 0 0 3px rgba(125,91,129,.1);
    outline: none;
}

/* Smaller icon for the compact trigger */
.iuwc-upload-zone--trigger .iuwc-upload-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--rz-primary, #7d5b81);
    opacity: .8;
}

/* Main label - normal weight, inherits font size */
.iuwc-upload-zone--trigger .iuwc-upload-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--cum-foreground, #1c2b33);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hint text - subdued, right-aligned */
.iuwc-upload-zone--trigger .iuwc-upload-hint {
    font-size: .775rem;
    color: var(--cum-muted-foreground, #808c91);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Trigger "opening dialog" loading state ───────────────────────────── */

.iuwc-upload-zone--trigger:disabled,
.iuwc-upload-zone--trigger.iuwc-upload-zone--opening {
    cursor: progress;
    opacity: .85;
}

.iuwc-upload-zone--trigger.iuwc-upload-zone--opening .iuwc-upload-content {
    border-color: var(--rz-primary, #7d5b81);
    background: var(--rz-primary-lighter, #f5eef6);
}

/* Inline spinner used inside the trigger button while opening
   (override the default white spinner so it's visible on light backgrounds) */
.iuwc-spinner--trigger {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(125, 91, 129, 0.25);
    border-top-color: var(--rz-primary, #7d5b81);
    flex-shrink: 0;
}

/* ── Existing-image preview overlay during dialog open ────────────────── */

.iuwc-preview-wrap--opening {
    position: relative;
}

.iuwc-opening-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    z-index: 5;
}