/* ---------------------------------------------------------
   8. Responsive data table
   --------------------------------------------------------- */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  /* Wide data tables are intentionally scrollable inside this wrapper. Without
     a layout containment boundary, Chromium can still propagate the table's
     scrollable/intrinsic inline size to the root scroll area, producing blank
     page-level horizontal overflow even though the wrapper itself is correctly
     sized. Layout containment keeps that contribution local without clipping
     floating UI outside the wrapper. */
  contain: layout;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.table-wrapper:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-surface);
  min-width: 480px; /* trigger scroll on small screens */
}

.data-table thead {
  background: var(--color-surface-2);
}

.data-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  /* Label role (docs/ui/DESIGN_CONTRACT.md §3): .64-.68rem uppercase,
     letter-spacing .07-.09em, weight 650, muted ink. */
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  /* The ledger signature (§4): a 2px strong rule under the header row. */
  border-bottom: 2px solid var(--color-border-strong);
  white-space: nowrap;
}

.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

.data-table th + th,
.data-table td + td {
  border-left: 1px solid var(--color-border);
}

.data-table thead th + th {
  border-left-color: var(--color-border-strong);
}

/* Numeric/date figures in columns are mono tabular (§3) wherever a template
   already marks the cell — no markup invented here, this rule just styles
   the hook once a template opts in. */
.data-table td.num,
.data-table td.data-table__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr:last-child td { border-bottom: none; }

/* Subtle zebra so wide tables stay scannable; row-tint classes below (with
   !important) still take priority over the zebra/hover tint. */
.data-table tbody tr:nth-child(even) { background: var(--color-surface-2); }

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-fill) 6%, var(--color-surface));
}

/* Selected rows (§4) — no markup currently sets these, added so the first
   consumer (row checkboxes / bulk-select) gets correct styling for free. */
.data-table tbody tr.is-selected,
.data-table tbody tr[aria-selected="true"] {
  background: var(--accent-soft) !important;
}

.bulk-cell {
  width: 2.75rem;
  text-align: center;
}

.bulk-cell input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent-fill);
}

.bulk-select-form {
  display: grid;
  gap: var(--sp-3);
}

.bulk-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.bulk-select-form.is-enhanced .bulk-select {
  position: sticky;
  bottom: var(--sp-3);
  z-index: 20;
  display: none;
}

.bulk-select-form.is-enhanced .bulk-select.is-active {
  display: flex;
}

.bulk-select__summary {
  color: var(--accent-ink);
}

.bulk-select__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.data-table--dense th,
.data-table--dense td,
.dense-table th,
.dense-table td,
body.is-density-compact .data-table th,
body.is-density-compact .data-table td {
  padding: var(--sp-2) var(--sp-3);
}

.data-table--dense,
.dense-table,
body.is-density-compact .data-table {
  font-size: var(--text-xs);
}

body.is-density-compact .card__header,
body.is-density-compact .card__body,
body.is-density-compact .info-card,
body.is-density-compact .card-form {
  padding: var(--sp-4);
}

body.is-density-compact .page-header {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
}

body.is-density-compact .filter-bar,
body.is-density-compact .list-toolbar {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}

/* Row tints for semaforo */
.row-verde  { background: var(--color-verde-bg)  !important; }
.row-giallo { background: var(--color-giallo-bg) !important; }
.row-rosso  { background: var(--color-rosso-bg)  !important; }

/* Opt-in: collapse a data-table into stacked cards on phones. Each <td> must
   carry a data-label="…" so the field name is shown beside its value. */
