/* Thông báo nổi góc phải dưới (bootstrap-toaster) — xem CLAUDE.md §3.7b.
   File này PHẢI nạp SAU core.css và SAU bootstrap-toaster.min.css: nó vá ba lỗi của hai file đó,
   cả ba đều không bị build hay console báo.

   1. Toast TRONG SUỐT. core.css khai  --bs-toast-bg: var(--bs-paper-bg-rgb)  mà biến đó là
      "255, 255, 255" — một BỘ BA SỐ, không phải mã màu. Trình duyệt bỏ khai báo sai và
      background-color rơi về giá trị đầu là transparent. Đo thật 24/09/2026 bằng CDP:
      getComputedStyle(.toast).backgroundColor = "rgba(0, 0, 0, 0)".
   2. Toast NẰM DƯỚI lớp phủ của hộp thoại. bootstrap-toaster.css cắm  #toastContainer{z-index:1060}
      — một bộ chọn ID nên nó thắng .toast-container (1095) của Sneat, trong khi lớp phủ modal của
      Sneat ở 1089. Đo thật: elementFromPoint giữa toast trả về "modal-backdrop fade show", tức
      lớp phủ đen 50% được vẽ ĐÈ LÊN toast. Đây chính là cảnh "mờ và ẩn dưới nền" người dùng báo.
   3. Chữ lật trắng theo hệ điều hành. bootstrap-toaster.css có khối
      @media (prefers-color-scheme: dark) đặt .toast{color:#f8f9fa} — KHÔNG bó trong #toastContainer
      nên nó áp cho mọi toast, dù ứng dụng chốt cứng data-bs-theme="light" (§3.30). Máy để nền tối
      là chữ gần trắng trên thẻ trắng. */

/* ── 1+2. Nền đục và nổi lên trên lớp phủ ────────────────────────────────────────────────── */
#toastContainer {
    /* Trên modal (1090) và lớp phủ (1089), dưới tooltip (1099).
       ⚠️ ĐÂY LÀ CHỖ DUY NHẤT trong dự án cắm số z-index thay vì bám biến, và là cố ý:
       Bootstrap khai .toast-container{--bs-toast-zindex:1095} ở core.css dòng 6218, nhưng
       Sneat ĐÈ LẠI thành 8 ở dòng 14447. Viết var(--bs-toast-zindex, 1095) thì giá trị dự phòng
       không bao giờ được dùng — biến CÓ giá trị, chỉ là giá trị 8. Đo thật 24/09/2026: bám biến
       cho ra zIndex "8" và lớp phủ modal vẫn đè lên toast y như trước khi sửa.
       Tự đặt lại biến luôn để .toast con không mang hai con số khác nhau. */
    --bs-toast-zindex: 1095;
    z-index: 1095;
}

#toastContainer .toast {
    --bs-toast-bg: var(--bs-paper-bg);
    --bs-toast-color: var(--bs-body-color);
    --bs-toast-padding-x: 1rem;
    --bs-toast-padding-y: .75rem;
    --bs-toast-header-color: var(--tb-chu-dai);
    --bs-toast-header-bg: var(--tb-nen-dai);
    --bs-toast-border-width: 0;
    box-shadow: 0 .5rem 1.5rem rgba(34, 48, 62, .24);
    /* Dải màu trạng thái. Đặt bằng viền trái thay vì tô cả thẻ: chữ vẫn nằm trên nền trắng nên
       tương phản không phụ thuộc vào việc chọn đúng sắc độ (§3.4e-1). */
    border-inline-start: 4px solid var(--tb-mau);
    overflow: hidden;
}

/* Chưa gắn lớp trạng thái thì vẫn phải đọc được, đừng để rơi vào biến rỗng. */
#toastContainer .toast {
    --tb-mau: var(--bs-border-color);
    --tb-nen-dai: transparent;
    --tb-chu-dai: var(--bs-heading-color);
}

/* ── Hai trạng thái ───────────────────────────────────────────────────────────────────────
   Mỗi biến có một việc riêng và một số đo riêng (WCAG, nền thẻ #fff):
     --tb-mau     dải màu, KHÔNG mang chữ  → ngưỡng 3.0 cho thành phần đồ hoạ
     --tb-chu-dai icon + tiêu đề            → ngưỡng 4.5
   #71dd37 nguyên bản chỉ đạt 1.74 trên nền trắng nên dải màu "thành công" phải tối đi;
   #ff3e1d đã đạt 3.52 nên giữ nguyên. Hai dải vì vậy cân nhau về độ nổi (3.47 và 3.52). */
#toastContainer .toast.tb-thanh-cong {
    --tb-mau: color-mix(in sRGB, var(--bs-success) 70%, #000); /* #4f9b26 — 3.47 */
    --tb-nen-dai: var(--bs-success-bg-subtle);                 /* #e8fadf */
    --tb-chu-dai: var(--bs-success-text-emphasis);             /* #2d5816 — 8.34 / 7.61 trên dải */
}

#toastContainer .toast.tb-loi {
    --tb-mau: var(--bs-danger);                                /* #ff3e1d — 3.52 */
    --tb-nen-dai: var(--bs-danger-bg-subtle);                  /* #ffe0db */
    --tb-chu-dai: var(--bs-danger-text-emphasis);              /* #66190c — 12.29 / 9.91 trên dải */
}

#toastContainer .toast-header {
    font-weight: 500;
}

#toastContainer .toast-body {
    color: var(--bs-body-color);
}

/* ── Icon trạng thái ──────────────────────────────────────────────────────────────────────
   Thư viện gắn cho icon lớp bi-* (Bootstrap Icons) và text-success — dự án KHÔNG nạp bộ font đó
   (§3.4: chỉ có boxicons), nên ô icon rỗng, đo được bề rộng 0px. Và với thông báo lỗi thì
   TOAST_STATUS.ERROR không tồn tại trong bản .min.js nên setStatus còn gắn luôn d-none.
   Hai lớp kia đều !important nên phải thắng bằng ĐỘ ƯU TIÊN cao hơn, không phải bằng thứ tự. */
#toastContainer .toast .status-icon {
    display: inline-flex !important;
    align-items: center;
    color: var(--tb-chu-dai) !important;
    font-size: 1.125rem;
    width: 1em;
    height: 1em;
    flex: none;
}

/* ── 3. Ứng dụng chỉ chạy nền sáng ────────────────────────────────────────────────────────
   Gỡ khối prefers-color-scheme của thư viện. Bộ chọn có #toastContainer nên thắng .toast trần
   của khối media dù khối đó nằm ở file nào. */
#toastContainer .toast,
#toastContainer .toast-header {
    color: var(--bs-toast-color);
    background-color: var(--bs-toast-bg);
}

#toastContainer .toast-header {
    color: var(--bs-toast-header-color);
    background-color: var(--bs-toast-header-bg);
}

#toastContainer .toast-header .btn-close {
    filter: none;
}