/* ============================================================
   TOAST — sistema notifiche
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */

.toast-container {
    position: fixed;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
    width: calc(100% - 32px);
    pointer-events: none;
}

/* Posizioni */
.toast-top-right     { top: 16px;    right: 16px;  }
.toast-top-left      { top: 16px;    left: 16px;   }
.toast-bottom-right  { bottom: 16px; right: 16px;  flex-direction: column-reverse; }
.toast-bottom-left   { bottom: 16px; left: 16px;   flex-direction: column-reverse; }
.toast-top-center    { top: 16px;    left: 50%;    transform: translateX(-50%); }
.toast-bottom-center { bottom: 16px; left: 50%;    transform: translateX(-50%); flex-direction: column-reverse; }

/* Adatta alla sidebar su desktop */
@media (min-width: 769px) {
    .toast-bottom-right  { right: 24px; bottom: 24px; }
    .toast-top-right     { right: 24px; top: 24px; }
}

/* Spazio per la bottom bar su mobile */
@media (max-width: 768px) {
    .toast-bottom-right,
    .toast-bottom-left,
    .toast-bottom-center {
        bottom: calc(var(--bottombar-h, 60px) + 10px);
    }
}

/* ── Item ─────────────────────────────────────────────────── */

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 0.5px solid transparent;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    pointer-events: all;
    cursor: default;

    /* Animazione entrata */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-item.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-item.toast-hiding {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Varianti colore ──────────────────────────────────────── */

.toast-success {
    background: #f0faf4;
    border-color: #a3d9b3;
    color: #1a5c30;
}

.toast-success .toast-icon {
    color: #2d9e56;
}

.toast-error {
    background: #fff5f5;
    border-color: #f7c1c1;
    color: #7a1f1f;
}

.toast-error .toast-icon {
    color: #e24b4a;
}

.toast-warning {
    background: #fffbf0;
    border-color: #fac775;
    color: #7a4f0a;
}

.toast-warning .toast-icon {
    color: #d4870e;
}

.toast-info {
    background: #f0f6ff;
    border-color: #b5d4f4;
    color: #0c3f6e;
}

.toast-info .toast-icon {
    color: #185fa5;
}

/* ── Icona ────────────────────────────────────────────────── */

.toast-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Messaggio ────────────────────────────────────────────── */

.toast-msg {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

/* ── Bottone chiudi ───────────────────────────────────────── */

.toast-close {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.45;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: opacity 0.15s;
    margin-top: 1px;
}

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

.toast-close svg {
    width: 10px;
    height: 10px;
}