/* ============================================================
   SAVOCA IMPIANTI · Sopralluoghi — foglio di stile
   Colori della carta intestata:
   rosso #E30613 · slate #535B73 · tan #DEB7A1 · beige #F7EADA
   ============================================================ */
:root {
  --rosso: #E30613;
  --rosso-scuro: #B00510;
  --slate: #535B73;
  --slate-scuro: #3E4457;
  --tan: #DEB7A1;
  --beige: #F7EADA;
  --sfondo: #F6F3EE;
  --carta: #FFFFFF;
  --testo: #282A30;
  --grigio: #8A8F9C;
  --bordo: #E4DFD7;
  --ok: #1F8A4C;
  --raggio: 12px;
  --ombra: 0 1px 3px rgba(40, 42, 48, .08), 0 4px 14px rgba(40, 42, 48, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  font-size: 16px;
  line-height: 1.45;
}

/* ---------------- barra superiore ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--carta);
  border-bottom: 3px solid var(--rosso);
  box-shadow: var(--ombra);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}
.brand img { height: 36px; display: block; }
.menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.menu a {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--slate);
  font-weight: 600;
  white-space: nowrap;
}
.menu a:hover { background: var(--beige); }
.menu a.attivo { background: var(--slate); color: #fff; }
.chi-sono { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nome-utente { font-weight: 600; color: var(--slate); font-size: 14px; }
.btn-esci {
  color: var(--rosso);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 10px;
  border: 1.5px solid var(--rosso);
  border-radius: 8px;
}
.btn-esci:hover { background: var(--rosso); color: #fff; }

/* ---------------- contenuto ---------------- */
.contenuto { max-width: 860px; margin: 0 auto; padding: 18px 14px 60px; }
.piede {
  text-align: center;
  color: var(--grigio);
  font-size: 12.5px;
  padding: 18px 10px 26px;
}
.testata-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
h1 { font-size: 24px; margin: 0; color: var(--slate-scuro); }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--slate); }
h2 small { color: var(--grigio); font-weight: 500; font-size: 13px; }
.evidenzia { color: var(--rosso); }

/* ---------------- pannelli ---------------- */
.pannello {
  background: var(--carta);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 16px;
  margin-bottom: 14px;
}

