/* Global Reset and Base Styles */
body {
    padding-top: 60px;
    background-color: #f9f9f9;
    font-family: sans-serif;
    margin: 0;
}

.wrapper,
.wrapper-banche-dati {
    margin: 0 auto;
    max-width: 630px;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0,0,0,0.05);
}
.doc-manca {
    color: #d00;
    font-weight: normal;
    font-style: italic;
    opacity: 0.85;
}
.wrapper,
.wrapper-elenco-pratiche {
    margin: 0 auto;
    max-width: 95 %;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0,0,0,0.05);
}

/* Tables */
.table-pratiche {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.table-pratiche th,
.table-pratiche td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.table-pratiche th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}
.table-pratiche tr:hover {
    background-color: #f9f9f9;
}
.table-pratiche a {
    color: #0074cc;
    text-decoration: none;
}
.table-pratiche a:hover {
    text-decoration: underline;
}

/* Form Layout */
.form-wrapper {
    padding: 0;
    margin: 0;
    max-width: 600px;
}
.anagrafica-box {
    margin-top: 40px;
    flex: 1 1 35%;
    max-width: 600px;
    background: #fff;
    padding: 24px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    box-sizing: border-box;
}
.riga-doppia-colonna {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.col-prima,
.col-seconda,
.col-terza {
    flex: 1 1 26%;               /* ciascuna circa il 30% */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Nuova colonna 4 al 6% */
.col-quarta {
    flex: 0 0 5%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 900px) {
    .form-wrapper,
    .anagrafica-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Inputs, Textareas, Selects */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    max-width: 600px;
    padding: 10px 8px;
    font-size: 1.05em;
    height: 2.4em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 14px;
    font-family: sans-serif;
}

textarea {
    height: 140px;
    resize: vertical;
}

label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

/* Buttons and Links */
.btn-back,
button[type="submit"],
button[type="button"],
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: sans-serif;
    font-size: 1em;
}
.btn-back:hover,
button[type="submit"]:hover,
button[type="button"]:hover,
.btn:hover {
    background-color: #e0e0e0;
}
.btn-back .icon {
    margin-right: 6px;
}

/* Form Rows */
.riga-date,
.riga-codici {
    display: flex;
    gap: 12px;
    max-width: 600px;
    margin-bottom: 14px;
}
.col-date {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.col-1-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.col-2-3 {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.riga-note {
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
}

/* Drag & Drop */
.drop-zone {
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    padding: 20px;
    border: 2px dashed #aaa;
    background: #fefefe;
    text-align: center;
    margin: 10px 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.drop-zone:hover {
    background-color: #eef;
    border-color: #0074cc;
    cursor: pointer;
}
.paste-active {
    box-shadow: 0 0 10px #00cc66;
    border-color: #00cc66;
}

/* Preview Gallery */
#preview-gallery {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Utility Classes */
.row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
}
.col-half {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.full-width {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 14px;
}

/* Profile Form */
.form-profilo {
    max-width: 500px;
    margin: 0 auto;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    margin-bottom: 6px;
}
.form-group input {
    width: 100%;
    box-sizing: border-box;
}

/* Box bianco per le form-wrapper (Data e Note, Immagini, ecc.) */
.form-wrapper {
  background: #fff;                     /* sfondo bianco */
  border: 1px solid #ccc;              /* bordo sottile grigio */
  border-radius: 6px;                  /* angoli arrotondati */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* leggiera ombra */
  padding: 20px;                       /* spazio interno */
  margin-bottom: 20px;                 /* separazione tra box */
}
/* 1) Box a sinistra: occupino 100% della colonna */
/* rimuove il max-width e forza il width, mantenendo padding e border-box */
.col-prima .anagrafica-box,
.col-prima .form-wrapper {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-bottom: 20px;   /* per separazione */
}

/* 2) Box intero per colonna di destra */
.col-prima,
.col-seconda,
.col-terza {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 20px;
  box-sizing: border-box;
  /* se vuoi che la colonna di destra non tocchi il fondo della sinistra,
     aggiungi pure un margin-bottom uguale a quello di .col-prima */
  margin-bottom: 20px;
}
/* Label sopra l’input nella colonna di destra */
.col-seconda label,
.col-terza label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 12px; /* spazio tra un campo e l’altro */
  font-weight: bold;
}

/* Allarga e sposta l’input sotto l’etichetta */
.col-seconda label input,
.col-seconda label select,
.col-seconda label textarea,
.col-terza label input,
.col-terza label select,
.col-terza label textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}
.riga-doppia-colonna {
  /* già hai padding orizzontale via .wrapper, 
     ma se non c’è wrapper usa questo: */
  padding-left: 20px;
  padding-right: 20px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: bold; /* se vuoi mantieni lo stile bold */
  white-space: nowrap;
  margin: 0; /* rimuove l’eventuale margin-top delle regole generali */
}
/* Override per le checkbox-label: voglio riga orizzontale, non colonna */
.col-seconda label.checkbox-label,
.col-terza  label.checkbox-label {
  display: inline-flex !important;
  flex-direction: row    !important;
  align-items: center    !important;
  gap: 8px               !important;
  margin-top: 12px       !important;
}

/* Rimuove eventuali margin imposti dall'altro rule */
.col-seconda label.checkbox-label input,
.col-terza  label.checkbox-label input {
  margin: 0 !important;
}
/* checkbox-label: non stretchare, shrinkwrap contenuto e allinea left */
.col-seconda label.checkbox-label,
.col-terza  label.checkbox-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;  /* impedisce lo stretch orizzontale */
  gap: 8px !important;
  margin-top: 12px !important;
  white-space: nowrap !important;
}

/* rimuove ogni margin “strano” sull’input */
.col-seconda label.checkbox-label input[type="checkbox"],
.col-terza  label.checkbox-label input[type="checkbox"] {
  margin: 0 !important;
}

/* 1) Metti i bottoni in un flex container */
.btn-row {
  display: flex;
  gap: 10px;             /* spazio tra i bottoni */
  align-items: center;   /* allinea verticalmente se hanno altezze diverse */
}

/* 2) Fai in modo che si dividano equamente lo spazio orizzontale */
.btn-row .btn-back {
  flex: 1 1 0;           /* grow e shrink attivi, basis 0 -> larghezze uguali */
  justify-content: center; /* centra testo e icona orizzontalmente */
}
/* layout orizzontale per le riga-componenti */
.riga-componenti {
  display: flex;
  gap: 12px;
  align-items: flex-end;  /* etichette + input/select allineati alla linea di base */
  margin-bottom: 20px;
}

/* prima colonna: input numerico */
.riga-componenti .col-quantita {
  flex: 0 0 80px;        /* larghezza fissa per 4 caratteri */
  display: flex;
  flex-direction: column;
}
.riga-componenti .col-quantita input {
  width: 100%;
  box-sizing: border-box;
  text-align: right;     /* allinea i numeri a destra */
}

/* seconda colonna: select esteso */
.riga-componenti .col-selezione {
  flex: 1;               /* prende il resto dello spazio */
  display: flex;
  flex-direction: column;
}
.riga-componenti .col-selezione select {
  width: 100%;
  box-sizing: border-box;
}
/* fa sì che il pulsante ✕ stia sempre sopra e sia cliccabile */
.btn-delete-image {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 10;          /* stai sopra all’iframe/link */
  pointer-events: auto; /* riattiva il click sul bottone */
  background: rgba(255,0,0,0.7);
  color: #fff;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
}
.preview-item {
  position: relative;
  border: 1px solid #ccc;
  border-top: 4px solid #0074cc;
  margin: 6px;
  overflow: hidden;
  background: #fff;
}

.preview-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: rgba(0,0,0,0.05);
}

