/* ── App.confirm / App.alert ───────────────────────────────────────────────────
   Styling for the native <dialog> in wwwroot/js/app-dialog.js.

   The rule that matters: NO margin, inset, or width/height goes on the <dialog> element in a way
   that fights the UA's `inset: 0; margin: auto` centring — here the dialog deliberately takes the
   whole viewport and the inner .app-dialog__wrap does the centring with flex. Putting a margin on
   <dialog> instead drops the box into the top-right corner on an RTL page.

   Colours come from the site tokens in site.css, so the dialog follows the theme toggle.
   ────────────────────────────────────────────────────────────────────────────── */

.app-dialog {
    /* Fill the viewport; the wrapper centres. Zero margin is correct HERE precisely because the
       element is no longer the box being centred. */
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.app-dialog::backdrop {
    background: rgba(15, 18, 30, 0.55);
    backdrop-filter: blur(2px);
}

.app-dialog__wrap {
    display: flex;
    align-items: center;      /* vertical centre */
    justify-content: center;  /* horizontal centre */
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.app-dialog__box {
    width: 100%;
    max-width: 30rem;
    background: var(--site-card-bg, #fff);
    color: var(--site-text, #1e2234);
    border: 1px solid var(--site-border, #e2e6f0);
    border-radius: 1rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
    padding: 1.5rem;
    text-align: right;
}

.app-dialog__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.app-dialog__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.app-dialog--danger  .app-dialog__icon { color: #ef4444; }
.app-dialog--primary .app-dialog__icon { color: #4f46e5; }
.app-dialog--info    .app-dialog__icon { color: #3b82f6; }

.app-dialog__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.app-dialog__message {
    margin: 0 0 1.35rem;
    line-height: 1.9;
    color: var(--site-text-muted, #6b7492);
    white-space: pre-line;
}

/* Side-by-side buttons share one vertical centre, and neither is large. */
.app-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.app-dialog__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (prefers-reduced-motion: no-preference) {
    .app-dialog[open] .app-dialog__box {
        animation: app-dialog-in 0.16s ease-out;
    }
}

@keyframes app-dialog-in {
    from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }
    to   { opacity: 1; transform: none; }
}