/**
 * Tabelle dei contenuti - stile Design Comuni / Bootstrap Italia.
 *
 * Bootstrap Italia stila .table e le righe alternate (.table-striped), ma in
 * questo build NON differenzia l'intestazione: non esistono regole per thead
 * ne' per th, e le classi .table-light/.table-dark non sono compilate.
 * Qui aggiungiamo solo cio' che manca, usando i token del design system
 * (niente colori inventati) per non deviare dal modello.
 */

/* Intestazione differenziata dalle altre righe.
   Passiamo per --bs-table-accent-bg invece che per background-color perche'
   BI dipinge le celle con un box-shadow inset che coprirebbe lo sfondo. */
.table-responsive > table > thead > tr > th,
.table-responsive > table > thead > tr > td {
  --bs-table-accent-bg: var(--bs-gray-200);
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--bs-gray-400, hsl(0deg, 0%, 74%));
}

/* Intestazione di colonna (prima cella di ogni riga del corpo): stessa
   distinzione, tono piu' leggero per non competere con l'intestazione. */
.table-responsive > table > tbody > tr > th {
  --bs-table-accent-bg: var(--bs-gray-100);
  font-weight: 600;
  text-align: left;
}

/* Il contenitore scorrevole riceve il focus da tastiera: va reso visibile,
   altrimenti chi naviga con Tab non sa dove si trova (WCAG 2.4.7). */
.table-responsive:focus-visible {
  outline: 2px solid var(--bs-primary, #06c);
  outline-offset: 2px;
}

/* Le tabelle larghe non devono comprimere le colonne fino a spezzare le
   parole: meglio lasciarle scorrere nel contenitore. */
.table-responsive > table {
  min-width: 100%;
  width: auto;
}