/* ==========================================================================
   Osservatorio del mercato — i mattoni dei grafici
   --------------------------------------------------------------------------
   Sta in un file suo, caricato solo dalle pagine /osservatorio con
   @section Styles, per due motivi: i grafici non servono al resto del sito, e
   una griglia di barre fatta con le utility di Tailwind diventa una riga di
   quaranta classi in cui nessuno trova piu' la spaziatura da correggere.

   Le quattro regole a cui obbedisce tutto quello che c'e' qui dentro:
   1. I numeri sono sempre a cifre di larghezza fissa (font-variant-numeric:
      tabular-nums), altrimenti incolonnati non si leggono.
   2. Una barra e' sempre cliccabile se il dato che rappresenta ha una pagina:
      il grafico e' una porta, non un quadro.
   3. Il colore non e' decorazione, e' significato: blu "quanti sono", ambra
      "attenzione", verde "e' andata bene", rosso "deserta", grigio "sospesa".
      Ma ogni riquadro porta la SUA tinta anche nello sfondo, non solo in una
      riga di bordo: una pagina di riquadri bianchi con dentro solo testo non
      si legge, si subisce (revisione del 2026-09-18).
   4. Le barre di uno stesso grafico condividono la stessa colonna, larga
      uguale per tutte le righe: e' l'unico modo perche' 710 sia visibilmente
      un quarto di 2.559. Con le colonne calcolate riga per riga il nome piu'
      lungo restringeva la sua pista e falsava le proporzioni.
   Vedi CLAUDE.md > Convenzioni di layout.
   ========================================================================== */

.oss-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Le cinque tinte, definite una volta sola: chi aggiunge un riquadro sceglie
   un modificatore, non un codice colore scritto a mano nella view. */
:root {
  --oss-blu-chiaro: #eff6ff;
  --oss-blu-bordo: #bfdbfe;
  --oss-blu-forte: #1d4ed8;

  --oss-ambra-chiaro: #fff7ed;
  --oss-ambra-bordo: #fed7aa;
  --oss-ambra-forte: #b45309;

  --oss-verde-chiaro: #ecfdf5;
  --oss-verde-bordo: #a7f3d0;
  --oss-verde-forte: #047857;

  --oss-rosso-chiaro: #fff1f2;
  --oss-rosso-bordo: #fecdd3;
  --oss-rosso-forte: #be123c;

  --oss-neutro-chiaro: #f8fafc;
  --oss-neutro-bordo: #e2e8f0;
  --oss-neutro-forte: #475569;
}

/* --------------------------------------------------------------- Le schede */

.oss-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0.85rem;
}

/* Le sei schede che aprono l'Osservatorio stanno su tre per riga e non su sei: a sei
   per riga la colonna e' larga 190px e "96.000 EUR" va a capo fra il numero e la
   valuta, che e' il modo piu' rapido per far sembrare rotto un numero giusto. */
