/* Ietogrammi di progetto - GeoStru. Schermo e stampa (la relazione e' la pagina stessa). */
:root {
  --verde: #2e7d32;
  --verde-scuro: #1b5e20;
  --blu: #1565c0;
  --grigio: #555;
  --bordo: #d5dbd5;
  --sfondo: #f4f6f4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #222; background: var(--sfondo); }

/* barra in alto */
.topbar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #fff; border-bottom: 2px solid var(--verde); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.gs-brand { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.gs-g { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: bold; font-size: 18px; align-items: center; justify-content: center; }
.gs-name { font-weight: bold; font-size: 18px; letter-spacing: -0.3px; }
.gs-name span:first-child { color: var(--verde); }
.gs-name span:last-child { color: var(--blu); }
.app-name { font-size: 16px; color: #333; flex: none; margin-right: 6px; }
.tb-azioni { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-azioni button { padding: 7px 12px; border: 1px solid var(--verde); background: #fff; color: var(--verde); border-radius: 6px; font-size: 14px; cursor: pointer; }
.tb-azioni button.tb-primario { background: var(--verde); color: #fff; }
.tb-azioni button:hover { background: #e8f5e9; }
.tb-azioni button.tb-primario:hover { background: var(--verde-scuro); }
.tb-info { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--verde); background: #fff; color: var(--verde); font-size: 17px; font-weight: bold; cursor: pointer; }
.tb-info:hover { background: #e8f5e9; }

.pagina { max-width: 1400px; margin: 0 auto; padding: 14px; }
.colonne { display: grid; grid-template-columns: minmax(320px, 470px) 1fr; gap: 14px; }
.colonna { min-width: 0; }
@media (max-width: 900px) { .colonne { grid-template-columns: 1fr; } }

.riquadro { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.riquadro h2 { font-size: 16px; margin: 0 0 8px; color: var(--verde-scuro); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aiuto { font-weight: normal; color: var(--grigio); font-size: 12.5px; }
.nota { color: var(--grigio); font-size: 12.5px; margin: 8px 0 0; line-height: 1.4; }
.campi-lavoro label { display: block; margin: 4px 0; font-size: 13px; color: var(--grigio); }
.campi-lavoro input { width: 100%; padding: 7px 8px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }

button { font-family: inherit; }
button.primario { background: var(--verde); color: #fff; border: 1px solid var(--verde); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
#aggiungi, #stima-aggiungi, #stima-nuovo { padding: 7px 12px; border: 1px solid var(--verde); background: #fff; color: var(--verde); border-radius: 6px; cursor: pointer; font-size: 14px; }

/* scenari */
.scenario { border: 1px solid var(--bordo); border-left: 4px solid var(--verde); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; background: #fafcfa; }
.sc-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-numero { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 12px; align-items: center; justify-content: center; flex: none; }
.sc-nome { flex: 1 1 auto; min-width: 0; padding: 5px 7px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-weight: bold; }
.sc-bottoni { display: flex; gap: 4px; }
.sc-bottoni button { padding: 4px 8px; border: 1px solid #bbb; background: #fff; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.sc-bottoni .sc-elimina { color: #b3261e; border-color: #e0b4b0; font-size: 15px; line-height: 1; }
/* due gruppi affiancati (curva | evento); in ogni riga etichetta a larghezza fissa, casella, unità */
.sc-campi { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; }
.sc-gruppo label { display: grid; grid-template-columns: 60px 72px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; color: var(--grigio); white-space: nowrap; }
.sc-gruppo label[hidden] { display: none; }
.sc-eti { text-align: right; }
.sc-um { white-space: normal; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.sc-campi input[type=number] { width: 72px; padding: 5px 6px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }
.sc-campi select { grid-column: 2 / -1; width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid #bbb; border-radius: 5px; font-size: 13px; }
.sc-riga { font-size: 12.5px; color: var(--grigio); margin-top: 4px; }

/* risultati */
.ris { border-bottom: 1px solid var(--bordo); padding: 8px 0 12px; margin-bottom: 8px; page-break-inside: avoid; }
.ris:last-child { border-bottom: 0; }
.ris-testa { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.ris-forma { color: var(--grigio); font-size: 12.5px; }
.ris-numeri { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 6px; font-size: 13px; color: #333; }
.ris-numeri b { color: var(--verde-scuro); }
.ris-avviso { background: #fff8e1; border-left: 4px solid #f9a825; padding: 5px 8px; font-size: 12.5px; margin-bottom: 6px; }
.ris-errore { background: #fdecea; border-left: 4px solid #b3261e; padding: 8px 10px; font-size: 13px; }

.ieto-svg { width: 100%; height: auto; display: block; }
.ieto-griglia { stroke: #e3e7e3; stroke-width: 1; }
.ieto-asse { stroke: #666; stroke-width: 1; }
.ieto-tacca { font-size: 11px; fill: #555; }
.ieto-tacca-h { fill: var(--blu); }
.ieto-etichetta { font-size: 11px; fill: #444; }
.ieto-barra { fill: #66bb6a; stroke: #2e7d32; stroke-width: 0.5; }
.ieto-barra.ieto-picco { fill: #2e7d32; }
.ieto-cumulata { fill: none; stroke: var(--blu); stroke-width: 2; }

/* tabelle */
.scorri { overflow-x: auto; }
.tab { border-collapse: collapse; width: 100%; font-size: 13px; }
.tab th, .tab td { border: 1px solid #ccc; padding: 4px 7px; text-align: right; white-space: nowrap; }
.tab th { background: #eef3ee; text-align: center; }
.tab td:nth-child(2) { text-align: left; }
#tabella td:nth-child(2) { text-align: right; }
.tab tr.picco td { background: #e8f5e9; font-weight: bold; }
.tab tfoot th { text-align: right; }
.tab-piccola { width: auto; margin-top: 6px; }
.tab-piccola td { text-align: right; }
.tab-stima { border-collapse: collapse; }
.tab-stima th { font-weight: normal; color: var(--grigio); font-size: 12.5px; padding: 2px 6px; }
.tab-stima td { padding: 2px 4px; }
.tab-stima input { width: 90px; padding: 5px 6px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }
.tab-stima button { border: 1px solid #e0b4b0; color: #b3261e; background: #fff; border-radius: 5px; cursor: pointer; }
#tabella-scenario { font-size: 13px; padding: 4px 6px; border: 1px solid #bbb; border-radius: 5px; }
.esito { background: #f1f8e9; border-left: 4px solid var(--verde); padding: 8px 10px; margin-top: 8px; font-size: 13.5px; }
.esito .attenzione { color: #b3261e; }

#engsoft-footer { text-align: center; color: var(--grigio); font-size: 12px; padding: 12px 0 4px; }
#engsoft-footer a { color: var(--verde); text-decoration: none; }
#engsoft-footer .sep { margin: 0 6px; opacity: 0.5; }

#avviso { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); background: rgba(40,40,40,0.92); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 20; }

/* telefono: i campi dello scenario su una colonna (la seconda usciva dallo schermo).
   Sta dopo le regole base, se no la .sc-campi a due colonne vince lo stesso. */
@media (max-width: 520px) {
  .pagina { padding: 8px; }
  .riquadro { padding: 10px; }
  .sc-campi { grid-template-columns: 1fr; }
  .tb-azioni button { padding: 6px 9px; font-size: 13px; }
}

/* finestre Salva / Esporta e ? */
#dialogo-file, #dialogo-info { border: 1px solid var(--bordo); border-radius: 10px; padding: 16px 18px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 8px 30px rgba(0,0,0,0.25); font-size: 13.5px; line-height: 1.45; }
#dialogo-info { width: min(560px, calc(100vw - 32px)); }
#dialogo-file::backdrop, #dialogo-info::backdrop { background: rgba(0,0,0,0.35); }
#dialogo-file h3, #dialogo-info h3 { margin: 0 0 10px; font-size: 16px; color: var(--verde-scuro); }
#dialogo-info p { margin: 0 0 8px; }
#dialogo-info a { color: var(--verde); }
#df-formato label { display: block; margin: 4px 0; }
#df-formato { margin-bottom: 10px; }
.df-nome { display: block; font-size: 13px; color: var(--grigio); margin-top: 6px; }
.df-riga { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
#df-nome { flex: 1 1 auto; min-width: 0; padding: 7px 8px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }
#df-est { color: var(--grigio); font-size: 14px; }
.df-bottoni { display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 0; }
#df-annulla { padding: 7px 12px; border: 1px solid #bbb; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; }

.solo-stampa { display: none; }

/* stampa: la relazione. Via i comandi, restano scenari (riga riassuntiva),
   risultati, confronto, tabella dei blocchi e metodo */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11px; }
  .topbar, .no-stampa, #engsoft-footer, #avviso, .sc-bottoni, .sc-campi { display: none !important; }
  .solo-stampa { display: block; }
  .pagina { max-width: none; padding: 0; }
  .colonne { display: block; }
  .riquadro { border: 0; padding: 0; margin: 0 0 6mm; }
  .riquadro h2 { font-size: 13px; border-bottom: 1px solid #999; padding-bottom: 1mm; }
  .intestazione { border-bottom: 2px solid var(--verde); margin-bottom: 4mm; padding-bottom: 2mm; }
  .intestazione h1 { font-size: 18px; margin: 0 0 2mm; }
  .intestazione .campo { margin: 1mm 0; }
  .scenario { border: 0; border-left: 3px solid var(--verde); padding: 1mm 3mm; margin-bottom: 2mm; background: none; page-break-inside: avoid; }
  .sc-nome { border: 0; padding: 0; background: none; font-size: 12px; }
  .ris { page-break-inside: avoid; }
  .ieto-svg { max-height: 75mm; }
  .tab { font-size: 10px; }
  .tab th, .tab td { padding: 1mm 1.5mm; }
  .nota { font-size: 9.5px; }
}