/* ============================================================
   DiveLog DS — Component: Toast
   Notifiche temporanee posizionate in alto a destra.
   Usato da: user_dashboard, admin_dashboard (future).
   Token: --space-*, --radius-*, --color-success/error/info/warning,
          --shadow-*, --z-toast, --motion-*, --ease-standard
   ============================================================ */

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  font-size: var(--font-body-medium);
  font-weight: var(--weight-medium);
  color: #fff;
  box-shadow: var(--shadow-medium);
  animation: toast-slide-in var(--motion-medium) var(--ease-standard);
  pointer-events: auto;
  max-width: 360px;
}

.toast--success { background: var(--color-success); }
.toast--error   { background: var(--color-error); }
.toast--info    { background: var(--color-info); }
.toast--warning { background: var(--color-warning); }

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }
  .toast {
    max-width: none;
  }
}