/* ==========================================================================
   پیغام‌های notify (BlazorToastify) — راست‌چین، سمت چپ صفحه، هم‌رنگ پوسته
   --------------------------------------------------------------------------
   کتابخانه جایگاه را در کد خودش ثابت «top-right» می‌گذارد و پارامتری برای
   تغییرش ندارد؛ پس همه‌چیز همین‌جا با CSS عوض می‌شود و هیچ‌کدام از ۲۰۰۰+
   فراخوانی ToastService.AddToastAsync دست نمی‌خورد.

   ساختار DOM کتابخانه:
     div.toast-container.top-right
       div.toast.{success|error|warning|info}.animated.{bounce|fade}In|OutRight
         «متن پیام»
         div.progress.progress-animated (style="animation-duration: …ms")

   همه‌ی selector ها زیر .toast-container هستند تا با .toast / .progress
   بوت‌استرپ/Metronic و کلاس‌های عمومی .success / .error تداخل نکنند.
   رنگ‌ها از توکن‌های shell-modern.css خوانده می‌شوند و اگر پوسته‌ی جدید
   خاموش باشد، مقدار پیش‌فرض همان پالت را دارند.
   اندازه‌ها px هستند چون ریشه‌ی صفحه 13px است (نه 16px).
   ========================================================================== */

.toast-container.top-right {
    position: fixed; /* بوت‌استرپ .toast-container را absolute می‌کند */
    z-index: 10600; /* بالای مودال‌ها و پاپ‌اورهای MudBlazor */
    right: auto;
    left: 16px;
    top: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
    color: inherit;
    pointer-events: none; /* فضای خالیِ ستون کلیک صفحه را نگیرد */
}

.toast-container .toast {
    --tst-accent: var(--snx-teal, #0d7c72);
    --tst-soft: var(--snx-teal-soft, #d3ece6);
    --tst-icon: "\f05a"; /* info-circle */

    /* چهار قاعده‌ی دیگر هم به .toast می‌خورند و باید خنثی شوند:
       بوت‌استرپ/Metronic «.toast:not(.show){display:none}» (پیام را کلاً پنهان می‌کند)،
       FormGenerator.css «position:absolute; left:50%; top:2rem»، و
       SalamatNegar.css «right:50px». */
    position: relative;
    inset: auto;
    z-index: auto;
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: 320px;
    margin: 0;
    padding: 14px 16px 16px 14px;
    overflow: hidden;
    pointer-events: auto;
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
    font-family: inherit; /* IRANYekan از body */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.75;

    overflow-wrap: anywhere;
    color: var(--snx-ink, #0d2a30);
    background: var(--snx-card, #fff);
    border: 1px solid var(--snx-line, #d5dcdd);
    border-right: 4px solid var(--tst-accent);
    border-radius: 10px;
    box-shadow: 0 10px 28px -10px rgba(13, 42, 48, .35), 0 2px 6px rgba(13, 42, 48, .08);
    opacity: 1;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.toast-container .toast:hover {
    box-shadow: 0 14px 32px -10px rgba(13, 42, 48, .45), 0 2px 6px rgba(13, 42, 48, .1);
}

/* آیکن نوع پیام — دایره‌ی رنگی کم‌رنگ، قبل از متن (سمت راست در RTL) */
.toast-container .toast::before {
    content: var(--tst-icon);
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    align-self: flex-start;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    color: var(--tst-accent);
    background: var(--tst-soft);
}

/* علامت بستن — کل پیام با کلیک بسته می‌شود، این فقط نشانه است */
.toast-container .toast::after {
    content: "\00d7";
    flex: 0 0 auto;
    align-self: flex-start;
    margin-right: auto;
    padding-right: 4px;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--snx-mut, #3d4d4d);
    opacity: .55;
}

.toast-container .toast:hover::after { opacity: 1; }

.toast-container .toast.success {
    --tst-accent: var(--snx-ok, #1c7a4e);
    --tst-soft: var(--snx-ok-soft, #d5eadd);
    --tst-icon: "\f058"; /* check-circle */
}

.toast-container .toast.error {
    --tst-accent: #b42318;
    --tst-soft: #f8dcd8;
    --tst-icon: "\f06a"; /* exclamation-circle */
}

.toast-container .toast.warning {
    --tst-accent: var(--snx-amber, #a06c0c);
    --tst-soft: var(--snx-amber-soft, #f7e6bf);
    --tst-icon: "\f071"; /* exclamation-triangle */
}

.toast-container .toast.info {
    --tst-accent: var(--snx-teal, #0d7c72);
    --tst-soft: var(--snx-teal-soft, #d3ece6);
    --tst-icon: "\f05a";
}

/* نوار زمان — از راست به چپ کوتاه می‌شود، هم‌رنگ نوع پیام */
.toast-container .toast .progress {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 0;
    opacity: .85;
    background: var(--tst-accent);
    transform-origin: left;
    z-index: 1;
}

/* ورود/خروج از سمت چپ؛ نام کلاس‌ها را کتابخانه ثابت «Right» می‌گذارد */
.toast-container .animated { animation-duration: 450ms; animation-fill-mode: both; }
.toast-container .bounceInRight,
.toast-container .fadeInRight { animation-name: tstInLeft; }
.toast-container .bounceOutRight,
.toast-container .fadeOutRight { animation-name: tstOutLeft; }

@keyframes tstInLeft {
    from { opacity: 0; transform: translate3d(-110%, 0, 0); }
    70% { opacity: 1; transform: translate3d(6px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tstOutLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(-110%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-container .animated { animation-duration: 1ms; }
}

@media only screen and (max-width: 480px) {
    .toast-container.top-right {
        left: 8px;
        right: 8px;
        top: 8px;
        width: auto;
        max-width: none;
    }
}