.oss-kpi--principale {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.oss-kpi-card {
  background: linear-gradient(135deg, var(--oss-blu-chiaro) 0%, #ffffff 78%);
  border: 1px solid var(--oss-blu-bordo);
  border-radius: 1rem;
  padding: 1.15rem 1.25rem 1.15rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -14px rgba(15, 23, 42, 0.35);
}

.oss-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #3b82f6, #1e40af);
}

.oss-kpi-card--ambra {
  background: linear-gradient(135deg, var(--oss-ambra-chiaro) 0%, #ffffff 78%);
  border-color: var(--oss-ambra-bordo);
}
.oss-kpi-card--ambra::before { background: linear-gradient(180deg, #fb923c, #c2410c); }

.oss-kpi-card--verde {
  background: linear-gradient(135deg, var(--oss-verde-chiaro) 0%, #ffffff 78%);
  border-color: var(--oss-verde-bordo);
}
.oss-kpi-card--verde::before { background: linear-gradient(180deg, #34d399, #047857); }

.oss-kpi-card--rosso {
  background: linear-gradient(135deg, var(--oss-rosso-chiaro) 0%, #ffffff 78%);
  border-color: var(--oss-rosso-bordo);
}
.oss-kpi-card--rosso::before { background: linear-gradient(180deg, #fb7185, #be123c); }

.oss-kpi-card--neutro {
  background: linear-gradient(135deg, var(--oss-neutro-chiaro) 0%, #ffffff 78%);
  border-color: var(--oss-neutro-bordo);
}
.oss-kpi-card--neutro::before { background: linear-gradient(180deg, #cbd5e1, #64748b); }

.oss-kpi-valore {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.oss-kpi-etichetta {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #334155;
  font-weight: 600;
}

.oss-kpi-nota {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #64748b;
}

/* La nota in maiuscoletto delle schede piccole: resta quella di prima, ma solo
   dove il testo e' corto (una riga), altrimenti il maiuscoletto si legge male. */
.oss-kpi-nota--targhetta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #94a3b8;
}

/* ------------------------------------------------- Il contenitore grafico */

.oss-pannello {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -22px rgba(15, 23, 42, 0.45);
}

/* Il pannello prende la tinta del dato che contiene: la testata colorata e un
   velo dello stesso colore sul fondo. Serve a distinguere due pannelli
   affiancati senza leggerne il titolo, e a togliere il bianco totale. */
.oss-pannello--blu,
.oss-pannello--ambra,
.oss-pannello--verde,
.oss-pannello--rosso {
  border-top-width: 4px;
  border-top-style: solid;
}

.oss-pannello--blu {
  border-top-color: #3b82f6;
  background: linear-gradient(180deg, var(--oss-blu-chiaro) 0%, #ffffff 30%);
}
.oss-pannello--ambra {
  border-top-color: #fb923c;
  background: linear-gradient(180deg, var(--oss-ambra-chiaro) 0%, #ffffff 30%);
}
.oss-pannello--verde {
  border-top-color: #34d399;
  background: linear-gradient(180deg, var(--oss-verde-chiaro) 0%, #ffffff 30%);
}
.oss-pannello--rosso {
  border-top-color: #fb7185;
  background: linear-gradient(180deg, var(--oss-rosso-chiaro) 0%, #ffffff 30%);
}

@media (min-width: 640px) {
  .oss-pannello { padding: 1.75rem 2rem; }
}

.oss-pannello-titolo {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.25rem;
}

.oss-pannello-sotto {
  font-size: 0.8125rem;
  color: #475569;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* La nota in fondo al pannello: margin-top auto la incolla in basso, cosi' due pannelli
   affiancati di altezza diversa hanno comunque il piede allineato. Lo sfondo la stacca
   dal grafico invece di lasciarla galleggiare in mezzo al bianco. */
.oss-pannello-piede {
  font-size: 0.75rem;
  line-height: 1.55;
  color: #475569;
  margin: 1.25rem -0.5rem 0;
  padding: 0.8rem 0.9rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 0.75rem;
  margin-top: auto;
}

/* ----------------------------------------------------- Barre orizzontali */

.oss-barre {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Le tre colonne sono FISSE, non calcolate sul contenuto della riga: e' questo
   che rende confrontabili le piste. Vedi la regola 4 in testa al file. */
.oss-barra {
  display: grid;
  grid-template-columns: 10.5rem 1fr 6.25rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.42rem 0.5rem;
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease, transform 120ms ease;
}

.oss-barra:nth-child(even) { background: #f8fafc; }

/* Lo sfondo dell'hover NON puo' essere lo stesso della pista vuota, altrimenti
   la pista sparisce e la barra perde il suo metro di paragone. */
a.oss-barra:hover { background: var(--oss-blu-chiaro); }
a.oss-barra:hover .oss-barra-nome { color: var(--oss-blu-forte); }
a.oss-barra:hover .oss-barra-riempimento { filter: saturate(1.25) brightness(1.06); }
.oss-barra--ambra:hover { background: var(--oss-ambra-chiaro) !important; }

.oss-barra-nome {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oss-barra-traccia {
  height: 1.05rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

.oss-barra-riempimento {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(29, 78, 216, 0.35);
  min-width: 4px;
  transition: filter 120ms ease;
}

/* La voce piu' alta del grafico e' anche la piu' scura: e' il riferimento a cui
   tutte le altre sono in scala. */
.oss-barra--primo .oss-barra-riempimento {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 55%, #1e3a8a 100%);
}

.oss-barra--ambra .oss-barra-riempimento {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(217, 119, 6, 0.35);
}
.oss-barra--ambra.oss-barra--primo .oss-barra-riempimento {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
}

.oss-barra-cifre {
  text-align: right;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oss-barra-valore { font-weight: 800; color: #0f172a; }
.oss-barra-nota { display: block; font-size: 0.6875rem; color: #64748b; }

@media (max-width: 767px) {
  .oss-barra { grid-template-columns: 8rem 1fr 4.75rem; gap: 0.6rem; }
}

@media (max-width: 519px) {
  .oss-barra { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .oss-barra-nome { grid-column: 1; }
  .oss-barra-cifre { grid-column: 2; }
  .oss-barra-traccia { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ Colonne verticali */

.oss-colonne { width: 100%; height: auto; display: block; }
.oss-colonne .oss-griglia { stroke: #e2e8f0; stroke-width: 1; }
.oss-colonne .oss-colonna { transition: opacity 120ms ease; }
.oss-colonne a:hover .oss-colonna { opacity: 0.82; }
.oss-colonne .oss-etichetta { fill: #475569; font-size: 12px; font-weight: 600; }
.oss-colonne .oss-cifra { fill: #0f172a; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Ciambella */

.oss-ciambella-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.oss-ciambella { width: 210px; height: 210px; flex: none; }
.oss-ciambella-centro-valore { fill: #0f172a; font-size: 30px; font-weight: 900; text-anchor: middle; }
.oss-ciambella-centro-nota { fill: #64748b; font-size: 11px; font-weight: 600; text-anchor: middle; }

.oss-legenda { display: flex; flex-direction: column; gap: 0.5rem; min-width: 12rem; flex: 1 1 14rem; }

.oss-legenda-voce {
  display: grid;
  grid-template-columns: 0.75rem 1fr auto;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.875rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.6rem;
  background: #f8fafc;
}

.oss-legenda-pallino { width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; align-self: center; }
.oss-legenda-nome { color: #334155; font-weight: 600; }
.oss-legenda-cifra { font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- La tabella  */

.oss-tabella { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.oss-tabella th {
  text-align: left;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 800;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.oss-tabella th:first-child { border-radius: 0.5rem 0 0 0; }
.oss-tabella th:last-child { border-radius: 0 0.5rem 0 0; }
.oss-tabella td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
.oss-tabella tbody tr:nth-child(even) { background: #f8fafc; }
.oss-tabella tr:last-child td { border-bottom: 0; }
.oss-tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oss-tabella tbody tr:hover { background: var(--oss-blu-chiaro); }
.oss-tabella a { color: #0f172a; font-weight: 700; text-decoration: none; }
.oss-tabella a:hover { color: var(--oss-blu-forte); text-decoration: underline; }

/* Barra sottile dentro una cella di tabella: la quota sul totale letta a colpo d'occhio
   senza aggiungere una colonna di percentuali che nessuno confronta a mente. */
.oss-quota { display: flex; align-items: center; gap: 0.5rem; }
.oss-quota-traccia {
  flex: 1;
  height: 0.5rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  min-width: 3rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}
.oss-quota-riempimento {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.oss-quota-cifra { font-size: 0.75rem; color: #475569; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; font-weight: 700; }

/* ------------------------------------------- La striscia delle tre pagine */

.oss-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.85rem; }

.oss-nav-voce {
  display: block;
  padding: 0.95rem 1.15rem;
  border-radius: 0.9rem;
  border: 1px solid var(--oss-neutro-bordo);
  background: #fff;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.oss-nav-voce:hover {
  border-color: var(--oss-blu-bordo);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.6);
  transform: translateY(-1px);
}
.oss-nav-voce--attiva {
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
  border-color: #1e3a8a;
  box-shadow: 0 10px 24px -16px rgba(30, 64, 175, 0.9);
}

.oss-nav-titolo { font-size: 0.9375rem; font-weight: 800; color: #0f172a; margin: 0 0 0.15rem; }
.oss-nav-sotto { font-size: 0.75rem; color: #64748b; margin: 0; line-height: 1.45; }
.oss-nav-voce--attiva .oss-nav-titolo { color: #fff; }
.oss-nav-voce--attiva .oss-nav-sotto { color: #bfdbfe; }

/* -------------------------------------------------------------- Stampa  */

@media print {
  .oss-pannello { border-color: #cbd5e1; break-inside: avoid; box-shadow: none; }
  .oss-kpi-card { break-inside: avoid; box-shadow: none; }
  .oss-nav { display: none; }
}