/*
 * Monstersgate dialogs , the brand skin for every SweetAlert2 popup and toast.
 *
 * public/js/mg-swal.js tags each popup with .mg-swal plus one tone
 * (--brand / --ok / --warn / --danger / --info) and swaps the stock animated
 * icons for flat glyphs. Everything visual lives here.
 *
 * Rules (from .agent/Ui-Ux-Guidelines.md):
 *  - Colour is a flat block, never a gradient: a tone band across the top and
 *    a tone tile behind the icon. Same tones as the .mg-toast system.
 *  - The confirm button is the only high-contrast element. Cancel is quiet.
 *  - Destructive confirms are red, so "Delete" never looks like "Save".
 *  - Visible focus ring on every control; reduced motion respected.
 */

.mg-swal,
.swal2-container:has(.mg-swal) {
    --mgs-brand: #4242d6;    --mgs-brand-bg: #eceafd;  --mgs-brand-deep: #3434b8;
    --mgs-ok: #2c7a51;       --mgs-ok-bg: #e6f4ec;
    --mgs-warn: #a5641a;     --mgs-warn-bg: #fbeede;
    --mgs-danger: #b3392a;   --mgs-danger-bg: #fbeae6;  --mgs-danger-deep: #962f22;
    --mgs-info: #275ea5;     --mgs-info-bg: #e9f1fb;
    --mgs-ink: #1c1c6e;
    --mgs-text: #4a4766;
    --mgs-muted: #7c7893;
    --mgs-line: #e7e5f2;
    --mgs-surface: #ffffff;
    --mgs-field: #f8f7fd;
    --mgs-enter: cubic-bezier(.16, 1, .3, 1);
}

/* Tone per dialog: the band, the icon tile and the progress bar all read from these two. */
.mg-swal                { --mgs-tone: var(--mgs-brand);  --mgs-tone-bg: var(--mgs-brand-bg); }
.mg-swal.mg-swal--ok     { --mgs-tone: var(--mgs-ok);     --mgs-tone-bg: var(--mgs-ok-bg); }
.mg-swal.mg-swal--warn   { --mgs-tone: var(--mgs-warn);   --mgs-tone-bg: var(--mgs-warn-bg); }
.mg-swal.mg-swal--danger { --mgs-tone: var(--mgs-danger); --mgs-tone-bg: var(--mgs-danger-bg); }
.mg-swal.mg-swal--info   { --mgs-tone: var(--mgs-info);   --mgs-tone-bg: var(--mgs-info-bg); }

/* ---------- Backdrop ---------- */

.swal2-container.swal2-backdrop-show:has(.mg-swal:not(.swal2-toast)) {
    background: rgba(22, 20, 58, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ---------- Dialog ---------- */

.swal2-popup.mg-swal:not(.swal2-toast) {
    position: relative;
    width: min(440px, calc(100vw - 32px));
    padding: 40px 28px 28px;
    border-radius: 20px;
    background: var(--mgs-surface);
    box-shadow: 0 24px 60px -20px rgba(22, 20, 58, .45);
    font-family: inherit;
    overflow: hidden;
}

/* The tone band: a flat block of colour, the dialog's status at a glance. */
.swal2-popup.mg-swal:not(.swal2-toast)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--mgs-tone);
}

.mg-swal .swal2-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border: 0;
    border-radius: 18px;
    background: var(--mgs-tone-bg);
    color: var(--mgs-tone);
}
.mg-swal .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 1;
}
.mg-swal .mg-swal__glyph { width: 32px; height: 32px; display: block; }

.mg-swal .swal2-title {
    padding: 0;
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--mgs-ink);
}