.btn-delete-image {
  position: absolute;
  top: 2px; right: 4px;
  z-index: 10;
  pointer-events: auto;
  background: rgba(255,0,0,0.8);
  color: #fff;
  border: none;
  padding: 0 6px;
  cursor: pointer;
}

.preview-link {
  display: block;
  padding-top: 4px;
}

.preview-content {
  display: block;
  width: 200px;
  height: 260px;
  border: none;
}
/* Fai sì che il link non catturi i click */
.preview-link {
  pointer-events: none;
  position: relative;  /* per mantenere il link sopra il background */
  z-index: 1;
}

/* Riattiva i click sul bottone ✕ e mettilo in primo piano */
.preview-header,
.btn-delete-image {
  pointer-events: auto !important;
  z-index: 2 !important;
}
/* 1) Assicuriamoci che il wrapper sia un contesto per lo stacking */
.preview-item {
  position: relative; /* già dovresti averlo, ma confermiamo */
}

/* 2) La barra superiore (preview-header) deve stare sempre in primo piano */
.preview-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;           /* più alto di qualsiasi altra cosa */
  pointer-events: none;   /* lascia passare il click tranne sul bottone */
}

/* 3) Il bottone X deve poter ricevere i click e rimanere sopra */
.preview-header .btn-delete-image {
  pointer-events: auto;   /* riattiva i click sul bottone */
  z-index: 11;            /* ancora sopra alla barra */
}

