/*
 * SweetAlert toasts and dialogs in the Google style (D926), for both layouts: layout/master.blade.php
 * (after console.css) and auth/base.blade.php (after auth.css). Swal comes from each layout's
 * plugins.bundle.js and its CSS from plugins.bundle.css; the two bundles carry different Swal versions,
 * so positions and grids are set here instead of relying on either.
 * Toast: a dark snackbar, bottom left (full width at the bottom on phones), a small status icon.
 * Dialog: a small icon on top, title and text centered, Cancel as a text button, the action as a pill.
 * Bootstrap modals (.console-dialog) keep their own look.
 */

:root {
    /* the layout's own tokens: console.css on signed-in pages, auth.css on the auth pages */
    --notify-ink: var(--console-ink, var(--auth-ink, #1B2140));
    --notify-muted: var(--console-muted, var(--auth-muted, #5B6275));
    --notify-navy: var(--console-navy, var(--auth-navy, #2C3B86));
    --notify-navy-dark: var(--console-navy-dark, var(--auth-navy-dark, #222E6B));
    --notify-navy-tint: var(--console-navy-tint, #EEF0F8);
    --notify-danger: var(--console-danger, var(--auth-danger, #B0173E));
    --notify-danger-dark: var(--console-danger-dark, #8F1232);
    --notify-success: var(--auth-success, #1E7A4B);
    --notify-font: var(--console-font, var(--auth-font, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif));
}

/* Status icons: Material icons (Apache 2.0) as masks, drawn in the icon's color; Swal's animated parts are hidden */
.swal2-icon.swal2-success { --notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.swal2-icon.swal2-error { --notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); }
.swal2-icon.swal2-warning { --notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }
.swal2-icon.swal2-info { --notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.swal2-icon.swal2-question { --notify-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E"); }
.swal2-popup .swal2-icon { position: relative; border: 0 !important; transform: none !important; animation: none !important; }
.swal2-popup .swal2-icon > * { display: none !important; }
.swal2-popup .swal2-icon::before { content: ''; display: block; width: 100%; height: 100%; background: currentColor;
    -webkit-mask: var(--notify-icon) center / contain no-repeat; mask: var(--notify-icon) center / contain no-repeat; }

/* Toast */
body.swal2-toast-shown .swal2-container { width: auto !important; max-width: 100%; background: transparent !important; pointer-events: none; }
body.swal2-toast-shown .swal2-container.swal2-bottom-start { inset: auto auto 0 0 !important; padding: 24px; }
body.swal2-toast-shown .swal2-container > .swal2-toast { pointer-events: all; }
/* !important where the server's toast config (config/sweetalert.php: background, padding) lands inline */
.swal2-popup.swal2-toast { grid-template-columns: min-content auto min-content; align-items: center; width: max-content !important; min-width: 288px; max-width: min(560px, calc(100vw - 48px));
    min-height: 48px; padding: 6px 6px 6px 16px !important; border-radius: 8px; background: var(--notify-ink) !important;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12); }
.swal2-popup.swal2-toast .swal2-title { margin: 0 8px 0 0; padding: 8px 0; font: 500 14px/20px var(--notify-font); color: #fff; text-align: left; }
.swal2-popup.swal2-toast .swal2-close { align-self: center; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: rgba(255, 255, 255, .72); }
.swal2-popup.swal2-toast .swal2-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.swal2-popup.swal2-toast .swal2-close:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.swal2-popup.swal2-toast .swal2-icon { width: 20px !important; height: 20px !important; min-width: 20px; margin: 0 12px 0 0 !important; }
/* lighter tints, readable on the dark snackbar */
.swal2-popup.swal2-toast .swal2-success { color: #81C995 !important; }
.swal2-popup.swal2-toast .swal2-error { color: #F28B82 !important; }
.swal2-popup.swal2-toast .swal2-warning { color: #FDD663 !important; }
.swal2-popup.swal2-toast :is(.swal2-info, .swal2-question) { color: #B4BEEB !important; }

@media (max-width: 600px) {
    body.swal2-toast-shown .swal2-container.swal2-bottom-start { width: 100% !important; padding: 8px; }
    .swal2-popup.swal2-toast { width: 100% !important; min-width: 0; max-width: none; }
}

/* Dialog */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .4); } /* Bootstrap's modal backdrop */
.swal2-popup:not(.swal2-toast) { width: min(400px, calc(100vw - 32px)); padding: 24px 24px 18px; border-radius: 14px; box-shadow: 0 8px 28px rgba(27, 33, 64, .16); }
.swal2-popup:not(.swal2-toast) .swal2-icon { width: 24px !important; height: 24px !important; margin: 0 auto 16px !important; color: var(--notify-navy) !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error { color: var(--notify-danger) !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success { color: var(--notify-success) !important; }
.swal2-popup:not(.swal2-toast) .swal2-title { margin: 0 0 12px; padding: 0; font: 600 20px/28px var(--notify-font); color: var(--notify-ink); text-align: center; }
.swal2-popup:not(.swal2-toast) .swal2-html-container { margin: 0; padding: 0; font: 400 14px/22px var(--notify-font); color: var(--notify-muted); text-align: center; }
.swal2-popup:not(.swal2-toast) .swal2-actions { width: 100%; justify-content: flex-end; gap: 8px; margin: 24px 0 0; padding: 0; }
.swal2-popup .swal2-actions .btn { margin: 0 !important; min-height: 40px; border: 0 !important; border-radius: 20px !important; box-shadow: none !important; font: 600 14px/20px var(--notify-font) !important; }
.swal2-popup .swal2-actions .btn:focus-visible { outline: 2px solid var(--notify-navy); outline-offset: 2px; }
/* Cancel and the other side actions (e.g. "Salin secret"): text buttons */
.swal2-popup .swal2-actions .btn:not(.swal2-confirm) { padding: 10px 16px !important; background: transparent !important; color: var(--notify-navy) !important; }
.swal2-popup .swal2-actions .btn:not(.swal2-confirm):hover { background: var(--notify-navy-tint) !important; }
.swal2-popup .swal2-actions .btn.swal2-confirm { padding: 10px 24px !important; background: var(--notify-navy) !important; color: #fff !important; }
.swal2-popup .swal2-actions .btn.swal2-confirm:hover { background: var(--notify-navy-dark) !important; }
.swal2-popup .swal2-actions .btn.btn-danger.swal2-confirm { background: var(--notify-danger) !important; }
.swal2-popup .swal2-actions .btn.btn-danger.swal2-confirm:hover { background: var(--notify-danger-dark) !important; }