.mg-swal .swal2-html-container {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
    color: var(--mgs-text);
    overflow-wrap: anywhere;
}
.mg-swal .swal2-html-container ul,
.mg-swal .swal2-html-container ol { text-align: start; margin: 8px 0 0; padding-inline-start: 20px; }
.mg-swal .swal2-html-container ul { list-style: disc; }
.mg-swal .swal2-html-container ol { list-style: decimal; }
.mg-swal .swal2-html-container li { display: list-item; }
.mg-swal .swal2-html-container li + li { margin-top: 4px; }

.mg-swal .swal2-footer {
    margin: 20px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--mgs-line);
    font-size: 13px;
    color: var(--mgs-muted);
}

/* ---------- Fields ---------- */

.mg-swal .swal2-input,
.mg-swal .swal2-textarea,
.mg-swal .swal2-select,
.mg-swal .swal2-file {
    width: 100%;
    max-width: none;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1.5px solid var(--mgs-line);
    border-radius: 12px;
    background: var(--mgs-field);
    box-shadow: none;
    font: inherit;
    font-size: 15px;
    color: var(--mgs-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mg-swal .swal2-textarea { min-height: 110px; resize: vertical; }
.mg-swal .swal2-input:focus,
.mg-swal .swal2-textarea:focus,
.mg-swal .swal2-select:focus {
    outline: none;
    border-color: var(--mgs-brand);
    background: var(--mgs-surface);
    box-shadow: 0 0 0 4px var(--mgs-brand-bg);
}
.mg-swal .swal2-input.swal2-inputerror,
.mg-swal .swal2-textarea.swal2-inputerror {
    border-color: var(--mgs-danger) !important;
    box-shadow: 0 0 0 4px var(--mgs-danger-bg) !important;
}

/* The error sits right under the field, in the danger tone, never as a grey strip. */
.mg-swal .swal2-validation-message {
    justify-content: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mgs-danger-bg);
    color: var(--mgs-danger);
    font-size: 13.5px;
    font-weight: 600;
    text-align: start;
}
.mg-swal .swal2-validation-message::before {
    content: "!";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6px;
    background: var(--mgs-danger);
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    min-width: 0;
}

/* ---------- Buttons ---------- */

.mg-swal .swal2-actions {
    width: 100%;
    margin: 26px 0 0;
    padding: 0;
    gap: 10px;
    flex-wrap: nowrap;
}
.mg-swal.mg-swal--single .swal2-actions { justify-content: center; }

.mg-swal .mg-swal__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.mg-swal.mg-swal--single .mg-swal__btn { flex: 0 1 220px; }
.mg-swal .mg-swal__btn:active { transform: translateY(1px); }
.mg-swal .mg-swal__btn:focus-visible {
    outline: 3px solid var(--mgs-brand);
    outline-offset: 2px;
}
.mg-swal .mg-swal__btn[disabled] { opacity: .55; cursor: not-allowed; }

.mg-swal .mg-swal__btn--primary { background: var(--mgs-brand); color: #fff; }
.mg-swal .mg-swal__btn--primary:hover { background: var(--mgs-brand-deep); }

.mg-swal .mg-swal__btn--danger { background: var(--mgs-danger); color: #fff; }
.mg-swal .mg-swal__btn--danger:hover { background: var(--mgs-danger-deep); }
.mg-swal .mg-swal__btn--danger:focus-visible { outline-color: var(--mgs-danger); }

.mg-swal .mg-swal__btn--ghost { background: #f1f0f8; color: var(--mgs-text); }
.mg-swal .mg-swal__btn--ghost:hover { background: #e7e5f2; color: var(--mgs-ink); }

.mg-swal .mg-swal__btn--danger-ghost { background: var(--mgs-danger-bg); color: var(--mgs-danger); }
.mg-swal .mg-swal__btn--danger-ghost:hover { background: #f6d9d3; }

.mg-swal .swal2-loader {
    width: 30px;
    height: 30px;
    margin: 8px auto;
    border-width: 3px;
    border-color: var(--mgs-brand) transparent var(--mgs-brand) transparent;
}

/* ---------- Close + timer ---------- */

.mg-swal .swal2-close {
    top: 14px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--mgs-muted);
    font-size: 26px;
    transition: background .15s ease, color .15s ease;
}
.mg-swal .swal2-close:hover { background: #f1f0f8; color: var(--mgs-ink); }
.mg-swal .swal2-close:focus-visible { outline: 3px solid var(--mgs-brand); outline-offset: 2px; box-shadow: none; }

.mg-swal .swal2-timer-progress-bar-container { border-radius: 0 0 20px 20px; }
.mg-swal .swal2-timer-progress-bar { height: 4px; background: var(--mgs-tone); opacity: .9; }

/* ---------- Toasts: same card as .mg-toast ---------- */

.swal2-popup.mg-swal.swal2-toast {
    --mgs-stripe: 4px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    width: min(380px, calc(100vw - 32px));
    padding: 14px 16px;
    padding-inline-start: calc(16px + var(--mgs-stripe));
    border: 1px solid var(--mgs-line);
    border-radius: 14px;
    background: var(--mgs-surface);
    box-shadow: 0 12px 32px -14px rgba(22, 20, 58, .35);
    font-family: inherit;
    overflow: hidden;
}
.swal2-popup.mg-swal.swal2-toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--mgs-stripe);
    background: var(--mgs-tone);
}
.mg-swal.swal2-toast .swal2-icon {
    grid-column: 1;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    border-radius: 10px;
}
.mg-swal.swal2-toast .mg-swal__glyph { width: 20px; height: 20px; }
.mg-swal.swal2-toast .swal2-title {
    grid-column: 2;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: start;
}
.mg-swal.swal2-toast .swal2-html-container {
    grid-column: 2;
    margin: 2px 0 0;
    font-size: 13.5px;
    text-align: start;
}
.mg-swal.swal2-toast .swal2-actions { grid-column: 1 / -1; margin-top: 10px; }
.mg-swal.swal2-toast .swal2-close { position: static; grid-column: 3; grid-row: 1; width: 30px; height: 30px; font-size: 20px; }
.mg-swal.swal2-toast .swal2-timer-progress-bar { height: 3px; }

/* ---------- Motion ---------- */

.mg-swal.mg-swal-in { animation: mg-swal-in .24s var(--mgs-enter) both; }
.mg-swal.mg-swal-out { animation: mg-swal-out .14s ease-in both; }
.mg-swal.mg-swal-in .swal2-icon { animation: mg-swal-icon .36s var(--mgs-enter) .06s both; }
.mg-swal.swal2-toast.mg-swal-in { animation-name: mg-swal-toast-in; }
.mg-swal.swal2-toast.mg-swal-out { animation-name: mg-swal-toast-out; }

@keyframes mg-swal-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mg-swal-out { to { opacity: 0; transform: scale(.97); } }
@keyframes mg-swal-icon { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes mg-swal-toast-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mg-swal-toast-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
    .mg-swal.mg-swal-in,
    .mg-swal.mg-swal-out,
    .mg-swal.mg-swal-in .swal2-icon { animation: none; }
}

/* ---------- Phones: buttons stack, primary on top, thumb-sized ---------- */

@media (max-width: 520px) {
    .swal2-popup.mg-swal:not(.swal2-toast) { padding: 36px 20px 20px; border-radius: 18px; }
    .mg-swal:not(.swal2-toast) .swal2-title { font-size: 19px; }
    .mg-swal:not(.swal2-toast) .swal2-actions { flex-direction: column; }
    .mg-swal:not(.swal2-toast) .mg-swal__btn,
    .mg-swal.mg-swal--single:not(.swal2-toast) .mg-swal__btn { flex: 0 0 auto; width: 100%; min-height: 48px; }
    .mg-swal:not(.swal2-toast) .mg-swal__btn--primary,
    .mg-swal:not(.swal2-toast) .mg-swal__btn--danger { order: -1; }
}