/* ═══════════════════════════════════════════════════════════════════════════
   STATI VUOTI, ERRORE, OFFLINE — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto.
   ═══════════════════════════════════════════════════════════════════════════

   ┌─ QUATTRO STATI, NON UNO ────────────────────────────────────────────────┐
   │                                                                          │
   │ vuoto        non c'è ancora niente        → "crea il primo"              │
   │ nessun esito i filtri escludono tutto     → "azzera i filtri"            │
   │ errore       qualcosa si è rotto          → "riprova"                    │
   │ offline      manca la connessione         → "riprova" + spiegazione      │
   │                                                                          │
   │ Confondere "vuoto" con "nessun esito" è l'errore più comune, e il più    │
   │ costoso: l'utente che ha appena filtrato si vede dire "non hai ancora    │
   │ fatture" e pensa di aver perso i dati. Sono due messaggi diversi con     │
   │ due azioni diverse.                                                      │
   └─────────────────────────────────────────────────────────────────────────┘

   Ogni stato ha un'azione. Un vicolo cieco che dice solo "niente da mostrare"
   lascia l'utente fermo senza sapere cosa fare.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-10) var(--ui-space-5);
    min-height: 260px;
}

.ui-state-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius-lg);
    font-size: var(--ui-text-2xl);
    background: color-mix(in oklab, var(--ui-ink) 6%, transparent);
    color: var(--ui-ink-muted);
}

.ui-state-title {
    font-family: var(--ui-font-display);
    font-weight: var(--ui-weight-bold);
    font-size: var(--ui-text-lg);
    letter-spacing: var(--ui-tracking-tight);
    margin: 0;
}

.ui-state-text {
    font-size: var(--ui-text-sm);
    color: var(--ui-ink-muted);
    max-width: 46ch;
    margin: 0;
}

.ui-state-actions {
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--ui-space-2);
}

/* Il colore lo prende solo l'errore. Un elenco vuoto non è un guasto:
   colorarlo di rosso allarma per niente. */
.ui-state-error .ui-state-icon {
    background: var(--bs-danger-bg-subtle);
    color: var(--ui-danger);
}
.ui-state-offline .ui-state-icon {
    background: var(--bs-warning-bg-subtle);
    color: var(--ui-warning);
}
.ui-state-empty .ui-state-icon {
    background: var(--bs-primary-bg-subtle);
    color: var(--ui-brand);
}

/* Dentro una card o una tabella lo stato non deve prendersi mezza pagina. */
.ui-state-compact {
    min-height: 0;
    padding: var(--ui-space-6) var(--ui-space-4);
}
.ui-state-compact .ui-state-icon {
    width: 46px;
    height: 46px;
    font-size: var(--ui-text-lg);
}

/* ── Avviso di connessione assente ────────────────────────────────────────
   Striscia fissa in alto: a differenza di un toast non scade, perché la
   condizione che segnala non scade da sola. */
.ui-offline-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ui-z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-semibold);
    background: var(--ui-warning);
    color: #241C08;
    transform: translateY(-100%);
    transition: transform var(--ui-duration-base) var(--ui-ease);
}
.ui-offline-bar.is-visible { transform: translateY(0); }