/*
#############################################
##### SEZIONI DEI PORTALI (condivise) #######
############################################ */

/* Home, archivio delle commesse, documenti del cliente e tabella delle utenze, uguali nel back office
   (gestione.php), nel portale fornitore (Fornitori.php) e in quello del cliente (BernazzoliArkive.php).
   Si carica dopo il foglio della pagina, che tiene solo la sua disposizione e la barra in basso.
   Stessa palette dello scadenziario: fondo #242424, pannelli #222 / #2b2b2b / #333, arancio #f96d00. */

/* le sezioni partono in alto (lo spazio per il bottone "Cambia azienda" del back office e' in styleGS.css) */
.screen.hm-screen {
  justify-content: flex-start;
}

/* HOME --------------------------------------------------------------------------------------------------------------------------------------------------------------
   Pannelli #222 con il titoletto arancio e il loro bottone in testa, righe #2b2b2b.
   Tre colonne su computer, due sul tablet, una sul telefono. ut-blocco e reportcontent servono a js/scriptGS.js */

.hm-grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 12px;
  min-height: 0;
  box-sizing: border-box;
}

.hm-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}

.hm-card {
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

.hm-grow {
  flex: 1;
}

.hm-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.hm-testa h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--arancio-testo);
}

/* bottoni dei pannelli: secondari, come sc-btn-ghost ma piu' piccoli */
.hm-btn {
  border: 1px solid var(--linea-forte);
  border-radius: 5px;
  background: none;
  color: var(--testo);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.hm-btn:hover {
  background: var(--blocco);
}

a.hm-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* il bottone principale della sezione (+ COMMESSA, + NUOVO TAG): uno per schermata, come sc-btn-primary */
.hm-btn-primario {
  background: #f96d00;
  border-color: #f96d00;
  color: black;
}

.hm-btn-primario:hover {
  background: #f58d3d;
  border-color: #f58d3d;
}

.hm-btn:focus-visible,
.hm-icona:focus-visible {
  outline: 2px solid #f96d00;
  outline-offset: 2px;
}

.hm-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* scrollbar sottili nei grigi della pagina: si vede che c'e' altro sotto, senza pesare */
.home-content,
.hm-lista {
  scrollbar-width: thin;
  scrollbar-color: var(--rilievo-forte) transparent;
}

.home-content::-webkit-scrollbar,
.hm-lista::-webkit-scrollbar {
  width: 6px;
}

.home-content::-webkit-scrollbar-track,
.hm-lista::-webkit-scrollbar-track {
  background: transparent;
}

.home-content::-webkit-scrollbar-thumb,
.hm-lista::-webkit-scrollbar-thumb {
  background: var(--rilievo-forte);
  border-radius: 3px;
}

.home-content::-webkit-scrollbar-thumb:hover,
.hm-lista::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.hm-vuoto {
  padding: 14px;
  font-size: 13px;
  color: var(--testo-3);
  text-align: center;
}

/* azienda --------------------------------------------------------------- */
.hm-azienda {
  flex-shrink: 0; /* la colonna puo' stringere le liste, non la scheda dell'azienda */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.hm-logo {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.hm-azienda-testo {
  flex: 1;
  min-width: 160px;
}

.hm-azienda-testo h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hm-azienda-testo p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--testo-2);
}

.hm-azioni {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* righe delle liste ----------------------------------------------------- */
.hm-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blocco);
  border: 1px solid var(--linea-forte);
  border-radius: 8px;
  padding: 8px 8px 8px 12px;
}

/* utenti e report si aprono con un clic sulla riga */
.ut-blocco,
.reportcontent {
  cursor: pointer;
}

.ut-blocco:hover,
.reportcontent:hover {
  background: var(--rilievo);
}

