/* ============================================================================
   lw-toast.css — component THÔNG BÁO MỘT CHIỀU (toast) dùng chung
   Cặp với public/js/components/lw-toast.js. Cả 2 file nạp toàn cục ở
   layout/basic/header|footer và layout/admin/header ⇒ màn dùng KHÔNG phải
   import gì thêm, cứ gọi `lwToast.success('保存しました')`.

   Dựng theo thư viện mockup (components/components.css `.toast` + components.js
   `AZ.toast`): viên thuốc NỀN TỐI, nằm GÓC DƯỚI BÊN PHẢI, có icon rồi tới chữ,
   tự tắt sau vài giây. Khác thư viện đúng 3 chỗ, đều có lý do:
     · nhiều toast xếp chồng được (mockup dùng đúng MỘT thẻ #toast, thông báo sau
       đè mất thông báo trước — ở app thật hay có 2 việc báo liền nhau)
     · bấm vào là tắt ngay, rê chuột vào thì dừng đếm giờ (thông báo lỗi dài đọc
       không kịp trong 2.2s của mockup)
     · icon nhúng SVG thẳng thay cho <i data-lucide> — app không nạp lucide runtime
       (xem CLAUDE.md), JS của component tự chèn path.

   HỢP ĐỒNG MARKUP — JS tự dựng, màn KHÔNG viết tay:

       <div class="lw-toast-stack">                     <!-- tạo 1 lần ở <body> -->
           <div class="lw-toast lw-toast--success" role="status">
               <span class="lw-toast__ic"><svg …></svg></span>
               <span class="lw-toast__text">保存しました</span>
           </div>
       </div>

   CHỈ dùng cho thông báo MỘT CHIỀU (không nút, không nhập liệu). Xác nhận /
   nhập liệu vẫn phải là modal `Swal.fire` — toast không có nút thì không thể
   thay bước xác nhận của người dùng.

   Núm chỉnh (đặt trên .lw-toast-stack, KHÔNG sửa file này):
       --lw-toast-gap    khoảng hở mép màn hình (mặc định 18px như mockup)
       --lw-toast-max    bề ngang tối đa một toast (380px)
   ========================================================================= */

.lw-toast-stack {
    --lw-toast-gap: 18px;
    --lw-toast-max: 380px;

    /* Nền tối #172033 lấy đúng thư viện mockup: lw-theme.css chỉ có bảng màu sáng,
       chưa có token nền tối nào ⇒ khai tại đây để màn nào cần đổi thì trỏ lại. */
    --lw-toast-bg: #172033;
    --lw-toast-fg: #FFFFFF;
    /* Màu icon cho nền TỐI — không dùng thẳng --lw-accent/--lw-danger/--lw-warn của
       theme vì chúng được chọn cho nền sáng, đặt lên #172033 thì tối và đục. */
    --lw-toast-ic-success: #67E8C3;
    --lw-toast-ic-error:   #FCA5A5;
    --lw-toast-ic-warning: #FCD34D;
    --lw-toast-ic-info:    #93C5FD;

    position: fixed;
    right: var(--lw-toast-gap);
    bottom: var(--lw-toast-gap);
    /* Phải nằm trên .modal-backdrop (1040) / .modal (1050) của Bootstrap 3,
       SweetAlert2 (1060) và cả lớp phủ của jQuery LoadingOverlay (9999) —
       thông báo bung ra lúc nào cũng phải nhìn thấy. */
    z-index: 10050;
    display: flex;
    /* column (không phải column-reverse): thẻ mới appendChild vào cuối ⇒ toast mới
       nhất nằm DƯỚI CÙNG, sát góc màn hình, mấy cái cũ bị đẩy dần lên. */
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: calc(100vw - var(--lw-toast-gap) * 2);
    /* Cả chồng toast không được chặn chuột của trang phía dưới; từng toast bật lại. */
    pointer-events: none;
}

.lw-toast-stack * { box-sizing: border-box; }

.lw-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: min(var(--lw-toast-max), 100%);
    padding: 10px 13px;
    border-radius: 8px;
    background: var(--lw-toast-bg);
    color: var(--lw-toast-fg);
    box-shadow: 0 10px 30px rgba(20, 33, 28, .28);
    /* KHÔNG thừa kế: toast nằm thẳng dưới <body>, mà nhiều màn có rule trần
       (`main section *{font-size:15px;line-height:15px}` của zoom/admin.css…)
       thì lại không với tới đây — khai đủ cho chắc. */
    font-family: var(--lw-sans, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;                  /* bấm vào là tắt ngay */
    animation: lw-toast-in .18s ease-out;
}

.lw-toast.is-leaving {
    animation: lw-toast-out .16s ease-in forwards;
}

.lw-toast__ic {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;                  /* canh icon với dòng chữ đầu tiên */
    color: var(--lw-toast-ic-info);
}

.lw-toast__ic svg {
    width: 16px;
    height: 16px;
    display: block;
}

.lw-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    /* Thông báo lỗi từ server có thể dài -> cho xuống dòng, và cắt chuỗi dài không
       có dấu cách (URL) thay vì đội bề ngang toast. */
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.lw-toast--success .lw-toast__ic { color: var(--lw-toast-ic-success); }
.lw-toast--error   .lw-toast__ic { color: var(--lw-toast-ic-error); }
.lw-toast--warning .lw-toast__ic { color: var(--lw-toast-ic-warning); }
.lw-toast--info    .lw-toast__ic { color: var(--lw-toast-ic-info); }

@keyframes lw-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes lw-toast-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(6px); }
}

/* Người dùng tắt hiệu ứng chuyển động ở hệ điều hành thì bỏ luôn animation —
   toast vẫn hiện/ẩn đúng lúc, chỉ là không trượt. */
@media (prefers-reduced-motion: reduce) {
    .lw-toast,
    .lw-toast.is-leaving { animation: none; }
}

/* Màn hẹp: toast trải hết bề ngang cho dễ đọc, vẫn chừa mép. */
@media (max-width: 600px) {
    .lw-toast-stack {
        --lw-toast-gap: 10px;
        left: var(--lw-toast-gap);
        align-items: stretch;
    }

    .lw-toast { max-width: 100%; }
}