/* ==========================================================
   ui_toast.css — Zentrale Toast-Notifications
   Stack: bottom-right. Zwei Toasts überlappen vertikal.
   ========================================================== */

.vn-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 14000;
  max-width: 420px;
  padding: 12px 18px;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.08));
  border-left: 4px solid var(--accent-blue, #2563eb);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;  /* Toasts blockieren keinen Klick */
}

.vn-toast--show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.vn-toast--success { border-left-color: var(--color-success, #16a34a); }
.vn-toast--warn    { border-left-color: var(--color-warning, #d97706); }
.vn-toast--error   { border-left-color: var(--color-danger,  #dc2626); }
.vn-toast--info    { border-left-color: var(--accent-blue,   #2563eb); }

/* Bei mehreren Toasts: native CSS-Stacking — der zweite landet 12px höher.
   Wenn jemand Toast.show() in schneller Folge aufruft, stapeln sich die
   Toasts ohne JS-Logik. */
.vn-toast + .vn-toast { bottom: 80px; }
.vn-toast + .vn-toast + .vn-toast { bottom: 136px; }
.vn-toast + .vn-toast + .vn-toast + .vn-toast { bottom: 192px; }