.hm-riga-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-riga-testo b {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hm-riga-testo small {
  font-size: 12px;
  color: var(--testo-3);
}

.hm-due-righe {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-icona {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
}

.hm-icona:hover {
  background: var(--rilievo-forte);
}

.hm-icona img {
  width: 20px;
  height: 20px;
}

.hm-biglietto {
  width: 56px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: zoom-in;
}

.hm-fatturata {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--testo-3);
  cursor: pointer;
}

/* sul touch i bersagli sono piu' grandi */
@media (pointer: coarse) {
  .hm-icona {
    width: 40px;
    height: 40px;
  }

  .hm-btn {
    padding: 10px 14px;
  }
}

/* tablet: azienda e report affiancati, commesse e referenti sotto, la pagina scorre */
@media (max-width: 1100px) {
  /* flex-shrink: 0 perche' la sezione e' una colonna flex: senza, la griglia si stringe all'altezza
     dello schermo e una lista lunga esce sotto il pannello successivo */
  .hm-grid {
    height: auto;
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hm-grid > .hm-col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .hm-grid > .hm-col:last-child > .hm-card {
    flex: 1;
  }

  .hm-grid .hm-grow {
    flex: none;
  }

  .hm-grid .hm-lista {
    flex: none;
    max-height: 380px;
  }
}

/* telefono: una colonna, liste intere, spazio in fondo per la barra fissa */
@media (max-width: 700px) {
  .hm-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 90px;
  }

  .hm-grid > .hm-col:last-child {
    flex-direction: column;
  }

  .hm-grid > .hm-col:last-child > .hm-card {
    flex: none;
  }

  .hm-grid .hm-lista {
    max-height: none;
  }
}

/* ARCHIVIO COMMESSE e DOCUMENTI DEL CLIENTE ----------------------------------------------------------------------------------------------------------------------------
   Pannelli hm-card, righe #2b2b2b. A sinistra il contenuto, a destra l'elenco (commesse) o il caricamento (documenti).
   Classi ar- e dc-; com-blocco, commessa-macro-separator, file-card e custom-dropzone le usano scriptGS.js e scriptAK.js */

.ar-wrap {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  min-height: 0;
  box-sizing: border-box;
}

.dc-wrap {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.ar-file .hm-testa {
  flex-wrap: wrap;
}

.ar-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* documenti della commessa: un elenco, un file per riga */
.ar-file-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--rilievo-forte) transparent;
}

.file-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  flex-shrink: 0;
  min-height: 56px;
  padding: 10px 84px 10px 12px;
  background: var(--blocco);
  border: 1px solid var(--linea-forte);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.file-card:hover {
  background: var(--rilievo);
}

/* le icone dei documenti sono disegnate nere per le schede chiare di una volta: sul fondo scuro si schiariscono */
.file-icon {
  width: 32px;
  height: 32px;
  filter: invert(1);
}

.file-card .file-icon {
  grid-row: span 2;
}

.file-date {
  font-size: 12px;
  color: var(--testo-3);
}

.file-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* revisione e cestino a destra della riga, affiancati (le classi le mette scriptGS.js) */
.file-card-azione {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

.file-card-azione:hover {
  background: var(--rilievo-forte);
}

.file-card-azione img {
  width: 18px;
  height: 18px;
}

.file-card-rev {
  right: 42px;
}

.file-card-elimina {
  right: 8px;
}

.file-empty-msg {
  grid-column: 1 / -1;
  padding: 24px 14px;
  font-size: 13px;
  color: var(--testo-3);
  text-align: center;
}

/* elenco delle commesse */
.ar-cerca {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--blocco);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
}

.ar-cerca:focus {
  outline: none;
  border-color: #f96d00;
}