/* 4) Il link e il suo contenuto non devono interferire con i click */
.preview-link,
.preview-content {
  pointer-events: none;   /* tutto il link/iframe/img lascia passare i click */
  position: relative;     /* per rispetto dello stacking */
  z-index: 1;             /* molto sotto la preview-header */
}
/* 1) Container a griglia: riga 1=header, riga 2=anteprima */
.preview-item {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 200px;             /* fissa come prima */
  margin: 6px;
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 2) Header separato, in alto a destra, con sfondo bianco */
.preview-header {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;        /* sposta il bottone a destra */
  background: #fff;
  padding: 4px;
  z-index: 2;               /* sopra la preview */
}

/* 3) Rendi cliccabile solo il pulsante X */
.preview-header .btn-delete-image {
  background: rgba(255,0,0,0.8);
  color: #fff;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.9em;
}

/* 4) La preview-link e il suo contenuto non intercettano i click */
.preview-link,
.preview-content {
  grid-row: 2;
  grid-column: 1;
  pointer-events: none;     /* lascia passare i click al bottone */
  width: 100%;
  height: 260px;            /* fissa come prima */
  border: none;
  background: #fff;
}
.delete-zone.highlight {
  background: rgba(255,0,0,0.1) !important;
  border-color: #a00 !important;
}
/* Kanban Board */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
}
.kanban-column {
  flex: 1 0 200px;       /* larghezza minima, ma può allargarsi */
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem;
}
.kanban-column h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.column-cards {
  min-height: 300px;     /* spazio per droppable area */
}
.kanban-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: none;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: grab;
}
.kanban-card:active {
  cursor: grabbing;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-actions .btn-dashboard {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  height: 2.6em;
  line-height: 2.6em;
}



.form-actions .btn-dashboard {
  /* Disposizione interna */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;        /* Spazio tra icona e testo */
  
  /* Dimensioni */
  flex: 1;
  height: 2.6em;
  
  /* Testo */
  white-space: nowrap;
  padding: 0 0.75em; /* Orizzontalmente un po’ di padding */
  
  /* Rimuovi line-height */
  line-height: normal;
}
/* nel tuo style.css */
.btn-row {
  display: flex;
  gap: 1rem;              /* spazio fra i bottoni */
}

.btn-row .btn-back {
  flex: 1;                /* ognuno prende metà dello spazio disponibile */
  text-align: center;
  white-space: nowrap;    /* non spezza la riga */
}
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;         /* spazio orizzontale tra i due bottoni */
  width: 30%;       /* occupa tutta la larghezza del form */
  box-sizing: border-box;
}

.btn-row .btn-back {
  white-space: nowrap;  /* non spezza mai il testo su più righe */
  text-align: center;   /* allinea il testo al centro del bottone */
}
/* Contenitore shrink-wrap che allinea i bottoni in orizzontale */
.form-actions {
  display: inline-flex;     /* shrink-wrap sul contenuto */
  gap: 0.5rem;              /* spazio orizzontale */
  align-items: stretch;     /* stretch in altezza */
  margin-bottom: 1.5rem;    /* un po’ di spazio sotto */
}

/* I bottoni prendono la stessa larghezza e altezza */
.form-actions .btn-back {
  flex: 1;                  /* same width per entrambi */
  display: inline-flex;     /* per centrare icona+testo */
  align-items: center;
  justify-content: center;
  white-space: nowrap;      /* mai andare a capo */
  
  /* altezza fissa: regola se ti serve più alta/bassa */
  height: 2.8em;            
  
  /* padding orizzontale: regola se vuoi più o meno spazio */
  padding: 0 1rem;          
  
  /* opzionale: per uniformità di font e bordo */
  font-size: 1em;
  font-weight: bold;
}

