/* =========================================================================
   Auxilium — Tabelle dati (.tabella-risultati)

   Punto unico di verità per lo stile di TUTTE le tabelle che mostrano
   record (tubazioni, tratti di rete, risultati, accessori). Si modifica
   qui, cambia ovunque.

   Pattern di consumo nella razor (DRY, niente style inline):

     <div class="diametri-grid-wrapper">
         <table class="tabella-risultati">
             <thead>...</thead>
             <tbody>...</tbody>
         </table>
     </div>

   Modificatori opzionali:
     .tabella-risultati--densa        spaziatura ridotta
     .tabella-risultati--no-zebra     disattiva le righe alternate
     td.cella-num / th.cella-num      allineamento numerico a destra
     td.cella-azioni                  cella con bottoni inline (a destra)
     .diametri-grid-wrapper--sticky   header sticky in scroll verticale

   La classe storica .raccordi-tabella resta supportata come variante
   "tabella dentro a tabella": eredita tutto e applica un fondo neutro.
   ========================================================================= */


/* ---------- 1. Wrapper con scroll orizzontale gestito ------------------ */
/* Sostituisce gli <div style="overflow-x: auto"> inline sparsi.
   Aggiunge un indicatore di scroll laterale (ombre interne) che compare
   solo quando il contenuto eccede la larghezza disponibile. */

.diametri-grid-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-sm);
    background: var(--ax-panel-bg);

    /* Ombra interna che indica la presenza di contenuto scrollabile.
       Tecnica "background-attachment: local" + gradienti laterali. */
    background-image:
        linear-gradient(to right, var(--ax-panel-bg), var(--ax-panel-bg)),
        linear-gradient(to right, var(--ax-panel-bg), var(--ax-panel-bg)),
        linear-gradient(to right, rgba(15, 26, 43, 0.12), rgba(15, 26, 43, 0)),
        linear-gradient(to left, rgba(15, 26, 43, 0.12), rgba(15, 26, 43, 0));
    background-position:
        left center, right center,
        left center, right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.diametri-grid-wrapper + .diametri-grid-wrapper {
    margin-top: var(--ax-space-3);
}

/* Variante con header che resta in vista quando si scrolla verticalmente.
   Usabile dove la tabella ha tante righe (catalogo, tratti). */
.diametri-grid-wrapper--sticky .tabella-risultati thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}


/* ---------- 2. Tabella base ------------------------------------------- */

.tabella-risultati {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ax-fs-13);
    color: var(--ax-text-1);
    background: transparent;
}

.tabella-risultati thead th {
    padding: 10px 12px;
    background: var(--ax-gray-100);
    color: var(--ax-text-2);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--ax-border-strong);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.tabella-risultati tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ax-border-soft);
    vertical-align: middle;
}

.tabella-risultati tbody tr:last-child td {
    border-bottom: none;
}

.tabella-risultati tbody tr:hover td {
    background: color-mix(in srgb, var(--ax-primary-50) 60%, transparent);
}

/* Zebra: attiva di default per leggibilità su tabelle lunghe. Disattivabile
   con .tabella-risultati--no-zebra dove non serve (poche righe). */
.tabella-risultati tbody tr:nth-child(even) td {
    background: var(--ax-gray-25);
}

.tabella-risultati--no-zebra tbody tr:nth-child(even) td {
    background: transparent;
}


/* ---------- Righe di esito: verificato / superamento --------------------- */
/* Evidenziano l'esito di una verifica. Tinta tenue su transparent così
   funziona su tema chiaro e scuro; vincono sulla zebra perché definite dopo. */

.tabella-risultati tbody tr.riga-ok td {
    background: color-mix(in srgb, var(--ax-success) 14%, transparent);
}

.tabella-risultati tbody tr.riga-ko td {
    background: color-mix(in srgb, var(--ax-danger) 16%, transparent);
}

.tabella-risultati tbody tr.riga-ok td:last-child {
    color: var(--ax-success-strong);
    font-weight: 600;
}

.tabella-risultati tbody tr.riga-ko td:last-child {
    color: var(--ax-danger-strong);
    font-weight: 600;
}


/* ---------- 3. Variante densa ----------------------------------------- */
/* Per tabelle con molte colonne dove ogni px conta (catalogo tubazioni
   con De, s, Di, peso, ecc.). */

.tabella-risultati--densa thead th,
.tabella-risultati--densa tbody td {
    padding: 6px 10px;
    font-size: var(--ax-fs-12);
}


/* ---------- 4. Celle numeriche ---------------------------------------- */
/* Allineamento a destra + tabulazione monospaziata per allineamento
   verticale delle cifre. Sostituisce gli <td style="text-align: right">
   inline ripetuti decine di volte. */

.tabella-risultati th.cella-num,
.tabella-risultati td.cella-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ---------- 5. Cella azioni ------------------------------------------- */
/* Container per gruppi di bottoni "Elimina", "Modifica", "Apri", ecc.
   Si allineano a destra, su una riga sola con wrap se necessario. */

.tabella-risultati th.cella-azioni,
.tabella-risultati td.cella-azioni {
    text-align: right;
    white-space: nowrap;
    width: 1%; /* la cella azioni resta della sua larghezza naturale */
}

.tabella-risultati td.cella-azioni > * + * {
    margin-left: var(--ax-space-2);
}


/* ---------- 6. Tabella annidata (es. raccordi nel tratto) ------------- */
/* La classe storica .raccordi-tabella veniva usata con tabella-risultati
   per le sub-tabelle dei raccordi di un tratto. La supportiamo come
   variante visiva: bordi più morbidi, sfondo distinto. */

.tabella-risultati.raccordi-tabella {
    border-top: 1px dashed var(--ax-border-soft);
    background: var(--ax-panel-bg-soft);
}

.tabella-risultati.raccordi-tabella thead th {
    background: var(--ax-gray-50);
    font-size: var(--ax-fs-12);
}


/* ---------- 7. Riga "vuota" / placeholder ----------------------------- */
/* Per le tabelle che vogliono mostrare uno stato vuoto inline (anziché
   nascondersi del tutto). */

.tabella-risultati td.cella-vuota {
    text-align: center;
    color: var(--ax-text-3);
    font-style: italic;
    padding: var(--ax-space-5) var(--ax-space-3);
}


/* ---------- 8. Tema scuro --------------------------------------------- */
/* I token gestiscono già la conversione, ma le regolazioni che dipendono
   da color-mix richiedono override mirati per non bruciare i contrasti. */

[data-theme="dark"] .diametri-grid-wrapper {
    background-image:
        linear-gradient(to right, var(--ax-panel-bg), var(--ax-panel-bg)),
        linear-gradient(to right, var(--ax-panel-bg), var(--ax-panel-bg)),
        linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}

[data-theme="dark"] .tabella-risultati tbody tr:hover td {
    background: color-mix(in srgb, var(--ax-primary-700) 18%, transparent);
}


/* ---------- 9. Mobile ------------------------------------------------- */
/* Sotto i 720px disabilito l'hover (touch) e riduco il padding orizzontale
   per recuperare spazio. Lo scroll orizzontale resta abilitato dal wrapper:
   meglio scorrere che spezzare le colonne. */

@media (max-width: 720px) {
    .tabella-risultati thead th,
    .tabella-risultati tbody td {
        padding: 8px 10px;
    }

    .tabella-risultati tbody tr:hover td {
        background: transparent;
    }
}