/* gruppo per categoria: si apre e si chiude col clic (scriptGS.js) */
.commessa-macro-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 6px;
  padding: 8px 8px 8px 6px;
  border-radius: 8px;
  color: var(--testo-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.commessa-macro-separator:first-child {
  margin-top: 0;
}

.commessa-macro-separator:hover {
  background: var(--blocco);
}

.commessa-macro-separator img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.commessa-macro-separator span {
  flex: 1;
}

.commessa-macro-separator::after {
  content: "+";
  width: 16px;
  text-align: center;
  font-size: 16px;
  color: var(--testo-3);
}

.commessa-macro-separator.open::after {
  content: "\2212";
}

/* titolo su tutta la riga; sotto, stato della commessa. L'icona e il cestino occupano le due righe */
.com-blocco {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icona testo elimina"
    "icona stato elimina";
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  flex-shrink: 0;
  padding: 8px 8px 8px 10px;
  background: var(--blocco);
  border: 1px solid var(--linea-forte);
  border-radius: 8px;
  cursor: pointer;
}

.com-blocco:hover {
  background: var(--rilievo);
}

.com-blocco.selected {
  border-color: #f96d00;
}

.ar-macro {
  grid-area: icona;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.com-blocco .hm-riga-testo {
  grid-area: testo;
}

.com-blocco .hm-fatturata {
  grid-area: stato;
  justify-self: start;
}

.com-blocco .hm-icona {
  grid-area: elimina;
}

/* documenti del cliente */
.client-doc-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.client-doc-card .file-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.client-doc-card:hover {
  background: var(--rilievo);
}

.upload-doc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dc-nota {
  margin: 0;
  font-size: 13px;
  color: var(--testo-2);
}

.dc-carica .custom-dropzone {
  min-height: 140px;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--linea-forte);
  border-radius: 10px;
  background: var(--blocco);
  color: var(--testo-2);
  font-size: 14px;
}

.dc-carica .custom-dropzone:hover,
.dc-carica .custom-dropzone.dragover {
  border-color: #f96d00;
  background: var(--rilievo);
}

.dc-carica .custom-dropzone .file-info {
  color: var(--testo);
}

.dc-carica .sc-btn-primary {
  width: 100%;
  padding: 10px 14px;
}

/* tablet: la colonna di destra si stringe */
@media (max-width: 1100px) {
  .ar-wrap,
  .dc-wrap {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

/* telefono: una colonna, prima l'elenco delle commesse e poi i documenti; la pagina scorre */
@media (max-width: 900px) {
  .ar-wrap,
  .dc-wrap {
    height: auto;
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 90px;
  }

  .ar-wrap .ar-commesse {
    order: -1;
  }

  .ar-wrap .hm-lista,
  .ar-file-lista {
    flex: none;
    max-height: none;
    overflow: visible;
  }

}

/* UTENZE E ATTREZZATURE -----------------------------------------------------------------------------------------------------------------------------------------------
   Un pannello con testata, filtri e tabella. Intestazione della tabella arancio con testo nero; sul telefono le righe diventano schede.
   Classi gu-; clientTable, le righe FCID, .table-filters e DELFC li usano gli script -procedural delle tre pagine */

.gu-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

.gu-card {
  flex: 1;
}

.gu-testa {
  flex-wrap: wrap;
}

.gu-conta {
  margin-left: 8px;
  color: var(--testo-3);
}

.table-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.table-filters input,
.table-filters select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--blocco);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  color-scheme: dark;
}

.table-filters input:focus,
.table-filters select:focus {
  outline: none;
  border-color: #f96d00;
}

.gu-tabella {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--rilievo-forte) transparent;
}

#clientTable {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: var(--testo);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#clientTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  background: #f96d00;
  color: black;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

#clientTable td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--linea);
}

#clientTable td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

/* la riga si apre con un clic (scheda nel pannello laterale) */
#clientTable tbody tr {
  cursor: pointer;
}

#clientTable tbody tr:hover {
  background: var(--blocco);
}

#clientTable tbody tr:hover td:first-child {
  color: var(--arancio-testo);
}

#clientTable th:last-child,
#clientTable td:last-child {
  width: 44px;
  text-align: center;
}

.gu-elimina {
  width: 20px;
  height: 20px;
  padding: 6px;
  border-radius: 5px;
  vertical-align: middle;
  cursor: pointer;
}

.gu-elimina:hover {
  background: var(--rilievo-forte);
}

