/* ===== Griglia elenco (Grid.js) ===== */

/* Classe responsive custom per la colonna Azioni: sui breakpoint >= SM
   (576px) i bottoni tornano a larghezza auto (orizzontale), sotto SM
   (mobile) restano a larghezza piena (verticale, grazie a w-100).
   w-sm-auto non fa parte di Bootstrap (le utilities di sizing di Bootstrap
   non hanno varianti responsive per-breakpoint). flex-sm-nowrap invece e'
   gia' inclusa in Bootstrap 5.3. */
@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

/* NOTA: i selettori nth-child delle sezioni specifiche (.grid-areecircolazione,
   .grid-accessi) sono legati all'ordine delle colonne definito nei rispettivi
   cshtml (array columns di createGridFromServer). Se si riordina, aggiunge o
   rimuove una colonna, aggiornare l'indice nth-child di conseguenza.
   Le griglie senza classe identificativa usano le regole generiche qui sotto
   (scrollbar orizzontale nel wrapper, table-layout auto, colonna Azioni collassata). */

/* Griglia: scrollbar orizzontale interna al wrapper quando le colonne
   eccedono la larghezza disponibile (desktop e mobile), senza propagarla
   a livello di pagina. Valida per tutte le griglie gridjs del progetto,
   indipendentemente dall'id del contenitore (#grid, #gridAbitanti, #gridResidenti, ...). */
.gridjs-wrapper {
    overflow-x: auto;
}

table.gridjs-table {
    table-layout: auto;
    width: 100%;
}

/* Colonna Azioni: collassa alla larghezza minima dei tasti, senza spazio vuoto. */
.gridjs-th:last-child,
.gridjs-td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* --- Griglia Aree di Circolazione --- */
/* Colonne visibili: Id(1), CodiceEnte(2), Dug(3), Duf(4), Stato(5), Azioni(6) */

.grid-areecircolazione .gridjs-th:nth-child(2),
.grid-areecircolazione .gridjs-td:nth-child(2) {
    /*width: auto;*/
    max-width: 100px;
}

/* Colonna Duf: si espande per occupare lo spazio residuo, ma con tetto
   massimo per evitare la scrollbar orizzontale quando la somma delle colonne
   (Id + CodiceEnte + Dug + Duf + Stato(100) + Azioni(~420)) supera il viewport. */
.grid-areecircolazione .gridjs-th:nth-child(4),
.grid-areecircolazione .gridjs-td:nth-child(4) {
    width: auto;
    /*max-width: 350px;*/
}

.grid-areecircolazione .gridjs-td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Colonna Stato: larghezza limitata per far rientrare il badge contatore
   a 2 cifre nella colonna Azioni senza essere tagliato. */
.grid-areecircolazione .gridjs-th:nth-child(5),
.grid-areecircolazione .gridjs-td:nth-child(5) {
    width: 100px;
}

/* --- Griglia Accessi --- */
/* Colonne visibili: Id(1), CivicoNuovo(2), CivicoVecchio(3), AccessoInterno(4),
   Carrabile(5), Destinazione(6), Stato(7), Azioni(8) */

/* Colonna Destinazione: si espande per occupare lo spazio residuo. */
.grid-accessi .gridjs-th:nth-child(6),
.grid-accessi .gridjs-td:nth-child(6) {
    width: auto;
}

/* Colonna Stato: larghezza limitata per far rientrare il badge contatore
   residenti a 2 cifre nella colonna Azioni senza essere tagliato. */
.grid-accessi .gridjs-th:nth-child(7),
.grid-accessi .gridjs-td:nth-child(7) {
    width: 100px;
}