/* ============================================
   TOAST.CSS — Toast notification component
   ============================================ */

.toast-container { position:fixed; top:80px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius); background:var(--white); border:1px solid var(--gray-200); box-shadow:var(--shadow-lg); min-width:280px; max-width:400px; pointer-events:auto; animation:toastIn 0.3s ease; }
.toast.hiding { animation:toastOut 0.25s ease forwards; }
.toast-icon { width:20px; height:20px; flex-shrink:0; }
.toast-body { flex:1; }
.toast-title { font-size:0.8125rem; font-weight:700; color:var(--gray-900); }
.toast-msg { font-size:0.75rem; color:var(--gray-500); margin-top:2px; }
.toast-close { width:16px; height:16px; flex-shrink:0; cursor:pointer; color:var(--gray-400); transition:var(--transition); }
.toast-close:hover { color:var(--gray-700); }

.toast.toast-success { border-left:3px solid var(--green); }
.toast.toast-success .toast-icon { color:var(--green); }
.toast.toast-error { border-left:3px solid var(--red); }
.toast.toast-error .toast-icon { color:var(--red); }
.toast.toast-warning { border-left:3px solid var(--amber); }
.toast.toast-warning .toast-icon { color:var(--amber); }
.toast.toast-info { border-left:3px solid var(--blue); }
.toast.toast-info .toast-icon { color:var(--blue); }

@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }

/* -- Empty State -- */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state-icon { width:64px; height:64px; margin:0 auto 16px; color:var(--gray-300); }
.empty-state-title { font-size:1rem; font-weight:700; color:var(--gray-700); margin-bottom:6px; }
.empty-state-desc { font-size:0.8125rem; color:var(--gray-400); margin-bottom:20px; }

/* -- Loading Skeleton -- */
.skeleton { background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius); }
.skeleton-text { height:12px; margin-bottom:8px; width:80%; }
.skeleton-text.short { width:50%; }
.skeleton-card { height:100px; border-radius:var(--radius-lg); }
.skeleton-circle { width:40px; height:40px; border-radius:50%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }