/* =========================================================================
   leggibilita.css — override globale di accessibilita' / leggibilita'
   Caricato PER ULTIMO in include.php: vince su bootstrap.css, style.css,
   color-1.css e responsive.css senza modificarli.

   Obiettivi (richiesta cliente 2026-08):
   - font base piu' grande (14px -> 16px)
   - via i grigi troppo chiari (contrasto AA su tutti i testi)
   - meno spazio bianco, cosi' la pagina NON si allunga nonostante il font +14%
   ========================================================================= */

:root {
  --lg-font-base:      16px;   /* era 14px  */
  --lg-font-small:     13.5px; /* note, hint, didascalie */
  --lg-font-table:     15px;   /* tabelle dati dense */
  --lg-text:           #242934; /* testo primario (invariato) */
  --lg-text-soft:      #4d5562; /* ex .text-muted #6c757d -> 7.0:1 su bianco */
  --lg-pad-card:       18px;   /* era 30px */
  --lg-gap-card:       18px;   /* era 30px */
}

/* ---------- 1. Scala tipografica di base ---------- */

body {
  font-size: var(--lg-font-base);
  color: var(--lg-text);
}

/* Il tema comprime tutto con letter-spacing: 0.5px sulle card.
   A 16px non serve piu' e ruba larghezza utile. */
.card { letter-spacing: normal; }

/* ---------- 2. Testi secondari: piu' grandi e piu' scuri ----------
   Sono le "indicazioni sotto i riquadri" segnalate dal cliente. */

small, .small,
.form-text,
.f-12, .f-14,
.help-block {
  font-size: var(--lg-font-small) !important;
  line-height: 1.5;
}

.text-muted,
.form-text,
.text-secondary,
.light-font {
  color: var(--lg-text-soft) !important;
}

/* Sottotitolo della card-header: era 12px, 70% di opacita', letter-spacing 1px */
.card .card-header > span {
  font-size: var(--lg-font-small);
  color: var(--lg-text-soft);
  letter-spacing: normal;
  line-height: 1.5;
  margin-top: 6px;
}

/* Placeholder e testo disabilitato: erano quasi invisibili */
.form-control::placeholder,
.form-select::placeholder { color: #6b7280; opacity: 1; }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { color: #3f4654; -webkit-text-fill-color: #3f4654; opacity: 1; }

/* ---------- 3. Form: campi e label leggibili ---------- */

.form-label,
.col-form-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--lg-text);
  margin-bottom: 0.35rem;
}

/* Il tema lascia .form-label inline: quando sopra c'e' una nota, label e nota
   finiscono appiccicate sulla stessa riga. La label di un campo va a capo. */
.form-label { display: block; }
.form-check .form-label,
.form-check-label { display: inline-block; }

.form-control,
.form-select,
.input-group-text {
  font-size: 15px;
  color: var(--lg-text);
}

.form-check-label { font-size: 15px; }

/* ---------- 4. Tabelle dati: leggibili ma ancora dense ---------- */

.table,
.table td,
.table th,
table.dataTable,
table.dataTable td,
table.dataTable th {
  font-size: var(--lg-font-table);
  color: var(--lg-text);
}

.table th,
table.dataTable thead th {
  font-weight: 700;
  color: var(--lg-text);
}

/* Controlli DataTables (search, "Mostra N elementi", paginazione) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: var(--lg-font-small);
  color: var(--lg-text-soft);
}

/* ---------- 5. Recupero spazio bianco ----------
   Il tema usa 30px di padding sopra e sotto + 30px fra le card.
   Portandoli a 18px si recuperano ~36px per card: compensa il font piu'
   grande e la pagina resta della stessa altezza (o piu' corta). */

.card { margin-bottom: var(--lg-gap-card); }
.card .card-header { padding: var(--lg-pad-card) var(--lg-pad-card) 14px; }
.card .card-body   { padding: var(--lg-pad-card); }
.card .card-footer { padding: 14px var(--lg-pad-card); }

.card .card-header h4 { font-size: 20px; }
.card .card-header h5 { font-size: 19px; }

/* Il tema stacca il contenuto dall'header con 30px+ di aria */
.page-body { padding-top: 20px; }
.page-wrapper .page-body-wrapper .page-body { min-height: auto; }

/* Righe di form troppo distanziate */
.form-group,
.mb-30 { margin-bottom: 16px; }

