[v-cloak] { display: none; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Toast notifications (pengganti alert()) ---- */
.toast-enter-active, .toast-leave-active { transition: all .25s ease; }
.toast-enter-from { opacity: 0; transform: translateY(-10px) scale(.97); }
.toast-leave-to { opacity: 0; transform: translateX(20px); }

/* ---- Skeleton loading saat data awal dimuat ---- */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.skeleton { animation: skeleton-pulse 1.4s ease-in-out infinite; background-color: #e2e8f0; border-radius: .5rem; }

/* ---- Spinner kecil di tombol saat proses simpan ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spinner { animation: spin .6s linear infinite; }

/* ---- Modal konfirmasi (satu transition saja, overlay + panel bareng) ---- */
.modal-enter-active, .modal-leave-active { transition: opacity .2s ease; }
.modal-enter-active .modal-panel, .modal-leave-active .modal-panel { transition: all .2s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-from .modal-panel, .modal-leave-to .modal-panel { opacity: 0; transform: scale(.95) translateY(8px); }