/*
 * Toasts: short notes after an action ("Changes saved", errors). Django
 * messages render as toasts (templates/ui/toasts.html) and scripts can add one
 * with window.kpToast("Copied", "success"). They sit in the top-right corner
 * (top of the screen on phones), placed with daisyUI's toast, styled with
 * the Kulmi Pay tokens.
 * Success and info close by themselves; warnings and errors stay until closed.
 * Needs ui/tokens.css.
 */
/* The corner stack (templates/ui/corner.html): daisyUI's `toast toast-top
   toast-end` places it; toasts first, admin announcements under them. */
.kp-corner.toast {
  /* daisyUI's toast does this too; repeated for pages without daisyUI (pay_base) */
  position: fixed; inset-inline-end: 0; bottom: auto; display: flex; flex-direction: column;
  z-index: 60; top: 16px; gap: 10px; padding: 0 16px;
  width: min(412px, 100vw); min-width: 0; /* daisyUI sizes the toast to its longest line */
  align-items: stretch;
  pointer-events: none; /* only the cards take clicks */
  white-space: normal; font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.kp-corner.toast > * { animation: none; } /* each card animates itself */
/* Under the dashboard's fixed top bar */
body:has(.kp-topbar) .kp-corner.toast { top: 72px; }

.kp-toasts { display: grid; gap: 10px; }
.kp-toasts[hidden] { display: none; }

.kp-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 8px 12px 12px;
  background: var(--kp-popover); color: var(--kp-text);
  border: 1px solid var(--kp-divider); border-radius: 12px;
  box-shadow: var(--kp-popover-shadow);
  animation: kp-toast-in .28s cubic-bezier(.2, .8, .2, 1);
}
.kp-toast.is-leaving { animation: kp-toast-out .2s ease-in forwards; }

.kp-toast-icon { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; color: var(--kp-muted); }
.kp-toast-icon svg { width: 18px; height: 18px; }
.kp-toast[data-tone="success"] .kp-toast-icon { color: var(--kp-ok); }
.kp-toast[data-tone="warning"] .kp-toast-icon { color: var(--kp-warn-edge); }
.kp-toast[data-tone="error"] .kp-toast-icon { color: var(--kp-danger); }

.kp-toast-text { margin: 0; padding-top: 3px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }

.kp-toast-close {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: none; color: var(--kp-muted); cursor: pointer;
}
.kp-toast-close:hover { background: var(--kp-option-hover); color: var(--kp-text); }
.kp-toast-close:focus-visible { outline: 2px solid var(--kp-ember); outline-offset: 1px; }
.kp-toast-close svg { width: 15px; height: 15px; }

/* Time left before a toast closes by itself (paused while hovered/focused) */
.kp-toast-timer {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: .18; transform-origin: left;
  animation: kp-toast-timer var(--kp-toast-ms, 5000ms) linear forwards;
}
.kp-toast:hover .kp-toast-timer, .kp-toast:focus-within .kp-toast-timer { animation-play-state: paused; }

@keyframes kp-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes kp-toast-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes kp-toast-timer { to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .kp-corner.toast { width: 100vw; top: 12px; padding: 0 12px; }
  body:has(.kp-topbar) .kp-corner.toast { top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-toast, .kp-toast.is-leaving { animation: none; }
}