/* ══════════════════════════════════════════════════════════════════════════
   print.css – Layout di stampa universale (v6 – flex + 100vh).

   STRATEGIA:
   - @page margins 12.7mm (0.5" Chrome default).
   - .page = 100vh (esattamente la print area, qualunque siano i margini @page).
   - .main = flex column che riempie .page.
   - Top-row (2 grafici) = flex:1 → riempie TUTTO lo spazio residuo.
   - Bottom-row (tabella + fonti) = altezza fissa 41mm, pinnata al fondo
     dalla naturale flow di flexbox.
   - SVG: preserveAspectRatio="none" + counter-transform sui testi
     applicato in JS sync + RAF + MutationObserver.

   Tutto sta su UNA pagina: niente overflow su pagina 2.
   ══════════════════════════════════════════════════════════════════════════ */

@page {
  /* Dimensioni ESPLICITE (larghezza × altezza) invece del keyword
     "A4 landscape". Molti driver di stampa basati su Windows – in primis
     "Microsoft Print to PDF" – NON applicano il keyword `A4 landscape`
     della CSS @page e ripiegano sul formato/orientamento di default del
     driver (tipicamente Letter, spesso in verticale). Specificando le
     dimensioni come coppia `297mm 210mm` si fissa SIA il formato (A4) SIA
     l'orientamento (orizzontale, perché larghezza > altezza) in una forma
     che più driver rispettano, riducendo il disallineamento Windows↔Mac.
     NB: resta comunque consigliato, nella finestra di stampa di Windows,
     impostare Formato = A4 e Layout = Orizzontale. */
  size: 297mm 210mm;
  margin: 12.7mm;
}

/* Marker: in print mode questa variabile vale "1". Le funzioni di render
   delle pagine possono leggere il valore via getComputedStyle e applicare i
   margini compatti senza dover dipendere da matchMedia o eventi. */
:root, html, body {
  --print-mode: 1;
}

/* ─── 0. Color exact + reset blend/anim ──────────────────────────────── */
*, *::before, *::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
  animation: none !important;
  transition: none !important;
}

html, body {
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 8.5pt;
  height: auto !important;
  min-height: 0 !important;
}

