/* ================================================================
   assets/styles/partials/flash.css
   Flash messages — thème clair & sombre
   ================================================================ */

/* ── CONTENEUR ─────────────────────────────────────────────────── */
.flash-container {
    position: fixed;
    top: calc(72px + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 440px;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

/* ── FLASH DE BASE ─────────────────────────────────────────────── */
.flash {
    pointer-events: all;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;

    padding: 0.9rem 0.9rem 0.9rem 1.1rem;
    border-radius: 16px;
    border: 1px solid transparent;
    backdrop-filter: blur(6px) saturate(1.8);
    -webkit-backdrop-filter: blur(6px) saturate(1.8);

    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;

    animation: flash-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── COULEURS PAR TYPE — light ──────────────────────────────────── */
.flash-success {
    background: rgba(16, 185, 129, 0.20);
    border-color: rgba(16, 185, 129, 0.50);
    color: #064e3b;
    box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(16,185,129,0.20);
}
.flash-danger {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.50);
    color: #7f1d1d;
    box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(239,68,68,0.20);
}
.flash-warning {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.50);
    color: #78350f;
    box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(245,158,11,0.20);
}
.flash-info {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(124, 58, 237, 0.50);
    color: #2e1065;
    box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(124,58,237,0.20);
}

/* ── COULEURS PAR TYPE — dark ───────────────────────────────────── */
[data-theme="dark"] .flash-success {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(16,185,129,0.18);
}
[data-theme="dark"] .flash-danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(239,68,68,0.18);
}
[data-theme="dark"] .flash-warning {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fcd34d;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(245,158,11,0.18);
}
[data-theme="dark"] .flash-info {
    background: rgba(124, 58, 237, 0.20);
    border-color: rgba(167, 139, 250, 0.45);
    color: #c4b5fd;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(124,58,237,0.20);
}

/* ── ANIMATION ─────────────────────────────────────────────────── */
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* ── TEXTE ─────────────────────────────────────────────────────── */
.flash-body {
    min-width: 0;
}

/* ── BOUTON FERMER ─────────────────────────────────────────────── */
.flash-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.10);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity var(--duration-fast), background var(--duration-fast);
}
.flash-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.20);
}

/* ── MOBILE ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .flash-container { width: calc(100vw - 2rem); }
}