/* ────────────────────────────────────────────────────────────────────────── */
/*  Global Toast System — Single Source of Truth                             */
/*  Based strictly on the reference design from pos-v2 (1).html              */
/*  Included via head.ejs so every page gets consistent toast behaviour.     */
/* ────────────────────────────────────────────────────────────────────────── */

/* Toast rack — fixed bottom-right, stacking vertically */
#toastRack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
    z-index: 9999;
  pointer-events: none;
  max-width: 300px;
}

/* Base toast style — matches pos-v2 reference exactly */
.toast {
  background: var(--graphite, #2D2D2D);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  padding: 11px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--white, #FFFFFF);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}

/* Bootstrap hides .toast until its plugin adds .show; Tillova renders and
   animates toasts directly, so keep our rack's toast elements displayable. */
#toastRack .toast:not(.show) {
  display: flex;
}

/* Entry animation — matches pos-v2 @keyframes tIn */
.toast.toast-enter {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Exit animation — fade out and collapse */
.toast.toast-exit {
  opacity: 0;
  transform: translateY(10px) scale(.96);
}

/* Variant: Error (red) — matches pos-v2 .toast.e */
.toast.e,
.toast.error {
  border-color: var(--red, #f87171);
  color: var(--red, #f87171);
}

/* Variant: Success (green) — matches pos-v2 .toast.s */
.toast.s,
.toast.success {
  border-color: var(--green, #4ade80);
  color: var(--green, #4ade80);
}

/* Variant: Warning (yellow) — extends the palette */
.toast.w,
.toast.warning {
  border-color: var(--yellow, #facc15);
  color: var(--yellow, #facc15);
}

/* Variant: Info (blue) — extends the palette */
.toast.i,
.toast.info {
  border-color: var(--blue, #60a5fa);
  color: var(--blue, #60a5fa);
}

/* Close button — minimal, matches dark theme */
.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: .4;
  transition: opacity .15s ease;
}

.toast-close:hover {
  opacity: .8;
}

/* Toast message wrapper */
.toast-msg {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .toast.toast-enter {
    opacity: 1;
    transform: none;
  }
  .toast.toast-exit {
    display: none;
  }
}