/*
 * SweetAlert2 (assets/vendors/sweetalert2-11.26.25) in the app's own colours,
 * for dialogs.js. Identical copies in the core and the client portal. Loaded
 * after sweetalert2.min.css; its rules are wrapped in :where(), so these win
 * without !important.
 *
 * The variables are declared on .dark as well as :root so they are worked
 * out again from the dark tokens (the theme class is on <html>).
 */
:root,
.dark {
    --swal2-background: var(--popover);
    --swal2-color: var(--popover-foreground);
    --swal2-border: 1px solid var(--border);
    --swal2-border-radius: calc(var(--radius) * 1.5);
    --swal2-backdrop: rgb(0 0 0 / 0.5);
    --swal2-toast-border: 1px solid var(--border);
    --swal2-footer-border-color: var(--border);
    --swal2-close-button-color: var(--popover-foreground);
    --swal2-outline: 0 0 0 3px color-mix(in oklab, var(--primary) 45%, transparent);
}

/* Icons at 3:1 or more against the dialog (WCAG 1.4.11); SweetAlert2's own
   pastel strokes are about 1.9:1 on white. */
:root {
    --dialog-icon-success: #15803d;
    --dialog-icon-error: #dc2626;
    --dialog-icon-warning: #b45309;
    --dialog-icon-info: #2563eb;
    --dialog-icon-question: #475569;
}
.dark {
    --dialog-icon-success: #22c55e;
    --dialog-icon-error: #f87171;
    --dialog-icon-warning: #f59e0b;
    --dialog-icon-info: #60a5fa;
    --dialog-icon-question: #94a3b8;
}

.swal2-popup.dialog-popup {
    font-family: inherit;
}
.swal2-popup.dialog-popup .swal2-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}
.swal2-popup.dialog-popup .swal2-html-container {
    font-size: 0.9375rem;
    line-height: 1.5;
}
/* A result of several lines ([data-line]) arrives joined by line breaks. */
.swal2-popup.dialog-popup .swal2-title,
.swal2-popup.dialog-popup .swal2-html-container {
    white-space: pre-line;
}

/* buttonsStyling is off: the app's own buttons, spaced, and tall enough for a
   thumb (44px, WCAG 2.5.5). */
.swal2-actions.dialog-actions {
    gap: 0.75rem;
    flex-wrap: wrap;
}
.swal2-actions.dialog-actions .kt-btn {
    min-height: 44px;
    padding-inline: 1.25rem;
}
.swal2-close.dialog-close {
    min-width: 44px;
    min-height: 44px;
}

/* A toast's message at body size. SweetAlert2's 360px left a message of
   one sentence wrapping over four lines beside the icon and close button. */
body.swal2-toast-shown .swal2-container {
    width: 26rem;
    max-width: 100%;
}
.swal2-popup.swal2-toast.dialog-popup .swal2-title {
    font-size: 0.9375rem;
    font-weight: 500;
}