/* ---------- 6. Bottoni e badge ---------- */

.btn { font-size: 15px; }
.btn-xs, .btn-sm { font-size: 13.5px; }
.badge { font-size: 12.5px; font-weight: 600; }

/* ---------- 7. Alert / note informative ---------- */

.alert { font-size: 15px; }
.alert-info,
.alert-warning { color: #2b3038; }

/* ---------- 8. Focus visibile (utile a tutti, non solo tastiera) ---------- */

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid #2c5f9b;
  outline-offset: 1px;
}

/* ---------- 9. Sidebar ---------- */

.sidebar-menu li a,
.page-sidebar .sidebar-menu > li > a { font-size: 15px; }

/* =========================================================================
   10. TOOLTIP INFORMATIVI  —  helper PHP: info_tip($testo)
   Markup generato:
     <span class="info-tip" tabindex="0" role="button"
           aria-label="Informazioni" data-tip="...">i</span>
   CSS puro: nessun init JS, nessuna dipendenza da Bootstrap Tooltip.
   Appare su hover E su focus da tastiera.
   ========================================================================= */

/* Tiene insieme "ultima parola + icona": senza questo l'icona, essendo un
   atomic inline box, puo' andare a capo da sola nelle colonne strette. */
.info-tip-wrap { white-space: nowrap; }

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  border-radius: 50%;
  background: #5a6474;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  position: relative;
  transition: background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.info-tip:hover,
.info-tip:focus { background: #2c5f9b; outline: none; }
.info-tip:focus-visible { box-shadow: 0 0 0 3px rgba(44, 95, 155, 0.35); }

/* fumetto */
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  min-width: 220px;
  max-width: 360px;
  width: max-content;
  padding: 10px 13px;
  border-radius: 6px;
  background: #2b3038;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  white-space: pre-line;   /* \n nel testo = a capo */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* freccetta */
.info-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1081;
  border: 6px solid transparent;
  border-top-color: #2b3038;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.info-tip:hover::after,  .info-tip:hover::before,
.info-tip:focus::after,  .info-tip:focus::before { opacity: 1; visibility: visible; }

/* varianti di posizione, per gli "i" vicini ai bordi della pagina */
.info-tip--left::after  { left: auto; right: -6px; transform: none; }
.info-tip--left::before { left: auto; right: 3px;  transform: none; }
.info-tip--right::after  { left: -6px; transform: none; }
.info-tip--right::before { left: 3px;  transform: none; }

/* variante sotto, per gli "i" in cima alla pagina */
.info-tip--bottom::after {
  bottom: auto; top: calc(100% + 9px);
}
.info-tip--bottom::before {
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent; border-bottom-color: #2b3038;
}

/* "i" affiancato a una label: non deve alzare la riga */
.form-label .info-tip,
label .info-tip { vertical-align: -2px; }

/* Nota gia' presente a video che vogliamo mantenere ma rendere leggibile
   (usare .nota-campo al posto di <small class="text-muted">) */
.nota-campo {
  display: block;
  margin-top: 5px;
  font-size: var(--lg-font-small);
  line-height: 1.5;
  color: var(--lg-text-soft);
}

/* =========================================================================
   11. BARRA FISSA IN FONDO alle pagine del configuratore
   (.page-main-header-bottom, generata da $header_bottom)

   Il tema la inchioda a 80px con top: calc(100% - 80px). Con il font piu'
   grande il riepilogo "codifica | cliente | titolo" andava su 3 righe e
   sfondava la barra. Qui: ancoraggio in basso, altezza elastica, padding
   ridotti e riepilogo troncato a una riga (espandibile con un clic).
   ========================================================================= */

.page-wrapper .page-main-header.page-main-header-bottom {
  top: auto !important;
  bottom: 0;
  height: auto;
  min-height: 72px;
  box-shadow: 0 -2px 16px rgba(25, 124, 207, 0.14);
}

/* Il tema mette 24px sopra/sotto e 40px ai lati: nella barra e' spazio sprecato */
.page-main-header.page-main-header-bottom .main-header-right .left-menu-header {
  padding: 8px 14px;
  font-size: 15px;
  line-height: 1.35;
}
.page-main-header-bottom .main-header-right {
  padding-top: 6px;
  padding-bottom: 6px;
  row-gap: 6px;
}

/* Il tema da' 24px sopra e sotto alla colonna dei bottoni di destra: erano
   loro, non il testo, a dettare l'altezza della barra (83px per un bottone
   da 35px). In offerta_output_1 la colonna ha tre bottoni e cresce da se'. */
.page-main-header-bottom .main-header-noleft {
  padding-top: 8px;
  padding-bottom: 8px;
}
.page-main-header.page-main-header-bottom .main-header-right .main-header-left { padding: 0 10px; }

/* Bottoni della barra: piu' bassi, cosi' "Tot EXW ..." puo' andare a capo
   senza far crescere la barra */
.page-main-header-bottom .btn {
  padding: 7px 12px;
  font-size: 14.5px;
  line-height: 1.3;
}

/* ---- riepilogo troncato a una riga ---- */

/* Ogni totale resta tutto d'un pezzo: senza questo il wrap staccava l'importo
   dalla sua etichetta ("Tot Opz: \u20ac" a fine riga e "96.300,00" a capo). */
.tot-gruppo { white-space: nowrap; }

/* min-width:0 e' indispensabile: senza, un figlio flex non scende sotto la
   larghezza del proprio contenuto e l'ellissi non scatta mai.
   flex: 2 -> al riepilogo va il doppio dello spazio rispetto ai totali. */
.barra-riepilogo {
  flex: 2 1 0;
  min-width: 0;
}

/* La colonna del bottone Salva prende solo lo spazio che le serve.
   width:auto serve a battere il "width:100%" che Bootstrap mette su .row > *
   e che, insieme a mx-w-300, la teneva larga 300px per un bottone solo. */
.page-main-header-bottom .left-menu-header.text-end {
  flex: 0 0 auto;
  width: auto;
}
.page-main-header-bottom .left-menu-header.text-end .btn { width: 150px !important; }

/* "Precedente" non ha bisogno dei 290px che il tema riserva alla colonna
   del logo. .main-header-noleft resta com'e': in offerta_output_1 contiene
   PDF / WORD / Estratto Conto e quello spazio gli serve davvero. */
.page-main-header.page-main-header-bottom .main-header-right .main-header-left {
  width: 170px;
}

/* Selettore a due classi per battere il [type=button]{cursor:pointer} di
   Bootstrap: la manina deve comparire solo quando il testo e' troncato. */
.barra-riepilogo .barra-riepilogo-btn { cursor: default; }
.barra-riepilogo .barra-riepilogo-btn.is-troncato { cursor: pointer; }

.barra-riepilogo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: default;
}

