/* ── Global Toast System ─────────────────────────────────────────────── */
/* Single source of truth for toast positioning and styling.             */
/* Included via head.ejs so every page gets consistent toast behaviour.  */

#toastRack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  max-width: 380px;
}

.toast {
  background: var(--graphite, #2D2D2D);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--white, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  animation: toastSlideIn .25s ease;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.success {
  border-color: var(--green, #4ade80);
  color: var(--green, #4ade80);
}

.toast.error,
.toast.danger {
  border-color: var(--red, #f87171);
  color: var(--red, #f87171);
}

.toast.warning {
  border-color: var(--yellow, #facc15);
  color: var(--yellow, #facc15);
}

.toast.info {
  border-color: var(--blue, #60a5fa);
  color: var(--blue, #60a5fa);
}

.toast-primary,
.toast.toast-primary {
  border-color: var(--amber, #F97316);
  color: var(--amber, #F97316);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Bootstrap toast fallback (when #toastWrap is used) ──────────────── */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast-wrap .toast {
  pointer-events: auto;
}