/* ---------------- moduli ---------------- */
label { display: block; font-weight: 600; color: var(--slate); font-size: 14px; margin-bottom: 10px; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel],
input[type=date], input[type=time], select, textarea {
  width: 100%;
  margin-top: 4px;
  padding: 11px 12px;
  font-size: 16px;
  border: 1.5px solid var(--bordo);
  border-radius: 9px;
  background: #fff;
  color: var(--testo);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(83, 91, 115, .15);
}
textarea { resize: vertical; }
.griglia2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.griglia3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) {
  .griglia2, .griglia3 { grid-template-columns: 1fr; }
}
.etichetta { font-weight: 700; color: var(--slate); font-size: 13.5px; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.riga-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.riga-check input { width: 20px; height: 20px; accent-color: var(--rosso); }
.riga-check.piccola { font-size: 13px; }
/* campo password con il pulsante «Mostra» accanto */
.campo-password { display: flex; align-items: stretch; gap: 6px; margin-top: 4px; }
.campo-password input { margin-top: 0; flex: 1; min-width: 0; }
.mostra-password {
  flex: 0 0 auto;
  min-width: 74px;
  padding: 0 12px;
  border: 1.5px solid var(--bordo);
  border-radius: 9px;
  background: var(--beige);
  color: var(--slate);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mostra-password:hover { filter: brightness(.96); }
.suggerimento { color: var(--grigio); font-size: 13.5px; margin: 6px 0; }
.suggerimento.centro { text-align: center; }

/* chip per checkbox/radio */
.gruppo-check { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 1.5px solid var(--bordo);
  border-radius: 999px;
  font-size: 14px;
  color: var(--slate);
  background: #fff;
  user-select: none;
}
.chip input:checked + span {
  background: var(--slate);
  border-color: var(--slate);
  color: #fff;
  font-weight: 700;
}

/* ---------------- pulsanti ---------------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 10px;
  transition: filter .15s;
}
.btn:hover { filter: brightness(.94); }
.btn-primario { background: var(--rosso); color: #fff; }
.btn-secondario { background: #fff; color: var(--slate); border: 1.5px solid var(--slate); }
.btn-pericolo { background: #fff; color: var(--rosso); border: 1.5px solid var(--rosso); }
.btn-tratteggiato {
  background: var(--beige);
  color: var(--slate);
  border: 1.5px dashed var(--tan);
  width: 100%;
}
.btn-largo { width: 100%; }
.btn-grande { padding: 15px 22px; font-size: 16px; }
.btn-mini { padding: 6px 10px; font-size: 13px; border-radius: 7px; background: var(--beige); color: var(--slate); }
.barra-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.barra-azioni.in-alto { margin: 0 0 16px; }
.barra-azioni .btn-grande { flex: 1; min-width: 180px; }
.inline { display: inline; }

/* ---------------- messaggi flash ---------------- */
.flash {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14.5px;
}
.flash-ok { background: #E7F5EC; color: var(--ok); border: 1px solid #BFE5CD; }
.flash-errore { background: #FDE9EA; color: var(--rosso-scuro); border: 1px solid #F5C2C5; }

/* ---------------- accesso ---------------- */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sfondo) 60%, var(--beige));
  padding: 20px;
}
.scatola-login {
  background: var(--carta);
  border-radius: 16px;
  border-top: 5px solid var(--rosso);
  box-shadow: var(--ombra);
  padding: 30px 26px;
  width: 100%;
  max-width: 400px;
}
.logo-login { display: block; margin: 0 auto 8px; max-width: 210px; }
.scatola-login h1 { text-align: center; font-size: 19px; color: var(--slate); margin: 0 0 18px; }

/* ---------------- dashboard ---------------- */
.riquadri-conta { display: flex; gap: 10px; margin-bottom: 14px; }
.conta {
  flex: 1;
  background: var(--carta);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-align: center;
  padding: 12px 6px;
  font-size: 13px;
  color: var(--grigio);
  font-weight: 600;
}
.conta span { display: block; font-size: 24px; font-weight: 800; color: var(--slate-scuro); }
.conta-bozza span { color: var(--tan); }
.conta-ok span { color: var(--ok); }

.filtri { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtri input[type=search] { flex: 2; min-width: 180px; margin: 0; }
.filtri select { flex: 1; min-width: 140px; margin: 0; width: auto; }
.filtri .btn { padding: 10px 16px; }

.lista-sopralluoghi { display: flex; flex-direction: column; gap: 10px; }
.scheda {
  display: block;
  background: var(--carta);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 13px 15px;
  text-decoration: none;
  color: var(--testo);
  border-left: 4px solid var(--tan);
}
.scheda:hover { border-left-color: var(--rosso); }
.scheda-riga1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.numero { font-weight: 800; color: var(--slate); font-size: 13.5px; }
.scheda-cliente { font-weight: 700; font-size: 16.5px; }
.scheda-sotto { color: var(--grigio); font-size: 13.5px; }
.scheda-piede { color: var(--grigio); font-size: 13px; margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}
.badge-ok { background: #E7F5EC; color: var(--ok); }
.badge-bozza { background: var(--beige); color: #A8794F; }
.vuoto { text-align: center; padding: 50px 10px; color: var(--grigio); }

/* ---------------- tabelle ---------------- */
.scorri-tabella { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scorri-tabella .tabella { min-width: 560px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabella th {
  text-align: left;
  background: var(--tan);
  color: #fff;
  padding: 9px 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tabella td { padding: 9px 10px; border-bottom: 1px solid var(--bordo); }
.riga-spenta { opacity: .5; }
.celle-azioni { white-space: nowrap; text-align: right; }
.celle-azioni form { margin-left: 4px; }

/* ---------------- materiali ---------------- */
.tabella-materiali { margin-bottom: 10px; }
.mat-intestazione, .mat-riga {
  display: grid;
  grid-template-columns: 90px 1fr 110px 38px;
  gap: 6px;
  align-items: center;
}
.mat-intestazione {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--tan);
  border-radius: 8px;
  padding: 7px 8px;
  margin-bottom: 6px;
}
.mat-intestazione span:last-child { display: none; }
.mat-riga { margin-bottom: 6px; }
.mat-riga input { margin: 0; padding: 9px 10px; font-size: 15px; }
.mat-elimina {
  border: none;
  background: var(--beige);
  color: var(--rosso);
  font-size: 20px;
  font-weight: 800;
  border-radius: 8px;
  height: 40px;
  cursor: pointer;
}
@media (max-width: 560px) {
  .mat-intestazione { display: none; }
  .mat-riga {
    grid-template-columns: 80px 1fr 34px;
    grid-template-areas: "q d x" "c c x";
  }
  .mat-riga input:nth-child(1) { grid-area: q; }
  .mat-riga input:nth-child(2) { grid-area: d; }
  .mat-riga input:nth-child(3) { grid-area: c; }
  .mat-riga .mat-elimina { grid-area: x; height: 100%; }
  .mat-riga { border-bottom: 1px dashed var(--bordo); padding-bottom: 6px; }
}

/* ---------------- foto ---------------- */
#input-foto { display: none; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0; }
.foto-box { margin: 0; }
.foto-box img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 9px;
  border: 1.5px solid var(--bordo);
  display: block;
}
.foto-box input { font-size: 13px; padding: 7px 8px; }
.foto-box figcaption { font-size: 12.5px; color: var(--grigio); margin-top: 3px; }

/* ---------------- autocompletamento rubrica ---------------- */
.campo-autocompleta { position: relative; }
.suggerimenti {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 40;
  background: #fff;
  border: 1.5px solid var(--bordo);
  border-radius: 10px;
  box-shadow: var(--ombra);
  overflow: hidden;
  margin-top: 3px;
}
.suggerimenti.aperto { display: block; }
.suggerimenti button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--testo);
  cursor: pointer;
}
.suggerimenti button:last-child { border-bottom: 0; }
.suggerimenti button:hover, .suggerimenti button:focus { background: var(--beige); }
.suggerimenti small { color: var(--grigio); font-size: 12.5px; }

/* ---------------- firma ---------------- */
.firma-contenitore {
  border: 2px dashed var(--tan);
  border-radius: 10px;
  background: #FFFDF9;
  position: relative;
}
.canvas-firma { width: 100%; height: 170px; display: block; touch-action: none; border-radius: 8px; }
.firma-azioni { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.firma-anteprima {
  max-width: 260px;
  max-height: 110px;
  border: 1.5px solid var(--bordo);
  border-radius: 8px;
  background: #fff;
  display: block;
}

/* ---------------- dettaglio ---------------- */
.dettagli { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; margin: 0; font-size: 15px; }
.dettagli dt { font-weight: 700; color: var(--slate); font-size: 13.5px; }
.dettagli dd { margin: 0 0 6px; }
@media (max-width: 560px) { .dettagli { grid-template-columns: 1fr; } .dettagli dd { margin-bottom: 10px; } }
.testo-lungo { background: var(--sfondo); border-radius: 9px; padding: 12px; margin: 4px 0 10px; white-space: pre-line; }
code { background: var(--beige); padding: 1px 6px; border-radius: 5px; font-size: .92em; }