/* margine orizzontale sulla kanban page */
.kanban-board {
  margin: 0 20px;         /* 20px a destra e a sinistra */
}

/* opzionale: se vuoi spingere anche il filtro  */
.kanban-filters {         /* o il contenitore che include select+button */
  margin: 0 20px 1rem;
}
.col-quarta .attachment-preview {
  margin-bottom: 1rem;
}
.col-quarta .attachment-preview strong {
  display: block;
  margin-bottom: 0.5rem;
}
.col-quarta .missing {
  color: #d00;
  font-style: italic;
}
.col-quarta .preview-thumb {
  display: block;
  max-width: 100%;
  max-height: 80px;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
}
.col-quarta .preview-pdf {
  display: block;
  width: 100%;
  height: 80px;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
}
.col-quarta .attachment-preview {
  margin-bottom: 1rem;
}
.col-quarta .attachment-preview strong {
  display: block;
  margin-bottom: .25rem;
}
.col-quarta .missing {
  color: #d00;
  font-style: italic;
}
.col-quarta .preview-thumb {
  max-width: 100%;
  max-height: 80px;
  border: 1px solid #ccc;
  margin-top: .25rem;
}
.col-quarta .preview-pdf {
  width: 100%;
  height: 80px;
  border: 1px solid #ccc;
  margin-top: .25rem;
}
/* override per rendere cliccabili solo i preview della drop-zone */
#preview-gallery .preview-link,
#preview-gallery .preview-content {
  pointer-events: auto !important;
}
#preview-gallery a iframe {
  pointer-events: none;
}
#preview-gallery a {
  pointer-events: auto;
}
/* Card specifica per i documenti nella colonna “DOC.” */
.doc-card {
  background-color: #fff;                        /* sfondo bianco */
  padding: 0.75em 1em;                           /* spazio interno */
  margin-bottom: 1em;                            /* separazione tra card */
  border-radius: 6px;                            /* angoli arrotondati */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);          /* leggera ombra */
  display: flex;
  flex-direction: column;
  gap: 0.5em;                                    /* spazio tra titolo e contenuto */
}

/* Allinea il titolo in alto */
.doc-card > strong {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}

/* Se ci sono immagini o iframe, non mettono scrollbars */
.doc-card img,
.doc-card iframe {
  max-width: 100%;
  height: auto;
  border: none;
  overflow: hidden;
}


/* wrapper che mette h3+checkbox sulla stessa riga */
.col-terza .header-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;        /* spazio tra titolo e checkbox */
  margin-bottom: 1rem; /* spazio sotto tutta la riga */
}

