/* ========== کانتینر اصلی Toast ========== */
/*
 * Fail-safe rule: this layer must never capture the application surface.
 * In Blazor Server a disconnected circuit can leave the last rendered DOM in
 * place. Keeping the wrapper and cards pointer-transparent means a stale toast
 * can never prevent clicks/shortcuts on the ERP underneath it.
 */
.toast-floating-wrapper {
    position: fixed;
    bottom: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: 266px;
    max-width: calc(100vw - 24px);
    z-index: 99999 !important;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none !important;
}

/* ========== آیتم‌های Toast ========== */
.toast-floating-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 15px;
    border-radius: 9px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
    /* Never let a stale server-rendered toast become a dead click layer. */
    pointer-events: none !important;
    border-right: 4px solid;
    direction: rtl;
    font-family: 'Vazir', 'Tahoma', sans-serif;
    backdrop-filter: blur(6px);
    position: relative;
    margin: 0;
    width: 100%;
    cursor: default;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-floating-item.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-floating-item.hide {
    opacity: 0;
    transform: translateY(35px) scale(0.94);
    pointer-events: none !important;
}

.toast-success { background: rgba(40, 167, 69, 0.98); border-right-color: #155724; color: white; }
.toast-error { background: rgba(220, 53, 69, 0.98); border-right-color: #721c24; color: white; }
.toast-warning { background: rgba(255, 193, 7, 0.98); border-right-color: #856404; color: #212529; }
.toast-info { background: rgba(23, 162, 184, 0.98); border-right-color: #0c5460; color: white; }

.toast-floating-item i {
    font-size: 1.4rem;
    margin-left: 11px;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}

.toast-floating-content { flex-grow: 1; margin-left: 8px; min-width: 0; }
.toast-floating-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 4px; letter-spacing: 0.25px; }
.toast-floating-message { font-size: 0.82rem; line-height: 1.45; opacity: 0.96; word-break: break-word; }
.source-info { opacity: 0.8; display: block; margin-top: 3px; font-size: 0.7rem; }
.source-info i { font-size: 0.7rem; margin-left: 3px; }
.time-info { opacity: 0.72; display: block; margin-top: 3px; font-size: 0.68rem; }

.toast-floating-item .progress {
    height: 0.72rem;
    margin-top: 0.4rem !important;
    font-size: 0.6rem;
}

/* Only this small explicit action is interactive while the circuit is alive.
   The button is removed from keyboard tab order in the Razor component, so a
   stale button cannot trap keyboard navigation after a disconnect. */
.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: 0.85rem;
    opacity: 0.9;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    backdrop-filter: blur(3px);
    pointer-events: auto;
    min-width: 28px;
    min-height: 28px;
}

.close-btn:hover { background: rgba(255, 255, 255, 0.3); opacity: 1; }

.toast-floating-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 0 9px 9px;
}

.toast-floating-item.show::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 9px 9px;
    animation: progressLine 5s linear forwards;
}

@keyframes progressLine { 0% { width: 100%; } 100% { width: 0%; } }

@media (max-width: 768px) {
    .toast-floating-wrapper {
        width: min(266px, calc(100vw - 20px));
        bottom: 14px;
        gap: 6px;
    }

    .toast-floating-item { padding: 10px 13px; }
    .toast-floating-item i { font-size: 1.2rem; margin-left: 8px; }
    .toast-floating-title { font-size: 0.86rem; }
    .toast-floating-message { font-size: 0.78rem; }
    .close-btn { padding: 4px 6px; min-width: 26px; min-height: 26px; }
}

.toast-floating-item { text-align: right; }
.toast-floating-item i { margin-left: 11px; margin-right: 0; }
.close-btn { margin-right: 8px; margin-left: 0; }
.toast-floating-item::after,
.toast-floating-item::before { left: 0; right: auto; }