/* ============================================================================
   JNVKAA notifications: toasts, the confirm/alert dialog and button loading states.
   Behaviour in /js/notify.js. Loaded by every layout (website, member, consoles, Meet).

   Toast     .tst-stack > .tst.tst--ok|err|warn|info (icon, title, text, close, countdown bar)
   Dialog    dialog.mdl (header icon + title, body, footer actions); tone via .mdl--danger|warn|info|ok
   Loading   .is-loading on a button: spinner, text kept for width (no layout shift)
   ========================================================================== */
:root {
  --tst-ok: #10794f; --tst-ok-bg: #e9f8f0; --tst-ok-ring: #9fdcbe;
  --tst-err: #c0261c; --tst-err-bg: #fdeceb; --tst-err-ring: #f3b4ae;
  --tst-warn: #a15c00; --tst-warn-bg: #fff4e3; --tst-warn-ring: #f1cf96;
  --tst-info: #0b6569; --tst-info-bg: #e6f6f6; --tst-info-ring: #a5dcdf;
}

/* A flash message that has been shown as a toast (the inline copy stays for no-JS visitors). */
.is-toasted { display: none !important; }

/* ---- toasts -------------------------------------------------------------------------- */
.tst-stack { position: fixed; z-index: 400; top: calc(var(--mnav-h, var(--top-h, 56px)) + 10px); left: 12px; right: 12px;
  display: grid; gap: 10px; justify-items: stretch; pointer-events: none; }
@media (min-width: 600px) { .tst-stack { left: auto; right: var(--gutter, 20px); width: 380px; } }
.tst { --c: var(--tst-info); --bg: var(--tst-info-bg); --ring: var(--tst-info-ring);
  position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start;
  padding: 14px 12px 16px 14px; border-radius: 14px; background: rgba(255,255,255,.97); color: var(--ink, #001d23);
  border: 1px solid var(--ring); box-shadow: 0 18px 40px -18px rgba(0,29,35,.45), 0 2px 6px rgba(0,29,35,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: tst-in .42s cubic-bezier(.2,.9,.25,1.15) both; }
.tst::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.tst--ok { --c: var(--tst-ok); --bg: var(--tst-ok-bg); --ring: var(--tst-ok-ring); }
.tst--err { --c: var(--tst-err); --bg: var(--tst-err-bg); --ring: var(--tst-err-ring); }
.tst--warn { --c: var(--tst-warn); --bg: var(--tst-warn-bg); --ring: var(--tst-warn-ring); }
.tst-ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--c); font-size: .95rem; position: relative; }
.tst-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: tst-ping 1.2s ease-out .25s 1; }
.tst-title { margin: 0; font: 700 var(--fs-sm, .8125rem)/1.35 var(--font-body, Inter, sans-serif); color: var(--c); }
.tst-text { margin: 0; grid-column: 2; font-size: var(--fs-sm, .8125rem); line-height: 1.45; color: var(--ink-2, #06313a); overflow-wrap: anywhere; }
.tst-x { grid-row: 1 / span 2; grid-column: 3; width: 30px; height: 30px; margin: -4px -2px 0 0; border: 0; border-radius: 8px; background: none; color: var(--muted, #5b6b6e); cursor: pointer; display: grid; place-items: center; }
.tst-x:hover { background: var(--bg); color: var(--c); }
.tst-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
@media (pointer: coarse) { .tst-x { width: 40px; height: 40px; } }
/* countdown ("loading") bar: shrinks over the toast's lifetime, pauses on hover/focus */
.tst-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg); }
.tst-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); transform-origin: left center; animation: tst-count linear forwards; }
.tst:hover .tst-bar > i, .tst:focus-within .tst-bar > i { animation-play-state: paused; }
.tst.is-leaving { animation: tst-out .26s ease-in forwards; }
@keyframes tst-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tst-out { to { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes tst-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tst-ping { 0% { opacity: .55; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }

/* ---- dialog (confirm / alert) ------------------------------------------------------------ */
dialog.mdl { --c: var(--teal, #129298); --bg: var(--cream, #fff0e6);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--ink, #001d23);
  background: #fff; box-shadow: 0 40px 90px -30px rgba(0,29,35,.55), 0 0 0 1px rgba(0,29,35,.06); overflow: hidden; }
dialog.mdl[open] { animation: mdl-in .32s cubic-bezier(.2,.9,.25,1.12) both; }
dialog.mdl::backdrop { background: radial-gradient(120% 120% at 50% 0%, rgba(6,49,58,.55), rgba(0,20,25,.7)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: mdl-fade .25s ease both; }
dialog.mdl.is-closing { animation: mdl-out .18s ease-in forwards; }
.mdl--danger { --c: var(--tst-err); --bg: var(--tst-err-bg); }
.mdl--warn { --c: var(--tst-warn); --bg: var(--tst-warn-bg); }
.mdl--ok { --c: var(--tst-ok); --bg: var(--tst-ok-bg); }
.mdl--info { --c: var(--tst-info); --bg: var(--tst-info-bg); }
.mdl-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 22px 6px; }
.mdl-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); }
.mdl-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--c); font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); animation: mdl-pop .5s cubic-bezier(.2,.9,.25,1.4) .08s both; }
.mdl-title { margin: 0; font: 700 1.0625rem/1.3 var(--font-head, Saira, sans-serif); color: var(--ink, #001d23); }
.mdl-body { padding: 8px 22px 20px 82px; font-size: var(--fs-base, .875rem); line-height: 1.55; color: var(--ink-2, #06313a); overflow-wrap: anywhere; }
.mdl-body p { margin: 0; }
.mdl-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; background: var(--paper, #f8f8f9); border-top: 1px solid var(--line, rgba(0,29,35,.1)); }
.mdl-foot .btn { min-width: 104px; }
.mdl-foot .btn-danger, .mdl--danger .mdl-ok { --bg: var(--tst-err); --fg: #fff; background: var(--tst-err); border-color: var(--tst-err); color: #fff; }
.mdl--warn .mdl-ok { background: var(--tst-warn); border-color: var(--tst-warn); color: #fff; }
@media (max-width: 479px) {
  dialog.mdl { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; }
  dialog.mdl[open] { animation-name: mdl-up; }
  .mdl-body { padding-left: 22px; }
  .mdl-foot { flex-direction: column-reverse; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .mdl-foot .btn { width: 100%; min-height: 44px; }
}
@keyframes mdl-in { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes mdl-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mdl-out { to { opacity: 0; transform: scale(.97); } }
@keyframes mdl-fade { from { opacity: 0; } }
@keyframes mdl-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.mdl-lock, html.mdl-lock body { overflow: hidden; }

/* ---- button loading state ------------------------------------------------------------------ */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--fg, #fff) var(--fg, #fff) transparent transparent; opacity: .9; animation: btn-spin .7s linear infinite; }
.btn-ghost.is-loading::after, .btn-cream.is-loading::after, .btn-light.is-loading::after { border-color: var(--teal, #129298) var(--teal, #129298) transparent transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tst, .tst.is-leaving, dialog.mdl[open], dialog.mdl::backdrop, .mdl-ico, .tst-ico::after { animation: none !important; }
  .tst-bar > i { animation-duration: 0s !important; animation-play-state: paused !important; transform: none; }
  .btn.is-loading::after { animation-duration: 1.6s; }
}
@media print { .tst-stack, dialog.mdl { display: none !important; } }