/* rimuoviamo eventuali margin-top residui sulla label */
.col-terza .header-inline .checkbox-label {
  margin: 0 !important;
}
/* Assicuriamoci che il container flex centri in verticale */
.col-terza .header-inline {
  display: flex;
  align-items: center;   /* <-- centra h3 e checkbox-label sulla stessa linea */
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Rimuoviamo i margin dell’h3 che lo sbilanciano in alto */
.col-terza .header-inline h3 {
  margin: 0;
  padding: 0;
  font-size: 1.25em;      /* o la dimensione che già usavi */
}

/* (già ce l’hai) */
.col-terza .header-inline .checkbox-label {
  margin: 0 !important;
}
.riga-doppia-colonna h3 {
  margin: 0 0 1rem;       /* niente margin-top, 1rem sotto */
  font-size: 1.25em;      /* o la dimensione che preferisci */
}


/* Header Impianto: flex, allineamento verticale */
.col-terza-header-grid {
  display: flex;
  align-items: center;     /* allinea titolo e checkbox sulla stessa linea/base */
  gap: 0.75rem;            /* spazio orizzontale tra titolo e checkbox */
  margin-bottom: 1rem;     /* spazio sotto l’header prima dei campi */
}

/* Rimuoviamo margin/line-height predefiniti che potrebbero sbilanciare */
.col-terza-header-grid h3 {
  margin: 0;
  line-height: 1;          /* assicura che l’altezza linea non spinga la checkbox */
  font-size: 1.25rem;
}

.col-terza-header-grid .checkbox-label {
  margin: 0;
  /* se vuoi ridurre un po’ l’altezza: */
  line-height: 1;
}
.stats-panel {
  position: sticky;
  text-align: left;
  background: #fff;     /* sfondo bianco per coprire eventuali elementi dietro */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;          /* sopra gli altri contenuti */
}
.stats-panel {
  position: fixed;
  bottom: 20px;   /* distanza dal fondo della finestra */
  left: 20px;     /* distanza dal bordo sinistro della finestra */
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 1000;  /* stacca il pannello sopra gli altri contenuti */
}
.row-note {
  background-color: rgba(247, 185, 36, 0.2);
}

.heatmap-table {
  table-layout: auto;
  width: 800px;       /* o qualsiasi valore ti serva */
  min-width: 800px;   /* assicura che non si riduca di più */
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.heatmap-table th,
.heatmap-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;

  /* ogni colonna occupa 1/7 della tabella */
  width: 14.2857%;
  white-space: nowrap;    /* impedisce il wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* tronca con “…” se troppo lungo */
}

.heatmap-table th {
  background: #f0f0f0;
}
/* wrapper specifico per heatmap_installatori.php */
.heatmap-wrapper {
  max-width: 1200px;    /* allarga fin dove ti serve */
  margin: 0 auto;       /* centra orizzontalmente */
}
/* overlay del modal — nascosto di default */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* contenitore del modal */
.modal-window {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* quando aggiungi .active, l’overlay diventa visibile */
.modal-overlay.active {
  display: flex;
}
/* overlay (rimane lo stesso) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* contenitore della finestra: più padding e arrotondato */
.modal-window {
  background: #fff;
  padding: 2rem;              /* aumentato da 1.5rem */
  border-radius: 0.75rem;     /* leggermente più arrotondato */
  max-width: 480px;           /* leggermente più stretto */
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: relative;
}

/* titolo: margine inferiore */
.modal-window h5 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

/* contenuto testo: margini e scroll se molto lungo */
#modalNoteContent {
  margin-bottom: 1.5rem;
  line-height: 1.5;
  max-height: 300px;      /* evita che diventi troppo lungo */
  overflow-y: auto;
  white-space: pre-wrap;
}

/* pulsante OK: centrato e più grande */
#modalOk {
  display: block;
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 0.375rem;
}

/* mostra il modal */
.modal-overlay.active {
  display: flex;
}
.modal-window {
  background: #fff;
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: relative;

  /* Nuova regola per altezza minima */
  min-height: 200px;
  
  /* Centro verticale migliorato in caso di contenuto breve */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* sfondo arancione più intenso per la riga con nota */
.highlight-note,
.highlight-note td {
  background-color: rgba(255, 165, 0, 0.2) !important;
}

/* mantieni la stessa tonalità anche al passaggio del mouse */
.highlight-note:hover,
.highlight-note:hover td {
  background-color: rgba(255, 165, 0, 0.25) !important;
}

/* opzionale: cursore a mano per indicare che c’è clickabile */
.highlight-note:hover {
  cursor: pointer;
}

/* un contenitore orizzontale per due campi */
.form-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* un contenitore orizzontale per tre campi */
.form-row-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* due campi in orizzontale (Nome + Cognome) */
.form-row-2 {
  display: flex;
  gap: 1rem;
}
.form-row-2 .form-group {
  flex: 1;
  min-width: 0;           /* importante per far funzionare il flex in mobile */
}

/* tre campi Indirizzo: Sedime–Via–Civico con proporzioni 2-7-1 */
.form-row-address {
  display: grid;
  grid-template-columns: 2fr 7fr 1fr;
  gap: 0.5rem;
}
.form-row-address input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* rendi ogni form-group un blocco a tutta larghezza */
.form-group {
  display: block;
  width: 100%;
  margin-bottom: 1rem;  /* spazio fra i campi */
}

/* fai sì che input, select, textarea riempiano il form-group */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
}
.form-group {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.form-row-3 {
  display: flex;
  gap: 1rem;
}

.form-row-3 .form-group {
  flex: 1;
  min-width: 0;
}