/* ============================================
   Confirm Dialog (global hx-confirm interceptor)
   One centered modal that replaces the native browser confirm()
   for every `hx-confirm` action. Chrome only — the message text and
   the request come from htmx; the accept/cancel buttons reuse the
   shared .btn classes so status color and dark mode come for free.
   Built and torn down by htmx-confirm.js.
   ============================================ */

.global-confirm-overlay {
    position: fixed;
    inset: 0;
    /* Above drawer and modal panels (--z-modal), below toasts. A confirm asks
       about the thing on screen, so it can never sit behind it — at the backdrop
       rung the roster drawer painted right over this one. */
    z-index: var(--z-overlay-top);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.global-confirm-overlay.is-open {
    opacity: 1;
}

.global-confirm-dialog {
    width: 100%;
    max-width: 25rem;
    padding: var(--spacing-lg);
    background: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    transform: translateY(0.5rem);
    transition: transform 0.12s ease;
}

.global-confirm-overlay.is-open .global-confirm-dialog {
    transform: translateY(0);
}

/* Optional heading, for confirms opened from JS with their own copy. */
.global-confirm-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    color: var(--color-text);
}

.global-confirm-message {
    margin: 0 0 var(--spacing-lg);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}

.global-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* ── Phone (<768px) ─────────────────────────────────────────────────────────
   The confirm sits at the bottom of the screen where the thumb is; buttons
   stack with the accept on top (column-reverse keeps the DOM order cancel →
   accept for the focus ring). Stays LAST in the file. */
@media (max-width: 767.98px) {
    .global-confirm-overlay {
        align-items: flex-end;
    }

    .global-confirm-dialog {
        width: 100%;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-none) var(--radius-none);
        padding-bottom: calc(var(--safe-bottom) + var(--spacing-md));
    }

    .global-confirm-actions {
        flex-direction: column-reverse;
    }

    .global-confirm-actions .btn {
        width: 100%;
        min-height: var(--control-h-touch);
    }
}