/* SweetAlert2 (copy tu trang admin sang theme default) — mau theo --primary-rgb cua template.
   Mọi selector bắt đầu bằng "body .swal2-container": SweetAlert2 tự chèn CSS mặc định vào <head> LÚC
   CHẠY (sau file này) nên selector cùng độ ưu tiên sẽ bị nó đè — phải cao hơn. */
:root {
    --sa-primary: var(--primary-rgb, 99, 91, 255);
    --sa-bg: #ffffff;
    --sa-text: #1b2130;
    --sa-muted: #5b6478;
    --sa-border: #e3e6ef;
}
[data-bs-theme="dark"] {
    --sa-bg: #1f2433;
    --sa-text: #e7eaf3;
    --sa-muted: #a3abc2;
    --sa-border: #353c50;
}

/* ===== Modal ===== */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation {
    background: rgba(15, 18, 35, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
body .swal2-container .swal2-popup:not(.swal2-toast) {
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 32px 28px 26px;
    border-radius: 18px;
    background: var(--sa-bg);
    color: var(--sa-text);
    box-shadow: 0 24px 60px rgba(17, 24, 39, .25);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon {
    margin: 0 auto 18px;
    width: 64px;
    height: 64px;
    border-width: 3px;
    font-size: 12.8px;            /* icon swal tính theo em: 5em → 64px */
}
body .swal2-container .swal2-icon.swal2-warning { border-color: #fcd9a3; color: #f59e0b; }
body .swal2-container .swal2-icon.swal2-info { border-color: #cfe3ff; color: #3b82f6; }
body .swal2-container .swal2-icon.swal2-question { border-color: rgba(var(--sa-primary), .35); color: rgb(var(--sa-primary)); }
body .swal2-container .swal2-icon.swal2-error { border-color: #fbcfd8; }
body .swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #f43f5e; }
/* styles.css của theme có thể đặt 2 vạch chữ X lệch nhau → X bị vỡ thành 1 vạch chéo. Trả về hình học
   gốc SweetAlert2 v11 (icon 5em) cho popup, không đụng toast. */
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    position: absolute; top: 2.3125em; inset-block-start: 2.3125em;
    width: 2.9375em; height: .3125em; border-radius: .125em;
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="left"] {
    left: 1.0625em; right: auto; inset-inline-start: 1.0625em; inset-inline-end: auto; transform: rotate(45deg);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="right"] {
    right: 1em; left: auto; inset-inline-end: 1em; inset-inline-start: auto; transform: rotate(-45deg);
}
body .swal2-container .swal2-icon.swal2-success { border-color: #bbf0d2; }
body .swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: #bbf0d2; }
body .swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #16a34a; }

body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-title {
    margin: 0;
    padding: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sa-text);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin: 10px 0 0;
    padding: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sa-muted);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions {
    margin: 24px 0 0;
    gap: 10px;
    width: 100%;
}
body .swal2-container .swal2-popup .swal2-styled {
    margin: 0;
    min-width: 110px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
}
body .swal2-container .swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(var(--sa-primary), .2); }
/* Không !important: trang truyền confirmButtonColor (inline) vẫn được giữ màu */
body .swal2-container .swal2-popup .swal2-styled.swal2-confirm { background-color: rgb(var(--sa-primary)); color: #fff; border: 0; }
body .swal2-container .swal2-popup .swal2-styled.swal2-cancel {
    background-color: transparent;
    color: var(--sa-text);
    border: 1px solid var(--sa-border);
}
body .swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover { background: rgba(var(--sa-primary), .08); }
body .swal2-container .swal2-popup .swal2-styled.swal2-deny { background-color: #fee2e2; color: #dc2626; border: 0; }

body .swal2-container .swal2-popup .swal2-input,
body .swal2-container .swal2-popup .swal2-textarea,
body .swal2-container .swal2-popup .swal2-select {
    width: 100%;
    margin: 18px 0 0;
    border: 1px solid var(--sa-border);
    border-radius: 10px;
    background: var(--sa-bg);
    color: var(--sa-text);
    font-size: 14px;
    box-shadow: none;
    box-sizing: border-box;
}
body .swal2-container .swal2-popup .swal2-input { height: 42px; padding: 0 12px; }
body .swal2-container .swal2-popup .swal2-textarea { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
body .swal2-container .swal2-popup .swal2-input:focus,
body .swal2-container .swal2-popup .swal2-textarea:focus,
body .swal2-container .swal2-popup .swal2-select:focus {
    border-color: rgb(var(--sa-primary));
    box-shadow: 0 0 0 3px rgba(var(--sa-primary), .15);
    outline: 0;
}
body .swal2-container .swal2-popup .swal2-validation-message {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
}
body .swal2-container .swal2-popup .swal2-validation-message::before { width: 18px; min-width: 18px; height: 18px; line-height: 18px; margin: 0 8px 0 0; font-size: 12px; background-color: #ef4444; }

/* Nút đóng: swal đặt nó trong luồng grid (justify-self:end + margin-bottom âm) nên bị padding
   popup đẩy vào trong → ghim tuyệt đối vào góc trên phải. */
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-close {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 26px;
    line-height: 1;
    color: #94a3b8;
    box-shadow: none;
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-close:hover { background: rgba(var(--sa-primary), .08); color: rgb(var(--sa-primary)); }
/* Có nút đóng thì chừa chỗ cho tiêu đề khỏi đè lên */
body .swal2-container .swal2-popup:not(.swal2-toast):has(.swal2-close:not([style*="display: none"])) .swal2-title { padding: 0 28px; }

/* ===== Toast (giữ layout grid gốc của swal, chỉ đổi dáng) ===== */
/* Toast không có backdrop: khung chứa trong suốt, không làm mờ trang phía sau */
html body.swal2-toast-shown .swal2-container { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body.swal2-toast-shown .swal2-container { width: auto; max-width: 100%; padding: 16px; }
body .swal2-container .swal2-popup.swal2-toast {
    width: fit-content;
    justify-self: end;
    min-width: 200px;
    max-width: 360px;
    padding: 12px 16px 12px 14px;
    border: 1px solid var(--sa-border);
    border-left: 4px solid rgb(var(--sa-primary));
    border-radius: 12px;
    background: var(--sa-bg);
    color: var(--sa-text);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
    align-items: center;
}
body .swal2-container .swal2-popup.swal2-toast:has(.swal2-success) { border-left-color: #16a34a; }
body .swal2-container .swal2-popup.swal2-toast:has(.swal2-error) { border-left-color: #ef4444; }
body .swal2-container .swal2-popup.swal2-toast:has(.swal2-warning) { border-left-color: #f59e0b; }
body .swal2-container .swal2-popup.swal2-toast:has(.swal2-info) { border-left-color: #3b82f6; }
body .swal2-container .swal2-popup.swal2-toast.swal2-show { animation: sa-toast-in .2s ease-out; }
body .swal2-container .swal2-popup.swal2-toast.swal2-hide { animation: sa-toast-out .15s ease-in forwards; }
@keyframes sa-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sa-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* Icon toast: chấm tròn đặc + ký tự, thay icon động (bị lệch khi thu nhỏ) */
body .swal2-container .swal2-popup.swal2-toast .swal2-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--sa-primary));
    animation: none;
    font-size: 12px;
    line-height: 1;
}
body .swal2-container .swal2-popup.swal2-toast .swal2-icon > * { display: none; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon::before { color: #fff; font-weight: 800; font-family: Arial, Helvetica, sans-serif; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success { background: #16a34a; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success::before { content: "✓"; font-size: 13px; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-error { background: #ef4444; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-error::before { content: "✕"; font-size: 11px; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-warning { background: #f59e0b; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-warning::before { content: "!"; font-size: 13px; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-info { background: #3b82f6; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-info::before { content: "i"; font-size: 13px; font-family: Georgia, serif; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-question::before { content: "?"; font-size: 13px; }

body .swal2-container .swal2-popup.swal2-toast .swal2-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sa-text);
}
body .swal2-container .swal2-popup.swal2-toast .swal2-html-container { margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--sa-muted); }
body .swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar { height: 2px; background: rgba(var(--sa-primary), .35); }

@media (max-width: 576px) {
    body .swal2-container .swal2-popup:not(.swal2-toast) { padding: 26px 18px 20px; }
    body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled { flex: 1; }
}