/* ==========================================================================
   SweetAlert theme — light & dark (Bookkizee Backoffice)
   Covers SweetAlert2 (.swal2-*) and classic SweetAlert v1 (.swal-*).
   Light by default; switches automatically when <body> has class "dark".
   Selectors are prefixed with "html body" so they win over the library's
   own injected CSS regardless of load order.
   ========================================================================== */

:root {
    --swt-bg: #ffffff;
    --swt-bg-soft: #f8fafc;
    --swt-border: #e2e8f0;
    --swt-text: #0f172a;
    --swt-muted: #64748b;
    --swt-input: #ffffff;
    --swt-brand: #4f46e5;
    --swt-brand-2: #6366f1;
    --swt-success: #059669;
    --swt-danger: #e11d48;
    --swt-warning: #d97706;
    --swt-info: #0891b2;
    --swt-question: #7c3aed;
    --swt-backdrop: rgba(15, 23, 42, .45);
    --swt-shadow: 0 24px 60px -20px rgba(2, 6, 23, .35), 0 2px 6px rgba(2, 6, 23, .06);
    --swt-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.dark {
    --swt-bg: #111a2c;
    --swt-bg-soft: #0f1725;
    --swt-border: #26334d;
    --swt-text: #e2e8f0;
    --swt-muted: #94a3b8;
    --swt-input: #1e293b;
    --swt-brand: #6366f1;
    --swt-brand-2: #818cf8;
    --swt-success: #34d399;
    --swt-danger: #fb7185;
    --swt-warning: #fbbf24;
    --swt-info: #22d3ee;
    --swt-question: #a78bfa;
    --swt-backdrop: rgba(2, 6, 23, .72);
    --swt-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(148, 163, 184, .06);
}

/* ==========================================================================
   SweetAlert2
   ========================================================================== */
html body .swal2-container.swal2-backdrop-show,
html body .swal2-container.swal2-noanimation { background: var(--swt-backdrop); }
html body .swal2-container { z-index: 100100; }

html body .swal2-popup {
    background: var(--swt-bg);
    color: var(--swt-text);
    border: 1px solid var(--swt-border);
    border-radius: 0;
    box-shadow: var(--swt-shadow);
    font-family: var(--swt-font);
    padding: 1.6em 1.6em 1.4em;
    width: 30em;
    max-width: calc(100vw - 32px);
}
html body .swal2-popup::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--swt-brand), #06b6d4);
}
html body .swal2-popup.swal2-toast::before { width: 3px; height: auto; right: auto; bottom: 0; }

html body .swal2-title,
html body.dark .swal2-title { /* beats the legacy grey "body.dark .swal2-title" in darkmode/style*.css */
    color: var(--swt-text);
    font-size: 1.3em;
    font-weight: 800;
    letter-spacing: -.01em;
    padding: .6em 1em 0;
}
html body .swal2-html-container,
html body .swal2-content {
    color: var(--swt-muted);
    font-size: .98em;
    font-weight: 600;
    line-height: 1.6;
    margin: .7em 1.2em .2em;
}
/* ecaps.css capitalises html/body; messages, inputs and validation text should read as written */
html body .swal2-html-container,
html body .swal2-content,
html body .swal2-validation-message,
html body .swal2-footer,
html body .swal2-input,
html body .swal2-textarea,
html body .swal2-select,
html body .swal-text,
html body .swal-content { text-transform: none; }
html body .swal2-html-container b,
html body .swal2-html-container strong { color: var(--swt-text); }
html body .swal2-footer {
    border-top: 1px solid var(--swt-border);
    color: var(--swt-muted);
    font-size: .85em;
    font-weight: 600;
    margin: 1.2em 0 0;
    padding: 1em 1em 0;
}
html body .swal2-footer a { color: var(--swt-brand); font-weight: 800; }

