/* =============================================================================
   CanIPhish platform toasts
   Modern skin for the customised toastr 2.1.x build shipped in
   assets/extra-libs/toastr/dist/build/toastr.min.js (that build stamps the
   container with class "toast-container" next to id "toast-container").

   Replaces toastr.min.css on the /platform pages (Views/User/*); the stock file
   stays in place for the sign-in and sign-up pages, which load the same copy.
   Self-contained: container positioning and card structure live here; every
   colour is read from the --tn-* custom properties set by the skin block at the
   end of this file (the file is unusable without one). Icons are filled
   Material glyphs used as alpha masks - a badge in --tn-icon with the symbol
   knocked out - sitting on a soft --tn-icon-bg disc. No icon font, sprite or
   image request is involved. If the stock stylesheet is ever loaded on the same
   page, this one still wins its two !important type rules.

   DOM (toastr builds it; nothing in the JS changes):
     #toast-container.toast-container.toast-top-right
       div.toast.toast-success | .toast-error | .toast-info | .toast-warning
         div.toast-progress          only when progressBar: true
         button.toast-close-button   only when closeButton: true
         div.toast-title
         div.toast-message
   ========================================================================== */

/* Container ------------------------------------------------------------------ */
.toast-container { position: fixed; z-index: 999999; pointer-events: none; }
.toast-container * { box-sizing: border-box; }
.toast-container.toast-top-right         { top: 16px; right: 20px; }
.toast-container.toast-top-left          { top: 16px; left: 20px; }
.toast-container.toast-bottom-right      { right: 20px; bottom: 20px; }
.toast-container.toast-bottom-left       { left: 20px; bottom: 20px; }
.toast-container.toast-top-center        { top: 16px; right: 0; width: 100%; }
.toast-container.toast-bottom-center     { right: 0; bottom: 20px; width: 100%; }
.toast-container.toast-top-full-width    { top: 0; right: 0; width: 100%; }
.toast-container.toast-bottom-full-width { right: 0; bottom: 0; width: 100%; }
.toast-container.toast-top-center > .toast,
.toast-container.toast-bottom-center > .toast { width: 360px; margin-left: auto; margin-right: auto; }
.toast-container.toast-top-full-width > .toast,
.toast-container.toast-bottom-full-width > .toast { width: 96%; margin-left: auto; margin-right: auto; }

/* Every shell keeps a 64-80px header at the top of the page (the bootstrap V2
   layout fixes its 64px topbar from 768px up; the learning platform's 80px
   navbar and 70px logo bar scroll away). Sit the stack under it rather than
   across the avatar, bell or language button; the phone rule below takes over. */
@media (min-width: 481px) {
  .toast-container.toast-top-right,
  .toast-container.toast-top-left,
  .toast-container.toast-top-center { top: 80px; }
}

/* Card ----------------------------------------------------------------------- */
.toast-container > .toast {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 360px;
  max-width: 100%;
  min-height: 58px;
  margin: 0 0 10px;
  padding: 12px 42px 12px 60px;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;                      /* tapToDismiss is on: clicking the card closes it */
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  color: var(--tn-text);
  font-family: inherit;                 /* Inter on the platform */
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  opacity: 1;
  box-shadow: inset var(--tn-accent-w) 0 0 0 var(--tn-accent), var(--tn-shadow);
  animation: tn-enter .32s cubic-bezier(.2, .8, .2, 1);
  transition: box-shadow .18s ease;
}
/* The !important mirrors the two !important rules in the stock toastr.min.css,
   so this file still wins if both stylesheets are ever loaded on one page. */
.toast-container > .toast.toast-success,
.toast-container > .toast.toast-error,
.toast-container > .toast.toast-info,
.toast-container > .toast.toast-warning { background: var(--tn-bg) !important; }
.toast-container > .toast:hover {
  box-shadow: inset var(--tn-accent-w) 0 0 0 var(--tn-accent), var(--tn-shadow-hover);
}

/* Icon: soft disc (::before) under a filled glyph mask (::after). Offsets are
   from the padding box, so the pair is centred on a title-less 58px card. ---- */
