/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        tabulator.css
 * Path:        public/css/vendor/tabulator.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Sovrascrive gli stili principali della libreria Tabulator per allinearli al tema grafico del framework.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: personalizzazione tabulator.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: tema grafico delle tabelle Tabulator
 * ========================================================== */

/* ----------------------------------------------------------
 * Sezione: Header delle Colonne
 * Applica il gradiente verde standard alle intestazioni della tabella.
 * ---------------------------------------------------------- */
.tabulator .tabulator-header .tabulator-col {
    background: var(--color-primary-light);
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid));
    color: var(--color-on-primary) !important;
    border-right: 1px solid var(--color-primary-dark);
    font-weight: 600;
    transition: background 0.2s ease;
}

/*
 * Effetto al passaggio del mouse sulle intestazioni.
 * Uniformato mantenendo il testo bianco e applicando un gradiente leggermente 
 * più profondo (scuro) per dare feedback di clickabilità senza aggredire l'occhio.
 */
.tabulator .tabulator-header .tabulator-col:hover {
    background: var(--color-primary-hover);
    background: linear-gradient(to bottom, var(--color-primary-hover), var(--color-primary-hover-dark));
}

/*
 * Forza la centratura dei titoli o delle icone posizionate nelle intestazioni 
 * quando viene configurato l'allineamento centrale lato JavaScript.
 */
.tabulator .tabulator-header .tabulator-col.tabulator-align-center .tabulator-col-content {
    text-align: center;
}

/* Titolo di colonna centrato quando Tabulator applica l'allineamento centrale. */
.tabulator .tabulator-header .tabulator-col.tabulator-align-center .tabulator-col-content .tabulator-col-title {
    padding-right: 0px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/*
 * Tabulator applica di default cursor:pointer alle righe selezionabili
 * (.tabulator-selectable:hover), a prescindere dal fatto che la griglia
 * abbia davvero un'azione legata al click sulla riga: nessun modulo
 * dell'app configura rowClick/rowDblClick, quindi il pointer e' solo
 * fuorviante per l'utente.
 */
.tabulator .tabulator-row.tabulator-selectable:hover {
    cursor: default;
}

/*
 * Il pannello espandibile (+) e' figlio della riga e ne eredita lo sfondo:
 * con hover o riga selezionata i valori sembrerebbero disabilitati. Ha uno
 * sfondo proprio, cosi' l'evidenziazione resta sulla sola riga di dati.
 */
.tabulator .tabulator-row .tabulator-responsive-collapse {
    background-color: var(--color-bg-muted);
}

/*
 * Pulsante dei dettagli di riga (selettori piu' specifici di quelli di Tabulator,
 * che sono .tabulator-row .tabulator-cell ...): un triangolo pieno, che punta a destra
 * a riga chiusa e a riga aperta si gira di 90 gradi verso il basso, come quello dei
 * titoli delle sezioni comprimibili (.detail-section-title, detail-section.css), al
 * posto del cerchio grigio con [+] e [-] di Tabulator.
 * Sulle righe senza dettagli da mostrare (classe is-empty, vedi
 * BaseList._syncCollapseToggles()) non si vede ma tiene il posto.
 */
.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
    width: 24px;
    height: 24px;
    background: none;
    border-radius: 0;
}

.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {
    display: none !important;
}

.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid var(--color-text-muted);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: transform 0.15s ease;
}

.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open::before {
    transform: rotate(90deg);
}

.tabulator .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.is-empty {
    visibility: hidden;
}

/*
 * Pulsante nell'intestazione della colonna delle frecce (BaseList._collapseAllElement()):
 * apre o chiude i dettagli di tutte le righe. Stesso triangolo delle frecce di riga,
 * bianco sul verde dell'intestazione: a destra se tutti i dettagli sono chiusi, a
 * 45 gradi se solo alcuni sono aperti, in basso se sono tutti aperti. Nascosto
 * (is-empty) se nessuna riga ha dettagli.
 */