/* ---------- Buttons ---------- */
html body .swal2-actions { gap: 8px; margin: 1.4em auto 0; }
html body .swal2-styled {
    margin: 0;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 0;
    font-family: var(--swt-font);
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: none;
    transition: filter .15s ease, background .15s ease, box-shadow .15s ease;
}
/*
   Custom colours (confirmButtonColor / denyButtonColor):
   - SweetAlert2 >= 11.2x passes them as CSS variables (--swal2-confirm-button-background-color).
   - Older builds write an inline background-color, which beats these rules anyway.
   background-color is always set (variable, else brand) so the white label can never sit on
   a transparent button; the gradient is only dropped when a custom colour was given.
*/
html body .swal2-styled.swal2-confirm {
    background-color: var(--swal2-confirm-button-background-color, #4f46e5);
    background-image: linear-gradient(135deg, #4f46e5, #6366f1);
    border: 1px solid transparent;
    color: #fff !important;
}
html body .swal2-styled.swal2-confirm[style*="--swal2-confirm-button-background-color"],
html body .swal2-styled.swal2-confirm[style*="background-color:"],
html body .swal2-styled.swal2-confirm[style*="background-color :"] { background-image: none; }
html body .swal2-styled.swal2-deny {
    background-color: var(--swal2-deny-button-background-color, #e11d48);
    background-image: linear-gradient(135deg, #e11d48, #f43f5e);
    border: 1px solid transparent;
    color: #fff !important;
}
html body .swal2-styled.swal2-deny[style*="--swal2-deny-button-background-color"],
html body .swal2-styled.swal2-deny[style*="background-color:"],
html body .swal2-styled.swal2-deny[style*="background-color :"] { background-image: none; }
html body .swal2-styled.swal2-cancel {
    background: var(--swt-bg) !important;
    border: 1px solid var(--swt-border);
    color: var(--swt-muted) !important;
}
html body .swal2-styled.swal2-cancel:hover { background: var(--swt-bg-soft) !important; color: var(--swt-text) !important; }
html body .swal2-styled:not([disabled]):hover { filter: brightness(1.06); }
html body .swal2-styled.swal2-cancel:not([disabled]):hover { filter: none; }
html body .swal2-styled:focus,
html body .swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); outline: none; }
html body .swal2-styled.swal2-deny:focus { box-shadow: 0 0 0 3px rgba(225, 29, 72, .3); }
html body .swal2-loader { border-color: var(--swt-brand) transparent var(--swt-brand) transparent; }

/* ---------- Close button ---------- */
html body .swal2-close {
    color: var(--swt-muted);
    border-radius: 0;
    font-size: 2em;
    transition: color .15s ease, background .15s ease;
}
html body .swal2-close:hover { color: var(--swt-danger); background: transparent; }
html body .swal2-close:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, .3); }

/* ---------- Inputs ---------- */
html body .swal2-input,
html body .swal2-file,
html body .swal2-textarea,
html body .swal2-select {
    background: var(--swt-input);
    color: var(--swt-text);
    border: 1.5px solid var(--swt-border);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--swt-font);
    font-size: .95em;
    font-weight: 600;
    margin: 1em 1.4em .3em;
}
html body .swal2-input,
html body .swal2-file { height: 46px; }
html body .swal2-select { padding: 0 12px; min-height: 46px; }
html body .swal2-select option { background: var(--swt-input); color: var(--swt-text); }
html body .swal2-input::placeholder,
html body .swal2-textarea::placeholder { color: var(--swt-muted); opacity: .8; }
html body .swal2-input:focus,
html body .swal2-file:focus,
html body .swal2-textarea:focus,
html body .swal2-select:focus {
    border-color: var(--swt-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
    outline: none;
}
html body .swal2-input.swal2-inputerror,
html body .swal2-textarea.swal2-inputerror { border-color: var(--swt-danger) !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, .14) !important; }
html body .swal2-input-label { color: var(--swt-text); font-weight: 700; font-size: .9em; }
html body .swal2-radio,
html body .swal2-checkbox { background: transparent; color: var(--swt-text); }
html body .swal2-radio label,
html body .swal2-checkbox label { color: var(--swt-text); font-weight: 600; }
html body .swal2-radio input,
html body .swal2-checkbox input { accent-color: var(--swt-brand); }
html body .swal2-range { background: transparent; }
html body .swal2-range input { accent-color: var(--swt-brand); }
html body .swal2-range output { color: var(--swt-text); font-weight: 800; }
html body .swal2-validation-message {
    background: rgba(225, 29, 72, .08);
    color: var(--swt-danger);
    border-left: 3px solid var(--swt-danger);
    font-weight: 700;
    font-size: .88em;
    margin: .8em 1.4em 0;
}
html body .swal2-validation-message::before { background-color: var(--swt-danger); }

