/* ============================================================
   IntoActiv portal — toastr override
   Re-skins jQuery toastr to match the .ia-* design system. The
   toastr JS / API is unchanged — `toastr.success(msg)` etc. work
   exactly as before. Loaded after toastr.min.css so we win.
   ============================================================ */

/* ─── Container ─────────────────────────────────────────────── */
/* Toastr defaults to top-right with absolute pixel offsets — keep
   the position but tighten the spacing and make the stack feel
   intentional (gap, max width). */
#toast-container {
    pointer-events: none;
    z-index: 99999;
}
#toast-container > * { pointer-events: auto; }

#toast-container.toast-top-right     { top: 20px; right: 20px; }
#toast-container.toast-top-left      { top: 20px; left: 20px; }
#toast-container.toast-bottom-right  { bottom: 20px; right: 20px; }
#toast-container.toast-bottom-left   { bottom: 20px; left: 20px; }
#toast-container.toast-top-center    { top: 20px; left: 50%; transform: translateX(-50%); }
#toast-container.toast-bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); }
#toast-container.toast-top-full-width,
#toast-container.toast-bottom-full-width {
    width: min(420px, calc(100vw - 32px));
    left: 50%;
    transform: translateX(-50%);
}

/* ─── Individual toast — base ───────────────────────────────── */
/* Reset toastr's gradient/shadow/icon-svg-bg defaults and rebuild
   on the design system. We override `background-image` to none so
   the inline svg icon strip toastr ships is wiped — we paint our
   own ::before icon via a CSS mask. */