.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    cursor: pointer;
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid var(--color-on-primary);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: transform 0.15s ease;
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all[data-state="partial"]::before {
    transform: rotate(45deg);
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all[data-state="all"]::before {
    transform: rotate(90deg);
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all:hover {
    opacity: 0.8;
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all:focus-visible {
    outline: 2px solid var(--color-on-primary);
    outline-offset: -2px;
    border-radius: var(--radius-small);
}

.tabulator .tabulator-header .tabulator-col .tabulator-collapse-all.is-empty {
    visibility: hidden;
}

/*
 * Freccia dei titoli dei gruppi (raggruppamenti): lo stesso triangolo pieno del
 * pulsante dei dettagli di riga qui sopra. Tabulator la disegna con bordi di
 * forma diversa a gruppo chiuso e aperto (e margini diversi); qui ha sempre la
 * forma del triangolo a destra e a gruppo aperto si gira di 90 gradi, con lo
 * stesso margine.
 */
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
    width: 0;
    height: 0;
    margin-right: 12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--color-text-muted);
    border-right: 0;
    transition: transform 0.15s ease;
}

.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
    margin-right: 12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--color-text-muted);
    border-right: 0;
    transform: rotate(90deg);
}

/*
 * Triangolini di ordinamento nell'intestazione delle colonne: stessa forma
 * dei triangoli qui sopra (8 x 12 px), girata verso l'alto o il basso
 * (12 x 8 px). Tabulator li disegna con bordi da 6px (12 x 6 px) e cambia
 * colore a seconda dello stato (non ordinata, crescente, decrescente, hover):
 * qui si cambiano solo gli spessori, i colori restano i suoi. !important
 * perche' i suoi selettori sono molto specifici; il lato con "border: none"
 * resta a spessore zero.
 */
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-left-width: 6px !important;
    border-right-width: 6px !important;
    border-top-width: 8px !important;
    border-bottom-width: 8px !important;
}

/*
 * Nel pannello espandibile (+) ogni voce e' una riga "etichetta | valore":
 * l'etichetta sta in alto, a sinistra del valore (non centrata in verticale,
 * che per un testo lungo la farebbe galleggiare a meta' altezza), e il valore
 * va a capo invece di uscire dalla tabella. Tabulator eredita nowrap dal
 * contenitore delle righe, giusto per le celle ma non per questo pannello.
 */
.tabulator .tabulator-row .tabulator-responsive-collapse table {
    white-space: normal;
}

.tabulator .tabulator-row .tabulator-responsive-collapse table tr td {
    vertical-align: top;
}

.tabulator .tabulator-row .tabulator-responsive-collapse table tr td:first-of-type {
    white-space: nowrap;
}

/* ==========================================================
 * SEZIONE: paginazione Tabulator
 * ========================================================== */

/* Pulsanti del paginatore con colore testo leggibile sul footer. */
.tabulator .tabulator-footer .tabulator-paginator button {
    color: var(--color-text-heading) !important;
}

/* Numero pagina del paginatore con colore testo leggibile sul footer. */
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
    color: var(--color-text-heading) !important;
}

/* Pagina attiva del paginatore: tinta primaria del tema con testo bianco, come
 * le intestazioni delle tabelle. Serve perche' il colore dei numeri pagina qui
 * sopra e' !important e cancellerebbe l'evidenziazione predefinita di Tabulator
 * (.tabulator-page.active); con una classe in piu' questa regola prevale. */
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page.active {
    background: var(--color-primary-light);
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid));
    border-color: var(--color-primary-mid);
    color: var(--color-on-primary) !important;
    font-weight: 700;
}

/* Select della dimensione pagina resa compatta. */
.tabulator .tabulator-footer .tabulator-page-size {
    height: 25px;
    min-height: 25px;
}

/* Spaziatura compatta dei pulsanti del paginatore. */
.tabulator .tabulator-footer .tabulator-paginator button {
    padding: 2px 6px 3px 6px;
    font-size: 14px;
}