/* ---------- Icons ---------- */
html body .swal2-icon { margin: 1.4em auto .4em; }
html body .swal2-icon.swal2-success { border-color: var(--swt-success); color: var(--swt-success); }
html body .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--swt-success); }
html body .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(5, 150, 105, .28); }
html body .swal2-icon.swal2-success .swal2-success-circular-line-left,
html body .swal2-icon.swal2-success .swal2-success-circular-line-right,
html body .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--swt-bg) !important; }
html body .swal2-icon.swal2-error { border-color: var(--swt-danger); color: var(--swt-danger); }
html body .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--swt-danger); }
html body .swal2-icon.swal2-warning { border-color: var(--swt-warning); color: var(--swt-warning); }
html body .swal2-icon.swal2-info { border-color: var(--swt-info); color: var(--swt-info); }
html body .swal2-icon.swal2-question { border-color: var(--swt-question); color: var(--swt-question); }

/* ---------- Progress steps & timer ---------- */
html body .swal2-progress-steps .swal2-progress-step { background: var(--swt-brand); color: #fff; font-weight: 800; }
html body .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: var(--swt-brand); }
html body .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step,
html body .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line { background: var(--swt-border); color: var(--swt-muted); }
html body .swal2-progress-steps .swal2-progress-step-line { background: var(--swt-brand); }
html body .swal2-timer-progress-bar-container { border-radius: 0; }
html body .swal2-timer-progress-bar { background: var(--swt-brand); opacity: .55; }

/* ---------- Toasts ---------- */
html body .swal2-popup.swal2-toast {
    background: var(--swt-bg);
    border: 1px solid var(--swt-border);
    border-radius: 0;
    box-shadow: 0 14px 34px -14px rgba(2, 6, 23, .45);
    padding: .9em 1.1em .9em 1.3em;
    width: auto;
    min-width: 280px;
}
html body .swal2-popup.swal2-toast .swal2-title { color: var(--swt-text); font-size: .95em; font-weight: 800; margin: 0 .6em; padding: 0; }
html body .swal2-popup.swal2-toast .swal2-html-container { color: var(--swt-muted); font-size: .85em; margin: .2em .6em 0; padding: 0; }
html body .swal2-popup.swal2-toast .swal2-icon { margin: 0 .3em 0 0; }
html body .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-circular-line-left,
html body .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-circular-line-right,
html body .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--swt-bg) !important; }
html body .swal2-popup.swal2-toast .swal2-close { font-size: 1.5em; }
html body .swal2-popup.swal2-toast .swal2-styled { min-height: 34px; padding: 0 14px; font-size: .82em; }

