/**
 * lib-toasts - Notifications toast flottantes
 * @author Emmanuel Daunizeau / V-Softs
 * @copyright 2026 All rights reserved
 * @version 1.1.0
 *
 * Les couleurs sont heritees du site parent via CSS custom properties.
 * Definir dans le :root ou body du projet :
 *
 *   --toast-success-bg, --toast-success-fg, --toast-success-border, --toast-success-bar
 *   --toast-error-bg,   --toast-error-fg,   --toast-error-border,   --toast-error-bar
 *   --toast-warning-bg, --toast-warning-fg, --toast-warning-border, --toast-warning-bar
 *   --toast-info-bg,    --toast-info-fg,    --toast-info-border,    --toast-info-bar
 *   --toast-shadow
 *   --toast-font
 *
 * Les valeurs par defaut (sombre) s'appliquent si non definies.
 */

/* ---- Container ---- */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9990;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
}

/* ---- Toast element ---- */

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--toast-font, inherit);
    position: relative;
    overflow: hidden;
    min-width: 300px;
    animation: toast-in 0.3s ease forwards;
}

.toast.toast-out {
    animation: toast-out 0.25s ease forwards;
}

/* ---- Icon ---- */

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 1px;
}

/* ---- Body ---- */

.toast-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* ---- Close button ---- */

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin: -2px -4px 0 4px;
    font-family: inherit;
    transition: opacity 0.15s;
}

.toast-close:hover {
    opacity: 1;
}

/* ---- Progress bar ---- */

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 8px 8px;
    animation: toast-progress linear forwards;
}

/* ---- Type colors (via custom properties with fallbacks) ---- */

.toast-success {
    background: var(--toast-success-bg, #0d4a3a);
    color: var(--toast-success-fg, #4ecca3);
    border: 1px solid var(--toast-success-border, #1a6e4a);
    box-shadow: var(--toast-shadow, 0 8px 24px rgba(0,0,0,0.3));
}
.toast-success .toast-progress { background: var(--toast-success-bar, #4ecca3); }

.toast-error {
    background: var(--toast-error-bg, #4a0d0d);
    color: var(--toast-error-fg, #e94560);
    border: 1px solid var(--toast-error-border, #6e1a1a);
    box-shadow: var(--toast-shadow, 0 8px 24px rgba(0,0,0,0.3));
}
.toast-error .toast-progress { background: var(--toast-error-bar, #e94560); }

.toast-warning {
    background: var(--toast-warning-bg, #4a3a0d);
    color: var(--toast-warning-fg, #f0c040);
    border: 1px solid var(--toast-warning-border, #6e5a1a);
    box-shadow: var(--toast-shadow, 0 8px 24px rgba(0,0,0,0.3));
}
.toast-warning .toast-progress { background: var(--toast-warning-bar, #f0c040); }

.toast-info {
    background: var(--toast-info-bg, #0d2a4a);
    color: var(--toast-info-fg, #5dade2);
    border: 1px solid var(--toast-info-border, #1a3a6e);
    box-shadow: var(--toast-shadow, 0 8px 24px rgba(0,0,0,0.3));
}
.toast-info .toast-progress { background: var(--toast-info-bar, #5dade2); }

/* ---- Animations ---- */

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}

@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}