#toast-container > div.toast,
.toast,
.toast-success,
.toast-error,
.toast-warning,
.toast-info {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    min-height: 56px;
    margin: 0 0 10px 0;
    padding: 14px 16px 14px 50px;
    background: var(--ia-surface, #FFFFFF) !important;
    background-image: none !important;
    border: 1px solid var(--ia-border, #E5E1D9) !important;
    border-left: 3px solid var(--ia-ink, #1A1A1A) !important;
    border-radius: var(--ia-r-md, 12px) !important;
    box-shadow:
        0 18px 38px -16px rgba(26, 26, 26, 0.18),
        0 4px 10px rgba(26, 26, 26, 0.05) !important;
    color: var(--ia-ink, #1A1A1A) !important;
    font-family: var(--ia-font-sans, "DM Sans", system-ui, sans-serif) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
    opacity: 1 !important;
    /* Toastr toggles opacity for show/hide animation — keep its
       default behaviour but use a smoother transition curve. */
    transition: opacity var(--ia-dur-3, 240ms) var(--ia-ease, cubic-bezier(.2,.8,.2,1)),
                transform var(--ia-dur-3, 240ms) var(--ia-ease, cubic-bezier(.2,.8,.2,1));
}

#toast-container > div.toast:hover {
    box-shadow:
        0 24px 48px -18px rgba(26, 26, 26, 0.24),
        0 6px 14px rgba(26, 26, 26, 0.07) !important;
    cursor: pointer;
}

/* Icon — painted as a ::before pseudo so we don't depend on
   toastr's inline svg backgrounds. Each variant tints + masks a
   shared SVG glyph to match the design system. */
#toast-container > div.toast::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
            mask-size: 14px 14px;
}

/* Title row — full ink density for scannability. */
#toast-container > div.toast .toast-title,
.toast-title {
    display: block;
    margin-bottom: 2px;
    font-family: var(--ia-font-sans, "DM Sans", system-ui, sans-serif) !important;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ia-ink, #1A1A1A) !important;
    letter-spacing: -0.01em;
}

/* Message body — also full ink (#1A1A1A). The default --ia-ink-2 (#6B6760)
   is intentionally muted for *page* secondary copy, but a toast lives for
   ~4s and needs to be scanned at a glance, so we trade hierarchy for
   contrast here. Weight 500 keeps the title/message hierarchy visible. */
#toast-container > div.toast .toast-message,
.toast-message {
    display: block;
    color: var(--ia-ink, #1A1A1A) !important;
    font-weight: 500;
    word-wrap: break-word;
}

/* Toastr renders title + message as siblings; if no title is set,
   collapse the message to be visually centered against the icon. */
#toast-container > div.toast > .toast-message:only-child {
    align-self: center;
}

/* Toastr's built-in close button — restyle to a subtle ghost X. */
.toast-close-button {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--ia-ink-2, #6B6760) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: background var(--ia-dur-1, 120ms) var(--ia-ease, cubic-bezier(.2,.8,.2,1)),
                color var(--ia-dur-1, 120ms) var(--ia-ease, cubic-bezier(.2,.8,.2,1));
}
.toast-close-button:hover,
.toast-close-button:focus {
    color: var(--ia-ink, #1A1A1A) !important;
    background: var(--ia-surface-2, #F5F2EE) !important;
    outline: none;
}
button.toast-close-button { -webkit-appearance: none; appearance: none; }

/* Toastr's progress bar — use the variant accent so it reinforces
   the type while staying subtle. */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--ia-ink, #1A1A1A);
    opacity: 0.6 !important;
    border-radius: 0 0 var(--ia-r-md, 12px) var(--ia-r-md, 12px);
}

/* ─── Variant — Success ─────────────────────────────────────── */
#toast-container > div.toast-success {
    border-left-color: var(--ia-success, #1A7A48) !important;
}
#toast-container > div.toast-success::before {
    background: var(--ia-success-bg, #E4F4EC);
    /* check-mark glyph — single-color, masked */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.173 11.297 2.954 8.078l1.414-1.414 1.805 1.805 5.46-5.46 1.414 1.414z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.173 11.297 2.954 8.078l1.414-1.414 1.805 1.805 5.46-5.46 1.414 1.414z'/></svg>");
    background-color: var(--ia-success-bg, #E4F4EC);
}
#toast-container > div.toast-success::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    background: var(--ia-success, #1A7A48);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.173 11.297 2.954 8.078l1.414-1.414 1.805 1.805 5.46-5.46 1.414 1.414z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.173 11.297 2.954 8.078l1.414-1.414 1.805 1.805 5.46-5.46 1.414 1.414z'/></svg>");
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;   mask-size: 14px 14px;
    pointer-events: none;
}
#toast-container > div.toast-success .toast-progress { background: var(--ia-success, #1A7A48); }

/* ─── Variant — Error ───────────────────────────────────────── */
#toast-container > div.toast-error {
    border-left-color: var(--ia-danger, #E24B4A) !important;
}
#toast-container > div.toast-error::before {
    background-color: var(--ia-danger-bg, #FEF2F2);
}
#toast-container > div.toast-error::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    background: var(--ia-danger, #E24B4A);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.5h1.5v5h-1.5v-5Zm.75 8.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.5h1.5v5h-1.5v-5Zm.75 8.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>");
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;   mask-size: 16px 16px;
    pointer-events: none;
}
#toast-container > div.toast-error .toast-progress { background: var(--ia-danger, #E24B4A); }

/* ─── Variant — Warning ─────────────────────────────────────── */
#toast-container > div.toast-warning {
    border-left-color: var(--ia-warning, #F0921A) !important;
}
#toast-container > div.toast-warning::before {
    background-color: var(--ia-warn-bg, #FCEFD9);
}
#toast-container > div.toast-warning::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    background: var(--ia-warning, #F0921A);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.13 1.74a1 1 0 0 1 1.74 0l6 10.5A1 1 0 0 1 14 13.74H2a1 1 0 0 1-.87-1.5l6-10.5ZM8 5.25a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0V6A.75.75 0 0 0 8 5.25Zm0 6.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.13 1.74a1 1 0 0 1 1.74 0l6 10.5A1 1 0 0 1 14 13.74H2a1 1 0 0 1-.87-1.5l6-10.5ZM8 5.25a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0V6A.75.75 0 0 0 8 5.25Zm0 6.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z'/></svg>");
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 15px 15px;   mask-size: 15px 15px;
    pointer-events: none;
}
#toast-container > div.toast-warning .toast-progress { background: var(--ia-warning, #F0921A); }

/* ─── Variant — Info ────────────────────────────────────────── */
#toast-container > div.toast-info {
    border-left-color: var(--ia-info, #185FA5) !important;
}
#toast-container > div.toast-info::before {
    background-color: var(--ia-info-bg, #E6F1FB);
}
#toast-container > div.toast-info::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    background: var(--ia-info, #185FA5);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm.75 3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.25 7h1.5v4.5h-1.5V7Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm.75 3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.25 7h1.5v4.5h-1.5V7Z'/></svg>");
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;   mask-size: 16px 16px;
    pointer-events: none;
}
#toast-container > div.toast-info .toast-progress { background: var(--ia-info, #185FA5); }

/* ─── Mobile — full-width on narrow screens ─────────────────── */
@media (max-width: 480px) {
    #toast-container > div.toast,
    #toast-container > div.toast-success,
    #toast-container > div.toast-error,
    #toast-container > div.toast-warning,
    #toast-container > div.toast-info {
        max-width: calc(100vw - 24px);
    }
    #toast-container.toast-top-right,
    #toast-container.toast-bottom-right { right: 12px; left: 12px; width: auto; }
    #toast-container.toast-top-left,
    #toast-container.toast-bottom-left  { left: 12px; right: 12px; width: auto; }
}

/* ─── Reduced-motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #toast-container > div.toast,
    .toast-progress {
        transition: none !important;
        animation-duration: 0.001ms !important;
    }
}