/* ============================================================================
   swal-theme.css — SweetAlert dialogs follow the app colour mode
   ----------------------------------------------------------------------------
   Deploy to: /include/styles/swal-theme.css
   Linked in: /views/layout/_head-scripts.asp (after dark-mode.css)
   Pairs with: /include/scripts/swal-theme.js (keeps dialogs centred on screen)

   The theme comes from ThemeManager's class on <html> (html.dark-mode /
   html.light-mode), so dialogs switch live with the toggle — no JS needed.

   SweetAlert2 11.17 draws from --swal2-* variables, so dark mode only has to
   re-point those variables at the app's --dm-* tokens (dark-mode.css).
   SweetAlert 1.x (swal(), legacy common.js) has fixed colours and is
   overridden rule by rule further down.
   ============================================================================ */

/* ── SweetAlert2: light mode — match the app's Bootstrap look ─────────── */
.swal2-container {
    --swal2-border-radius: .5rem;
    --swal2-color: #343a40;
}

/* ── SweetAlert2: dark mode ───────────────────────────────────────────── */
html.dark-mode .swal2-container {
    --swal2-backdrop: rgba(0, 0, 0, .6);
    --swal2-background: var(--dm-surface, #181c27);
    --swal2-color: var(--dm-text, #e2e8f0);
    --swal2-border: 1px solid var(--dm-border, #272d3d);
    --swal2-footer-border-color: var(--dm-border, #272d3d);
    --swal2-input-background: var(--dm-input-bg, #1e2535);
    --swal2-validation-message-background: var(--dm-surface2, #1e243a);
    --swal2-validation-message-color: var(--dm-text, #e2e8f0);
    --swal2-close-button-color: var(--dm-text-muted, #94a3b8);
    --swal2-progress-step-background: var(--dm-surface2, #1e243a);
    color-scheme: dark;   /* native scrollbars, date pickers, select lists */
}

html.dark-mode .swal2-popup {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

html.dark-mode .swal2-input,
html.dark-mode .swal2-file,
html.dark-mode .swal2-textarea,
html.dark-mode .swal2-select {
    border-color: var(--dm-input-border, #334155);
    color: var(--dm-text, #e2e8f0);
}

html.dark-mode .swal2-select option {
    background: var(--dm-input-bg, #1e2535);
    color: var(--dm-text, #e2e8f0);
}

html.dark-mode .swal2-input::placeholder,
html.dark-mode .swal2-textarea::placeholder {
    color: var(--dm-text-muted, #94a3b8);
}

html.dark-mode .swal2-input:focus,
html.dark-mode .swal2-textarea:focus {
    border-color: var(--dm-accent, #4f8ef7);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 3px rgba(79, 142, 247, .35);
}

html.dark-mode .swal2-radio,
html.dark-mode .swal2-checkbox {
    background: transparent;
    color: var(--dm-text, #e2e8f0);
}

html.dark-mode .swal2-range {
    background: transparent;
}

html.dark-mode .swal2-close:hover {
    color: var(--dm-neg, #f87171);
}

html.dark-mode .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, .25);
}

/* The success icon hides its corners with patches painted in the popup
   colour, captured once when it opens. Tie them to the variable so they
   still match when the theme is switched with a dialog on screen. */
.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--swal2-background) !important;
}

/* Grey "Cancel"/"No" buttons that pages style with #6e7881 etc. read fine on
   both themes; the default blue/red/green button colours are left alone. */

/* ── SweetAlert 1.x (legacy swal()) — dark mode ───────────────────────── */
html.dark-mode .swal-overlay {
    background-color: rgba(0, 0, 0, .6);
}

html.dark-mode .swal-modal {
    background-color: var(--dm-surface, #181c27);
    border: 1px solid var(--dm-border, #272d3d);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

html.dark-mode .swal-title {
    color: var(--dm-text, #e2e8f0);
}

html.dark-mode .swal-text {
    color: var(--dm-text-muted, #94a3b8);
}

html.dark-mode .swal-footer {
    background-color: transparent;
}

html.dark-mode .swal-button--cancel {
    color: var(--dm-text, #e2e8f0);
    background-color: var(--dm-surface2, #1e243a);
}

html.dark-mode .swal-button--cancel:not([disabled]):hover {
    background-color: var(--dm-hover, #1a2035);
}

html.dark-mode .swal-content__input,
html.dark-mode .swal-content__textarea {
    background-color: var(--dm-input-bg, #1e2535);
    border-color: var(--dm-input-border, #334155);
    color: var(--dm-text, #e2e8f0);
}

html.dark-mode .swal-icon--success::before,
html.dark-mode .swal-icon--success::after,
html.dark-mode .swal-icon--success__hide-corners {
    background: var(--dm-surface, #181c27);
}