/* toast.css — modern toast notification cards (web/templates/util/notification.templ).
   notification.css is untouchable; the toast-* classes keep its rules dead,
   except .notification-progress which stays as the JS hook for notification.js
   (hover adds .paused) and is explicitly overridden below. */

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  position: relative;
  overflow: hidden; /* clips the progress bar to the rounded corners */
  min-width: 280px;
  max-width: 360px;
  padding: 1rem 2.4rem 1rem 1.2rem;
  background: var(--color-background-secondary);
  border: 1px solid var(--toast-color);
  border-radius: 0.6rem;
  box-shadow: var(--box-shadow);
  animation: toast-enter 200ms ease-out;
}

/* Variant colors. Success stays in the green family from variables.css:
   --color-highlight-hover is overridden per-tenant by the injected theme
   block (primary-derived), which would let a red-branded tenant get red
   "success" toasts — so the literal variables.css green is used instead. */
.toast-success { --toast-color: #1b9c85; }
.toast-error   { --toast-color: var(--color-cancel); }
.toast-warning { --toast-color: color-mix(in srgb, var(--color-warning) 65%, #7a5c00); }
.toast-info    { --toast-color: var(--color-info); }

.toast-icon {
  color: var(--toast-color);
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 2px;
}

.toast-body {
  min-width: 0; /* lets long messages wrap instead of overflowing */
}

.toast-title {
  margin: 0;
  font-weight: 700;
  color: var(--text-color);
}

.toast-code {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-color-muted);
}

.toast-message {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-color-muted);
  overflow-wrap: anywhere;
}

.toast-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  border: none;
  background: transparent;
  color: var(--text-color-muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
}

.toast-close:hover {
  color: var(--text-color);
}

/* Progress bar. .notification-progress is also styled by the untouchable
   notification.css (own ::before animation, transform-origin right) — the
   .toast-scoped selectors below outrank those rules. */
.toast .notification-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  pointer-events: none;
}

.toast .notification-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--toast-color);
  transform-origin: left center;
  animation: toast-progress 5s linear forwards;
}

/* Hover pause hook — notification.js toggles .paused on the element. */
.toast .notification-progress.paused::before {
  animation-play-state: paused;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Leave fade — notification.js adds popup-leave-active/popup-leave-to before
   clearing. (Note: it currently adds them to the #notification container, so
   the .toast-scoped rule is inert until the JS targets the card itself;
   keying on the container would break later toasts because the classes are
   never removed.) */
.toast.popup-leave-to {
  opacity: 0;
  transition: opacity 250ms ease;
}