/* testo per chi legge con lo screen reader: la colonna del cestino non ha titolo a vista */
.gu-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .table-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* telefono e tablet stretto: ogni scheda e' una riga a due livelli (codice e nome, marca sotto), il cestino a destra */
@media (max-width: 900px) {
  .gu-wrap {
    height: auto;
    flex-shrink: 0;
    padding-bottom: 90px;
  }

  .gu-card {
    flex: none;
  }

  .gu-tabella {
    overflow: visible;
  }

  #clientTable thead {
    display: none;
  }

  #clientTable,
  #clientTable tbody {
    display: block;
    min-width: 0;
  }

  #clientTable tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 2px;
    margin-bottom: 6px;
    padding: 10px 8px 10px 12px;
    background: var(--blocco);
    border-radius: 8px;
  }

  #clientTable tbody tr:hover {
    background: var(--rilievo);
  }

  #clientTable td {
    display: none;
    padding: 0;
    border: 0;
  }

  #clientTable td:nth-child(1),
  #clientTable td:nth-child(2),
  #clientTable td:nth-child(3) {
    display: block;
    grid-column: 1;
    overflow-wrap: anywhere;
  }

  #clientTable td:first-child {
    white-space: normal;
  }

  #clientTable td:nth-child(2) {
    color: var(--testo-2);
  }

  #clientTable td:nth-child(3) {
    font-size: 12px;
    color: var(--testo-3);
  }

  #clientTable td:last-child {
    display: flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
  }
}

@media (max-width: 600px) {
  .table-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* liste dei documenti dentro la griglia della Home (portale cliente): sul tablet altezza propria, non quella della colonna */
@media (max-width: 1100px) {
  .hm-grid .ar-file-lista {
    flex: none;
    max-height: 480px;
    overflow-y: auto;
  }
}

@media (max-width: 700px) {
  .hm-grid .ar-file-lista {
    max-height: none;
    overflow: visible;
  }
}

/* menu dei bottoni della barra in basso (ARCHIVIO, MANUTENZIONE, IMPOSTAZIONI): finestra bianca come la barra, una riga
   per voce con l'icona della sezione (media/nav-*.svg) e il nome. La posizione sopra il bottone la mette apriGruppo()
   di js/scriptNV.js */
.nav-menu {
  display: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10000; /* sopra i bottoni della pagina, che arrivano a 9999 */
  flex-direction: column;
  gap: 2px;
  min-width: 250px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 12px;
}

.nav-menu.aperto {
  display: flex;
}

.nav-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  padding: 6px 14px 6px 6px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  color: black;
  cursor: pointer;
}

.nav-menu button img {
  width: 36px;
  height: 36px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #eeeeee;
  flex-shrink: 0;
}

.nav-menu button:hover {
  background: #eeeeee;
}

.nav-menu button:hover img {
  background: #ffffff;
}

.nav-menu button.active {
  background: #f96d00;
}

.nav-menu button.active img {
  background: #ffffff;
}

/* finestra della prima visione dell'informativa privacy (privacy_avviso.php): copre la pagina finche' non si
   preme HO LETTO. Pannello #222 come gli altri, un solo bottone principale */
.pv-popup {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: #000000b3;
}

.pv-popup-box {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: 20px;
  background: var(--finestra);
  border-radius: 12px;
  color: var(--testo);
  font-family: "Inter", sans-serif;
  text-align: left;
}

.pv-popup-box h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--arancio-testo);
}

.pv-popup-box p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--testo-2);
}

.pv-popup-errore {
  font-size: 13px;
  color: var(--rosso-tenue-testo);
}

.pv-popup-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.pv-popup-ghost,
.pv-popup-ok {
  border-radius: 5px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pv-popup-ghost {
  border: 1px solid var(--finestra-forte);
  color: var(--testo);
}

.pv-popup-ghost:hover {
  background: var(--finestra-blocco);
}

.pv-popup-ok {
  border: none;
  background: #f96d00;
  color: black;
}

.pv-popup-ok:hover {
  background: #f58d3d;
}

.pv-popup-ok:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 480px) {
  .pv-popup-ghost,
  .pv-popup-ok {
    flex: 1;
    text-align: center;
  }
}


/* FINESTRE DEI MODULI (.modal-overlay di gestione.php, BernazzoliArkive.php, Fornitori.php, Reporter.php) ---------------
   Pannello #222 come quello dello scadenziario, uguale nei quattro portali. I fogli delle pagine (styleGS, styleAK,
   styleFR, styleCOM) hanno ancora lo stile chiaro di prima: qui le regole hanno .modal-overlay davanti e vincono senza
   toccare id, nomi dei campi e struttura, che usano gli script. Le finestre della scelta dell'azienda (back office e
   CRM) sono .overlay e seguono le stesse regole */
