/* Sun Solar CRM - un solo foglio di stile, mobile-first. Colori e font del sito www.sunsolarsrl.it. */

/* font ospitati in assets/fonts (vedi LEGGIMI.txt): Questrial per i titoli, Roboto per il testo */
@font-face { font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/questrial-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/roboto-latin-variabile.woff2") format("woff2"); }

:root {
  --oro: #d9a441;          /* accento del sito (voce di menu attiva) */
  --oro-scuro: #966c1e;    /* bronzo dei titoli del sito: titoli, link, pulsanti principali */
  --oro-scurissimo: #7a5718;
  --oro-chiaro: #fbf3e2;   /* fondo tenue degli elementi attivi */
  --grafite: #424242;      /* piede del sito */
  --testata: #f6f4ef;
  --sfondo: #ffffff;
  --carta: #ffffff;
  --grigio: #f2f2f2;       /* fondo delle sezioni del sito */
  --testo: #424242;
  --testo-debole: #6d6d6d;
  --bordo: #e0e0e0;
  --ok: #2e7d32;
  --errore: #c62828;
  --titolo: #424242;       /* titolo delle pagine */
  --avviso: #ef6c00;
  --raggio: 10px;
  --menu-larghezza: 220px;
  --barra-altezza: 60px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font: 16px/1.45 "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: var(--oro-scuro); text-decoration: none; }
h1, h2, h3 { margin: 1.2em 0 .5em; line-height: 1.2; font-family: "Questrial", "Roboto", sans-serif; font-weight: 400; }
h1 { font-size: 1.3rem; color: var(--titolo); font-weight: 600; } h2 { font-size: 1.15rem; color: var(--oro-scuro); text-transform: uppercase; letter-spacing: .04em; }
.ico { width: 22px; height: 22px; flex: none; }

/* testata */
.testata {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 12px; background: var(--testata); color: var(--testo); border-bottom: 1px solid var(--bordo);
}
.testata .marchio img { height: 40px; display: block; border-radius: 6px; }
.testata .spazio { flex: 1; }
/* titolo della pagina nel contenuto: compatto, soprattutto su telefono */
h1.titolo-pagina { margin: 2px 0 10px; }
.testata .utente { display: none; align-items: center; gap: 8px; font-size: .9rem; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.2;
  background: var(--grigio); color: var(--testo-debole); border: 1px solid var(--bordo); }
.chip-oro { background: var(--oro-chiaro); color: var(--oro-scuro); border-color: #ecd3a0; }
.btn-menu, .btn-icona { background: none; border: 0; color: var(--grafite); padding: 6px; cursor: pointer; display: inline-flex; }
.btn-menu:hover, .btn-icona:hover { color: var(--oro-scuro); }
.btn-icona { display: none; }

/* menu laterale (desktop) / a comparsa (mobile) */
.menu {
  position: fixed; top: 56px; left: 0; bottom: 0; width: var(--menu-larghezza); z-index: 15;
  background: var(--carta); border-right: 1px solid var(--bordo); padding: 10px 0; overflow-y: auto;
  transform: translateX(-100%); transition: transform .2s;
}
.menu.aperto { transform: none; box-shadow: 0 0 0 100vw rgba(0,0,0,.35); }
.menu a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--testo); }
.menu a.attiva { color: var(--oro-scuro); font-weight: 600; background: var(--oro-chiaro); border-right: 3px solid var(--oro); }
.menu a:hover { background: var(--grigio); }

/* barra in basso (solo telefono) */
.barra-bassa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--barra-altezza) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--carta); border-top: 1px solid var(--bordo);
}
.barra-bassa a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; color: var(--testo-debole); }
.barra-bassa a.attiva { color: var(--oro-scuro); }
.barra-bassa a.principale .ico { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--oro); color: #fff; margin-top: -18px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* contenuto */
.contenuto { padding: 12px 16px calc(var(--barra-altezza) + env(safe-area-inset-bottom) + 16px); }   /* nessun limite di larghezza: su desktop le pagine usano tutto lo schermo */
body.senza-menu .contenuto { padding-bottom: 16px; }

/* avvisi */
.avviso { position: relative; padding: 10px 44px 10px 14px; border-radius: var(--raggio); margin: 8px 0 12px; border: 1px solid; }
.avviso-chiudi { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none;
  color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%; opacity: .7; }
