/*
 * sweetalert-theme.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Global SweetAlert overrides — reads CSS custom properties declared in each
 * theme file (UITools/styleSheet-switcher/[theme].css).
 *
 * When the active theme changes, Angular re-writes the ng-href on the theme
 * <link> tag, which updates the CSS variables, and this file automatically
 * picks up the new values — no JS changes needed.
 *
 * Variable contract (declared per theme):
 *   --sa-primary        primary action color (confirm button bg, title, accents)
 *   --sa-primary-hover  ~10% darker — confirm button :hover state
 *   --sa-primary-active ~20% darker — confirm button :active state
 *   --sa-shadow-rgb     comma-separated R,G,B of primary (for rgba() shadows)
 *   --sa-font           font-family string matching the theme body font
 *
 * Semantic icon colors (success=green, error=red, warning=orange) are kept
 * unchanged — these are universal and should not vary with the theme.
 * Only the "info" icon (which has no universal semantic color) is themed.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Card container ────────────────────────────────────────────────────────── */
.sweet-alert {
    font-family: var(--sa-font, 'Source Sans Pro', sans-serif) !important;
    border-radius: 16px !important;
    border-top: 4px solid var(--sa-primary, #8CD4F5) !important;
    box-shadow:
        0 20px 60px rgba(var(--sa-shadow-rgb, 0, 0, 0), 0.16),
        0 8px 24px rgba(0, 0, 0, 0.10) !important;
    padding: 24px 24px 20px !important;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */
.sweet-alert h2 {
    font-family: var(--sa-font, 'Source Sans Pro', sans-serif) !important;
    color: var(--sa-primary, #575757) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 12px 0 !important;
}

/* ── Message text ───────────────────────────────────────────────────────────── */
.sweet-alert p {
    font-family: var(--sa-font, 'Source Sans Pro', sans-serif) !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* ── Confirm button ─────────────────────────────────────────────────────────── */
.sweet-alert button.confirm {
    background-color: var(--sa-primary, #8CD4F5) !important;
    border-radius: 8px !important;
    font-family: var(--sa-font, 'Source Sans Pro', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 28px !important;
    letter-spacing: 0.2px !important;
    transition: background-color 0.15s, box-shadow 0.15s !important;
}
.sweet-alert button.confirm:hover {
    background-color: var(--sa-primary-hover, #7ecff4) !important;
}
.sweet-alert button.confirm:active {
    background-color: var(--sa-primary-active, #5dc2f1) !important;
}
.sweet-alert button.confirm:focus {
    box-shadow: 0 0 0 3px rgba(var(--sa-shadow-rgb, 0, 0, 0), 0.28) !important;
}

/* ── Cancel button — neutral across all themes ──────────────────────────────── */
.sweet-alert button.cancel {
    background-color: #e5e7eb !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-family: var(--sa-font, 'Source Sans Pro', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.sweet-alert button.cancel:hover  { background-color: #d1d5db !important; }
.sweet-alert button.cancel:active { background-color: #c0c5ce !important; }
.sweet-alert button.cancel:focus  {
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.40) !important;
}

/* ── Info icon — themed (no universal semantic colour for "info") ────────────── */
/* success=green · error=red · warning=orange are intentionally left unchanged  */
.sweet-alert .sa-icon.sa-info {
    border-color: var(--sa-primary, #C9DAE1) !important;
}
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after {
    background-color: var(--sa-primary, #C9DAE1) !important;
}

/* ── Backdrop ───────────────────────────────────────────────────────────────── */
.sweet-overlay {
    background-color: rgba(0, 0, 0, 0.55) !important;
}