.modal-overlay,
.overlay {
  z-index: 10001; /* sopra la barra in basso e i suoi menu */
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
}

:is(.modal-overlay, .overlay) .modal-content,
:is(.modal-overlay, .overlay) .modal-content-file:not(.potree-modal-content),
.overlay .overlay-content {
  animation: none;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 20px;
  background: var(--finestra);
  border: 1px solid var(--finestra-rilievo);
  border-radius: 12px;
  box-shadow: none;
  color: var(--testo);
  text-align: left;
  font-family: "Inter", sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--rilievo-forte) transparent;
}

/* finestre larghe: documenti, liste, nuovo tag, anteprime */
:is(.modal-overlay, .overlay) .modal-content.List_overlay,
:is(.modal-overlay, .overlay) #myModalDocumenti .modal-content,
#myModalDocumenti .modal-content,
:is(.modal-overlay, .overlay) .modal-content-file:not(.potree-modal-content) {
  max-width: 720px;
}

/* anteprime di immagini e PDF: si allargano quanto il contenuto */
#myModalFile .modal-content-file:not(.potree-modal-content),
#myModalFileRevFile .modal-content-file {
  width: auto;
  max-width: calc(100% - 32px);
  text-align: center;
}

.overlay .overlay-content h2,
:is(.modal-overlay, .overlay) .modal-content h2,
:is(.modal-overlay, .overlay) .modal-content h3,
:is(.modal-overlay, .overlay) .modal-content-file h3,
:is(.modal-overlay, .overlay) .AzAddTitle {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  color: var(--testo);
}

:is(.modal-overlay, .overlay) .modal-content h4:not(.AzAddTitle) {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--arancio-testo);
}

.overlay .overlay-content p,
:is(.modal-overlay, .overlay) .modal-content p,
:is(.modal-overlay, .overlay) .modal-content-file p,
:is(.modal-overlay, .overlay) .modal-content-file li {
  color: var(--testo-2);
  font-size: 14px;
  line-height: 1.5;
}

:is(.modal-overlay, .overlay) label,
:is(.modal-overlay, .overlay) .modal-content b {
  color: var(--arancio-testo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

:is(.modal-overlay, .overlay) label b {
  display: block;
  margin-bottom: 6px;
}

/* campi come .sc-field dello scadenziario */
:is(.modal-overlay, .overlay) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([hidden]),
:is(.modal-overlay, .overlay) select:not([hidden]),
:is(.modal-overlay, .overlay) textarea:not([hidden]) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--finestra-rilievo);
  border-radius: 10px;
  background: var(--finestra-blocco);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  color-scheme: dark;
}

:is(.modal-overlay, .overlay) input[type="date"],
:is(.modal-overlay, .overlay) input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 40px;
}

:is(.modal-overlay, .overlay) input::placeholder,
:is(.modal-overlay, .overlay) textarea::placeholder {
  color: var(--testo-3);
}

:is(.modal-overlay, .overlay) input:focus,
:is(.modal-overlay, .overlay) select:focus,
:is(.modal-overlay, .overlay) textarea:focus {
  outline: none;
  border-color: #f96d00;
}

:is(.modal-overlay, .overlay) input[type="file"]:not([hidden]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--testo-2);
  font-size: 13px;
}

:is(.modal-overlay, .overlay) input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 10px;
  border: 1px solid var(--finestra-forte);
  border-radius: 5px;
  background: none;
  color: var(--testo);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* due campi affiancati (cognome e nome, nome utente e livello): niente cornice gialla */
:is(.modal-overlay, .overlay) .modType-cont,
:is(.modal-overlay, .overlay) .Date-cont {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 0 10px;
  padding: 0;
  border: none;
  margin: 0;
}

:is(.modal-overlay, .overlay) .Date-cont p {
  margin: 10px 0 0;
  color: var(--arancio-testo);
  font-size: 12px;
  font-weight: 600;
}

