/* --- Toasts ----------------------------------------------------------

   Append this to assets/admin.css, NOT app.css.

   va_app_head() in lib/chrome.php loads /assets/admin.css, so that is
   the only stylesheet a logged-in page ever sees. app.css is used only
   by va_head() in helpers.php, which is the bare login, signup, setup
   and password pages.

   Append it to portal.css as well for the client portal, and to
   app.css if you want toasts on the auth pages.

   Everything below is built from the tokens already at the top of
   admin.css, so dark mode is inherited rather than restated. The one
   exception is the shadow, which needs a different value in the dark
   palette and gets it at the bottom.                                  */

.va-toasts {
  position: fixed;
  z-index: 900;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}

.va-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(23, 33, 43, .14);
  pointer-events: auto;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.va-toast.is-in    { opacity: 1; transform: none; }
.va-toast.is-going { opacity: 0; transform: translateY(6px); }

.va-toast-ok {
  background: var(--accent-t);
  border-color: var(--accent);
  color: var(--accent-d);
}

.va-toast-warn {
  background: var(--amber-t);
  border-color: var(--amber);
  color: var(--amber);
}

.va-toast-err {
  background: var(--red-t);
  border-color: var(--red);
  color: var(--red);
}

.va-toast-text { flex: 1; }

.va-toast-x {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 17px;
  line-height: 18px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
}

.va-toast-x:hover { opacity: 1; }
.va-toast-x:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

/* Same message twice running: nudge it rather than stack a duplicate. */
.va-toast.is-again { animation: va-toast-again .3s ease; }

@keyframes va-toast-again {
  0%   { transform: none; }
  35%  { transform: translateX(-4px); }
  70%  { transform: translateX(3px); }
  100% { transform: none; }
}

/* A dark page needs a heavier shadow to lift off the background, since
   the light one simply disappears. */
[data-theme="dark"] .va-toast {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* On a phone the topbar is var(--bar) tall and the thumb lives at the
   bottom, so these go full width along the bottom edge. */
@media (max-width: 600px) {
  .va-toasts {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .va-toast {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .va-toast.is-again { animation: none; }
}

/* --- Busy states for data-flow forms -------------------------------- */

.is-busy {
  opacity: .6;
  cursor: progress;
}

form.is-posting { position: relative; }

form.is-posting::after {
  content: '';
  position: absolute;
  inset: 0;
  cursor: progress;
}

/* --- Action button (Undo and the like) ------------------------------ */

.va-toast-act {
  flex: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .9;
}

.va-toast-act:hover { opacity: 1; }
.va-toast-act:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}