/* =============================================================================
   databinding.ToastNotification.Mvc - Notyf toast styling (Blazored.Toast look)

   HAND-MAINTAINED. There is no SCSS source any more - edit this file directly.
   Class names are dictated by the vendored Notyf bundle (wwwroot/notyf/notyf.js)
   and must never be renamed.

   Theming contract: everything is a --db-toast-* custom property. Consuming
   applications override them on `.notyf` (see README), never by editing rules.
   --db-toast-surface and --db-toast-text fall back to the house design tokens
   (--hintergrund-menues / --fliesstext-farbe) so a themed project matches its
   Blazor toasts automatically.

   DO NOT remove the animation from .notyf__toast--disappear, and never set
   `animation: none` on .notyf__toast: Notyf removes the node only once an
   `animationend` event fires on the toast element itself.
   ============================================================================= */

/* ---------- Design tokens - light (default) -------------------------------- */
:root {
    /* Layout */
    --db-toast-width: 20rem;
    --db-toast-inset: 2rem;
    --db-toast-inset-sm: 1rem;
    --db-toast-gap: 1rem;
    --db-toast-padding-y: 1rem;
    --db-toast-padding-x: 1.25rem;
    --db-toast-radius: .25rem;
    --db-toast-accent-size: 6px;
    --db-toast-icon-gap: 1rem;
    --db-toast-close-gap: 1rem;
    --db-toast-z-index: 9999;

    /* Typography */
    --db-toast-font-size: .875rem;
    --db-toast-font-weight: 500;
    --db-toast-line-height: 1.5;
    --db-toast-line-box: calc(var(--db-toast-font-size) * var(--db-toast-line-height));
    --db-toast-icon-size: 1.5rem;

    /* Close control */
    --db-toast-close-size: 1.25rem;
    --db-toast-close-border-width: 1px;
    --db-toast-close-bar-length: .625rem;
    --db-toast-close-bar-width: 1px;

    /* Surface */
    --db-toast-surface: var(--hintergrund-menues, #ffffff);
    --db-toast-text: var(--fliesstext-farbe, #1d1d1b);
    --db-toast-shadow: 0 10px 30px 2px rgba(0, 0, 0, .30);
    --db-toast-close-color: #94a3b8;
    --db-toast-close-color-hover: #1d1d1b;
    --db-toast-close-bg-hover: rgba(0, 0, 0, .06);

    /* Accents (top bar + icon) */
    --db-toast-accent-success: #16a34a;
    --db-toast-accent-error: #dc2626;
    --db-toast-accent-warning: #eab308;
    --db-toast-accent-info: #2563eb;
    --db-toast-accent-custom: #64748b;
    --db-toast-accent-default: #64748b;

    /* Motion */
    --db-toast-anim-duration: .3s;
}

/* ---------- Design tokens - dark via OS preference -------------------------
   The var() chain has to be repeated here, otherwise the literal fallback
   would win over a project that defines the house tokens. */
@media (prefers-color-scheme: dark) {
    :root {
        --db-toast-surface: var(--hintergrund-menues, #2b3035);
        --db-toast-text: var(--fliesstext-farbe, #e9ecef);
        --db-toast-shadow: 0 10px 30px 2px rgba(0, 0, 0, .55);
        --db-toast-close-color: #adb5bd;
        --db-toast-close-color-hover: #f8f9fa;
        --db-toast-close-bg-hover: rgba(255, 255, 255, .10);
        --db-toast-accent-success: #22c55e;
        --db-toast-accent-error: #ef4444;
        --db-toast-accent-warning: #facc15;
        --db-toast-accent-info: #3b82f6;
        --db-toast-accent-custom: #94a3b8;
        --db-toast-accent-default: #94a3b8;
    }
}

/* ---------- Design tokens - explicit Bootstrap theme ------------------------
   Same specificity (0,1,0) as :root, so these MUST stay after the two blocks
   above: source order is what lets the attribute beat the media query. */
[data-bs-theme="dark"] {
    --db-toast-surface: var(--hintergrund-menues, #2b3035);
    --db-toast-text: var(--fliesstext-farbe, #e9ecef);
    --db-toast-shadow: 0 10px 30px 2px rgba(0, 0, 0, .55);
    --db-toast-close-color: #adb5bd;
    --db-toast-close-color-hover: #f8f9fa;
    --db-toast-close-bg-hover: rgba(255, 255, 255, .10);
    --db-toast-accent-success: #22c55e;
    --db-toast-accent-error: #ef4444;
    --db-toast-accent-warning: #facc15;
    --db-toast-accent-info: #3b82f6;
    --db-toast-accent-custom: #94a3b8;
    --db-toast-accent-default: #94a3b8;
}

[data-bs-theme="light"] {
    --db-toast-surface: var(--hintergrund-menues, #ffffff);
    --db-toast-text: var(--fliesstext-farbe, #1d1d1b);
    --db-toast-shadow: 0 10px 30px 2px rgba(0, 0, 0, .30);
    --db-toast-close-color: #94a3b8;
    --db-toast-close-color-hover: #1d1d1b;
    --db-toast-close-bg-hover: rgba(0, 0, 0, .06);
    --db-toast-accent-success: #16a34a;
    --db-toast-accent-error: #dc2626;
    --db-toast-accent-warning: #eab308;
    --db-toast-accent-info: #2563eb;
    --db-toast-accent-custom: #64748b;
    --db-toast-accent-default: #64748b;
}

/* ---------- Keyframes -------------------------------------------------------
   The `ripple` keyframes are gone; the other four are load-bearing. */
@-webkit-keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translateX(25%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translateX(25%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(25%);
    }
}

@keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(25%);
    }
}

@-webkit-keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(25%);
    }
}

@keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(25%);
    }
}

/* ---------- Container -------------------------------------------------------
   Notyf writes `align-items` / `justify-content` inline on this element for
   every toast (adjustContainerAlignment), derived from the configured position.
   The values below are only the pre-first-toast fallback - do not try to steer
   the position from CSS. */
.notyf {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--db-toast-z-index);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--db-toast-inset);
    pointer-events: none;
    box-sizing: border-box;
}