/* bottoni: uno principale arancio per finestra, gli altri con il bordo */
:is(.modal-overlay, .overlay) .button-form,
:is(.modal-overlay, .overlay) .overlay-buttons button {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  background: #f96d00;
  color: black;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

:is(.modal-overlay, .overlay) .button-form:hover {
  background: #f58d3d;
}

:is(.modal-overlay, .overlay) .fn-secondario,
:is(.modal-overlay, .overlay) #addFieldBtn,
:is(.modal-overlay, .overlay) #dowloadfilereport {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 16px;
  border: 1px solid var(--finestra-forte);
  border-radius: 5px;
  background: none;
  box-shadow: none;
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

:is(.modal-overlay, .overlay) .fn-secondario:hover,
:is(.modal-overlay, .overlay) #addFieldBtn:hover,
:is(.modal-overlay, .overlay) #dowloadfilereport:hover {
  background: var(--finestra-blocco);
  transform: none;
}

:is(.modal-overlay, .overlay) .fn-pericolo {
  border: 1px solid #f4433666;
  background: none;
  color: var(--rosso-testo);
}

:is(.modal-overlay, .overlay) .fn-pericolo:hover {
  background: #f443361a;
}

/* conferme (uscire, eliminare): due bottoni affiancati */
:is(.modal-overlay, .overlay) .fn-conferma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

:is(.modal-overlay, .overlay) .fn-conferma a,
:is(.modal-overlay, .overlay) .fn-conferma button {
  margin: 0;
  text-decoration: none;
}

:is(.modal-overlay, .overlay) .fn-conferma a .button-form {
  margin: 0;
}

/* azioni sotto MODIFICA AZIENDA: attiva/disattiva ed elimina */
:is(.modal-overlay, .overlay) .fn-azioni {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--finestra-rilievo);
}

:is(.modal-overlay, .overlay) .fn-azioni a {
  flex: 1;
  text-decoration: none;
}

:is(.modal-overlay, .overlay) .fn-azioni .button-form {
  margin: 0;
}

/* caricamento file */
:is(.modal-overlay, .overlay) .dropzone2 {
  max-width: none;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
}

:is(.modal-overlay, .overlay) .custom-dropzone {
  min-height: 90px;
  margin: 0;
  padding: 16px;
  border: 1px dashed #555555;
  border-radius: 10px;
  background: var(--finestra-blocco);
  color: var(--testo-2);
  font-size: 14px;
}

:is(.modal-overlay, .overlay) .custom-dropzone:hover,
:is(.modal-overlay, .overlay) .custom-dropzone.dragover {
  border-color: #f96d00;
  background: var(--finestra-blocco);
}

:is(.modal-overlay, .overlay) .custom-dropzone .file-info {
  color: var(--testo);
}

/* scelta del tipo di documento (File, Link, Digital, Point Cloud) */
:is(.modal-overlay, .overlay) .ts3 {
  width: 100%;
  height: 40px;
  margin: 0 0 16px;
  font-family: inherit;
}

:is(.modal-overlay, .overlay) .ts3-track {
  background: var(--finestra-blocco);
  border: 1px solid var(--finestra-rilievo);
  border-radius: 8px;
}

:is(.modal-overlay, .overlay) .ts3-thumb {
  background: #f96d00;
  border-radius: 5px;
  box-shadow: none;
}

