/**
 * SweetAlert2 dialogs drawn like the app's Bootstrap modals, for every
 * Swal.fire() at once.
 *
 * Loaded after theme.css and a11y.css. The ~180 calls pass their own colors
 * and button classes (confirmButtonColor, btn-secondary, btn-danger…): these
 * rules make them consistent instead of rewriting each call.
 *
 * - same box as `.modal .modal-content` (5px radius, #e8e8e8 border, 24px
 *   padding) and the same 16px bold title;
 * - the icon is a Tabler line icon in a tinted square next to the title,
 *   like the modal headers, instead of SweetAlert's animated circles;
 * - buttons sized like `.btn`, always "Cancel · Deny · Confirm" and
 *   right-aligned whatever reverseButtons says; Cancel looks like btn-light,
 *   Confirm is the brand color, red for destructive actions (btn-danger,
 *   swal2-confirm--danger), green when the call asks for btn-success;
 * - toasts (showMessage, Toast) keep their own style: every rule skips
 *   .swal2-toast.
 *
 * Layout and text rules use :where() to stay at one class of specificity, so
 * a popup with its own customClass (pickings.css, whatsapp-chat.css) still
 * wins. Button rules are stronger on purpose: they must beat .btn-* and the
 * inline colors SweetAlert sets from confirmButtonColor/cancelButtonColor.
 */