/* ---------- Toast ----------------------------------------------------------- */
.notyf__toast {
    --db-toast-accent: var(--db-toast-accent-default);
    box-sizing: border-box;
    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--db-toast-width);
    max-width: 100%;
    padding: var(--db-toast-padding-y) var(--db-toast-padding-x);
    border-radius: var(--db-toast-radius);
    border-top: var(--db-toast-accent-size) solid var(--db-toast-accent);
    background-color: var(--db-toast-surface);
    color: var(--db-toast-text);
    box-shadow: var(--db-toast-shadow);
    font-size: var(--db-toast-font-size);
    font-weight: var(--db-toast-font-weight);
    line-height: var(--db-toast-line-height);
    text-align: start;
    pointer-events: auto;
    transform: translateY(25%);
    -webkit-animation: notyf-fadeinup var(--db-toast-anim-duration) ease-in forwards;
    animation: notyf-fadeinup var(--db-toast-anim-duration) ease-in forwards;
}

/* Per-type accent. Same specificity as .notyf__toast, so order matters.
   An inline --db-toast-accent (set by toastApplyAccent) beats all of them. */
.notyf__toast--success {
    --db-toast-accent: var(--db-toast-accent-success);
}

.notyf__toast--error {
    --db-toast-accent: var(--db-toast-accent-error);
}

.notyf__toast--warning {
    --db-toast-accent: var(--db-toast-accent-warning);
}

.notyf__toast--info {
    --db-toast-accent: var(--db-toast-accent-info);
}

.notyf__toast--custom {
    --db-toast-accent: var(--db-toast-accent-custom);
}

.notyf__toast--upper {
    margin-bottom: var(--db-toast-gap);
}

.notyf__toast--lower {
    margin-top: var(--db-toast-gap);
}

/* ---------- Dismiss animation ----------------------------------------------
   Notyf removes the node on `animationend` fired by the toast ITSELF
   (t.target === toast). This rule is what makes toasts disappear at all. */
