/* Notifikasi di bawah island navbar (permintaan user 2026-11-04). Dibuat oleh public/js/island-notif.js.
   .nbi-pil = notifikasi biasa (simpan, edit, hapus, gagal, ekspor, proses); .nbi-stk = notifikasi sistem yang masuk (tumpukan).
   Tidak pernah menutupi menu: wadah .nbi duduk di bawah navbar dan tidak menangkap klik, kecuali tumpukan yang bisa dibuka. */
.nbi { position: fixed; z-index: 100000; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 24px); pointer-events: none; transition: top .25s ease; }

/* ---- Kapsul kedua: notifikasi biasa ---- */
.nbi-pil { --ik: #fbbf24; --ik-on: #1b170f; --ket: #8a6a24; display: none; align-items: center; gap: 10px; box-sizing: border-box; max-width: 100%; padding: 6px 16px 6px 7px; border-radius: 22px; background: #fffaf0; border: 1px solid #f3dca0; color: #5b3d06; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
.nbi-pil.is-on { display: flex; animation: nbi-turun .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.nbi .is-on.is-out { animation: nbi-naik .2s ease both; }
.nbi-pil.t-success { --ik: #34d399; --ik-on: #052e1b; --ket: #2f6f56; background: #f1fbf5; border-color: #b9e8cf; color: #064e3b; }
.nbi-pil.t-error { --ik: #f87171; --ik-on: #3b0a0a; --ket: #9f4545; background: #fff2f2; border-color: #f6c6c6; color: #7f1d1d; }
.nbi-pil-ik { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--ik); color: var(--ik-on); }
.nbi-pil-ik svg { width: 15px; height: 15px; }
.nbi-pil.t-loading .nbi-pil-ik svg { animation: nbi-putar .85s linear infinite; }
.nbi-pil-tx { display: flex; flex-direction: column; min-width: 0; }
.nbi-pil-jd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.35; }
.nbi-pil-ket { display: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--ket); }
.nbi-pil.has-ket { padding-block: 8px; }
.nbi-pil.has-ket .nbi-pil-ket { display: -webkit-box; }

/* ---- Tumpukan: notifikasi sistem yang masuk ---- */
.nbi-stk { display: none; position: relative; width: min(340px, calc(100vw - 24px)); }
.nbi-stk.is-on { display: block; animation: nbi-turun .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.nbi-stk.is-multi.is-on { pointer-events: auto; cursor: pointer; }
.nbi-stk:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; border-radius: 18px; }
.nbi-kt { position: absolute; left: 0; right: 0; top: 0; height: 80px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 18px; background: #15120b; border: 1px solid rgba(247, 231, 184, .14); color: #f7e7b8; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55); transform-origin: 50% 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.nbi-kt-ik { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: rgba(251, 191, 36, .16); color: #fbbf24; }
.nbi-kt-ik svg { width: 20px; height: 20px; }
.nbi-kt-tx { flex: 1; min-width: 0; }
.nbi-kt-jd { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 1.3; color: #f7e7b8; }
.nbi-kt-ps { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.35; color: rgba(230, 215, 180, .66); }
.nbi-kt-tm { flex: 0 0 auto; font-size: 11px; color: rgba(230, 215, 180, .5); }
.nbi-kt-jml { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #fbbf24; color: #1b170f; font-size: 11px; font-weight: 600; }
.nbi-kt [hidden] { display: none; }
/* Tombol tutup di sudut kanan atas tumpukan (menonjol sedikit keluar kartu supaya tidak menimpa waktu/jumlah). Wadah .nbi tidak menangkap
   klik, jadi tombol sendiri yang menerima klik. */
.nbi-x { position: absolute; top: -9px; right: -9px; z-index: 100; display: none; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(247, 231, 184, .3); background: #15120b; color: #f7e7b8; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .55); }
.nbi-stk.is-on .nbi-x { display: grid; }
.nbi-x svg { width: 13px; height: 13px; }
.nbi-x:hover { background: #2b2415; color: #fff; }
.nbi-x:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

@keyframes nbi-turun { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes nbi-naik { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes nbi-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .nbi, .nbi-kt { transition: none; }
    .nbi-pil.is-on, .nbi-stk.is-on { animation: none; }
    .nbi-pil.t-loading .nbi-pil-ik svg { animation-duration: 2.5s; }
}