.avviso-chiudi:hover { opacity: 1; background: rgba(0,0,0,.06); }
.avviso-ok { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.avviso-errore { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.avviso-avviso { background: #fff3e0; border-color: #ffcc80; color: #e65100; }

/* pulsanti e campi */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--raggio);
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); font: inherit; cursor: pointer; min-height: 44px;
}
.btn:hover { background: var(--grigio); }
.btn-primario { background: var(--oro-scuro); border-color: var(--oro-scuro); color: #fff; font-weight: 600; }
.btn-primario:hover { background: var(--oro-scurissimo); border-color: var(--oro-scurissimo); }
.btn-pericolo { color: var(--errore); border-color: #ef9a9a; }
.btn-cestino { padding: 6px; width: 36px; justify-content: center; }   /* solo icona cestino ("Togli riga") */
.btn-cestino .ico { width: 20px; height: 20px; }
@media (pointer: coarse) { .btn-cestino { width: 44px; } }
.btn-largo { width: 100%; justify-content: center; }
.btn-piccolo { padding: 6px 10px; min-height: 34px; font-size: .9rem; }
.azioni-rapide { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
label { display: block; margin: 10px 0; font-size: .9rem; color: var(--testo-debole); }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta); min-height: 44px;
}
textarea { resize: vertical; }   /* si allunga solo in altezza: non sfonda la larghezza del modulo */
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--oro); }
input[type=checkbox], input[type=radio] { display: inline; width: auto; min-height: 0; margin-right: 6px; }
.campi { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.campi label { margin: 6px 0; }

/* KPI */
.kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi-box { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; display: flex; flex-direction: column; }
.kpi-valore { font-size: 1.5rem; font-weight: 700; }
.kpi-etichetta { font-size: .8rem; color: var(--testo-debole); }
.kpi-admin { border-color: var(--oro); }

/* liste (telefono) */
.lista { display: flex; flex-direction: column; gap: 8px; }
.riga { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titolo destra" "sotto destra"; gap: 2px 10px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 14px; color: var(--testo); }
.riga:hover { border-color: var(--oro); }
.riga-titolo { grid-area: titolo; font-weight: 600; }
.riga-sotto { grid-area: sotto; font-size: .85rem; color: var(--testo-debole); }
.riga-destra { grid-area: destra; text-align: right; font-size: .9rem; align-self: center; }
.vuoto { color: var(--testo-debole); background: var(--carta); border: 1px dashed var(--bordo); border-radius: var(--raggio); padding: 20px; text-align: center; }

/* stati */
.stato { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; background: #eee; }
.stato-bozza { background: #eceff1; color: #455a64; }
.stato-inviato { background: #e3f2fd; color: #1565c0; }
.stato-accettato { background: #e8f5e9; color: #2e7d32; }
.stato-rifiutato { background: #ffebee; color: #c62828; }
.stato-annullato { background: #f5f5f5; color: #9e9e9e; text-decoration: line-through; }

/* tabelle (desktop) */
.tabella { width: 100%; border-collapse: collapse; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.tabella th, .tabella td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella th { background: var(--grigio); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--testo-debole); }
.tabella td.num, .tabella th.num { text-align: right; white-space: nowrap; }
.scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* login */
/* sfondo fotografico (impianto, accumuli) con un velo scuro per leggere il riquadro; "fixed" su desktop, normale su telefono */
body.pagina-login { min-height: 100vh; background: linear-gradient(rgba(20, 20, 20, .35), rgba(20, 20, 20, .55)), url(login-sfondo.webp) center / cover no-repeat; }
@media (min-width: 900px) { body.pagina-login { background-attachment: fixed; } }
body.pagina-login .contenuto { margin-left: 0; }
.login-box { max-width: 380px; margin: 8vh auto; background: rgba(255, 255, 255, .94); border: 1px solid var(--bordo); border-radius: 14px; padding: 28px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.login-logo { display: block; width: 200px; margin: 0 auto 10px; }
.login-box h1 { text-align: center; font-size: 1.2rem; color: var(--testo-debole); font-weight: 500; margin-top: 0; }

/* intestazione di pagina, filtri, moduli */
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.intestazione h1 { margin: 0; font-size: 1.3rem; }
.filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 16px; }
/* Home: due pulsanti alternativi sopra i riquadri (preventivi nel mese / nell'anno); quello scelto è in oro */
.scelta-periodo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.scelta-periodo + .kpi { margin-top: 16px; }   /* spazio tra i pulsanti e i riquadri, anche se il margine sopra venisse azzerato */
.filtri input, .filtri select { flex: 1 1 180px; width: auto; margin: 0; }
.modulo { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 4px 16px 16px; margin-bottom: 16px; }
.modulo h2 { margin-top: .9em; }
.azioni-modulo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.azioni-modulo .a-destra { margin-left: auto; }
/* riga a gruppi: sinistra / destra (es. fondo della scheda preventivo) */
.azioni-tre { justify-content: space-between; align-items: flex-end; }   /* i pulsanti di destra allineati alla riga dei pulsanti, non alla nota sopra */
.azioni-gruppo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.azioni-gruppo.con-nota { flex-direction: column; align-items: flex-start; gap: 4px; }
h2 .nota-titolo { font-size: .8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--testo-debole); }   /* nota accanto al titolo di sezione */
label.casella { display: flex; align-items: center; min-height: 44px; color: var(--testo); }
.aiuto { display: block; font-size: .8rem; color: var(--testo-debole); margin-top: 2px; }
.testo-debole { color: var(--testo-debole); }
.etichetta { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--grigio); color: var(--testo-debole); vertical-align: middle; }
.etichetta-oro { background: var(--oro-chiaro); color: var(--oro-scuro); }
.spento { opacity: .55; }
.campo-num { text-align: right; }
.elenco-documenti { margin: 0; padding-left: 18px; } .elenco-documenti li { margin: 6px 0; }
.passi { margin: 0 0 12px; padding-left: 20px; } .passi li { margin: 6px 0; }
.dialogo-smtp { margin: 0 0 16px; padding: 12px 14px; background: var(--grigio); border: 1px solid var(--bordo); border-radius: var(--raggio);
  font-size: .78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; }
.campo-copia { display: flex; gap: 6px; align-items: center; width: 100%; }
.campo-copia input { flex: 1; min-width: 0; max-width: none !important; margin: 0; font-size: .85rem; }
/* campo con un pulsante accanto (es. email del cliente + "Scrivi") */
.campo-azione { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.campo-azione input { flex: 1; min-width: 0; margin: 0; }
.campo-azione .btn { flex: none; margin: 0; }
/* riquadro con i dati del cliente nella scheda preventivo */
.scheda-cliente { padding-bottom: 12px; }
.dati-cliente { display: grid; grid-template-columns: 1fr; gap: 8px 16px; }
.dati-cliente .dato { font-size: .95rem; word-break: break-word; }
.dati-cliente .dato-etichetta { display: block; font-size: .78rem; color: var(--testo-debole); }
input[type=file] { padding: 8px; }
.tabella input, .tabella select, .tabella textarea { margin: 0; padding-left: 8px; padding-right: 8px; }
.tabella tr.gruppo td { background: var(--grigio); font-weight: 600; color: var(--testo-debole); font-size: .85rem; }
.tabella tfoot td { font-weight: 600; background: var(--grigio); }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: var(--grigio); color: var(--testo); }
/* pulsante predefinito nascosto: decide cosa fa il tasto Invio in un modulo con piu' pulsanti */
.invisibile { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* scelte a schede (radio), es. il kit nel nuovo preventivo */
.scelte { display: grid; gap: 8px; }
.scelta { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; color: var(--testo); font-size: 1rem;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); cursor: pointer; }
.scelta input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
/* sugli schermi a tocco anche i pulsanti piccoli restano alti 44 px */
@media (pointer: coarse) { .btn-piccolo { min-height: 44px; } }
.scelta:has(input:checked) { border-color: var(--oro); background: var(--oro-chiaro); }

/* riepilogo importi */
.riepilogo { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0 0 16px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 16px; max-width: 480px; }
.riepilogo dt { color: var(--testo-debole); }
.riepilogo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.riepilogo .forte { font-weight: 700; color: var(--testo); }
/* totali del preventivo: più riquadri affiancati su desktop (su telefono uno sotto l'altro) */
.riepiloghi { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.riepiloghi .riepilogo { max-width: none; margin: 0; align-content: start; }
.riepilogo .riepilogo-titolo { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: 2px; }
.riepilogo .riepilogo-titolo + dd { display: none; }

/* grafico a colonne della dashboard: 2 serie (offerto oro, accettato bronzo), barre <= 24 px con 2 px tra loro,
   tooltip al passaggio o al tocco (valori anche nella tabella sotto il grafico) */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .85rem; margin: 8px 0 14px; }
.legenda .chiave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chiave-offerto, .barra-offerto { background: var(--oro); }
.chiave-accettato, .barra-accettato { background: var(--oro-scuro); }
.grafico { position: relative; height: 210px; margin-left: 46px; }
.grafico-griglia { position: absolute; top: 0; left: 0; right: 0; bottom: 22px; }
.grafico-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bordo); }
.grafico-linea span { position: absolute; right: 100%; transform: translateY(-50%); padding-right: 6px; font-size: .7rem;
  color: var(--testo-debole); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafico-mesi { position: absolute; inset: 0; display: flex; }
.grafico-mese { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grafico-barre { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.barra { position: relative; width: 40%; max-width: 24px; border-radius: 4px 4px 0 0; outline: none; }
.barra:hover, .barra:focus { filter: brightness(1.12); }
.barra:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; }
.barra:hover::after, .barra:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); z-index: 5; padding: 4px 8px; border-radius: 6px; background: var(--grafite); color: #fff;
  font-size: .75rem; white-space: nowrap; pointer-events: none; }
.tip-sinistra:hover::after, .tip-sinistra:focus::after { left: 0; transform: none; }
.tip-destra:hover::after, .tip-destra:focus::after { left: auto; right: 0; transform: none; }
.grafico-etichetta { height: 22px; line-height: 22px; text-align: center; font-size: .7rem; color: var(--testo-debole); overflow: hidden; }
.grafico-mese.scelto .grafico-etichetta { color: var(--testo); font-weight: 700; }
.tabella tr.evidenziata td { background: var(--oro-chiaro); }
.codice-riga { font-size: .9rem; word-break: break-all; }   /* colonna "Codice" delle righe del preventivo: link al catalogo */
/* documenti tecnici del prodotto elencati sotto la descrizione di una riga del preventivo */
.documenti-titolo { margin-top: 6px; font-size: .82rem; color: var(--testo-debole); }
.documenti-riga { list-style: none; margin: 2px 0 0; padding: 0; font-size: .85rem; }
.documenti-riga li { margin: 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.documenti-riga a { display: inline-flex; align-items: center; gap: 4px; }
.documenti-riga .ico { width: 16px; height: 16px; }
.documenti-riga input[type=checkbox] { margin: 0; width: 18px; height: 18px; }   /* spunta: documento nell'email e nel PDF */
.documenti-riga .doc-interno { display: inline-block; width: 18px; height: 18px; }   /* segnaposto al posto della spunta (documento interno) */

/* stessa pagina, due viste: schede su telefono, tabella su desktop */
.solo-desktop { display: none; }

/* tabelle con campi modificabili: su telefono ogni riga diventa una scheda */
@media (max-width: 899.98px) {
  .tabella .no-telefono { display: none; }   /* colonne secondarie nascoste su telefono (es. dashboard) */
  .tabella th, .tabella td { padding-left: 8px; padding-right: 8px; }
  .tabella-schede, .tabella-schede tbody, .tabella-schede tfoot, .tabella-schede tr, .tabella-schede td { display: block; width: 100%; }
  .tabella-schede { background: none; border: 0; }
  .tabella-schede thead { display: none; }
  .tabella-schede tr { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 8px; padding: 6px 12px; }
  .tabella-schede td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .tabella-schede td[data-etichetta]::before { content: attr(data-etichetta); color: var(--testo-debole); font-size: .85rem; text-align: left; flex: none; }
  .tabella-schede td input, .tabella-schede td select { max-width: 60%; }
  .tabella-schede td.titolo-scheda { display: block; text-align: left; font-weight: 600; }
  .tabella-schede td.titolo-scheda input, .tabella-schede td.titolo-scheda textarea { max-width: none; font-weight: 600; }
  .tabella-schede td.titolo-scheda small { font-weight: 400; }
}

/* desktop */
@media (min-width: 900px) {
  .solo-telefono { display: none; }
  .solo-desktop { display: block; }
  .btn-menu, .barra-bassa, .menu .solo-mobile { display: none; }
  .testata .utente, .btn-icona { display: inline-flex; }
  .menu { transform: none; box-shadow: none !important; }
  .contenuto { margin-left: var(--menu-larghezza); padding: 20px 32px 40px; }
  .kpi { grid-template-columns: repeat(3, 1fr); }
  .campi { grid-template-columns: 1fr 1fr; }
  .dati-cliente { grid-template-columns: 1fr 1fr; }
  .riepiloghi { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .dati-cliente .dato.largo { grid-column: 1 / -1; }
  .campi .largo { grid-column: 1 / -1; }
  .scelte { grid-template-columns: 1fr 1fr; }
}