/* =============================================================================
   CanIPhish Learning platform toasts
   Modern skin for the customised toastr 2.1.3 build the pages load from
   https://d3p8e1mvy30w84.cloudfront.net/assets/extra-libs/toastr/dist/build/
   toastr.min.js (that build stamps the container with class "toast-container"
   next to id "toast-container").

   Replaces the CDN toastr.min.css link on _LearningLayout, _SCORMLayout and the
   platform pages (Login, Dashboard, Consent, SSO). Same stylesheet as
   canibespoofed-bootstrap/dist/css/toastr-platform.css plus the two Bootstrap 5
   co-existence blocks: both shells here ship Bootstrap's own .toast component
   (learning/css/theme.min.css on the platform pages, quiz/css/bootstrap.min.css
   on the courses) and toastr's elements wear the same class names.
   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.

   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; }
/* Bootstrap 5 co-existence (1/2): its .toast-container is position:absolute,
   z-index 1090, width:max-content. The doubled class out-specifies it whatever
   the stylesheet order; the position rules below then still win on width. */
.toast-container.toast-container { position: fixed; z-index: 999999; width: auto; max-width: none; 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; }
}

/* Bootstrap 5 co-existence (2/2): Bootstrap hides or fades a .toast that lacks
   its own .show class, and spaces siblings itself. toastr never adds .show, so
   these keep the card visible and the 10px stack gap, whatever the order. */
.toast-container > .toast:not(.show) { display: flex; }                        /* BS 5.1+: .toast:not(.show) { display: none } */
.toast-container > .toast:not(.showing):not(.show) { opacity: 1; }             /* BS 5.0:  .toast:not(.showing):not(.show) { opacity: 0 } */
.toast-container > .toast:not(:last-child) { margin-bottom: 10px; }             /* BS 5:    .toast-container > :not(:last-child) { margin-bottom: .75rem } */

/* 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; }