/*
 * Shared confirmation modal for the PlayActive admin panels.
 *
 * Moved here from _members_roster_panel.html, which is where it was first
 * written. Three panels now need the same dialog (roster, membership state,
 * policy finalisation), and a third inline copy is the point at which "each
 * panel carries its own styles" stops paying for itself — see the comment at
 * the top of admin_confirm_modal.js.
 *
 * Colours come from Wagtail's theme tokens with the light-theme value as the
 * fallback, so the dialog follows the admin into dark mode. Every rule that
 * sets a background also sets a colour: setting one without the other is what
 * made the policy finalisation panel unreadable in dark mode (1.02:1 contrast),
 * and a modal is the worst place for that to happen twice.
 */

.pa-confirm {
    border: none;
    border-radius: 0.5rem;
    padding: 0;
    width: calc(100% - 2rem);
    max-width: 30rem;
    background: var(--w-color-surface-page, #fff);
    color: var(--w-color-text-context, #1f1c18);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
}

.pa-confirm::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.pa-confirm__box { padding: 1.5rem; }

.pa-confirm__title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* pre-line so a "\n\n" in confirmation copy renders as a paragraph break —
   several of the messages are two sentences with a deliberate gap. */
.pa-confirm__msg {
    margin: 0 0 1.5rem;
    line-height: 1.5;
    white-space: pre-line;
}

.pa-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.pa-confirm__actions .button { margin: 0; }

/* ── Loading state ──────────────────────────────────────────────────────
 *
 * The confirmed action POSTs a form and navigates, so there is a gap —
 * sometimes a second or more on a slow connection — between the click and the
 * new page painting. Without this the dialog just sits there looking ignored
 * and the obvious move is to click Confirm again, which posts twice.
 *
 * The spinner itself is Wagtail's own: `button-longrunning` plus a
 * `use[href="#icon-spinner"]`, which core's CSS already animates. Reusing it
 * means the loader looks like every other long-running admin button rather than
 * a bespoke one, and there is no keyframe of ours to drift from theirs.
 */

.pa-confirm[data-pa-busy="1"] .pa-confirm__cancel {
    visibility: hidden;
}

.pa-confirm__status {
    margin-inline-end: auto;
    font-size: 0.85rem;
    color: var(--w-color-text-meta, #5c5c5c);
}

/* Not `display: none`, so the status is announced to a screen reader the moment
   it is filled in rather than appearing as a new node. */
.pa-confirm__status:empty { visibility: hidden; }

/* Respect a reduced-motion preference: the spinner still appears and the
   buttons still disable, it simply does not rotate. */
@media (prefers-reduced-motion: reduce) {
    .pa-confirm use[href="#icon-spinner"] { animation: none; }
}