/* ===========================================================================
   Filament Table Tabs — Digival\FilamentTableTabs
   ---------------------------------------------------------------------------
   "Finti tab" di filtro resi come pulsanti dentro l'header della tabella.
   Lo stile è globale: si applica a ogni pagina che usa il trait HasTableTabs,
   grazie alla classe .fi-ta-tabs-action assegnata a ciascun pulsante.
   Obiettivo grafico: far sembrare i pulsanti un segmented control / tab nativi.

   Questo file è CSS standalone (nessuna direttiva Tailwind / theme()):
   viene registrato come asset Filament dal TableTabsServiceProvider, quindi
   non richiede un build Tailwind nel progetto consumatore.
   Le variabili --gray-*, --primary-*, --color-white sono iniettate a runtime
   dal tema Filament del pannello.
   =========================================================================== */

/* Allinea la barra dei tab a sinistra (default Filament: spinti a destra
   con `ms-auto` quando l'header non ha titolo/descrizione). */
.fi-ta-header.fi-ta-header-adaptive-actions-position .fi-ta-actions:has(.fi-ta-tabs-action) {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* I tab formano un gruppo segmentato con un piccolo gap tra i pulsanti.
   Su viewport stretti (mobile) la barra non va a capo ma scorre in
   orizzontale, come i tab nativi di Filament: nowrap + overflow-x auto.
   Annulla il `fi-wrapped` (flex-wrap) che Filament applica di default
   al contenitore delle table actions. */
.fi-ta-header .fi-ta-actions:has(.fi-ta-tabs-action) {
    gap: 4px;
    padding: 8px;
    border-radius: 12px;
    background-color: var(--gray-100);
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    /* scrollbar discreta, non invasiva sulla barra */
    scrollbar-width: thin;
}

:is(.dark) .fi-ta-header .fi-ta-actions:has(.fi-ta-tabs-action) {
    background-color: var(--gray-800);
}

/* Singolo pulsante-tab: neutro, senza sfondo/bordo finché non è attivo.
   min-height fisso così i tab senza badge hanno la stessa altezza di quelli
   con badge (il .fi-badge alza il pulsante di alcuni px).
   flex-shrink: 0 → in scroll orizzontale i tab non si comprimono. */
.fi-ta-tabs-action.fi-btn {
    background-color: transparent;
    box-shadow: none;
    border: none;
    font-weight: 500;
    min-height: 2.5rem;
    flex-shrink: 0;
}

.fi-ta-tabs-action.fi-btn:hover {
    background-color: var(--gray-200);
}

:is(.dark) .fi-ta-tabs-action.fi-btn:hover {
    background-color: var(--gray-700);
}

/* Colore label + icona del tab INATTIVO: grigio uniforme, come .fi-tabs-item
   nativo. Usiamo .fi-icon per coprire l'SVG e color per il testo nudo del
   button. !important per battere le classi colore generate dal componente. */
.fi-ta-tabs-action.fi-btn {
    color: var(--gray-500);
}

.fi-ta-tabs-action.fi-btn .fi-icon {
    color: var(--gray-400) !important;
}

:is(.dark) .fi-ta-tabs-action.fi-btn {
    color: var(--gray-400);
}

:is(.dark) .fi-ta-tabs-action.fi-btn .fi-icon {
    color: var(--gray-500) !important;
}

/* Tab ATTIVO: rialzato come la "linguetta" selezionata di un segmented
   control; label e icona color primary, uniformi (come .fi-tabs-item.fi-active). */
.fi-ta-tabs-action.fi-active.fi-btn {
    background-color: var(--color-white);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
    color: var(--primary-700);
}

.fi-ta-tabs-action.fi-active.fi-btn .fi-icon {
    color: var(--primary-700) !important;
}

:is(.dark) .fi-ta-tabs-action.fi-active.fi-btn {
    background-color: var(--gray-950);
    color: var(--primary-400);
}

:is(.dark) .fi-ta-tabs-action.fi-active.fi-btn .fi-icon {
    color: var(--primary-400) !important;
}

/* Badge numerico del tab.
   Di default Filament posiziona il badge di un Action in assoluto, sporgente
   sull'angolo del pulsante (.fi-btn .fi-btn-badge-ctn: absolute, start-full,
   translate). Con i tab affiancati quel badge invade il pulsante successivo:
   lo riportiamo inline accanto al testo, come fa un tab nativo.
   Il selettore è .fi-btn.fi-ta-tabs-action (specificità 0,3,0) per battere
   la regola .fi-btn .fi-btn-badge-ctn di Filament a parità d'ordine. */
.fi-btn.fi-ta-tabs-action .fi-btn-badge-ctn {
    position: static;
    inset-inline-start: auto;
    top: auto;
    translate: none;
    width: auto;
    z-index: auto;
    margin-inline-start: 0.375rem;
    background-color: transparent;
}

/* L'Action button di Filament forza il badge a dimensione xs (.fi-size-xs).
   Annulliamo quel modificatore così il badge usa la dimensione nativa "md"
   (.fi-badge base: px-2 py-1, min-w-6 → 1.5rem / 0.5rem / 0.25rem). */
.fi-btn.fi-ta-tabs-action .fi-badge.fi-size-xs {
    min-width: 1.5rem;
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    letter-spacing: normal;
}

/* Cifre a larghezza fissa: il conteggio non fa "ballare" la larghezza del
   pulsante quando cambia di ordine di grandezza. */
.fi-btn.fi-ta-tabs-action .fi-badge {
    font-variant-numeric: tabular-nums;
}