/* =============================================================================
   FORTIS · Notifications  (static/custom/portal/notify.js)
   -----------------------------------------------------------------------------
   The toasts. Metronic's plugin bundle ships the toastr *script* and, inside
   `plugins.bundle.css`, a skin of its own for it. That build renames every
   class (`toastr`, `toastr-top-right`, `toastr-title`...), and the skin pins
   the padding, border, radius, shadow and a PNG icon with `!important`, and
   turns the close button into a masked box. The look is written here once,
   on the portal design tokens, for the plugin and for the fallback renderer
   alike; wherever the bundle's `!important` would win, the rule here says
   `!important` too, and outranks it on specificity. The sign-in pages, which
   do not load the bundle, are unaffected by that.

   A toast is a card with a tinted icon tile on the left that names the tone
   at a glance (a tick, a cross, a warning triangle, an i), a one-word title,
   the message, a round close button and a thin accent bar at the bottom that
   runs down while the toast waits to go. The card is washed very faintly in
   the accent from the left so the four tones read apart even in the corner
   of the eye.

   toastr's DOM order is close button, title, message, progress bar, and the
   icon has to be drawn: two pseudo-elements, the tile (`::before`) and the
   glyph (`::after`, an SVG mask filled with the accent), because a mask
   cannot take a CSS variable for its colour and a data URL cannot read one.
   ============================================================================= */

#toastr-container {
    position: fixed;
    z-index: 100010;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(392px, calc(100vw - 24px));
    pointer-events: none;
}

#toastr-container.toastr-top-right    { top: 18px; right: 18px; }
#toastr-container.toastr-top-left     { top: 18px; left: 18px; }
#toastr-container.toastr-bottom-right { bottom: 18px; right: 18px; flex-direction: column-reverse; }
#toastr-container.toastr-bottom-left  { bottom: 18px; left: 18px; flex-direction: column-reverse; }
#toastr-container.toastr-top-center   { top: 18px; left: 50%; transform: translateX(-50%); }
#toastr-container.toastr-bottom-center{ bottom: 18px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }

/* -----------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */
#toastr-container > .toastr {
    --nt-accent: var(--pt-st-submitted, #2a78d6);
    --nt-surface: rgb(var(--pt-card, 255 255 255));
    --nt-ink: rgb(var(--pt-text, 13 24 46));
    --nt-muted: rgb(var(--pt-text, 13 24 46) / 0.66);
    --nt-tile: 42px;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    /* The bundle's skin: `padding: … 4.5rem !important` (the text started
       flush against the tile), `border: 0`, `border-radius: .475rem`, the
       dropdown shadow, and a PNG icon as `background-image` per tone, all
       `!important`. Restated with `!important` so this wins. */
    padding: 15px 44px 17px 72px !important;
    border-radius: 18px !important;
    border: 1px solid rgb(var(--pt-line, 13 24 46) / 0.08) !important;
    background-color: var(--nt-surface);
    background-image:
        linear-gradient(90deg,
            color-mix(in srgb, var(--nt-accent) 9%, transparent) 0,
            transparent 46%) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat;
    background-size: auto;
    color: var(--nt-ink);
    box-shadow:
        0 1px 2px rgb(13 24 46 / 0.05),
        0 12px 32px -8px rgb(13 24 46 / 0.22),
        0 0 0 1px color-mix(in srgb, var(--nt-accent) 12%, transparent) !important;
    font-size: 13px;
    line-height: 1.45;
    opacity: 1;
    transform: none;
    transition: transform 0.2s var(--pt-ease, ease), box-shadow 0.2s var(--pt-ease, ease);
    animation: ptToastIn 0.34s var(--pt-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#toastr-container > .toastr:hover {
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgb(13 24 46 / 0.06),
        0 18px 40px -10px rgb(13 24 46 / 0.28),
        0 0 0 1px color-mix(in srgb, var(--nt-accent) 20%, transparent) !important;
}

#toastr-container > .toastr-success { --nt-accent: var(--pt-st-done, #1baf7a); }
#toastr-container > .toastr-error   { --nt-accent: var(--pt-st-rejected, #e34948); }
#toastr-container > .toastr-warning { --nt-accent: var(--pt-st-checked, #eda100); }
#toastr-container > .toastr-info    { --nt-accent: var(--pt-st-submitted, #2a78d6); }

/* -----------------------------------------------------------------------------
   The icon tile
   -------------------------------------------------------------------------- */
#toastr-container > .toastr::before,
#toastr-container > .toastr::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 15px;
    width: var(--nt-tile);
    height: var(--nt-tile);
}