.toast-container > .toast::before {
  content: "";
  position: absolute;
  top: 12px; left: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tn-icon-bg);
}
.toast-container > .toast::after {
  content: "";
  position: absolute;
  top: 19px; left: 21px;
  width: 20px; height: 20px;
  background-color: var(--tn-icon);
  -webkit-mask: var(--tn-glyph) center / contain no-repeat;
          mask: var(--tn-glyph) center / contain no-repeat;
}
.toast-container > .toast.toast-success { --tn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.toast-container > .toast.toast-error   { --tn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E"); }
.toast-container > .toast.toast-info    { --tn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.toast-container > .toast.toast-warning { --tn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); }

/* Text ----------------------------------------------------------------------- */
.toast-container > .toast .toast-title {
  margin: 0 0 2px;
  color: var(--tn-title);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}
.toast-container > .toast .toast-message {
  color: var(--tn-text);
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.toast-container > .toast .toast-message a {
  color: var(--tn-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.toast-container > .toast .toast-message a:hover { color: var(--tn-title); }
.toast-container > .toast .toast-message label { color: inherit; }

/* Close button --------------------------------------------------------------- */
.toast-container > .toast .toast-close-button {
  position: absolute;
  top: 9px; right: 9px;
  float: none;
  width: 26px; height: 26px;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tn-close);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease, color .15s ease;
}
.toast-container > .toast .toast-close-button:hover,
.toast-container > .toast .toast-close-button:focus {
  background: var(--tn-close-bg);
  color: var(--tn-close-hover);
  opacity: 1;
  outline: 0;
}
/* Ring on every focus, then removed again for pointer focus where the engine
   understands :focus-visible - so keyboard users always get one. */
.toast-container > .toast .toast-close-button:focus { box-shadow: 0 0 0 3px var(--tn-ring); }
.toast-container > .toast .toast-close-button:focus:not(:focus-visible) { box-shadow: none; }

/* Progress bar (toastr drives the width inline) ------------------------------ */
.toast-container > .toast .toast-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: var(--tn-progress);
  border-radius: 0 2px 2px 0;
  opacity: 1;
}

/* Right-to-left -------------------------------------------------------------- */
.toast-container > .toast.rtl { direction: rtl; padding: 12px 60px 12px 42px; text-align: right; }
.toast-container > .toast.rtl::before { left: auto; right: 14px; }
.toast-container > .toast.rtl::after  { left: auto; right: 21px; }
.toast-container > .toast.rtl .toast-close-button { right: auto; left: 9px; }
.toast-container > .toast.rtl .toast-progress { left: auto; right: 0; border-radius: 2px 0 0 2px; }

/* Motion: slide in from the edge the stack lives on; jQuery fades the opacity - */
@keyframes tn-enter      { from { transform: translateX(18px);  } to { transform: none; } }
@keyframes tn-enter-left { from { transform: translateX(-18px); } to { transform: none; } }
@keyframes tn-enter-down { from { transform: translateY(-12px); } to { transform: none; } }
@keyframes tn-enter-up   { from { transform: translateY(12px);  } to { transform: none; } }
.toast-container.toast-top-left > .toast,
.toast-container.toast-bottom-left > .toast { animation-name: tn-enter-left; }
.toast-container.toast-top-center > .toast,
.toast-container.toast-top-full-width > .toast { animation-name: tn-enter-down; }
.toast-container.toast-bottom-right > .toast,
.toast-container.toast-bottom-center > .toast,
.toast-container.toast-bottom-full-width > .toast { animation-name: tn-enter-up; }
@media (prefers-reduced-motion: reduce) {
  .toast-container > .toast { animation: none; transition: none; }
}

/* Small screens -------------------------------------------------------------- */
@media (max-width: 480px) {
  .toast-container.toast-top-right,
  .toast-container.toast-top-left    { top: 10px; left: 12px; right: 12px; }
  .toast-container.toast-bottom-right,
  .toast-container.toast-bottom-left { bottom: 12px; left: 12px; right: 12px; }
  .toast-container > .toast { width: 100%; }
  .toast-container.toast-top-center > .toast,
  .toast-container.toast-bottom-center > .toast { width: calc(100% - 24px); }
}
@media (min-width: 481px) and (max-width: 767px) {
  .toast-container > .toast { width: 340px; }
}

/* Skin block (one per deployment; swap this block to change the look) ---- */
/* Skin: Card
   White surface, type colour carried by a tinted icon disc and the progress line.
   Tones are the Domain Protection status-chip family, so toasts and chips agree. */
.toast-container > .toast {
  --tn-bg: #ffffff;
  --tn-border: #e3e8ef;
  --tn-title: #1f262d;
  --tn-text: #5b6573;
  --tn-link: #1f73ca;
  --tn-close: #8b95a5;
  --tn-close-hover: #1f262d;
  --tn-close-bg: #eef1f5;
  --tn-ring: rgba(31, 115, 202, .28);
  --tn-shadow: 0 10px 30px rgba(31, 38, 45, .14), 0 1px 3px rgba(31, 38, 45, .08);
  --tn-shadow-hover: 0 14px 36px rgba(31, 38, 45, .18), 0 1px 3px rgba(31, 38, 45, .08);
  --tn-accent-w: 0px;                   /* 4px gives the card a coloured left edge */
}
.toast-container > .toast.toast-success { --tn-icon: #1e7a45; --tn-icon-bg: #e9f6ee; --tn-accent: #1e7a45; --tn-progress: #1e7a45; }
.toast-container > .toast.toast-error   { --tn-icon: #b42318; --tn-icon-bg: #fdecec; --tn-accent: #b42318; --tn-progress: #b42318; }
.toast-container > .toast.toast-info    { --tn-icon: #1f73ca; --tn-icon-bg: #eef5fc; --tn-accent: #1f73ca; --tn-progress: #1f73ca; }
.toast-container > .toast.toast-warning { --tn-icon: #9a6a10; --tn-icon-bg: #fdf5e4; --tn-accent: #9a6a10; --tn-progress: #b8801c; }