/* ============================================================================
   TOAST-REVISI.CSS — Revisi notifikasi (toast) & status memuat
   ----------------------------------------------------------------------------
   Masalah lama:
     #toast-container sempat ikut ke-relative-kan oleh aturan bersama di
     aurora.css (dipakai bareng #app-shell/#login-screen/#modal-container),
     sehingga wadah toast ikut menempati ruang di ALUR DOKUMEN dan mendorong
     header/konten utama ke bawah — inilah pita hijau yang terlihat menabrak
     kartu "Sistem Pengasuhan" di layar.

   Revisi ini:
     1. Mengunci #toast-container tetap position:fixed, lepas total dari
        alur dokumen — apa pun aturan CSS lain nanti, toast TIDAK PERNAH
        lagi mendorong tampilan.
     2. Toast tampil di TENGAH layar (bukan pita di bagian atas), sebagai
        kartu kaca gelap — gaya "HUD" seperti notifikasi status pada
        aplikasi native.
     3. Menyediakan gaya untuk status "sedang memuat" (spinner) yang
        nantinya berubah halus menjadi tanda selesai — lihat toast.js.

   Dimuat PALING AKHIR di <head> (sesudah aurora.css) supaya menang di
   cascade untuk #toast-container.
   ============================================================================ */

#toast-container {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.5rem;
    pointer-events: none !important;
}

.stoast {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    min-width: 172px;
    max-width: min(86vw, 300px);
    padding: 1.3rem 1.5rem 1.15rem;
    border-radius: 1.35rem;
    text-align: center;
    color: #f4f6fb;
    background: linear-gradient(165deg, rgba(24, 30, 50, .94), rgba(9, 12, 22, .97));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    /* PERFORMA: latar sudah 94–97% pekat; blur kaca dihapus (tak terlihat, tetapi berat). */
    animation: stoastMasuk .42s cubic-bezier(.22, 1, .32, 1) both;
}
.stoast.stoast-keluar { animation: stoastKeluar .3s ease forwards; }

@keyframes stoastMasuk {
    from { opacity: 0; transform: scale(.8) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes stoastKeluar {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(.88) translateY(-6px); }
}

.stoast-ikon {
    width: 48px; height: 48px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: background .25s ease, color .25s ease;
}
.stoast[data-jenis="success"] .stoast-ikon { background: rgba(16, 185, 129, .16); color: #34d399; }
.stoast[data-jenis="error"]   .stoast-ikon { background: rgba(239, 68, 68, .16);  color: #f87171; }
.stoast[data-jenis="info"]    .stoast-ikon { background: rgba(99, 102, 241, .16); color: #a5b4fc; }
.stoast[data-jenis="loading"] .stoast-ikon { background: rgba(255, 255, 255, .1); color: #fff; }

.stoast-spin {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .22);
    border-top-color: #fff;
    animation: stoastSpin .7s linear infinite;
}
@keyframes stoastSpin { to { transform: rotate(360deg); } }

.stoast-pesan {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: .1px;
}

@media (prefers-reduced-motion: reduce) {
    .stoast { animation: none !important; }
    .stoast-spin { animation-duration: 1.4s; }
}

@media print {
    #toast-container { display: none !important; }
}