/* ═══════════════════════════════════════════════════════════════════════════
   TOAST — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto.
   ═══════════════════════════════════════════════════════════════════════════

   Messaggi brevi che confermano o avvisano, senza interrompere.

   Su desktop stanno in basso a destra; su mobile in basso al centro, SOPRA la
   barra di navigazione — coprirla renderebbe irraggiungibile proprio la parte
   che si tocca più spesso.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-toasts {
    position: fixed;
    z-index: var(--ui-z-toast);
    display: flex;
    flex-direction: column-reverse; /* il più recente in basso, vicino all'occhio */
    gap: var(--ui-space-2);
    right: var(--ui-space-5);
    bottom: var(--ui-space-5);
    width: min(380px, calc(100vw - var(--ui-space-6)));
    pointer-events: none; /* i click passano alla pagina; i toast li riattivano */
}

@media (max-width: 767.98px) {
    .ui-toasts {
        left: var(--ui-space-3);
        right: var(--ui-space-3);
        width: auto;
        bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom, 0px));
    }

    /* Lo spazio per la barra di navigazione si lascia SOLO se la barra c'è.
       Prima era incondizionato: su una pagina senza guscio — un login, una
       stampa — i messaggi restavano sospesi a sessanta pixel dal fondo senza
       motivo. `:has()` lo verifica nel documento. */
    body:has(.ui-bottomnav) .ui-toasts {
        bottom: calc(var(--ui-bottomnav-height) + var(--ui-space-5) + env(safe-area-inset-bottom, 0px));
    }
}

.ui-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-medium);
    box-shadow: var(--ui-shadow-lg);
    background: var(--ui-panel);
    border: 1px solid var(--bs-border-color);
    /* Entra dal basso: la direzione da cui è comparso dice da dove viene. */
    transform: translateY(16px);
    opacity: 0;
    transition:
        transform var(--ui-duration-base) var(--ui-ease-spring),
        opacity var(--ui-duration-base) var(--ui-ease);
    touch-action: pan-x;
}
.ui-toast.is-in { transform: translateY(0); opacity: 1; }
.ui-toast.is-out { transform: translateY(8px); opacity: 0; }
.ui-toast.is-dragging { transition: opacity var(--ui-duration-fast) var(--ui-ease); }

.ui-toast-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    margin-top: 1px;
}
.ui-toast-body { flex: 1; min-width: 0; }
.ui-toast-msg { word-break: break-word; }

.ui-toast-action {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--ui-brand);
    font-weight: var(--ui-weight-bold);
    font-size: var(--ui-text-sm);
    padding: 2px 6px;
    border-radius: var(--ui-radius-xs);
}
.ui-toast-action:hover { background: var(--bs-primary-bg-subtle); }

.ui-toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    opacity: .45;
    padding: 0 2px;
    line-height: 1;
}
.ui-toast-close:hover { opacity: 1; }

/* Barra del tempo residuo: dice quanto resta, e si ferma col puntatore
   sopra — un messaggio che sparisce mentre lo stai leggendo è la cosa più
   fastidiosa che un toast possa fare. */
.ui-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: currentColor;
    opacity: .3;
    border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
    animation: uiToastTimer linear forwards;
}
.ui-toast { position: relative; overflow: hidden; }
.ui-toast:hover .ui-toast-timer,
.ui-toast:focus-within .ui-toast-timer { animation-play-state: paused; }

@keyframes uiToastTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ── Tipi ─────────────────────────────────────────────────────────────────
   Ogni tipo dichiara le sue quattro tinte una volta sola; le varianti di
   riempimento più sotto le usano senza doversi ripetere per ogni tipo. */
.ui-toast-success {
    --ui-toast-tint: var(--ui-success);
    --ui-toast-soft: var(--bs-success-bg-subtle);
    --ui-toast-edge: var(--bs-success-border-subtle);
    --ui-toast-ink: var(--bs-success-text-emphasis);
    --ui-toast-on-tint: #fff;
}
.ui-toast-error {
    --ui-toast-tint: var(--ui-danger);
    --ui-toast-soft: var(--bs-danger-bg-subtle);
    --ui-toast-edge: var(--bs-danger-border-subtle);
    --ui-toast-ink: var(--bs-danger-text-emphasis);
    --ui-toast-on-tint: #fff;
}
.ui-toast-warning {
    --ui-toast-tint: var(--ui-warning);
    --ui-toast-soft: var(--bs-warning-bg-subtle);
    --ui-toast-edge: var(--bs-warning-border-subtle);
    --ui-toast-ink: var(--bs-warning-text-emphasis);
    /* Sul giallo il bianco non raggiunge il contrasto minimo: testo scuro. */
    --ui-toast-on-tint: #241C08;
}
.ui-toast-info {
    --ui-toast-tint: var(--ui-brand);
    --ui-toast-soft: var(--bs-primary-bg-subtle);
    --ui-toast-edge: var(--bs-primary-border-subtle);
    --ui-toast-ink: var(--bs-primary-text-emphasis);
    --ui-toast-on-tint: var(--ui-brand-contrast);
}

/* Predefinito: fondo neutro, colore solo su icona e bordo. Un rettangolo
   verde pieno grida più di quanto serva per dire "salvato". */
.ui-toast { border-color: var(--ui-toast-edge, var(--bs-border-color)); }
.ui-toast-icon { color: var(--ui-toast-tint, var(--ui-brand)); }

/* ── Riempimento (opzionale) ──────────────────────────────────────────────
   `subtle` per dare più presenza restando leggibile, `solid` quando il
   messaggio deve farsi notare a colpo d'occhio.

   Sul pieno l'icona NON prende un colore proprio: eredita quello del testo,
   altrimenti sparirebbe nel fondo della stessa tinta. */
.ui-toast-fill-subtle {
    background: var(--ui-toast-soft);
    border-color: var(--ui-toast-edge);
    color: var(--ui-toast-ink);
}
.ui-toast-fill-subtle .ui-toast-icon { color: var(--ui-toast-ink); }

.ui-toast-fill-solid {
    background: var(--ui-toast-tint);
    border-color: transparent;
    color: var(--ui-toast-on-tint);
}
.ui-toast-fill-solid .ui-toast-icon,
.ui-toast-fill-solid .ui-toast-action,
.ui-toast-fill-solid .ui-toast-close { color: inherit; }
.ui-toast-fill-solid .ui-toast-action:hover {
    background: rgba(255, 255, 255, .18);
}

@media (prefers-reduced-motion: reduce) {
    .ui-toast { transition-duration: 1ms; transform: none; }
    .ui-toast.is-in, .ui-toast.is-out { transform: none; }
}