/* ==========================================================================
   SweetAlert2 premium theme
   --------------------------------------------------------------------------
   The bundled sweetalert2.all.min.js (v11.7.10) ships a light-only
   stylesheet: popup #fff, title #595e66, cancel button #eee. With the app
   switching to dark via [data-theme="dark"] on <html>, every alert rendered
   as a white card with dark-grey body copy and a light-grey cancel chip.

   WHY THE !important
   sweetalert2.all.min.js injects its own <style> with
   `document.getElementsByTagName("head")[0].appendChild(...)` at runtime, so
   it always lands AFTER this stylesheet in document order. Author
   declarations lose to later author declarations on a specificity tie, and
   the library sets font-size / margin / padding / width on exactly the
   elements styled below. Without !important the premium spacing and type
   would silently lose.

   SCOPE NOTE -- button COLOURS are deliberately left alone. ~54 calls pass an
   inline confirmButtonColor and ~29 a cancelButtonColor, and those values
   carry meaning (red = destructive). Overriding them would repaint every
   danger button with the accent colour. Only the structural chrome is themed.
   ========================================================================== */

/* ---------- Light palette ------------------------------------------------ */
:root {
    --sw-popup-bg: #ffffff;
    --sw-popup-border: rgba(15, 23, 42, 0.08);
    --sw-title: #0f172a;
    --sw-body: #475569;
    --sw-footer-divider: rgba(15, 23, 42, 0.07);
    --sw-chip-bg: #f1f5f9;
    --sw-chip-text: #334155;
    --sw-chip-border: rgba(15, 23, 42, 0.10);
    --sw-input-bg: #ffffff;
    --sw-input-border: #cbd5e1;
    --sw-validation: #dc2626;
    --sw-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28),
                 0 8px 24px -8px rgba(15, 23, 42, 0.16);
}

/* ---------- Dark palette ------------------------------------------------- */
[data-theme="dark"] {
    --sw-popup-bg: #111722;
    --sw-popup-border: rgba(255, 255, 255, 0.09);
    --sw-title: #f8fafc;
    --sw-body: #c3cfdf;
    --sw-footer-divider: rgba(255, 255, 255, 0.08);
    --sw-chip-bg: #1e2a3a;
    --sw-chip-text: #e8eef5;
    --sw-chip-border: rgba(255, 255, 255, 0.10);
    --sw-input-bg: #161d2b;
    --sw-input-border: #233044;
    --sw-validation: #fca5a5;
    --sw-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.70),
                 0 8px 24px -8px rgba(0, 0, 0, 0.45);
}

/* ---------- Premium shell ------------------------------------------------ */
.swal2-popup {
    background: var(--sw-popup-bg) !important;
    border: 1px solid var(--sw-popup-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--sw-shadow) !important;
    color: var(--sw-body) !important;
    font-family: inherit !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
}

/* An inner rule strips the outer padding on narrow screens. */
.swal2-popup.swal2-toast {
    padding: 1rem !important;
}

.swal2-title {
    color: var(--sw-title) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.6rem !important;
    padding: 0 !important;
}

/* SweetAlert2 tags the description with one of several classes depending on
   whether html / text / nothing was passed, so all of them are covered. */
.swal2-html-container {
    color: var(--sw-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0.35rem 0 0.85rem !important;
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: 55vh !important;
}

.swal2-title + .swal2-html-container {
    margin-top: 0.35rem !important;
}

.swal2-footer {
    margin-top: 1rem !important;
    border-top: 1px solid var(--sw-footer-divider) !important;
    padding-top: 1rem !important;
    align-items: center !important;
}

/* ---------- Buttons ------------------------------------------------------ */
/* Rounded and softened only -- the confirm/deny fill stays whatever colour
   the caller passed, so destructive alerts keep their red. */
.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1.4rem !important;
    box-shadow: none !important;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible,
.swal2-deny:focus-visible {
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.22) !important;
}

.swal2-confirm:hover:not([disabled]),
.swal2-deny:hover:not([disabled]) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.swal2-cancel:hover:not([disabled]) {
    filter: brightness(0.97);
}

/* Cancel / deny default to a light grey chip that vanishes on a dark popup.
   Deliberately NOT !important: 28 calls pass an inline cancelButtonColor and
   an author !important declaration outranks an inline one, which would erase
   those. Instead the selector is raised to (0,2,0), which beats the bundled
   `div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel`
   at (0,1,2), while an inline style still wins over it.
   denyButtonColor is never passed anywhere, so deny is safe to theme. */
.swal2-popup .swal2-cancel,
.swal2-popup .swal2-deny {
    background: var(--sw-chip-bg);
    color: var(--sw-chip-text);
    border: 1px solid var(--sw-chip-border);
}

/* ---------- Icons -------------------------------------------------------- */
.swal2-icon {
    width: 4.2em !important;
    height: 4.2em !important;
    margin: 0.1em auto 0.75em !important;
    min-width: 0 !important;
    border: 0 !important;
}

.swal2-icon .swal2-icon-content {
    font-size: 2.7em !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The info/question glyphs are a mid grey that reads poorly on a dark card. */
.swal2-info {
    color: #38bdf8 !important;
    border-color: transparent !important;
}

.swal2-question {
    color: var(--sw-chip-text) !important;
    border-color: transparent !important;
}

/* ---------- Timer / progress --------------------------------------------- */
.swal2-timer-progress-bar {
    background: var(--sw-chip-text) !important;
    opacity: 0.35 !important;
}

/* ---------- Inputs (prompts) -------------------------------------------- */
.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select {
    background: var(--sw-input-bg) !important;
    color: var(--sw-title) !important;
    border: 1px solid var(--sw-input-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin-top: 0.5rem !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: var(--sw-body) !important;
    opacity: 0.7;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15) !important;
}

.swal2-validation-message {
    color: var(--sw-validation) !important;
    margin-top: 0.35rem !important;
}

/* ---------- Toast variant (14 calls use toast: true) -------------------- */
.swal2-toast .swal2-title {
    font-size: 1rem !important;
    margin: 0 !important;
}

.swal2-toast .swal2-html-container {
    margin: 0.25rem 0 0 !important;
    max-height: none !important;
}

.swal2-toast .swal2-close {
    color: var(--sw-body) !important;
    font-size: 1.1rem !important;
}

/* ---------- Loading spinner --------------------------------------------- */
.swal2-loading {
    border-color: var(--sw-chip-text) !important;
}

/* ---------- Narrow viewports -------------------------------------------- */
@media (max-width: 480px) {
    .swal2-popup {
        border-radius: 16px !important;
        padding: 1.25rem 1rem 1rem !important;
    }

    .swal2-title {
        font-size: 1.05rem !important;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        width: 100% !important;
        margin: 0.35rem 0 0 !important;
    }
}

/* Reduced-motion users get no lift on hover. */
@media (prefers-reduced-motion: reduce) {
    .swal2-confirm:hover:not([disabled]),
    .swal2-deny:hover:not([disabled]) {
        transform: none;
    }
}