/* D:\_Codes\tashkilan\static\css\apps\messages.css */
.message-success { 
    background-color: #d1e7dd; 
    border-left: 4px solid #198754;
    color: #0f5132;
}
.message-error { 
    background-color: #f8d7da; 
    border-left: 4px solid #dc3545;
    color: #721c24;
}
.message-warning { 
    background-color: #fff3cd; 
    border-left: 4px solid #ffc107;
    color: #664d03;
}
.message-info { 
    background-color: #cff4fc; 
    border-left: 4px solid #0dcaf0;
    color: #055160;
}
.toast-icon { 
    background-color: rgba(255,255,255,0.8); 
    border-radius: 0.375rem 0 0 0.375rem;
    direction: rtl;
    
}

.toast {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    
    /* انیمیشن‌های سفارشی */
    animation: slideInDown 0.5s ease-out;
}

.toast.hiding {
    animation: slideOutUp 0.5s ease-in forwards;
}

/* انیمیشن ورود از بالا */
@keyframes slideInDown {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* انیمیشن خروج به بالا */
@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100px);
        opacity: 0;
    }
}

/* انیمیشن‌های جایگزین (اگر بخواهیم از راست بیاد) */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* برای نمایش تدریجی */
.toast-container .toast {
    animation-delay: calc(var(--toast-index, 0) * 0.1s);
}

@media (max-width: 576px) {
    .position-fixed.p-3 {
        padding: 0.5rem !important;
        min-width: 300px !important;
    }
    .toast-container {
        min-width: 100%;
    }
    
    /* انیمیشن‌های موبایل */
    @keyframes slideInDown {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* افزایش حداکثر عرض توست */
.toast {
    direction: rtl;
    max-width: 600px;   /* یا 600px اگر محتوا بلند است */
    width: auto;
    min-width: 300px;
}

/* برای موبایل */
@media (max-width: 576px) {
    .toast {
        max-width: 90vw;   /* 90 درصد عرض صفحه */
        min-width: 280px;
    }
}

/* متن داخل toast باید بتواند بپیچد و فضای موجود را پر کند */
.toast-message-text {
    display: block;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* بدنه toast نیز نباید محدودیت عرض اضافی داشته باشد */
.toast-body {
    overflow-x: auto;  /* اگر خیلی طولانی شد اسکرول افقی بدهد */
}