/* ============================================================
   Tabelle Filament in aggiornamento (generico, platform-wide)
   ------------------------------------------------------------
   Classe .jo-ta-busy messa da public/js/table-loading.js sul
   .fi-ta-content (l'area delle righe, stato vuoto compreso) quando
   una richiesta Livewire che cambia i dati della tabella (filtri,
   ricerca, ordinamento, pagina) tarda oltre il ritardo dello script.
   Righe attenuate e non cliccabili, rotellina al centro della parte
   visibile: la posizione arriva dallo script nelle variabili
   --jo-ta-spinner-x / --jo-ta-spinner-y.
   Si attenuano i figli e non il contenitore: l'opacita' sul
   contenitore spegnerebbe anche la rotellina (::after).
   ============================================================ */
.fi-ta-content > * {
    transition: opacity .15s ease-out;
}

.fi-ta-content.jo-ta-busy > * {
    opacity: .4;
    pointer-events: none;
}

.fi-ta-content.jo-ta-busy::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: var(--jo-ta-spinner-y, 50%);
    left: var(--jo-ta-spinner-x, 50%);
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border-radius: 9999px;
    border: 3px solid color-mix(in srgb, var(--jo-primary-600, #7400ff) 18%, transparent);
    border-top-color: var(--jo-primary-600, #7400ff);
    animation: jo-ta-spin .7s linear infinite;
    pointer-events: none;
}

/* Il viola base su fondo scuro si legge poco: tono piu' chiaro. */
.dark .fi-ta-content.jo-ta-busy::after {
    border-color: color-mix(in srgb, var(--jo-primary-300, #b888ff) 20%, transparent);
    border-top-color: var(--jo-primary-300, #b888ff);
}

@keyframes jo-ta-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Niente rotazione, come la barra di page-loading.js: resta l'arco fermo
   sulle righe attenuate. */
@media (prefers-reduced-motion: reduce) {
    .fi-ta-content.jo-ta-busy::after {
        animation: none;
    }
}