/* Toast notifications, shared by the public site and the admin panel.
   Deliberately self-contained (literal colours, no custom properties) so it
   can be dropped into either context without depending on which stylesheet
   loaded first. */

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;   /* newest sits closest to the corner */
  gap: 10px;
  pointer-events: none;             /* clicks pass through the empty column */
  max-width: 380px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #dde2e8;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .06), 0 12px 28px -10px rgba(17, 24, 39, .22);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1f2429;
  animation: toast-in .22s cubic-bezier(.4, 0, .2, 1);
}

/* A coloured edge rather than a coloured fill, so the text stays legible and
   the toast does not shout over the page behind it. */
.toast-success { border-left: 4px solid #0f7b3d; }
.toast-error   { border-left: 4px solid #ce1126; }
.toast-warn    { border-left: 4px solid #8a6100; }

.toast-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.toast-success .toast-icon { background: #0f7b3d; }
.toast-error   .toast-icon { background: #ce1126; }
.toast-warn    .toast-icon { background: #8a6100; }

.toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }

.toast-close {
  flex: none;
  width: 22px;
  height: 22px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1;
  color: #858e99;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toast-close:hover { background: #f2f5f8; color: #1f2429; }
.toast-close:focus-visible { outline: 2px solid #003893; outline-offset: 1px; }

.toast.is-going {
  animation: toast-out .18s cubic-bezier(.4, 0, 1, 1) forwards;
}

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

/* Someone who has asked for less motion still gets the toast, just without
   it sliding in or out. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-going { animation: none; }
  .toast.is-going { opacity: 0; }
}

/* Dark variant for the public site.
   Two conditions, both needed. The file is shared with the admin panel, which
   is light-only and never sets data-theme, so [data-theme="dark"] alone would
   still be safe today but would break the moment the admin gains a theme; and
   the public site itself is only dark when the visitor has not switched. The
   .admin-body guard makes the intent explicit either way. */
:root[data-theme="dark"] body:not(.admin-body) .toast {
  background: #0f141b;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 48px -18px rgba(0, 0, 0, .9);
  color: #f5f7fa;
}
/* Brighter edge colours: the light-theme greens and reds go muddy against
   near-black and drop below 3:1 as an indicator. */
:root[data-theme="dark"] body:not(.admin-body) .toast-success { border-left-color: #35d07f; }
:root[data-theme="dark"] body:not(.admin-body) .toast-error   { border-left-color: #ff5c6e; }
:root[data-theme="dark"] body:not(.admin-body) .toast-warn    { border-left-color: #f5a524; }
:root[data-theme="dark"] body:not(.admin-body) .toast-success .toast-icon { background: #35d07f; color: #04120a; }
:root[data-theme="dark"] body:not(.admin-body) .toast-error   .toast-icon { background: #ff5c6e; color: #1a0407; }
:root[data-theme="dark"] body:not(.admin-body) .toast-warn    .toast-icon { background: #f5a524; color: #150d00; }
:root[data-theme="dark"] body:not(.admin-body) .toast-close { color: #6b7686; }
:root[data-theme="dark"] body:not(.admin-body) .toast-close:hover { background: #1a222c; color: #f5f7fa; }
:root[data-theme="dark"] body:not(.admin-body) .toast-close:focus-visible { outline-color: #22d3ee; }

/* On a phone a 380px column would sit awkwardly off-centre; go full width
   with a small inset instead so long messages stay readable. */
@media (max-width: 480px) {
  .toast-stack {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}