/* ui_toast.css — styles for the app-wide message box in static/js/ui_toast.js. Self-contained
   (like ui_dialog.css), so messages look the same on the user pages and in the admin panel. */

/* The box: top right, under the page header where there is one (--ui-toast-top). As a popover
   it is in the top layer; the z-index is for browsers without popovers: above every popup
   (admin popups 9999, the app dialog 10100). */
.ui-toasts {
  position: fixed;
  inset: var(--ui-toast-top, 16px) 16px auto auto;
  z-index: 10200;
  width: min(400px, calc(100vw - 32px)); height: auto;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  flex-direction: column; gap: 10px;
  pointer-events: none;   /* the space between messages does not block the page */
}
.ui-toasts:not([popover]) { display: flex; }
.ui-toasts:not([popover]):empty { display: none; }
.ui-toasts:popover-open { display: flex; }

/* One message: a tinted card with a coloured edge and icon, and a bar for the time left */
.ui-toast {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 10px 14px 13px;
  border: 1px solid var(--ui-toast-edge); border-left: 4px solid var(--ui-toast-c);
  border-radius: 12px;
  background: var(--ui-toast-bg); color: #1f2937;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  font-family: "Poppins", system-ui, sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1.45;
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease;
}
@starting-style { .ui-toast { opacity: 0; transform: translateX(24px); } }
.ui-toast.is-leaving { opacity: 0; transform: translateX(24px); }
.ui-toast.is-again { animation: ui-toast-again .45s ease; }   /* the same message once more */
@keyframes ui-toast-again { 35% { transform: scale(1.03); } }

.ui-toast.is-success { --ui-toast-c: #16a34a; --ui-toast-bg: #f0fdf4; --ui-toast-edge: #bbf7d0; }
.ui-toast.is-error   { --ui-toast-c: #dc2626; --ui-toast-bg: #fef2f2; --ui-toast-edge: #fecaca; }
.ui-toast.is-warning { --ui-toast-c: #d97706; --ui-toast-bg: #fffbeb; --ui-toast-edge: #fde68a; }
.ui-toast.is-info    { --ui-toast-c: #4f46e5; --ui-toast-bg: #eef2ff; --ui-toast-edge: #c7d2fe; }

.ui-toast-icon {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ui-toast-c); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.ui-toast-msg { flex: 1; min-width: 0; margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ui-toast-close {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; margin: -2px -2px 0 0;
  border: 0; border-radius: 6px; background: transparent; color: #6b7280;
  font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.ui-toast-close:hover { background: rgba(15, 23, 42, 0.07); color: #111827; }
.ui-toast-close:focus-visible { outline: 2px solid var(--ui-toast-c); outline-offset: 1px; }
.ui-toast-time {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ui-toast-c); opacity: .55;
  transform-origin: left center;
  animation: ui-toast-time linear forwards;
}
.ui-toast:hover .ui-toast-time, .ui-toast:focus-within .ui-toast-time { animation-play-state: paused; }
@keyframes ui-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

html.dark .ui-toast { color: #e2e8f0; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
html.dark .ui-toast.is-success { --ui-toast-c: #22c55e; --ui-toast-bg: #0f2a1d; --ui-toast-edge: #14532d; }
html.dark .ui-toast.is-error   { --ui-toast-c: #f87171; --ui-toast-bg: #2c1215; --ui-toast-edge: #7f1d1d; }
html.dark .ui-toast.is-warning { --ui-toast-c: #fbbf24; --ui-toast-bg: #2b2110; --ui-toast-edge: #78350f; }
html.dark .ui-toast.is-info    { --ui-toast-c: #818cf8; --ui-toast-bg: #1b1d3a; --ui-toast-edge: #3730a3; }
html.dark .ui-toast.is-warning .ui-toast-icon { color: #111827; }
html.dark .ui-toast-close { color: #94a3b8; }
html.dark .ui-toast-close:hover { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }

/* read out by screen readers, not shown */
.ui-toast-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 640px) {
  .ui-toasts { inset: var(--ui-toast-top, 12px) 12px auto 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-toast { transition: opacity .15s; }
  @starting-style { .ui-toast { transform: none; } }
  .ui-toast.is-leaving { transform: none; }
  .ui-toast.is-again { animation: none; }
}