/* Override Bootstrap e pattern propri (docs/FRONTEND.md).
   Il grosso dello stile viene da bootstrap-5.3.8.min.css self-hosted. */

/* Badge: pill piccole con sfondo tenue (meglio dei text-bg-* pieni
   accanto al nome dell'offerta). La forma base resta .badge di Bootstrap. */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
}
.badge-variabile {
  background: #fff3cd;
  color: #6b5200;
}
.badge-proxy {
  background: #e9ecef;
  color: #495057;
}
.badge-solo {
  background: #e7f1ff;
  color: #084298;
}
/* Legenda badge a fondo tabella. */
.legenda {
  line-height: 1.9;
}
.legenda .badge {
  vertical-align: baseline;
}

/* Dettaglio "Componenti": solo una freccia, niente scritta; il pannello
   aperto è una griglia di voci etichetta/valore. Nella tabella JS il
   pannello è una riga extra a tutta larghezza sotto la riga offerta;
   nel fallback no-JS (details) resta nella cella ma leggibile. */
.btn-dettaglio,
summary.freccia-dettaglio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: .375rem;
  background: none;
  color: var(--bs-secondary-color);
}
summary.freccia-dettaglio {
  list-style: none;
}
summary.freccia-dettaglio::-webkit-details-marker {
  display: none;
}
.btn-dettaglio:hover,
.btn-dettaglio:focus-visible,
summary.freccia-dettaglio:hover,
summary.freccia-dettaglio:focus-visible {
  color: var(--bs-link-color);
  background: rgba(var(--bs-emphasis-color-rgb), .075);
}
.btn-dettaglio svg,
summary.freccia-dettaglio svg {
  transition: transform .15s ease;
}
.btn-dettaglio[aria-expanded="true"] svg,
details.dettaglio[open] summary.freccia-dettaglio svg {
  transform: rotate(90deg);
}

/* Scontrino componenti: una colonna, cifre tabellari senza €. Vive nella
   cella della colonna Costo della riga espansa: margin-left auto ne porta
   il bordo destro (e quindi le cifre) sotto il costo annuo della riga.
   L'unità (€/anno) è dichiarata nell'intestazione della colonna. */
.scontrino {
  width: 13rem;
  max-width: 100%;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
}
.pc-voce {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .22rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.pc-voce:first-child {
  border-top: 1px solid var(--bs-border-color);
}
.pc-voce > span:last-child {
  font-weight: 500;
}
.pc-totale {
  font-weight: 600;
}
.pc-annuo {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .4rem 0 .1rem;
  font-weight: 700;
  border-top: 3px double var(--bs-border-color);
}

/* Riga espansa (sotto la riga offerta, che non si muove): celle senza
   bordi interni e sfondo tenue, così l'area è continua; le celle vuote
   rispecchiano le colonne e restano spazio per info future. */
tr.riga-dettaglio > td {
  background: var(--bs-tertiary-bg);
  border: 0;
  box-shadow: none;
}

/* Riga espandibile: si clicca ovunque sulla riga (i link restano link). */
tr.riga-espandibile {
  cursor: pointer;
}