#toastr-container > .toastr::before {
    border-radius: 13px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--nt-accent) 22%, transparent),
            color-mix(in srgb, var(--nt-accent) 10%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nt-accent) 22%, transparent);
}

#toastr-container > .toastr::after {
    background: var(--nt-accent);
    -webkit-mask: var(--nt-glyph) center / 22px 22px no-repeat;
    mask: var(--nt-glyph) center / 22px 22px no-repeat;
}

#toastr-container > .toastr-success { --nt-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6.5 9.4 17.2 4 11.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#toastr-container > .toastr-error   { --nt-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
#toastr-container > .toastr-warning { --nt-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 4.6 3.1 17.2A2 2 0 0 0 4.8 20.2h14.4a2 2 0 0 0 1.7-3L13.7 4.6a2 2 0 0 0-3.4 0Z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.6v4.2' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.3'/%3E%3C/svg%3E"); }
#toastr-container > .toastr-info    { --nt-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 11v5.2' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.9' r='1.3'/%3E%3C/svg%3E"); }

/* -----------------------------------------------------------------------------
   Title, message, close
   -------------------------------------------------------------------------- */
#toastr-container > .toastr > .toastr-title,
#toastr-container > .toastr > .toastr-message {
    display: block;
    padding: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

#toastr-container > .toastr > .toastr-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--nt-ink);
}

#toastr-container > .toastr > .toastr-message {
    font-size: 12.75px;
    line-height: 1.5;
    color: var(--nt-muted);
}

#toastr-container > .toastr > .toastr-title + .toastr-message {
    margin-top: 3px;
}

/* A toast without a title still lines up with the tile. */
#toastr-container > .toastr > .toastr-message:first-of-type:last-of-type:not(.toastr-title + .toastr-message) {
    min-height: var(--nt-tile);
    display: flex;
    align-items: center;
}

/* The bundle's skin masks the *button itself* with a 16px × glyph per tone
   (`.toastr.toastr-success .toastr-close-button { mask-image: … }`). With a
   transparent background that mask shows nothing, but the moment the hover
   ring paints, the ring is cut into a second, button-sized × behind the real
   one. The mask is lifted off the button here; the glyph is the `::before`. */
#toastr-container > .toastr > .toastr-close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    float: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
    -webkit-mask: none;
    mask: none;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

#toastr-container > .toastr > .toastr-close-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--nt-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

#toastr-container > .toastr > .toastr-close-button:hover,
#toastr-container > .toastr > .toastr-close-button:focus-visible {
    opacity: 1;
    background: rgb(var(--pt-line, 13 24 46) / 0.08);
    outline: none;
}

/* -----------------------------------------------------------------------------
   The time bar
   -------------------------------------------------------------------------- */
#toastr-container > .toastr > .toastr-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg,
        var(--nt-accent),
        color-mix(in srgb, var(--nt-accent) 55%, var(--nt-surface)));
    opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes ptToastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes ptToastOut {
    to { opacity: 0; transform: translateX(16px) scale(0.98); }
}

#toastr-container.toastr-top-left > .toastr,
#toastr-container.toastr-bottom-left > .toastr {
    animation-name: ptToastInLeft;
}

@keyframes ptToastInLeft {
    from { opacity: 0; transform: translateX(-24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

#toastr-container > .toastr.pt-toast-out {
    animation: ptToastOut 0.24s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    #toastr-container > .toastr,
    #toastr-container > .toastr.pt-toast-out { animation: none; }
    #toastr-container > .toastr:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   Dark theme: the tokens flip on the root, the shadow goes deeper so the card
   still lifts off a dark ground, and the wash is a touch stronger.
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] #toastr-container > .toastr {
    border-color: rgb(244 247 251 / 0.1) !important;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.4),
        0 18px 44px -10px rgb(0 0 0 / 0.65),
        0 0 0 1px color-mix(in srgb, var(--nt-accent) 18%, transparent) !important;
}

html[data-bs-theme="dark"] #toastr-container > .toastr::before {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--nt-accent) 30%, transparent),
            color-mix(in srgb, var(--nt-accent) 14%, transparent));
}

@media (max-width: 575.98px) {
    #toastr-container.toastr-top-right,
    #toastr-container.toastr-top-left {
        top: 10px;
        left: 12px;
        right: 12px;
        width: auto;
    }

    #toastr-container > .toastr {
        --nt-tile: 38px;
        padding: 13px 40px 15px 64px !important;
        border-radius: 16px !important;
    }

    #toastr-container > .toastr::before,
    #toastr-container > .toastr::after {
        left: 14px;
        top: 13px;
    }
}