/* Accent strip colour follows the icon type */
html body .swal2-popup.swal2-icon-success::before { background: linear-gradient(90deg, #059669, #22c55e); }
html body .swal2-popup.swal2-icon-error::before { background: linear-gradient(90deg, #e11d48, #f43f5e); }
html body .swal2-popup.swal2-icon-warning::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
html body .swal2-popup.swal2-icon-info::before { background: linear-gradient(90deg, #0891b2, #06b6d4); }
html body .swal2-popup.swal2-icon-question::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }
html body .swal2-popup.swal2-toast.swal2-icon-success::before { background: linear-gradient(180deg, #059669, #22c55e); }
html body .swal2-popup.swal2-toast.swal2-icon-error::before { background: linear-gradient(180deg, #e11d48, #f43f5e); }
html body .swal2-popup.swal2-toast.swal2-icon-warning::before { background: linear-gradient(180deg, #d97706, #f59e0b); }
html body .swal2-popup.swal2-toast.swal2-icon-info::before { background: linear-gradient(180deg, #0891b2, #06b6d4); }
html body .swal2-popup.swal2-toast.swal2-icon-question::before { background: linear-gradient(180deg, #7c3aed, #a855f7); }

/* Image */
html body .swal2-image { border: 1px solid var(--swt-border); }

/* Mobile */
@media (max-width: 520px) {
    html body .swal2-popup:not(.swal2-toast) { padding: 1.3em 1em 1.1em; font-size: .95rem; }
    html body .swal2-actions { width: 100%; flex-direction: column-reverse; padding: 0 1em; }
    html body .swal2-actions .swal2-styled { width: 100%; }
}

/* ==========================================================================
   Classic SweetAlert (v1: swal("Title", "Text", "success"))
   ========================================================================== */
html body .swal-overlay { background-color: var(--swt-backdrop); }
html body .swal-modal {
    background: var(--swt-bg);
    border: 1px solid var(--swt-border);
    border-radius: 0;
    box-shadow: var(--swt-shadow);
    font-family: var(--swt-font);
    overflow: hidden;
}
html body .swal-modal::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--swt-brand), #06b6d4); }
html body .swal-title { color: var(--swt-text); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
html body .swal-title:not(:first-child) { padding-bottom: 0; }
html body .swal-text { color: var(--swt-muted); font-weight: 600; font-size: 15px; line-height: 1.6; text-align: center; display: block; margin: 0 auto; max-width: calc(100% - 40px); }
html body .swal-footer { background: transparent; border-top: 1px solid var(--swt-border); margin-top: 22px; padding: 14px 16px; text-align: center; }
html body .swal-button-container { margin: 4px; }
html body .swal-button {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    min-height: 42px;
    padding: 0 20px;
    font-family: var(--swt-font);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
html body .swal-button:not([disabled]):hover { background: linear-gradient(135deg, #4338ca, #4f46e5); }
html body .swal-button:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); outline: none; }
html body .swal-button--cancel { background: var(--swt-bg); color: var(--swt-muted); border-color: var(--swt-border); }
html body .swal-button--cancel:not([disabled]):hover { background: var(--swt-bg-soft); color: var(--swt-text); }
html body .swal-button--danger { background: linear-gradient(135deg, #e11d48, #f43f5e); }
html body .swal-button--danger:not([disabled]):hover { background: linear-gradient(135deg, #be123c, #e11d48); }
html body .swal-button--loading { color: transparent; }
html body .swal-button__loader div { background-color: #fff; }
html body .swal-content__input,
html body .swal-content__textarea {
    background: var(--swt-input);
    color: var(--swt-text);
    border: 1.5px solid var(--swt-border);
    border-radius: 0;
    font-family: var(--swt-font);
    font-weight: 600;
}
html body .swal-content__input:focus,
html body .swal-content__textarea:focus { border-color: var(--swt-brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); outline: none; }
html body .swal-icon--success { border-color: var(--swt-success); }
html body .swal-icon--success__line { background-color: var(--swt-success); }
html body .swal-icon--success__ring { border-color: rgba(5, 150, 105, .28); }
html body .swal-icon--success::before,
html body .swal-icon--success::after,
html body .swal-icon--success__hide-corners { background: var(--swt-bg) !important; }
html body .swal-icon--error { border-color: var(--swt-danger); }
html body .swal-icon--error__line { background-color: var(--swt-danger); }
html body .swal-icon--warning { border-color: var(--swt-warning); }
html body .swal-icon--warning__body,
html body .swal-icon--warning__dot { background-color: var(--swt-warning); }
html body .swal-icon--info { border-color: var(--swt-info); }
html body .swal-icon--info::before,
html body .swal-icon--info::after { background-color: var(--swt-info); }