/*
 * FireWatch theme for SweetAlert2 dialogs, loaded by base.html after the
 * library's own CSS so every Swal.fire() on the site shares one look.
 *
 * Buttons a page colours itself (confirmButtonColor / cancelButtonColor, e.g.
 * red for "Delete") carry an inline background-color; those keep their colour
 * and only get the shape. Buttons left at the library default get the theme.
 */

/* Dimmed, slightly blurred page behind the dialog */
body .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, 0.5) !important; backdrop-filter: blur(3px); }
/* ...but not behind toasts: a toast's container is a 360px-wide, full-height,
   click-through strip that SweetAlert keeps transparent. Dimming it showed up
   as a grey band down the right edge of the page. */
body .swal2-container:has(> .swal2-popup.swal2-toast),
body.swal2-toast-shown .swal2-container.swal2-backdrop-show { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Card */
body .swal2-popup {
    --swal-accent: #f97316;
    --swal-accent-soft: rgba(249, 115, 22, 0.12);
    position: relative; overflow: hidden;
    width: min(30em, calc(100vw - 32px));
    padding: 2.2em 1.8em 1.6em;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .swal2-popup.swal2-icon-success { --swal-accent: #22c55e; --swal-accent-soft: rgba(34, 197, 94, 0.12); }
body .swal2-popup.swal2-icon-error { --swal-accent: #ef4444; --swal-accent-soft: rgba(239, 68, 68, 0.12); }
body .swal2-popup.swal2-icon-warning { --swal-accent: #f59e0b; --swal-accent-soft: rgba(245, 158, 11, 0.14); }
body .swal2-popup.swal2-icon-info { --swal-accent: #3b82f6; --swal-accent-soft: rgba(59, 130, 246, 0.12); }
body .swal2-popup.swal2-icon-question { --swal-accent: #8b5cf6; --swal-accent-soft: rgba(139, 92, 246, 0.12); }

/* Colour band across the top and a soft glow behind the icon, in the
   dialog's type colour (green success, red error, amber warning…) */
body .swal2-popup::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: linear-gradient(90deg, var(--swal-accent), color-mix(in srgb, var(--swal-accent) 55%, #fff));
}
body .swal2-popup::after {
    content: ''; position: absolute; left: 50%; top: -90px; width: 260px; height: 220px; transform: translateX(-50%);
    background: radial-gradient(circle, var(--swal-accent-soft) 0%, transparent 70%); pointer-events: none;
}
body .swal2-popup > * { position: relative; z-index: 1; }
body .swal2-icon { margin: 0.6em auto 0.4em; border-width: 0.22em; box-shadow: 0 0 0 10px var(--swal-accent-soft); }

/* Text */
body .swal2-title { padding: 0.5em 0.4em 0.1em; font-size: 1.55em; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
body .swal2-html-container { margin: 0.6em 0.6em 0.2em; font-size: 1em; line-height: 1.55; color: #475569; }
body .swal2-validation-message { border-radius: 10px; background: #fef2f2; color: #b91c1c; }

/* Inputs inside dialogs */
body .swal2-input,
body .swal2-textarea,
body .swal2-select { border-radius: 12px; border: 2px solid #e2e8f0; box-shadow: none; }
body .swal2-input:focus,
body .swal2-textarea:focus,
body .swal2-select:focus { border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); }

/* Buttons */
body .swal2-actions { gap: 10px; margin-top: 1.4em; }
body .swal2-styled { margin: 0 !important; min-width: 7.5em; padding: 0.75em 1.8em !important; border-radius: 12px !important;
    font-size: 0.98em !important; font-weight: 700 !important; letter-spacing: 0.01em;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s !important; }
body .swal2-styled:hover { transform: translateY(-1px); filter: brightness(1.04); }
body .swal2-styled:focus,
body .swal2-styled:focus-visible { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25) !important; }
body .swal2-styled[style*="background-color"] { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); }

/* Library-default buttons → FireWatch colours */
body .swal2-styled.swal2-confirm:not([style*="background-color"]) {
    background: linear-gradient(135deg, #f4511e, #f97316) !important; color: #fff !important;
    box-shadow: 0 8px 20px rgba(244, 81, 30, 0.35);
}
body .swal2-popup.swal2-icon-success .swal2-styled.swal2-confirm:not([style*="background-color"]) {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}
body .swal2-popup.swal2-icon-error .swal2-styled.swal2-confirm:not([style*="background-color"]) {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
body .swal2-styled.swal2-cancel:not([style*="background-color"]),
body .swal2-styled.swal2-deny:not([style*="background-color"]) {
    background: #fff !important; color: #475569 !important; border: 2px solid #e2e8f0 !important;
}
body .swal2-styled.swal2-cancel:not([style*="background-color"]):hover,
body .swal2-styled.swal2-deny:not([style*="background-color"]):hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }

body .swal2-close { top: 10px; right: 10px; border-radius: 10px; color: #94a3b8; }
body .swal2-close:hover { background: #f1f5f9; color: #0f172a; }
body .swal2-footer { border-top-color: #f1f5f9; color: #64748b; }
body .swal2-timer-progress-bar { background: var(--swal-accent); opacity: 0.8; }
body .swal2-loader { border-color: #f97316 transparent #f97316 transparent; }

/* Toasts (Swal.fire({toast: true})) stay compact */
body .swal2-popup.swal2-toast { width: auto; max-width: min(380px, calc(100vw - 24px)); padding: 0.8em 1em; border-radius: 14px; }
body .swal2-popup.swal2-toast::after { display: none; }
body .swal2-popup.swal2-toast .swal2-icon { box-shadow: none; margin: 0 0.6em 0 0; }
body .swal2-popup.swal2-toast .swal2-title { padding: 0; font-size: 0.95em; font-weight: 700; }

/* Phones: a little tighter, and buttons share the width */
@media (max-width: 480px) {
    body .swal2-popup { padding: 1.9em 1.1em 1.2em; border-radius: 18px; }
    body .swal2-title { font-size: 1.35em; }
    body .swal2-actions { width: 100%; }
    body .swal2-actions .swal2-styled { flex: 1 1 0; min-width: 0; padding: 0.75em 0.8em !important; }
}