:is(.modal-overlay, .overlay) .ts3-label {
  color: var(--testo-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

:is(.modal-overlay, .overlay) .ts3-label:hover {
  color: var(--testo);
}

:is(.modal-overlay, .overlay) #ts3-file:checked ~ label[for="ts3-file"],
:is(.modal-overlay, .overlay) #ts3-link:checked ~ label[for="ts3-link"],
:is(.modal-overlay, .overlay) #ts3-digital:checked ~ label[for="ts3-digital"],
:is(.modal-overlay, .overlay) #ts3-point-cloud:checked ~ label[for="ts3-point-cloud"] {
  color: black;
}

/* report commerciale: due colonne */
:is(.modal-overlay, .overlay) .parent {
  grid-template-rows: auto;
  gap: 0 10px;
}

:is(.modal-overlay, .overlay) .parent > div {
  min-width: 0;
}

:is(.modal-overlay, .overlay) .div6 {
  grid-row: auto;
}

/* nuovo tag: la griglia della pagina, con i colori della finestra */
:is(.modal-overlay, .overlay) .fileclient-grid {
  grid-template-rows: auto;
  gap: 0 10px;
  color: var(--testo);
}

/* link del Digital Twin: riga intera dopo la categoria (le righe da 1 a 12 sono gia' occupate) */
:is(.modal-overlay, .overlay) .fc22 {
  grid-column: span 6;
  grid-row-start: 13;
  display: flex;
  flex-direction: column;
}

:is(.modal-overlay, .overlay) .fileclient-grid .Divider {
  display: block;
  width: auto;
  border: none;
  border-radius: 0;
  height: 1px;
  margin: 4px 0 14px;
  background: var(--finestra-rilievo);
}

:is(.modal-overlay, .overlay) .Procedural-filds {
  gap: 0 8px;
}

:is(.modal-overlay, .overlay) .removeField {
  margin-bottom: 10px;
  background: var(--finestra-blocco);
  color: var(--testo);
}

:is(.modal-overlay, .overlay) .suggestions {
  background: var(--finestra-blocco);
  border-color: var(--finestra-forte);
  color: var(--testo);
}

:is(.modal-overlay, .overlay) .suggestions div:hover {
  background: var(--finestra-rilievo);
}

/* liste di identificazione, sottoscrizione, stato */
:is(.modal-overlay, .overlay) .Grid_List {
  gap: 16px;
}

:is(.modal-overlay, .overlay) .Lister_Container {
  min-height: 0;
  max-height: 260px;
  margin-bottom: 10px;
  padding: 6px;
  border: 1px solid var(--finestra-rilievo);
  border-radius: 10px;
  background: var(--finestra-blocco);
  box-shadow: none;
}

:is(.modal-overlay, .overlay) .Lister_Container:hover {
  transform: none;
  box-shadow: none;
}

:is(.modal-overlay, .overlay) .Lister_Container span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 6px 8px;
  border: none;
  border-radius: 5px;
  background: var(--finestra);
  color: var(--testo);
  font-size: 13px;
}

:is(.modal-overlay, .overlay) .Lister_Container span:hover {
  background: var(--finestra-rilievo);
  color: var(--testo);
}

:is(.modal-overlay, .overlay) .Lister_Container span b {
  font-size: 13px;
}

:is(.modal-overlay, .overlay) .Lister_Container span a {
  margin-left: auto;
}

:is(.modal-overlay, .overlay) .list-form {
  gap: 0 6px;
}

/* accessi del fornitore: elenco di aziende con la spunta */
:is(.modal-overlay, .overlay) .List_Aziende {
  margin: 0 0 10px;
  padding: 6px;
  border: 1px solid var(--finestra-rilievo);
  border-radius: 10px;
  background: var(--finestra-blocco);
}

:is(.modal-overlay, .overlay) .checkbox-item {
  border-radius: 5px;
  color: var(--testo);
  font-size: 14px;
}

:is(.modal-overlay, .overlay) .checkbox-item:hover {
  background: var(--finestra-rilievo);
}