@media (max-width: 639px) {
  /* Escape the CSS table layout algorithm entirely: with tbody/tr/td below
     still carrying "table-row-group"/"table-row"/"table-cell" internal
     display types, a table with table-layout:auto sizes itself to the
     MINIMUM content width of its widest cell — even though that cell no
     longer looks like a table cell — which silently forced the whole
     card list wider than the viewport (and thus into .table-wrapper's
     hidden horizontal scroll) whenever one cell held a long non-wrapping
     value. table/tbody as plain blocks removes that sizing rule. */
  .data-table--cards { display: block; min-width: 0; }
  .data-table--cards tbody { display: block; }
  .data-table--cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .data-table--cards tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    background: var(--color-surface);
  }
  .data-table--cards tbody tr:nth-child(even) { background: var(--color-surface); }
  .data-table--cards tbody tr:hover { background: var(--color-surface); }
  .data-table--cards td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-2) 0;
    border-left: none;
    border-bottom: 1px solid var(--color-bg);
    text-align: right;
  }
  .data-table--cards td:last-child { border-bottom: none; }
  .data-table--cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-align: left;
  }
  /* The value side must be able to shrink below its content's natural
     width — the flex default (min-width:auto) otherwise pins it at the
     widest unbreakable run. Badges/status chips deliberately set
     white-space:nowrap (a wrapped pill looks broken) so a long chip label
     (e.g. a normativa category name) needs an explicit opt-in to wrap
     inside a card, rather than pushing the row past the card edge. */
  .data-table--cards td > * { min-width: 0; }
  .data-table--cards td .badge,
  .data-table--cards td .status-chip {
    white-space: normal;
    text-align: right;
  }
  .data-table--cards td.bulk-cell {
    width: auto;
    min-height: 44px;
    justify-content: flex-start;
    order: -1;
    text-align: left;
  }
  .data-table--cards td.bulk-cell::before { content: ""; display: none; }
  .data-table--cards td.bulk-cell input[type="checkbox"] {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    flex: 0 0 44px;
  }
  .data-table--cards td.actions { justify-content: flex-end; }
}

/* Matrice formazione — aggregate employee × course grid.
   First column (worker) and header row stay pinned while the grid scrolls. */
/* Size the grid to its content instead of stretching to the container width:
   with few courses the columns would otherwise be spread far apart. The
   .table-scroll wrapper still scrolls horizontally when courses are many. */
.matrice { width: auto; min-width: 0; }
.matrice td.matrice__cell { text-align: center; white-space: nowrap; padding: var(--sp-2) var(--sp-2); }
/* Course-code columns: tighten horizontal padding so the grid is compact.
   The worker name column (matrice__name) keeps the roomier default. */
.matrice thead th:not(.matrice__corner),
.matrice tfoot td:not(.matrice__name) { padding-left: var(--sp-2); padding-right: var(--sp-2); }
/* The footer coverage bars otherwise impose a 7rem minimum on every course
   column. Overall coverage is already shown by the summary donut, so here we
   keep just the per-course percentage and drop the bar, letting columns size
   to their (short) course code. */
.matrice tfoot .cbar { min-width: 0; gap: var(--sp-1); }
.matrice tfoot .cbar__track { display: none; }
.matrice tfoot .cbar__pct { min-width: 0; }
.matrice th.matrice__corner,
.matrice th.matrice__name,
.matrice td.matrice__name {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}

/* Collapsible "Come funzionano i filtri" explainer above the matrix. */
.matrice-help { margin: var(--sp-3) 0; }
.matrice-help > summary { cursor: pointer; font-weight: 600; }
.matrice-help__body { margin-top: var(--sp-3); }
.matrice th.matrice__corner { background: var(--color-surface-2); z-index: 2; }
.matrice thead th { white-space: nowrap; }
.matrice tfoot td {
  font-weight: 600;
  background: var(--color-surface-2);
  border-top: 2px solid var(--color-border-strong);
  text-align: center;
}
.matrice tfoot td.matrice__name { text-align: left; }

/* Matrice summary card: donut alongside KPI text + chip legend. */
.matrice-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.matrice-summary__donut {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
/* Caption naming what the donut measures (Aziende / Dipendenti) so the ring
   is not just a bare percentage. */
.matrice-summary__caption {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.matrice-summary__body { flex: 1 1 16rem; min-width: 0; }
.matrice-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}