/* Annulla mix-blend-mode (usato a schermo per la patina beige) */
.page,
.kpi-card, .kpi-card *,
.chart-panel, .chart-panel *,
.debpil-panel, .debpil-panel *,
.prev-panel, .prev-panel *,
.rel-panel, .rel-panel *,
.compliance-panel, .compliance-panel *,
.detail-panel, .detail-panel *,
.print-sources-aside, .print-sources-aside *,
.dsi-chart, .dsi-chart * {
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

/* ─── 1. Pagina: usa 100vh per riempire ESATTAMENTE la print area ────── */
/* In print mode 100vh corrisponde all'altezza disponibile dentro i margini
   @page, qualunque essi siano. Cosi' .page sta SEMPRE in una pagina sola. */
.page {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;     /* nessuno spill su pagina 2 */
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  --page-pad-inline: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  page-break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 2.5mm !important;             /* gap ridotto tra le tre fasce (cards/grafici/tabella+fonti) per uniformarlo al gap verticale interno (richiesta utente). 5mm → 2.5mm libera spazio verticale ai box dei grafici. */
  background: #fff !important;
  overflow: hidden !important;
}

/* Default: ogni figlio di .main occupa la sua altezza naturale */
.main > * { flex: 0 0 auto !important; min-height: 0 !important; }

/* Evita salti di pagina interni */
.kpi-card,
.chart-panel,
.prev-panel,
.debpil-panel,
.rel-panel,
.compliance-panel,
.detail-panel {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ─── 2. Header: H1 + sottotitolo, nessuna linea sotto ───────────────── */
.slim-header,
.it-header-nav,
.it-header-nav-sentinel,
.main-header .titles .eyebrow,
.main-header .meta-badge {
  display: none !important;
}

.main-header {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  /* Gap di 2.5mm sotto il sottotitolo, uguale al flex-gap della .main
     (richiesta utente: gap uniformi). */
  margin: 0 0 2.5mm !important;
  display: block !important;
  border: 0 !important;
  border-bottom: 0 !important;
  flex: 0 0 auto !important;
}
.main-header .titles { flex: none !important; min-width: 0 !important; }
.main-header h1 {
  color: var(--it-color-gray-10) !important;
  font-family: var(--it-font-sans) !important;
  font-size: 13pt !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.main-header .titles p,
.main-header .titles .subtitle {
  color: var(--it-color-gray-25) !important;
  font-family: var(--it-font-sans) !important;
  font-size: 8pt !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0.6mm 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
}

/* ─── 3. Hide ────────────────────────────────────────────────────────── */
.brand-footer,
.it-accordion,
.commentary-panel,
.commentary-eyebrow,
.it-card-attachments,
.it-card-related,
.right-stack,
.glossary-panel,
.dsi-tooltip,
.chart-selector,
.it-select-group,
.country-row,
.chart-hint,
.section-label,
.chart-notes,
.rel-table-note,
.debpil-legend {
  display: none !important;
}

.body-grid:has(.commentary-panel) { display: none !important; }
.detail-panel:not(:has(.prev-table)) { display: none !important; }

/* ─── 4. KPI cards (border-top colorato dalla pagina) ────────────────── */
.kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2.5mm !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.kpi-card {
  background: #fff !important;
  background-color: #fff !important;
  border-left: 0.75pt solid var(--it-color-gray-83) !important;
  border-right: 0.75pt solid var(--it-color-gray-83) !important;
  border-bottom: 0.75pt solid var(--it-color-gray-83) !important;
  border-radius: 2pt !important;
  padding: 2.4mm 2.6mm !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.kpi-eyebrow {
  font-size: 8pt !important;
  line-height: 1.2 !important;
  margin: 0 0 1mm !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}
.kpi-fullname,
.kpi-name {
  font-size: 7pt !important;
  line-height: 1.2 !important;
  color: var(--it-color-gray-45) !important;
  margin: 0 !important;
}
.kpi-value {
  font-size: 15pt !important;
  line-height: 1 !important;
  margin: 1.4mm 0 1.4mm !important;
  letter-spacing: -0.02em !important;
  color: var(--it-color-gray-10) !important;
}
.kpi-value-sub { font-size: 8pt !important; }
.kpi-desc {
  font-size: 7pt !important;
  line-height: 1.35 !important;
  color: var(--it-color-gray-25) !important;
  text-wrap: pretty;
}

/* ─── 5. Top-row: 2 grafici, FLEX-FILL della .main ───────────────────── */
/* Wrapper di livello 1 in .main, sia per le pagine col wrapper unclassed
   (PIL/Inflazione/Lavoro/RUE) sia per quelle col container nativo
   (Spesa/Indebitamento/Debito/Saldi). */
.main > div:has(.print-top-row),
.main > div:has(.chart-grid),
.main > div:has(.charts-row),
.main > .print-top-row,
.main > .chart-grid,
.main > .charts-row {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* Il container reale (annidato o no) della top-row riempie il wrapper. */
.print-top-row,
.chart-grid,
.charts-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2.5mm !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Chart panel: si dilata in altezza */
.print-top-row > .chart-panel,
.chart-grid > .chart-panel,
.charts-row > .chart-panel {
  height: 100% !important;
  min-height: 0 !important;
}

/* ─── 6. Bottom-row: altezza variabile per tipologia ─────────────────── */
/* Anche qui catturiamo sia il wrapper-figlio-di-.main (.body-grid /
   unclassed div) sia il caso in cui .print-bottom-row sia figlio diretto.
   has-primary  → tabella + aside (richiede più spazio, soprattutto per
                  Debito/Saldi che hanno 6 righe ciascuna)
   sources-only → solo aside fonti (RUE) → compatta, più spazio ai grafici */
.main > div:has(.print-bottom-row),
.main > .print-bottom-row {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.print-bottom-row.has-primary {
  /* Default: 48mm – sufficiente per tabelle previsionali a 4 righe (PIL,
     Inflazione, Lavoro, Indebitamento). 44mm era troppo tight: l'ultima
     riga (es. OCSE su Indebitamento) finiva tagliata. Override per pagine
     con tabelle a 6 righe (Debito/Saldi) qui sotto. */
  height: 52mm !important;
  max-height: 52mm !important;
  display: grid !important;
  grid-template-columns: 2.6fr 1fr !important;
  gap: 2.5mm !important;
  align-items: stretch !important;
}
/* Override per pagine con tabelle a 6 righe.
   Aumentato a 66mm: 60mm tagliava l'ultima riga (richiesta utente).
   Il gap header→grafico ridotto (vedi .chart-panel-header) ridistribuisce
   spazio al top-row anche se la bottom-row è più grande. */
body[data-page="debito"] .print-bottom-row.has-primary,
body[data-page="saldi"] .print-bottom-row.has-primary {
  height: 66mm !important;
  max-height: 66mm !important;
}
/* Spesa Netta non ha una tabella, ha il pannello compliance con 5 card +
   "Limiti di deviazione": 58mm per evitare il taglio del paragrafo
   "Limiti di deviazione" (richiesta utente). 52mm era troppo piccolo per
   contenere card+padding+footer dopo l'aumento del padding interno
   delle card. */
body[data-page="spesa"] .print-bottom-row.has-primary {
  height: 58mm !important;
  max-height: 58mm !important;
}
.print-bottom-row.sources-only {
  /* RUE: aside fonti+crediti su pagina senza tabella. 42mm per
     contenere il blocco fonti + crediti senza tagliare il bordo
     inferiore del box (richiesta utente). */
  height: 42mm !important;
  max-height: 42mm !important;
  display: block !important;
}
.print-bottom-row {
  width: 100% !important;
}

/* Aside fonti: bordo grigio, sfondo trasparente come gli altri box.
   Padding aumentato (richiesta utente: più aria tra bordo e testo). */
.print-sources-aside {
  background: transparent !important;
  border: 0.75pt solid var(--it-color-gray-83) !important;
  border-radius: 2pt !important;
  padding: 3.2mm 3.6mm !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2.5mm !important;
  font-family: var(--it-font-sans) !important;
  color: var(--it-color-gray-25) !important;
  overflow: hidden !important;
}
.print-sources-aside .psa-section h4 {
  font-family: var(--it-font-sans) !important;
  font-size: 7pt !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--it-color-gray-10) !important;
  /* Gap tra bordo grigio del titolo (border-bottom) e prima riga di testo
     sotto: aumentato per non appiccicare il contenuto al divider (richiesta utente) */
  margin: 0 0 2.5mm !important;
  padding-bottom: 0.8mm !important;
  border-bottom: 0.5pt solid var(--it-color-gray-83) !important;
}
.print-sources-aside .psa-section p {
  font-size: 7.5pt !important;
  line-height: 1.35 !important;
  margin: 0 0 0.8mm !important;
  color: var(--it-color-gray-25) !important;
  font-weight: 400 !important;
}
/* Fonti dati: nome fonte in bold nero, descrizione in grigio regular
   (allineato alla versione online – richiesta utente). */
.print-sources-aside .psa-src-name {
  font-weight: 600 !important;
  color: var(--it-color-gray-10) !important;
}
/* Collegamento ipertestuale alla dicitura della fonte (richiesta utente:
   "INSERISCI IL LINK come collegamento ipertestuale alla dicitura della
   fonte"). In PDF – Stampa → Salva come PDF – gli <a href> restano
   cliccabili e i link delle fonti puntano agli stessi URL dell'online.
   Font Regular (500) e underline sottile (stesso "peso" del testo,
   richiesta utente: from-font segue lo spessore del glifo). */
.print-sources-aside .psa-src-link {
  font-weight: 500 !important;
  color: var(--it-color-blue-20) !important;
  /* Underline default del browser (come un normale hyperlink): nessuna
     definizione esplicita di thickness → 1 device-pixel, vicino al testo.
     Per ridurre il "peso visivo" abbassiamo la SATURAZIONE della linea
     via text-decoration-color a 50% opacity dell'azzurro: questo è il
     trucco standard per ottenere un sottolineato apparentemente più
     fine dove il browser non scende sotto 1px. */
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--it-color-blue-20) 45%, transparent) !important;
  text-underline-offset: 1.5px !important;
  text-decoration-skip-ink: auto !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  background-image: none !important;
}
/* Fonti inline separate da " • " (richiesta utente). Interlinea
   abbondante fra le righe per leggibilità. */
.print-sources-aside .psa-src-list {
  font-size: 7pt !important;
  line-height: 2.3 !important;
  margin: 0 !important;
  color: var(--it-color-gray-25) !important;
  font-weight: 500 !important;
}
.print-sources-aside .psa-src-sep {
  color: var(--it-color-gray-45) !important;
  font-weight: 400 !important;
  /* Bullet non sottolineato e con respiro fra le voci. */
  margin: 0 1pt !important;
}
/* Heading "CREDITI" rimosso (richiesta utente: togliere OVUNQUE l'occhiello
   "Crediti" e la linea grigia sotto). Il blocco crediti resta visibile,
   solo senza titolo e divider. */
.print-sources-aside .psa-credits h4 {
  display: none !important;
}
/* Crediti + "Aggiornato a maggio 2026" sempre ancorati al FONDO
   dell'aside, indipendentemente dal numero di righe di fonti sopra
   (richiesta utente: "allineato in basso e NON in alto subito sotto
   la fonte"). Funziona perché .print-sources-aside è già flex-column. */
.print-sources-aside .psa-credits {
  margin-top: auto !important;
}
.print-sources-aside .psa-credits p {
  font-size: 6.8pt !important;
  color: var(--it-color-gray-45) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.5mm !important;
}
/* "Aggiornato a maggio 2026" è l'ultimo paragrafo: gap minimo prima
   per non lasciare la riga incollata sotto al © (richiesta utente). */
.print-sources-aside .psa-credits p:last-child {
  margin-top: 0.6mm !important;
  margin-bottom: 0 !important;
}

/* ─── 7. Chart panels ────────────────────────────────────────────────── */
/* Stile uniforme: bordo grigio sottile + sfondo trasparente. Solo i
   panel previsionali (.prev-panel) e l'aside fonti hanno il fill grigio. */
.chart-panel,
.debpil-panel,
.rel-panel,
.compliance-panel,
.detail-panel {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 0.75pt solid var(--it-color-gray-83) !important;
  border-right: 0.75pt solid var(--it-color-gray-83) !important;
  border-bottom: 0.75pt solid var(--it-color-gray-83) !important;
  border-left: 0.75pt solid var(--it-color-gray-83) !important;
  border-radius: 2pt !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* Panel previsionali: sfondo trasparente (richiesta esplicita) – il bordo
   grigio sottile è sufficiente per delimitare il box. */
.prev-panel {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 0.75pt solid var(--it-color-gray-83) !important;
  border-right: 0.75pt solid var(--it-color-gray-83) !important;
  border-bottom: 0.75pt solid var(--it-color-gray-83) !important;
  border-left: 0.75pt solid var(--it-color-gray-83) !important;
  border-radius: 2pt !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

.chart-panel-header,
.debpil-header,
.detail-header,
.compliance-header {
  background: transparent !important;
  /* Padding-bottom ridotto a 0.4mm: gap header→grafico minimo (richiesta
     utente: "gap max 15px, grafici più alti in proporzione"). */
  padding: 2mm 2.5mm 0.4mm !important;
  /* Bordo header rimosso del tutto in stampa (richiesta utente: nessuna
     linea sotto al sottotitolo, né verde né grigia). Recupera spazio
     verticale ai grafici sottostanti. */
  border-bottom: 0 !important;
  /* Stacking context isolato → il border-bottom resta SOPRA i background
     delle celle .proj sottostanti (che usano mix-blend-mode: multiply e
     altrimenti dipingerebbero "sopra" la linea verde, richiesta utente:
     "DEVE andare sotto"). */
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  flex-direction: column !important;
  align-items: stretch !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.chart-title,
.debpil-header-text,
.detail-header-text,
.compliance-header-text {
  font-family: var(--it-font-sans) !important;
  font-size: 9pt !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--it-color-gray-10) !important;
  margin: 0 0 0.6mm !important;
  flex: none !important;
  text-wrap: pretty;
}

.chart-subtitle,
.debpil-header-sub,
.detail-header-sub {
  font-family: var(--it-font-sans) !important;
  font-size: 7pt !important;
  line-height: 1.3 !important;
  color: var(--it-color-gray-45) !important;
  margin: 0 0 1mm !important;
  font-weight: 400 !important;
}

.chart-legend-row {
  /* Più aria fra sottotitolo e legenda (richiesta utente) */
  margin-top: 2.5mm !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  gap: 1.2mm 3mm !important;
}
.legend-item,
.it-chart-legend li {
  /* Legenda alzata a 8pt (richiesta utente, 7pt era troppo piccolo). */
  font-size: 8pt !important;
  gap: 4px !important;
  font-weight: 600 !important;
}
.legend-swatch,
.it-chart-legend .swatch { width: 8px !important; height: 8px !important; }
/* Legend line in print: rimossa l'altezza 0 + border-top trick (renderizzava
   in alto rispetto al testo). Elemento di altezza 2px, centrato sul testo
   via flex (richiesta utente). `top: 1px` compensa il leggero scarto tra
   centro del flex-box (basato su line-height) e centro visivo del glifo. */
.legend-line {
  width: 14px !important;
  /* Spessore allineato alla linea del grafico (~1.5px stroke). Era 2px,
     appariva più spesso (richiesta utente). */
  height: 1.5px !important;
  border: 0 !important;
  position: relative !important;
  top: 1px !important;
}
/* Saldi/Debito/altre pagine: `.legend-line.solid` e `.legend-line.dashed`
   a schermo usano `border-top: 3px solid/dashed currentColor` su un
   elemento alto 0. In stampa lo neutralizziamo sopra (border:0) e
   ricreiamo il tratto via background, così `currentColor` (impostato
   dalle classi modificatori come .debTotLine / .indNomin / ecc.)
   continua a colorare la linea. */
.legend-line.solid {
  background: currentColor !important;
}
.legend-line.dashed {
  background: none !important;
  background-image: linear-gradient(90deg, currentColor 60%, transparent 60%) !important;
  background-size: 5px 100% !important;
  background-repeat: repeat-x !important;
}

.chart-body,
.detail-body,
.compliance-body {
  /* 10px L/R = il gap richiesto fra i bordi del SVG/contenuto e il bordo
     del box (panel). Era 4mm (~15px), ridotto a 10px per uniformare tutte
     le pagine (PIL incluso) al gap chiesto dal designer. padding-top
     ridotto a 0.4mm per minimizzare il gap header→grafico (richiesta
     utente). */
  padding: 0.4mm 10px 1.6mm !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ─── 8. Chart SVG (stretch + counter-transform da JS) ───────────────── */
.chart-host {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: block !important;
  position: relative !important;
  background: transparent !important;
}
.chart-host svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  background: transparent !important;
}

/* ─── 9. Testi nei grafici: dimensione gestita inline dai render ──────── */
/* Niente font-size globale: il render setta la dimensione precisa per
   testo (axis labels, bar values, country labels, etc.) tramite inline style. */
.dsi-chart .axis-tick-text,
.dsi-chart text.axis-tick-text,
.chart-host svg text.axis-tick-text,
.chart-host svg .it-axis-label {
  font-size: 9px !important;
  font-weight: 500 !important;
}
.dsi-chart .bar-pct-label,
.chart-host svg .bar-pct-label,
.chart-host svg .bar-value-label {
  /* font-size impostato inline dal render: niente !important qui */
  font-weight: 600 !important;
}
.dsi-chart .line { stroke-width: 1.8 !important; }
.dsi-chart .point { stroke-width: 1.2 !important; r: 2.5 !important; }
.dsi-chart .axis-zero-line { stroke-width: 1 !important; }

/* Point label (etichetta valore sopra/sotto i punti delle line chart) */
.dsi-chart .point-label {
  font-size: 7pt !important;
  font-weight: 600 !important;
}

/* ─── 10. Tabelle previsionali
   Righe più alte per riempire il bottom-row (richiesta utente). Master height
   ≈ 5.5mm per riga (1.8mm padding × 2 + line-height) – applicato a TUTTE le
   tabelle previsionali su tutte le pagine per uniformità. */
.debpil-table thead th,
.prev-table thead th,
.rel-table thead th {
  background: transparent !important;
  color: var(--it-color-gray-45) !important;
  font-family: var(--it-font-sans) !important;
  font-size: 7pt !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: 1.6mm 1.4mm !important;
  border-bottom: 0.5pt solid var(--it-color-gray-83) !important;
}
.debpil-table tbody td,
.prev-table tbody td,
.rel-table tbody td {
  padding: 1.8mm 1.4mm !important;
  border-bottom: 0.4pt solid var(--it-color-gray-90) !important;
  font-size: 8pt !important;
  line-height: 1.25 !important;
  color: var(--it-color-gray-15) !important;
}
.prev-table tbody tr:last-child td { border-bottom: 0 !important; }
/* Debito + Saldi: rimossa border-bottom dall'ultima riga della rel-table
   per evitare il "doppio bordo" col bordo inferiore del box (richiesta
   utente: "TOGLIERE la riga grigia sotto l'ultima riga della tabella"). */
.rel-table tbody tr:last-child td { border-bottom: 0 !important; }
.prev-table tbody td.val {
  font-size: 9pt !important;
  line-height: 1 !important;
  text-align: center !important;
  font-family: var(--it-font-serif) !important;
  font-weight: 600 !important;
}
.debpil-table tbody td.val-pil { color: var(--it-color-gray-10) !important; }
.debpil-table tbody tr.proj td {
  background: color-mix(in srgb, var(--it-color-gray-32) 6%, #fff) !important;
  /* Reset mix-blend-mode per non dipingere "sopra" il bordo verde del
     .chart-panel-header (richiesta utente). */
  mix-blend-mode: normal !important;
}
.rel-table thead th.proj,
.rel-table tbody td.proj {
  background: color-mix(in srgb, var(--it-color-gray-32) 6%, #fff) !important;
  /* Reset mix-blend-mode: con `multiply` il grey delle celle .proj
     dipingeva "sopra" il bordo verde del .chart-panel-header (richiesta
     utente: il fondino grigio DEVE andare sotto al bordo verde). */
  mix-blend-mode: normal !important;
}
.rel-table-wrap.has-scroll-right::after { display: none !important; }
.rel-table-wrap { overflow: visible !important; }

.compliance-body {
  font-size: 7.5pt !important;
  line-height: 1.3 !important;
}
.compliance-body p { margin: 0 0 0.5mm !important; }

/* ─── 11. Per-pagina: hide secondari ─────────────────────────────────── */
body[data-page="inflazione"] .monthly-chart-panel,
body[data-page="inflazione"] #monthlyHost,
body[data-page="inflazione"] .ipca-ext-note { display: none !important; }

body[data-page="saldi"] #chartOgHost,
body[data-page="saldi"] #chartOgHost ~ .chart-notes { display: none !important; }

/* Spesa Netta: compliance-panel compatta */
body[data-page="spesa"] .compliance-panel { overflow: hidden !important; }
body[data-page="spesa"] .compliance-body {
  /* Padding-bottom 2.5mm → il paragrafo "Limiti di deviazione" non
     finisce attaccato al bordo del box (richiesta utente). */
  padding: 1.6mm 2mm 2.5mm !important;
  gap: 1.4mm !important;
}
body[data-page="spesa"] .cc-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  /* Row-gap ridotto a 1.5mm tra le 5 card e il footer "Limiti di deviazione"
     (richiesta utente: "ridurre il gap di poco"). */
  gap: 1.5mm 1.2mm !important;
}
body[data-page="spesa"] .cc-card {
  /* Padding aumentato (1mm → 1.6mm verticali) per evitare che il testo
     sia appiccicato ai bordi inferiori delle card (richiesta utente). */
  padding: 1.6mm 1.4mm !important;
  gap: 0.3mm !important;
  min-height: 0 !important;
  background: #fff !important;
  border-width: 1pt !important;
  border-style: solid !important;
  border-radius: 1.5pt !important;
}
body[data-page="spesa"] .cc-year {
  font-size: 7pt !important;
  font-weight: 600 !important;
  padding-bottom: 0.8mm !important;
  /* Gap aumentato fra il bordino sotto l'anno e il valore (richiesta utente) */
  margin-bottom: 1.6mm !important;
  letter-spacing: 0.04em !important;
  border-bottom-width: 0.4pt !important;
}
body[data-page="spesa"] .cc-value {
  font-size: 13pt !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin: 0.2mm 0 0.4mm !important;
}
body[data-page="spesa"] .cc-note {
  /* Aumentato da 6pt → 7pt per leggibilità (richiesta utente) */
  font-size: 7pt !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
body[data-page="spesa"] .cc-footer-card {
  grid-column: 1 / -1 !important;
  /* Niente box grigio attorno: testo su sfondo bianco (richiesta utente) */
  padding: 2mm 0 0 !important;
  font-size: 7.5pt !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body[data-page="spesa"] .cc-footer-label {
  /* Etichetta "LIMITI DI DEVIAZIONE" – restano i caratteri uppercase con
     bordino sotto, tipo titolo di sezione */
  font-size: 7pt !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--it-color-gray-10) !important;
  margin-bottom: 1.2mm !important;
  padding-bottom: 0.8mm !important;
  /* Bordo header secondario rimosso (richiesta utente). */
  border-bottom: 0 !important;
}

/* Saldi strutturali: legenda compatta su singola linea (override del grid 2-rows) */
body[data-page="saldi"] .chart-legend-row.legend-2rows {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: 1mm 2mm !important;
}
/* Saldi strutturali: "Nominale" / "Strutturale" (legend-group-label) hanno
   un font-size con clamp() in screen che in print renderizza più grande
   delle voci .legend-item a fianco. Forziamo allo stesso 8pt per
   uniformare la dimensione (richiesta utente). */
body[data-page="saldi"] .chart-legend-row .legend-group-label {
  font-size: 8pt !important;
}
/* Font-size legenda allineato a Debito pubblico (8pt default) – richiesta
   utente: ora era 6pt, troppo piccolo rispetto a Debito. */
body[data-page="saldi"] .chart-legend-row .legend-line {
  width: 14px !important;
}

/* Debito pubblico + Saldi strutturali: gap ridotto tra sottotitolo e
   legenda per recuperare altezza al grafico (richiesta utente: grafici
   "troppo bassi"). */
/* Debito + Saldi + Indebitamento: gap ridotto tra sottotitolo e legenda
   per recuperare altezza al grafico (richiesta utente: grafici
   "troppo bassi"). */
body[data-page="debito"] .chart-panel-header .chart-legend-row,
body[data-page="saldi"] .chart-panel-header .chart-legend-row,
body[data-page="indebitamento"] .chart-panel-header .chart-legend-row {
  margin-top: 1mm !important;
}

/* Debito + Saldi: tabella allineata al margine inferiore del box (richiesta
   utente). `.rel-panel` è già flex-column; margin-top:auto sul wrapper
   tabella la spinge a flex-end. */
body[data-page="debito"] .rel-panel .rel-table-wrap,
body[data-page="saldi"] .rel-panel .rel-table-wrap {
  margin-top: auto !important;
}

/* Debito pubblico: i .point-label e .bar-pct-label apparivano più grandi
   rispetto a Saldi strutturali nonostante stesso inline `font-size: 11px`,
   probabilmente per via di un diverso fattore di counter-transform legato
   alle proporzioni hostRect del chart-host. Forziamo lo stesso "effetto
   visivo" abbassando il font a 9px in stampa (richiesta utente:
   "ESATTAMENTE COME le label dei valori di Saldi strutturali"). */
body[data-page="debito"] .dsi-chart .point-label,
body[data-page="debito"] .dsi-chart .bar-pct-label {
  font-size: 9px !important;
}

/* Spesa Netta: ".legend-meta" (es. "(PSB · ottobre 2024)") rendeva più
   grande del testo a fianco perché il suo clamp() in screen non era
   coperto dalla regola .legend-item che imposta 8pt. Uniformiamo. */
body[data-page="spesa"] .legend-item .legend-meta {
  font-size: 8pt !important;
  font-weight: 400 !important;
}

/* Spesa Netta: "Limiti di deviazione" footer card — testo centrato e
   larghezza ridotta per ottenere ~3 righe bilanciate (richiesta utente:
   evitare la riga finale con sole 2 parole). */
body[data-page="spesa"] .cc-footer-card {
  text-align: center !important;
  padding-left: 2mm !important;
  padding-right: 2mm !important;
}
body[data-page="spesa"] .cc-footer-card > div:last-child {
  max-width: 78% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body[data-page="index"] .brand-footer { display: none !important; }

/* ─── 12. RUE: legenda allineata a destra sulla stessa riga del sottotitolo ──
   Richiesta utente: per recuperare spazio verticale al chart e non far
   troncare le label degli indicatori sotto le barre, la legenda passa da
   "blocco sotto il sottotitolo" a "elemento in linea allineato a destra". */
body[data-page="rue"] .chart-panel-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 4mm !important;
}
body[data-page="rue"] .chart-panel-header > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body[data-page="rue"] .chart-panel-header .chart-legend-row {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-self: flex-end !important;
}

/* PIL: la legenda del growth chart torna alla posizione "sotto al
   sottotitolo, allineata a sinistra" (richiesta utente: identica a Saldi
   strutturali). Rimosso il flex-row precedente. */
body[data-page="inflazione"] .chart-panel:has(#mainHost) .chart-panel-header,
body[data-page="indebitamento"] .chart-panel:has(#mainHost) .chart-panel-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 4mm !important;
}
body[data-page="inflazione"] .chart-panel:has(#mainHost) .chart-panel-header > div:first-child,
body[data-page="indebitamento"] .chart-panel:has(#mainHost) .chart-panel-header > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Spesa Netta – Confronto traiettorie: la legenda viene spostata da
   print.js dentro al chart-panel-header (era nel chart-body). Posizione
   IDENTICA a Saldi strutturali: SOTTO al sottotitolo, allineata a
   sinistra (richiesta utente). Margine minimo dal sottotitolo. */
body[data-page="spesa"] .chart-panel:has(#tendenzialeHost) .chart-panel-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* Il `gap: 16px` di screen su .chart-panel-header creava ~16px di spazio
     fra blocco title/subtitle e legend in flex-column. Azzerato in print
     (richiesta utente: legenda vicina al sottotitolo, non al grafico). */
  gap: 0 !important;
}
body[data-page="spesa"] .chart-panel:has(#tendenzialeHost) .chart-panel-header > div:first-child {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
body[data-page="spesa"] .chart-panel:has(#tendenzialeHost) .chart-panel-header .chart-legend-row {
  flex: 0 0 auto !important;
  margin: 1mm 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  align-self: flex-start !important;
}
body[data-page="inflazione"] .chart-panel:has(#mainHost) .chart-legend-row {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-self: flex-end !important;
  /* Sovrascrive display:none di screen (.print-only-legend) per
     mostrare la legenda esterna SOLO in print. */
  display: flex !important;
}
body[data-page="pil"] .chart-panel:has(#growthHost) .chart-legend-row {
  /* Legenda sotto al sottotitolo, allineata a sinistra (richiesta utente:
     identica a Saldi strutturali). Gap minimo dal sottotitolo. */
  flex: 0 0 auto !important;
  margin-top: 1mm !important;
  align-self: flex-start !important;
}
body[data-page="indebitamento"] .chart-panel:has(#mainHost) .chart-legend-row {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-self: flex-end !important;
}