/* ADP — aiuto contestuale (help.js). Foglio SEPARATO da adp.css: una pagina che
   non lo include resta uguale a prima. Usa le variabili di tema già definite in
   :root da adp.css (petrolio, bordo, fondo, ombra...) — le pagine che includono
   questo file includono sempre anche adp.css, quindi il tema chiaro/scuro segue
   da solo, senza duplicare qui la palette. */

/* Contenitore del titolo di gruppo nel configuratore: tiene l'<h3> (che porta
   data-i18n, riscritto da ADP.applica) e il "?" separati, sullo stesso rigo.
   Ripete lo spazio verticale che adp.css dava a ".cfg-gruppo > h3" diretto,
   perché quella regola non si applica più con l'h3 annidato qui dentro. */
.cfg-titolo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cfg-titolo h3 { margin-bottom: 0; }

.adp-help-ancora {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.adp-help-punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--fondo-alt, var(--fondo));
  color: var(--petrolio);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.adp-help-punto:hover { border-color: var(--petrolio); background: var(--petrolio-chiaro); }
.adp-help-punto:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }
.adp-help-punto[aria-expanded="true"] { background: var(--petrolio-chiaro); border-color: var(--petrolio); }

.adp-help-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(320px, 80vw);
  background: var(--fondo);
  color: var(--ardesia);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  box-shadow: var(--ombra);
  padding: 12px 14px 10px;
  font-weight: 400;
}
.adp-help-popover[hidden] { display: none; }
.adp-help-popover p {
  margin: 0 0 8px;
  font-size: .83rem;
  line-height: 1.5;
}
.adp-help-popover .adp-help-chiudi {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ardesia-chiara);
  font-size: .74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
  font: inherit;
}
.adp-help-popover .adp-help-chiudi:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }

/* Il pannello di schermata: un overlay centrato, non ancorato a un punto preciso
   perché descrive l'intera maschera, non un campo. */
.adp-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 27, 34, .45);
}
.adp-help-overlay[hidden] { display: none; }

.adp-help-pannello {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--fondo);
  color: var(--ardesia);
  border-radius: var(--raggio, 12px);
  box-shadow: var(--ombra);
  padding: 22px 24px;
}
.adp-help-pannello:focus { outline: none; }
.adp-help-pannello header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.adp-help-pannello h2 { margin: 0; font-size: 1.1rem; color: var(--petrolio-scuro); }
.adp-help-pannello header .adp-help-chiudi {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: none;
  color: var(--ardesia-chiara);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.adp-help-pannello header .adp-help-chiudi:hover { border-color: var(--petrolio); color: var(--petrolio); }
.adp-help-pannello header .adp-help-chiudi:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }
.adp-help-pannello-corpo { font-size: .93rem; line-height: 1.6; }
.adp-help-pannello-corpo p { margin: 0; }

/* Il bottone "aiuto sulla maschera": discreto, con un "?" proprio, coerente con
   quello di campo ma più grande e con etichetta testuale. */
.adp-help-schermo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--petrolio-scuro);
  cursor: pointer;
}
.adp-help-schermo::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .68rem;
  flex: none;
}
.adp-help-schermo:hover { border-color: var(--petrolio); background: var(--petrolio-chiaro); }
.adp-help-schermo:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }

@media (max-width: 480px) {
  .adp-help-popover { max-width: 84vw; }
}