:is(.modal-overlay, .overlay) .checkbox-item .checkbox-label {
  color: var(--testo);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

:is(.modal-overlay, .overlay) .custom-checkbox {
  border: 1px solid #666666;
  border-radius: 4px;
}

:is(.modal-overlay, .overlay) .checkbox-item input:checked + .custom-checkbox {
  background: #f96d00;
  border-color: #f96d00;
}

:is(.modal-overlay, .overlay) .checkbox-item input:checked + .custom-checkbox::after {
  border-color: black;
}

/* spunte delle aree e della ditta fornitrice */
:is(.modal-overlay, .overlay) .ut-aree {
  justify-content: flex-start;
  margin: 0 0 12px;
}

:is(.modal-overlay, .overlay) .ut-aree label {
  color: var(--testo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

/* testo scritto dagli script nelle finestre (digital twin, revisioni, credenziali) */
:is(.modal-overlay, .overlay) #digtaltwinfilecontainer {
  color: var(--testo-2);
}

/* scelta dell'azienda: suggerimenti della ricerca e tecnici da confermare; i suggerimenti valgono anche per la nuova
   azienda del fornitore */
.overlay .overlay-buttons {
  justify-content: flex-start;
}

:is(.modal-overlay, .overlay) .suggestions-box {
  border: 1px solid var(--finestra-forte);
  background: var(--finestra-blocco);
  box-shadow: none;
}

.overlay .suggestions-box div,
.modal-overlay .suggestions-box div {
  margin: 2px 6px;
  padding: 8px 10px;
  background: none;
  color: var(--testo);
  font-family: inherit;
}

.overlay .suggestions-box div:hover,
.modal-overlay .suggestions-box div:hover {
  background: var(--finestra-rilievo);
  color: var(--testo);
}

.overlay .tec-elenco {
  border-top-color: var(--finestra-rilievo);
  color: var(--testo-2);
}

.overlay .tec-elenco a {
  color: var(--arancio-testo);
}

/* contenuti scritti dagli script: Digital Twin, revisioni di un documento, anteprima con le credenziali */
.fn-twin-vuoto p {
  margin: 0 0 16px;
}

.fn-twin-vuoto a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 5px;
  background: #f96d00;
  color: black;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.fn-twin-vuoto a:hover {
  background: #f58d3d;
}

.mt-file,
.fn-revisione {
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--blocco);
  color: var(--testo);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.mt-file:hover,
.fn-revisione:hover {
  border-color: #f96d00;
}

.fn-anteprima {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fn-anteprima iframe {
  width: min(90vh, 80vw);
  height: 60vh;
  border: none;
  border-radius: 10px;
}

.fn-credenziali {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--blocco);
  color: var(--testo);
  font-size: 14px;
}

/* due colonne che diventano una sul telefono */
@media (max-width: 600px) {
  :is(.modal-overlay, .overlay) .modType-cont,
  :is(.modal-overlay, .overlay) .parent,
  :is(.modal-overlay, .overlay) .Grid_List {
    display: flex;
    flex-direction: column;
  }

  :is(.modal-overlay, .overlay) .fileclient-grid {
    display: flex;
    flex-direction: column;
  }
}


/* MESSAGGI (messaggio.php, js/scriptMS.js) --------------------------------------------------------------------------
   Errori e conferme dei moduli e degli script, al posto di alert(). L'errore di un modulo compare in cima alla sua
   finestra riaperta (.ms-errore); gli altri in un riquadro con CHIUDI; le conferme in basso e spariscono da sole */
.ms-errore {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #f4433666;
  border-radius: 8px;
  background: #f443361a;
  color: white;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.ms-avviso {
  position: fixed;
  inset: 0;
  z-index: 20001; /* sopra le finestre e la presa visione della privacy */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}

.ms-avviso[hidden] {
  display: none;
}

.ms-pannello {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 1px solid var(--finestra-rilievo);
  border-radius: 12px;
  background: var(--finestra);
  color: var(--testo);
  font-family: "Inter", sans-serif;
}

.ms-pannello h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.ms-pannello.errore h3 {
  color: var(--rosso-testo);
}

.ms-pannello p {
  margin: 0 0 16px;
  color: var(--testo-2);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.ms-pannello button {
  display: block;
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: #f96d00;
  color: black;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ms-pannello button:hover {
  background: #f58d3d;
}

.ms-conferma {
  position: fixed;
  bottom: 90px;
  left: 50%;
  z-index: 20001;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid #363636;
  border-radius: 8px;
  background: #111111;
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}

.ms-conferma.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* bottone della barra che la pagina non mostra (Digital Twin delle aziende create da un fornitore): resta nella pagina
   perche' lo script lo cerca */
.bottom-nav button[hidden] {
  display: none;
}


/* icone bianche disegnate per i bottoni scuri (cambia azienda, modifica): nel tema chiaro diventano nere */
html.chiaro img[src$="white.svg"] {
  filter: invert(1);
}