/* toastr (vendor) vs komponen `.toast` milik Bootstrap.

   GXON mengkompilasi Bootstrap ke dalam `assets/css/styles.css`, termasuk
   komponen toast-nya, dan nama kelasnya persis sama dengan yang dipakai toastr
   (`<div class="toast toast-success">`). Karena `styles.css` dimuat setelah
   `assets/vendor/toastr/css/toastr.min.css`, deklarasi Bootstrap yang menang:

     .toast { background-color: var(--bs-toast-bg) }   ->  rgba(body-bg, .9)

   menimpa `.toast-success { background-color: #51A351 }` (spesifisitas sama,
   file belakangan menang), sementara warna teks toastr bertahan karena berada
   di `#toast-container > div { color: #FFF }` yang spesifisitasnya lebih
   tinggi. Efeknya: kotak toast muncul putih dengan teks putih -- kelihatan
   kosong.

   Semua aturan di sini karena itu diikat ke `#toast-container` supaya berada di
   atas `.toast` Bootstrap, dan warnanya diambil dari variabel tema (bukan
   palet asli toastr) agar seragam dengan komponen lain dan ikut mode gelap.

   Dimuat setelah `styles.css` di `layouts.partials.head`. Toast dipanggil lewat
   `_toast()` / `_toastNextPage()` di `layouts.partials.js-helpers`. */

#toast-container > div {
    /* Menetralkan `.toast` Bootstrap: border, ukuran font, dan
       `.toast:not(.show) { display: none }` (yang selama ini hanya kalah dari
       `display` inline milik jQuery `fadeIn`). */
    display: block;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-white);
    opacity: 1;
    box-shadow: 0 0.25rem 1rem rgba(var(--bs-dark-rgb), 0.25);
}

#toast-container > div:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(var(--bs-dark-rgb), 0.35);
}

/* Latar per tipe. Ikon PNG-nya sendiri sudah `!important` di CSS vendor, jadi
   yang perlu dipulihkan hanya `background-color`. Aturan varian ditulis setelah
   `.toast` polos supaya menang pada spesifisitas yang sama. */
#toast-container > .toast {
    background-color: var(--bs-dark);
}

#toast-container > .toast-success {
    background-color: var(--bs-success);
}

#toast-container > .toast-error {
    background-color: var(--bs-danger);
}

#toast-container > .toast-info {
    background-color: var(--bs-info);
}

/* `--bs-warning` terlalu terang untuk teks putih; pakai teks gelap tema. */
#toast-container > .toast-warning,
#toast-container > .toast-warning .toast-title,
#toast-container > .toast-warning .toast-message {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}
