/**
 * ucbDialog — customer-facing confirm/notify dialog styling.
 * Restyle the whole site's front-end dialogs here (see assets/js/ucb-dialog.js).
 */
.ucb-dialog {
    background: #fff;
    max-width: 440px;
    width: 92%;
    margin: 0 auto;
    /* Roomier on a desktop, tighter on a phone: 1.6em of padding on each side
       of a 414px screen spends 15% of the width on whitespace. */
    padding: clamp(1em, 4vw, 1.6em) clamp(1em, 4vw, 1.6em) clamp(0.9em, 3.5vw, 1.35em);
    border-radius: 8px;
    position: relative;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
}

/* Wide variant for ucbDialog.custom() bodies that need room — rich-text
   editors, term pickers. */
.ucb-dialog--wide {
    max-width: 720px;
}

/* Caller-built body area for ucbDialog.custom(). The bottom margin has to
   clear the action row: with 4px, a body ending in a tinted block (the group
   panel's refused rows) butts straight into Cancel/Admit and reads as one
   unit. */
.ucb-dialog__body {
    margin: 12px 0 18px;
    text-align: left;
    /* ⚠ The BODY scrolls, not the page. A group panel for an order with
       several codes ran taller than a phone screen, which pushed
       Cancel/Admit off the bottom — the two controls that end the
       interaction. Capping the body keeps them on screen at any length.

       The cap is now WINDOW-derived rather than a flat 460px. That fixed
       number was the whole reason a short form scrolled on a tall screen:
       at 900px of viewport the body stopped at 460px and put a scrollbar
       inside a dialog with room to spare. `100vh - 200px` reserves the
       title, the action row and the dialog's own padding, so the body grows
       to whatever the window actually allows and scrolls only when it
       genuinely cannot fit.

       max(…) keeps the old value as a FLOOR: on a very short window
       (100vh - 200px) would be tighter than the original 58vh, and this
       change must never make an existing dialog scroll sooner than it did.

       ⚠ The reserve is 240px and the second declaration uses `svh`, both for
       the phone case this cap exists for. `100vh` on iOS Safari is the LARGE
       viewport — the height with the URL bar hidden — so sizing to it can put
       the action row under the browser chrome, which is the original incident
       (Cancel/Admit pushed off a phone screen at the door). `svh` is the small
       viewport, the conservative one. It is declared SEPARATELY rather than
       folded into the line above because a browser without `svh` must fall
       back to the vh line: inside one max() an unsupported unit invalidates
       the whole declaration and the cap would vanish entirely.

       240px is what sits outside the body on a 375px screen: the dialog's
       clamp() padding top and bottom, a title that wraps to two or three lines
       once a person's name is in it, the body's own 12px/18px margins and the
       action row. */
    max-height: max(min(58vh, 460px), calc(100vh - 240px));
    max-height: max(min(58svh, 460px), calc(100svh - 240px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ucb-dialog__title {
    margin: 0 0 0.5em;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 700;
}

.ucb-dialog__message {
    margin: 0 0 1.4em;
    color: #333;
    line-height: 1.45;
    text-wrap: pretty; /* avoid single-word orphans on the last line (modern browsers) */
    /* Messages are set via textContent (never innerHTML — see ucb-dialog.js),
       so a caller's only way to break a line is a newline in the string. The
       default `normal` collapsed those to spaces, running the calendar's
       conflict list into its question ("…5:15 PM Offer this slot anyway?").
       `pre-line` honors newlines and still wraps + collapses runs of spaces,
       so single-line callers are unaffected. */
    white-space: pre-line;
}

/* Prompt field (input / textarea) */
.ucb-dialog__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1em;
    padding: 0.6em 0.7em;
    /* #767676, not #9a9aa3: this is a real input border and needs 3:1
       against the white dialog card (the old value was only 2.79:1 —
       WCAG audit 2026-07). */
    border: 1px solid #767676;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.4;
    color: #1f1f24;
    background: #fff;
}
/* The7's main.min.css styles form controls at real specificity and repaints
   this field's text to a mid-grey (#8b8d94), which makes a PRE-FILLED value
   read as placeholder text — a prompt opened with a suggested value looks
   empty. Doubled class + wrapper scope to out-specify the theme without
   !important (same approach the report chrome uses). Affects every
   ucbDialog.prompt on a The7 page, not just one caller. */
.ucb-dialog .ucb-dialog__input.ucb-dialog__input {
    color: #1f1f24;
    background: #fff;
}
.ucb-dialog .ucb-dialog__input.ucb-dialog__input::placeholder {
    color: #6b6b73;
    opacity: 1;
}
.ucb-dialog__textarea {
    resize: vertical;
    min-height: 4.5em;
}
.ucb-dialog__input:focus {
    outline: none;
    border-color: #a4281d;
    box-shadow: 0 0 0 3px rgba(164, 40, 29, 0.18);
}
/* WCAG 2.4.7 focus visibility (2026-07 audit): the box-shadow ring above is
   only ~1.36:1 against white, far short of a usable focus indicator, and
   this file (unlike shows-dashboard.css) has no blanket :focus-visible
   fallback — ucbDialog renders on customer-facing pages too, outside any
   #shows-dashboard wrapper. Restore a real outline for keyboard focus. */
.ucb-dialog__input:focus-visible {
    outline: 2px solid #a4281d;
    outline-offset: 2px;
}
.ucb-dialog__error {
    margin: -0.6em 0 1em;
    color: #a4281d;
    font-size: 0.85rem;
    font-weight: 600;
}

.ucb-dialog__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
}

.ucb-dialog__btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 0.65em 1.4em;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

/* Busy/progress-locked dialogs disable their buttons while a request
   runs (publish/unpublish, duplicate) — make the lock visible. */
.ucb-dialog__btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ucb-dialog__btn--cancel {
    background: #ebebf0;
    color: #1f1f24;
}

.ucb-dialog__btn--confirm {
    background: #a4281d; /* UCB brick red */
    color: #fff;
}

.ucb-dialog__btn--confirm:hover {
    filter: brightness(1.05);
}

/* danger is the same brick red today; kept as a hook for a distinct destructive
   treatment later without touching callers. */
.ucb-dialog__btn--confirm.ucb-dialog__btn--danger {
    background: #a4281d;
}

@media (max-width: 480px) {
    .ucb-dialog__actions {
        justify-content: stretch;
    }
    .ucb-dialog__btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ── Elementor-kit theme compat (Coldtowne) ─────────────────────────────
   On Elementor-based sites the active kit ships global rules that reach
   into the dialog: the body font is a serif (Vollkorn) that the dialog
   inherits, and `.elementor-kit-N button { background-color/font-family/
   color }` at (0,1,1) — plus a (0,2,1) :hover/:focus — outranks the
   single-class .ucb-dialog__btn--* rules above. Re-assert the dialog's
   own look at (0,3,1)+ specificity, scoped to kit-classed bodies so
   The7 sites (UCB) are untouched. Keep the values here in sync with the
   base rules above. (On the Shows Dashboard page the CSSOM shim in
   ucb-elementor-kit-compat.js also covers this; these rules make dialogs
   right on customer-facing pages too.) */
body[class*="elementor-kit-"] .ucb-dialog {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
body[class*="elementor-kit-"] .ucb-dialog .ucb-dialog__btn {
    font-family: inherit;
}
body[class*="elementor-kit-"] .ucb-dialog .ucb-dialog__btn--cancel {
    background: #ebebf0;
    color: #1f1f24;
}
body[class*="elementor-kit-"] .ucb-dialog .ucb-dialog__btn--confirm {
    background: #a4281d;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   TOASTS — ucbDialog.toast()
   Transient, non-blocking corner notifications. Replaces alertify's
   .success()/.error() toasts (CLAUDE.md convention 14).

   Not a Magnific popup: no overlay, no focus trap, no singleton. The host
   is created on demand by the JS, appended to <body>, and removed when the
   last toast leaves.
   ══════════════════════════════════════════════════════════════════════ */
.ucb-toast-host {
    position: fixed;
    z-index: 100000; /* above Magnific (1043) and the dashboard's own chrome */
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* The host spans a column of toasts; clicks must fall through the gaps
       to whatever is underneath. Each toast re-enables pointer events. */
    pointer-events: none;
    max-width: min(380px, calc(100vw - 48px));
}

.ucb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 12px 12px 14px;
    border-radius: 8px;
    border-left: 4px solid #2f7d32;
    background: #ffffff;
    color: #1f1f24;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    /* Enter/leave state. .is-in is added on the next frame so there is a
       start state to animate from; .is-leaving plays it backwards. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}
.ucb-toast.is-in      { opacity: 1; transform: none; }
.ucb-toast.is-leaving { opacity: 0; transform: translateY(8px); }

.ucb-toast--error   { border-left-color: #a4281d; }
.ucb-toast--info    { border-left-color: #2b6cb0; }
.ucb-toast--success { border-left-color: #2f7d32; }

/* pre-line so a \n in the message is a real break — same contract as
   .ucb-dialog__message (convention 14). */
.ucb-toast__msg {
    flex: 1 1 auto;
    white-space: pre-line;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ucb-toast__close {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    /* Explicit, not currentColor: The7 ships `button.button * { color:#fff }`
       at (0,1,2), and a glyph drawn with currentColor inside a themed button
       goes invisible on a light surface (convention 33). */
    color: #6b6b76;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    border-radius: 4px;
}
.ucb-toast__close:hover,
.ucb-toast__close:focus-visible {
    color: #1f1f24;
    background: rgba(0, 0, 0, .06);
}

@media (max-width: 480px) {
    .ucb-toast-host {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ucb-toast {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Elementor-kit compat, same reasoning as the dialog block above: the kit's
   global button + body-font rules reach into body-appended UI. Doubling the
   class beats `.elementor-kit-N button` (0,1,1) and its (0,2,1) hover
   without !important (convention 33). */
body[class*="elementor-kit-"] .ucb-toast {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
body[class*="elementor-kit-"] .ucb-toast .ucb-toast__close.ucb-toast__close {
    background: transparent;
    color: #6b6b76;
    font-family: inherit;
}
body[class*="elementor-kit-"] .ucb-toast .ucb-toast__close.ucb-toast__close:hover,
body[class*="elementor-kit-"] .ucb-toast .ucb-toast__close.ucb-toast__close:focus-visible {
    background: rgba(0, 0, 0, .06);
    color: #1f1f24;
}