/* =========================================================================
   Sound to Vision — SweetAlert2 dialogs in the active theme
   -------------------------------------------------------------------------
   Loaded by the main app, the Reactive Editor and the documentation, after
   external/themes.css. Colours come from the --t-* theme variables.

   Many Swal.fire() calls pass fixed colours (background: "#212529",
   confirmButtonColor: "#3085d6", a gold title), which Swal writes as inline
   styles, and SweetAlert injects its own stylesheet after ours; hence the
   "html" prefix and the !important on colours.
   ========================================================================= */

html .swal2-popup {
    background: var(--t-menu-bg) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-menu-border);
    border-radius: 6px;
    box-shadow: var(--t-ai-shadow);
    font-family: var(--t-font);
}

/* Title and text */
html .swal2-title {
    color: var(--t-text-strong) !important;
    font-family: var(--t-font);
    font-size: 1.35em;
    font-weight: 600;
}
html .swal2-html-container {
    color: var(--t-text) !important;
    font-family: var(--t-font);
    font-size: 0.95em;
    line-height: 1.5;
}
/* Fixed colours written for the old dark dialog: the gold welcome titles,
   text-light / text-white text, and grey hints */
html .swal2-popup [style*="#ffcc00"],
html .swal2-popup [style*="#FFCC00"] { color: var(--t-text-strong) !important; }
html .swal2-popup .text-light,
html .swal2-popup .text-white { color: var(--t-text) !important; }
html .swal2-popup [style*="color:#aaa"],
html .swal2-popup [style*="color: #aaa"] { color: var(--t-text-dim) !important; }
html .swal2-popup a:not(.btn) { color: var(--t-accent); }

/* Buttons: the confirm button is the theme's accent, like Create and Send in
   the editor; cancel is an ordinary surface button. */
html .swal2-actions { gap: 8px; }
html .swal2-popup .swal2-confirm,
html .swal2-popup .swal2-cancel,
html .swal2-popup .swal2-deny {
    margin: 0;
    padding: 7px 16px;
    border-radius: 3px;
    font: 600 13px/1.4 var(--t-font);
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html .swal2-popup .swal2-confirm {
    background: var(--t-accent) !important;
    border: 1px solid var(--t-accent) !important;
    color: var(--t-accent-text) !important;
}
html .swal2-popup .swal2-confirm:hover {
    background: var(--t-accent-hi) !important;
    border-color: var(--t-accent-hi) !important;
}
html .swal2-popup .swal2-cancel {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-btn-border) !important;
    color: var(--t-text) !important;
}
html .swal2-popup .swal2-cancel:hover {
    background: var(--t-surface-hi) !important;
    border-color: var(--t-btn-hover-border) !important;
    color: var(--t-hover-text) !important;
}
html .swal2-popup .swal2-deny {
    background: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    color: #fff !important;
}
html .swal2-popup .swal2-confirm:focus-visible,
html .swal2-popup .swal2-cancel:focus-visible,
html .swal2-popup .swal2-deny:focus-visible {
    outline: none;
    box-shadow: var(--t-focus-ring) !important;
}

/* Inputs */
html .swal2-popup .swal2-input,
html .swal2-popup .swal2-textarea,
html .swal2-popup .swal2-select,
html .swal2-popup .swal2-file {
    background: var(--t-field-bg);
    border: 1px solid var(--t-field-border);
    border-radius: 3px;
    color: var(--t-field-text);
    color-scheme: var(--t-field-scheme);
    box-shadow: none;
    font-family: var(--t-font);
}
html .swal2-popup .swal2-input:focus,
html .swal2-popup .swal2-textarea:focus,
html .swal2-popup .swal2-select:focus {
    background: var(--t-field-focus-bg);
    border-color: var(--t-field-focus-border);
    box-shadow: var(--t-focus-ring);
}
html .swal2-popup .swal2-input::placeholder,
html .swal2-popup .swal2-textarea::placeholder { color: var(--t-field-placeholder); }
html .swal2-popup .swal2-checkbox,
html .swal2-popup .swal2-radio { background: transparent; color: var(--t-text); }
html .swal2-popup input[type="checkbox"],
html .swal2-popup input[type="radio"],
html .swal2-popup input[type="range"] {
    accent-color: var(--t-accent);
    /* the theme's light/dark, not the page's data-bs-theme (the Reactive
       Editor keeps that dark whatever the theme) */
    color-scheme: var(--t-field-scheme);
}
html .swal2-popup .swal2-validation-message {
    background: var(--t-surface-hi);
    color: var(--t-text);
}

/* Close button, footer, timer */
html .swal2-popup .swal2-close { color: var(--t-text-dim); }
html .swal2-popup .swal2-close:hover { color: var(--t-hover-text); background: transparent; }
html .swal2-popup .swal2-footer {
    border-top: 1px solid var(--t-line);
    color: var(--t-text-dim);
}
html .swal2-popup .swal2-timer-progress-bar { background: var(--t-accent); }

/* The welcome dialogs show the white logo (Favicon/Wordpress.png): black on
   every theme but Dark. Keyed on data-theme, since the Reactive Editor keeps
   data-bs-theme="dark" whatever the theme. */
html:not([data-theme="dark"]) .swal2-popup .swal2-image[src*="Wordpress.png"] { filter: invert(1); }