:root {
    --dialog-border: #e8e8e8;
    --dialog-title: #262a2a;
    --dialog-primary: var(--bs-primary, #00619d);
    --dialog-primary-hover: rgb(var(--bs-primary-rgb-hover, 0, 79, 128));
    /* White text on these ≥ 4.5:1 (the palette's #ff4b4b / #58cc02 are not) */
    --dialog-danger: #d92d20;
    --dialog-danger-hover: #b42318;
    --dialog-success: #3d7c00;
    --dialog-success-hover: #2f6100;
}

/* ------------------------------------------------------------------ */
/* Box                                                                 */
/* ------------------------------------------------------------------ */
.swal2-popup:where(:not(.swal2-toast)) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: 28rem;
    padding: 1.5rem;
    border: 1px solid var(--dialog-border);
    border-radius: 5px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 0.5rem 2rem rgba(22, 29, 61, 0.12);
    color: var(--bs-body-color, #4b4b4b);
    font-size: 0.875rem;
}

:where(.swal2-popup:not(.swal2-toast)) > * {
    grid-column: 1 / -1;
}

/* Header row: icon + title, like the modal headers */
:where(.swal2-popup:not(.swal2-toast)) .swal2-title {
    grid-column: 2;
    padding: 0;
    color: var(--dialog-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

:where(.swal2-popup:not(.swal2-toast)):has(> .swal2-close:not([style*='none'])) .swal2-title {
    padding-right: 2rem;
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-html-container {
    margin: 0;
    padding: 0.75rem 0 0;
    color: inherit;
    font-size: inherit;
    line-height: 1.6;
    text-align: left;
}

/* Same round 26px button as .btn-close in the modals */
:where(.swal2-popup:not(.swal2-toast)) .swal2-close {
    position: absolute;
    top: 1.75rem;
    right: 1.5rem;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid var(--dialog-border);
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    color: #6f6f6f;
    font-size: 1.125rem;
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-close:hover {
    color: var(--dialog-title);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-footer {
    justify-content: flex-start;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top-color: var(--dialog-border);
    color: #6f6f6f;
    font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ */
/* Icon: Tabler line icon in a tinted square                           */
/* ------------------------------------------------------------------ */
:where(.swal2-popup:not(.swal2-toast)) .swal2-icon {
    grid-column: 1;
    box-sizing: border-box;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 0.75rem 0 0;
    border: 1px solid currentColor;
    border-radius: 5px;
    animation: none;
}

/* SweetAlert's own glyph and animated rings; its selectors beat a single class */
.swal2-popup:not(.swal2-toast) .swal2-icon > * {
    display: none !important;
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--dialog-icon) center / contain no-repeat;
    mask: var(--dialog-icon) center / contain no-repeat;
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon.swal2-warning {
    --dialog-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
    background: var(--bs-warning-bg-subtle, #fff5cc);
    color: var(--bs-warning-text-emphasis, #8a6500);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon.swal2-error {
    --dialog-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M10 10l4 4m0 -4l-4 4'/%3E%3C/svg%3E");
    background: var(--bs-danger-bg-subtle, #ffe5e5);
    color: var(--dialog-danger);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon.swal2-success {
    --dialog-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E");
    background: var(--bs-success-bg-subtle, #ecf8e1);
    color: var(--dialog-success);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon.swal2-info {
    --dialog-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
    background: var(--color-sky-soft, #e7f1f8);
    color: var(--dialog-primary);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-icon.swal2-question {
    --dialog-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483'/%3E%3C/svg%3E");
    background: var(--color-sky-soft, #e7f1f8);
    color: var(--dialog-primary);
}

/* ------------------------------------------------------------------ */
/* Inputs: like .form-control                                          */
/* ------------------------------------------------------------------ */
:where(.swal2-popup:not(.swal2-toast)) :is(.swal2-input, .swal2-textarea, .swal2-select, .swal2-file) {
    margin: 1rem 0 0;
    border: 1px solid var(--dialog-border);
    border-radius: 5px;
    box-shadow: none;
    color: inherit;
    font-size: inherit;
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-input {
    height: 2.5rem;
}

:where(.swal2-popup:not(.swal2-toast)) :is(.swal2-input, .swal2-textarea, .swal2-select):focus {
    border-color: var(--dialog-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 0, 97, 157), 0.15);
}

:where(.swal2-popup:not(.swal2-toast)) .swal2-validation-message {
    justify-content: flex-start;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    background: var(--bs-danger-bg-subtle, #ffe5e5);
    color: var(--bs-danger-text-emphasis, #b42318);
    font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ */
/* Actions: Cancel · Deny · Confirm, right-aligned, sized like .btn    */
/* ------------------------------------------------------------------ */
:where(.swal2-popup:not(.swal2-toast)) .swal2-actions {
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin: 1.5rem 0 0;
}

.swal2-popup:not(.swal2-toast) .swal2-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.swal2-popup:not(.swal2-toast) .swal2-actions button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 0, 97, 157), 0.35);
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel {
    order: 1;
    border-color: var(--dialog-border) !important;
    background: var(--bs-body-bg, #fff) !important;
    color: var(--dialog-title) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel:hover {
    background: #f7f7f7 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-deny {
    order: 2;
    border-color: var(--dialog-danger) !important;
    background: var(--bs-body-bg, #fff) !important;
    color: var(--dialog-danger) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-deny:hover {
    background: var(--bs-danger-bg-subtle, #ffe5e5) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions :is(.swal2-confirm, .swal2-loader) {
    order: 3;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm {
    border-color: var(--dialog-primary) !important;
    background: var(--dialog-primary) !important;
    color: #fff !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm:hover {
    border-color: var(--dialog-primary-hover) !important;
    background: var(--dialog-primary-hover) !important;
}

/* Destructive confirmation: confirmDelete() in crud.js, or btn-danger */
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm:is(.swal2-confirm--danger, .btn-danger) {
    border-color: var(--dialog-danger) !important;
    background: var(--dialog-danger) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm:is(.swal2-confirm--danger, .btn-danger):hover {
    border-color: var(--dialog-danger-hover) !important;
    background: var(--dialog-danger-hover) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.btn-success {
    border-color: var(--dialog-success) !important;
    background: var(--dialog-success) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm.btn-success:hover {
    border-color: var(--dialog-success-hover) !important;
    background: var(--dialog-success-hover) !important;
}

/* ------------------------------------------------------------------ */
/* Opening: a short fade like Bootstrap's modals, not the bounce       */
/* ------------------------------------------------------------------ */
.swal2-popup.swal2-show:not(.swal2-toast) {
    animation: dialog-show 0.15s ease-out;
}

@keyframes dialog-show {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal2-show:not(.swal2-toast) {
        animation: none;
    }
}

/* Narrow screens: full-width buttons, Confirm on top */
@media (max-width: 575.98px) {
    :where(.swal2-popup:not(.swal2-toast)) .swal2-actions {
        flex-direction: column-reverse;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions button {
        width: 100%;
    }
}