/* ==========================================================
   Wee.bio - Toastify Shadcn UI Styles (Stack 3D Edition)
========================================================== */

/* Animation d'apparition native Shadcn */
@keyframes shadcnSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Conteneur principal du Toast */
.toastify {
    position: fixed !important; /* Fixe l'ancrage absolu pour la superposition */
    bottom: 24px !important;
    right: 24px !important;
    padding: 16px !important;
    width: 380px !important;
    max-width: calc(100vw - 48px) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    
    /* Animation et transition pour la pile */
    animation: fadeIn .25s ease forwards !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s ease !important;
    
    z-index: 999999 !important;
}
@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/* 🥞 L'effet de Pile 3D (Toast Stack) */
.toastify.toast-stack {
    /* Décale vers le haut, réduit la taille et estompe selon la position dans la pile */
     transform:none !important;
    opacity: calc(1 - (var(--stack-index) * 0.35)) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

/* Alignement interne (Icône + Texte) */
.toast-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.toast-content i {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.toast-content span {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}




/* Variantes de bordures gauches */
.wee-toast-success { border-left: 4px solid #10b981 !important; }
.wee-toast-error   { border-left: 4px solid #ef4444 !important; }
.wee-toast-warning { border-left: 4px solid #f59e0b !important; }
.wee-toast-info    { border-left: 4px solid #3b82f6 !important; }

/* ⚡ Barre de chargement en dessous */
.toastify-progress-bar {
    height: 3px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    opacity: 0.8 !important;
    transition: width 4s linear !important;
}

/* Cache la barre de progression sur les toasts en arrière-plan pour un rendu plus propre */
.toastify.toast-stack .toastify-progress-bar {
    opacity: 0 !important;
}

.wee-toast-success .toastify-progress-bar { background: #10b981 !important; }
.wee-toast-error .toastify-progress-bar   { background: #ef4444 !important; }
.wee-toast-warning .toastify-progress-bar { background: #f59e0b !important; }
.wee-toast-info .toastify-progress-bar    { background: #3b82f6 !important; }

/* Responsive Mobile */
@media (max-width: 640px) {
    .toastify {
        width: auto !important;
        max-width: none !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }
    .toastify.toast-stack {
        /* On désactive l'effet stack sur mobile pour garder une lecture simple au pouce */
        transform: none !important;
        opacity: 0 !important; /* Cache les anciens pour éviter l'effet fouillis sur petit écran */
    }
}

/* ==========================================================
   Configuration Mode Sombre (Dark Theme Dashboard)
========================================================== */
.cc--darkmode .toastify {
    border-color: #27272a !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}
.cc--darkmode .toast-content span {
    color: #f4f4f5 !important;
}
.cc--darkmode .toastify-close {
    color: #a1a1aa !important;
}