.notyf__toast--disappear {
    transform: translateY(0);
    -webkit-animation: notyf-fadeoutdown var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeoutdown var(--db-toast-anim-duration) forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

.notyf__toast--disappear .notyf__icon,
.notyf__toast--disappear .notyf__message {
    -webkit-animation: notyf-fadeoutdown var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeoutdown var(--db-toast-anim-duration) forwards;
    opacity: 1;
    transform: translateY(0);
}

.notyf__toast--disappear .notyf__dismiss {
    -webkit-animation: notyf-fadeoutright var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeoutright var(--db-toast-anim-duration) forwards;
    opacity: 1;
    transform: translateX(0);
}

.notyf__toast--disappear .notyf__message {
    -webkit-animation-delay: .05s;
    animation-delay: .05s;
}

/* ---------- Row layout ------------------------------------------------------ */
.notyf__wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Icon ------------------------------------------------------------
   A fixed-height line box with a centred glyph keeps the icon aligned with the
   FIRST line of a wrapped message. */
.notyf__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--db-toast-line-box);
    margin-right: var(--db-toast-icon-gap);
    color: var(--db-toast-accent);
    opacity: 0;
    -webkit-animation: notyf-fadeinup var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeinup var(--db-toast-anim-duration) forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

/* Two classes (0,2,0) so this beats Google's `.material-icons { font-size: 24px }`
   without !important and without depending on stylesheet order. */
.notyf__icon .material-icons {
    font-size: var(--db-toast-icon-size);
    line-height: 1;
}

/* Fallback for non-Material icon fonts passed through Custom(). */
.notyf__icon > * {
    font-size: var(--db-toast-icon-size);
    line-height: 1;
}

/* Material Symbols ligature code points. Deliberately left unscoped and
   unchanged, so existing host markup keeps working. */
.mi-error::after {
    content: "\e000";
}

.mi-success::after {
    content: "\e86c";
}

.mi-warning::after {
    content: "\e002";
}

.mi-info::after {
    content: "\e88e";
}

/* ---------- Message --------------------------------------------------------- */
.notyf__message {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    margin: 0;
    line-height: var(--db-toast-line-height);
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    opacity: 0;
    -webkit-animation: notyf-fadeinup var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeinup var(--db-toast-anim-duration) forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

/* ---------- Close control --------------------------------------------------- */
.notyf__dismiss {
    position: static;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--db-toast-line-box);
    margin-left: var(--db-toast-close-gap);
    opacity: 0;
    -webkit-animation: notyf-fadeinleft var(--db-toast-anim-duration) forwards;
    animation: notyf-fadeinleft var(--db-toast-anim-duration) forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
}

/* `position: relative` is REQUIRED: the ::before/::after bars are absolutely
   positioned and would otherwise resolve against .notyf__wrapper. */
.notyf__dismiss-btn {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: var(--db-toast-close-size);
    height: var(--db-toast-close-size);
    padding: 0;
    border: var(--db-toast-close-border-width) solid currentColor;
    border-radius: 50%;
    background-color: transparent;
    color: var(--db-toast-close-color);
    font: inherit;
    cursor: pointer;
    outline: none;
    opacity: 1;
    transition: color .2s ease, background-color .2s ease;
}

.notyf__dismiss-btn::before,
.notyf__dismiss-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--db-toast-close-bar-width);
    height: var(--db-toast-close-bar-length);
    border-radius: 1px;
    background-color: currentColor;
}

.notyf__dismiss-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.notyf__dismiss-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.notyf__dismiss-btn:hover {
    color: var(--db-toast-close-color-hover);
    background-color: var(--db-toast-close-bg-hover);
}

.notyf__dismiss-btn:active {
    opacity: .8;
}

.notyf__dismiss-btn:focus-visible {
    outline: 2px solid var(--db-toast-accent);
    outline-offset: 2px;
}

/* ---------- Ripple guard ----------------------------------------------------
   No type sets a background any more, so Notyf never appends this node. Kept as
   a hard guard against third-party call sites passing `background`. */
.notyf__ripple {
    display: none;
}

/* ---------- Small screens ---------------------------------------------------- */
@media only screen and (max-width: 480px) {
    .notyf {
        padding: var(--db-toast-inset-sm);
    }

    .notyf__toast {
        width: 100%;
    }
}

/* ---------- Reduced motion --------------------------------------------------
   NEVER `animation: none` here: without an `animationend` event Notyf can no
   longer remove the toast node and toasts pile up forever. Shorten instead. */
@media (prefers-reduced-motion: reduce) {
    .notyf__toast,
    .notyf__toast--disappear,
    .notyf__toast--disappear .notyf__icon,
    .notyf__toast--disappear .notyf__message,
    .notyf__toast--disappear .notyf__dismiss,
    .notyf__icon,
    .notyf__message,
    .notyf__dismiss {
        -webkit-animation-duration: 1ms;
        animation-duration: 1ms;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
}