/* ================================================================
   PectusVac — Responsive Table Element  /css/pv-table.css  v2
   Stili base, scroll orizzontale, print.
   Il layout stacked/card è generato come <style> scoped inline
   dal PHP render() — breakpoint configurabile dal pannello Bricks.
   ================================================================ */

/* ── CSS custom properties defaults ─────────────────────────── */
/*
   Solo colori, bordi, spaziatura e variabili layout stack.
   Tipografia gestita interamente dai controlli Bricks 'typography'.
*/
.pv-table-wrapper {
  --pvt-header-bg:         #060D16;
  --pvt-header-text:       #ffffff;
  --pvt-body-bg:           #ffffff;
  --pvt-body-text:         #3D4B55;
  --pvt-stripe-bg:         #FAFAF7;
  --pvt-hl-bg:             #EAF6F4;
  --pvt-hl-text:           #0F6A5A;
  --pvt-footer-bg:         #F2F0EB;
  --pvt-footer-text:       #3D4B55;
  --pvt-border:            1px solid #E4E0D8;
  --pvt-radius:            0px;
  --pvt-padding:           14px 20px;
  --pvt-stack-lw:          40%;
  --pvt-stack-label-color: #0E1820;

  width: 100%;
}

/* ── Scroll container ────────────────────────────────────────── */
/*
   Scroll orizzontale su tablet/mobile.
   Ombra-gradiente CSS che segnala contenuto nascosto,
   senza JavaScript: tecnica Lea Verou (scroll shadow).
*/
.pvt-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll shadow indicator */
  background-image:
    /* Maschere opache sui bordi — si muovono con lo scroll */
    linear-gradient(to right, var(--pvt-body-bg) 20%, transparent),
    linear-gradient(to left,  var(--pvt-body-bg) 20%, transparent),
    /* Ombra visibile quando c'è contenuto oltre il bordo */
    radial-gradient(ellipse at left,  rgba(0,0,0,.12) 0%, transparent 70%),
    radial-gradient(ellipse at right, rgba(0,0,0,.12) 0%, transparent 70%);
  background-position: left center, right center, left center, right center;
  background-size: 36px 100%, 36px 100%, 18px 100%, 18px 100%;
  background-repeat: no-repeat;
  /* Local = si muovono con il contenuto | scroll = fissi al viewport */
  background-attachment: local, local, scroll, scroll;
  /* Border radius — overflow:hidden per rispettarlo con border-collapse */
  border-radius: var(--pvt-radius);
  overflow-y: visible;
}

/* ── Tabella base ────────────────────────────────────────────── */
.pvt-table {
  border-collapse: collapse;
  /* font-family e font-size: iniettati da Bricks typography_body */
  color: var(--pvt-body-text);
  background-color: var(--pvt-body-bg);
}

.pvt--full-width .pvt-table {
  width: 100%;
}

/* ── Outer border ────────────────────────────────────────────── */
.pvt--outer-border .pvt-table {
  border: var(--pvt-border);
}

/* ── THEAD ───────────────────────────────────────────────────── */
.pvt-table thead th {
  background-color: var(--pvt-header-bg);
  color: var(--pvt-header-text);
  /* font-size, font-weight, letter-spacing, text-transform:
     iniettati da Bricks typography_header */
  line-height: 1.4;
  padding: var(--pvt-padding);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* .pvt--uppercase-header rimosso: text-transform gestito da Bricks typography */

/* Inner borders thead */
.pvt--inner-border .pvt-table thead th {
  border-bottom: var(--pvt-border);
}
.pvt--inner-border .pvt-table thead th + th {
  border-left: var(--pvt-border);
}

/* ── TBODY ───────────────────────────────────────────────────── */
.pvt-table tbody td,
.pvt-table tbody th {
  padding: var(--pvt-padding);
  line-height: 1.65;
  vertical-align: middle;
  color: var(--pvt-body-text);
  background-color: var(--pvt-body-bg);
}

/* Row header cell (th in tbody = prima colonna etichetta) */
.pvt-table tbody th {
  /* font-weight: gestito da Bricks typography_body */
  text-align: left;
  white-space: nowrap;
}

/* Inner borders tbody */
.pvt--inner-border .pvt-table tbody tr + tr td,
.pvt--inner-border .pvt-table tbody tr + tr th {
  border-top: var(--pvt-border);
}
.pvt--inner-border .pvt-table tbody td + td,
.pvt--inner-border .pvt-table tbody td + th,
.pvt--inner-border .pvt-table tbody th + td {
  border-left: var(--pvt-border);
}

/* ── Striped rows ────────────────────────────────────────────── */
.pvt--striped .pvt-table tbody tr:nth-child(even) td,
.pvt--striped .pvt-table tbody tr:nth-child(even) th {
  background-color: var(--pvt-stripe-bg);
}

/* ── Highlighted row ─────────────────────────────────────────── */
.pvt-table tbody tr.pvt-row--highlight td,
.pvt-table tbody tr.pvt-row--highlight th {
  background-color: var(--pvt-hl-bg) !important;
  color: var(--pvt-hl-text) !important;
  font-weight: 500;
}

/* ── Hover ───────────────────────────────────────────────────── */
@media ( hover: hover ) {
  .pvt-table tbody tr:hover td,
  .pvt-table tbody tr:hover th {
    filter: brightness(0.96);
    transition: filter .15s ease;
  }
}

/* ── TFOOT ───────────────────────────────────────────────────── */
.pvt-table tfoot td,
.pvt-table tfoot th {
  padding: var(--pvt-padding);
  background-color: var(--pvt-footer-bg);
  color: var(--pvt-footer-text);
  /* font-size, font-weight: gestiti da Bricks typography_body */
  line-height: 1.4;
  border-top: var(--pvt-border);
}
.pvt--inner-border .pvt-table tfoot td + td,
.pvt--inner-border .pvt-table tfoot td + th {
  border-left: var(--pvt-border);
}

/* ── Caption ─────────────────────────────────────────────────── */
.pvt-caption {
  /* font-family: eredita dalla tabella, impostata da Bricks typography_body */
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted, #6B7A85);
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pvt-caption--left   { text-align: left; }
.pvt-caption--center { text-align: center; }
.pvt-caption--right  { text-align: right; }

/* ── Accessibility: focus ─────────────────────────────────────── */
.pvt-scroll:focus-visible {
  outline: 2px solid var(--teal, #1A9080);
  outline-offset: 2px;
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .pvt-scroll {
    overflow: visible;
    background-image: none;
  }
  .pvt-table {
    width: 100%;
    border-collapse: collapse;
  }
  .pvt-table thead th,
  .pvt-table tbody td,
  .pvt-table tbody th,
  .pvt-table tfoot td,
  .pvt-table tfoot th {
    border: 1px solid #ccc !important;
    background: transparent !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pvt-table thead th {
    background-color: #eeeeee !important;
  }
  /* In print: nascondi i data-label (già presenti le intestazioni) */
  .pvt-table td::before,
  .pvt-table th::before {
    display: none !important;
  }
}