.barra-riepilogo-testo {
  min-width: 0;                 /* idem: abilita l'ellissi dentro il flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* solo quando il testo e' davvero tagliato il blocco diventa cliccabile */
.barra-riepilogo-btn.is-troncato:hover .barra-riepilogo-testo,
.barra-riepilogo-btn.is-troncato:focus-visible .barra-riepilogo-testo {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
/* La freccia sta sul bottone, non sul testo: dentro il testo verrebbe
   inghiottita dai puntini di sospensione. */
.barra-riepilogo-btn.is-troncato::after {
  content: "\25BE";         /* freccia giu' */
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
}

/* Espanso: il testo si legge tutto e la barra si alza di conseguenza.
   max-height e' solo una rete di sicurezza per titoli fuori scala. */
.barra-riepilogo-btn[aria-expanded="true"] .barra-riepilogo-testo {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  max-height: 40vh;
  overflow-y: auto;
}

/* Il contorno del focus solo per chi naviga da tastiera: su clic col mouse
   incorniciava tutto il riepilogo. */
.barra-riepilogo-btn:focus { outline: none; }
.barra-riepilogo-btn:focus-visible {
  outline: 2px solid #2c5f9b;
  outline-offset: 2px;
}
.barra-riepilogo-btn[aria-expanded="true"].is-troncato::after {
  content: "\25B4";         /* freccia su */
}

/* Il contenuto della pagina non deve finire sotto la barra.
   --barra-bottom-h e' aggiornata da assets/js/barra-offerta.js quando la
   barra cambia altezza; 80px e' il valore di sicurezza senza JS. */
.page-wrapper .page-body-wrapper .page-body {
  padding-bottom: calc(var(--barra-bottom-h, 80px) + 12px);
}