/* Aggiunte al tema del gestionale (stile.css) per i preventivi dello studio */

/* --- Temi (scelta dell'utente 06/11/2026): colore e tema predefiniti in Impostazioni → Aspetto (Studio.tema_*),
   pulsante "Tema chiaro/scuro" nel menu per il solo browser (static/app.js). Attributi su <html>: data-colore
   (blu | petrolio) e data-aspetto (chiaro | scuro). Il tema scuro blu è quello di stile.css. --- */
:root[data-colore="petrolio"] {
  --accento: #1f8a7f;
  --accento-hover: #26a094;
  --accento-sfondo: #173a37;
  --accento-testo: #9fe0d6;
  --accento-bordo: #2b6a63;
}
:root[data-aspetto="chiaro"] {
  color-scheme: light;
  --sfondo: #f4f5f7;
  --laterale: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #eef0f3;
  --superficie-3: #e2e5ea;
  --bordo: #dde1e7;
  --bordo-forte: #c3c9d2;
  --bordo-cella: #e1e4e9;
  --testo: #1d2433;
  --testo-2: #4c5566;
  --testo-3: #6f7787;
  --accento: #2b4c8c;
  --accento-hover: #3a5fa6;
  --accento-sfondo: #dfe7f6;
  --accento-testo: #1f3f7a;
  --accento-bordo: #a9bde3;
  --verde: #1d7342;
  --verde-sfondo: #e1f2e7;
  --verde-bordo: #a6d5b8;
  --giallo: #855a00;
  --giallo-sfondo: #fbf0d4;
  --giallo-bordo: #e6cc8a;
  --rosso: #b0292b;
  --rosso-sfondo: #fbe6e6;
  --rosso-bordo: #ecb4b4;
  --incompleta-sfondo: #fcecec;
  --telefono: #1c74a6;
  --telefono-sfondo: #e2f1f9;
}
:root[data-aspetto="chiaro"][data-colore="petrolio"] {
  --sfondo: #f6f5f2;
  --superficie-2: #f0efeb;
  --superficie-3: #e5e3dd;
  --bordo: #e0ddd5;
  --bordo-forte: #c9c5bb;
  --bordo-cella: #e4e1da;
  --testo: #22302f;
  --testo-2: #4f5d5b;
  --testo-3: #74807e;
  --accento: #0f6e64;
  --accento-hover: #148578;
  --accento-sfondo: #d6ebe7;
  --accento-testo: #0b5750;
  --accento-bordo: #9ccbc4;
}
/* Chiaro blu notte: menu laterale e barra del telefono blu scuro, con i colori del tema scuro al loro interno */
:root[data-aspetto="chiaro"][data-colore="blu"] :is(.laterale, .barra-telefono) {
  --laterale: #1f2a44;
  --superficie: #26324f;
  --superficie-2: #2c3a5c;
  --superficie-3: #3a4a70;
  --bordo: #2f3d5e;
  --bordo-forte: #45567d;
  --testo: #ffffff;
  --testo-2: #c5cddd;
  --testo-3: #95a0b8;
  --accento-sfondo: #3a4f7d;
  --accento-testo: #ffffff;
  --giallo: #f1c66b;
  --giallo-sfondo: #3b3220;
  --rosso: #ffa3a3;
  --rosso-sfondo: #5a2a33;
  color: var(--testo);
}
[data-aspetto="chiaro"] .dialogo::backdrop { background: rgba(20, 28, 45, .35); }
[data-aspetto="chiaro"] .msg-warning { border-color: var(--giallo-bordo); }
[data-aspetto="chiaro"] .ditta-logo.con-logo { box-shadow: 0 0 0 1px var(--bordo); }

/* Logo dello studio nel menu (Impostazioni → Dati dello studio), al posto dell'icona */
/* Logo sopra, nome dello studio sotto in piccolo; con il menu ridotto il logo non si vede (stile.css) */
.ditta:has(.con-logo) { flex-wrap: wrap; row-gap: 8px; }
.ditta-logo.con-logo { display: flex; width: auto; max-width: 150px; height: 48px; padding: 4px; background: #fff; }
.ditta-logo.con-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ditta:has(.con-logo) .riduci-menu { order: 1; }
.ditta:has(.con-logo) .ditta-nome { order: 2; flex-basis: 100%; font-size: 13px; }

/* Pulsante del tema e scelta in Impostazioni */
.scelta-aspetto { align-items: center; }
.scelta-aspetto label { font-size: 12px; color: var(--testo-3); }
.scelta-aspetto select { width: auto; }
.scelta-aspetto .aiuto { margin-left: 4px; }

/* Messaggi che spariscono da soli (static/app.js) */
.msg { transition: opacity .4s ease; }
.msg.svanisce { opacity: 0; }

/* Avviso di uscita per inattività (static/app.js) */
.avviso-uscita {
  position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 14px;
  color: var(--giallo); background: var(--giallo-sfondo); border: 1px solid var(--giallo-bordo);
  border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.avviso-uscita[hidden] { display: none; }
.avviso-uscita .btn { border-color: currentColor; color: inherit; background: transparent; }
.stato-bozza { background: var(--superficie-3); color: var(--testo-2); }
.testo-rosso { color: var(--rosso); }
.segno-firma { width: 14px; height: 14px; vertical-align: -2px; color: var(--verde); }
.versione { display: block; padding: 6px 10px; font-size: 11px; color: var(--testo-3); }

/* Scheda cliente: codice fiscale intero, referente e attività su tutta la riga, colonna P.IVA/C.F. leggibile */
@media (min-width: 761px) {
  .pagina-anagrafica .campi:has(#id_codice_fiscale) { grid-template-columns: 84px 150px max-content minmax(0, 1fr); }
  .pagina-anagrafica .campi > div:is(:has(#id_referente), :has(#id_attivita)) { grid-column: 2 / -1; }
  .pagina-anagrafica #elenco th:nth-child(3) { width: 110px; }
  .pagina-anagrafica #elenco th:nth-child(4) { width: 120px !important; }
  .pagina-anagrafica .scheda { width: 520px; }
}

/* Clienti: filtri, stato, riepilogo dei preventivi e importazione da Excel/CSV */
@media (min-width: 761px) {
  /* Finestra stretta: la denominazione resta visibile, l'elenco scorre di lato */
  .pagina-anagrafica #elenco { min-width: 420px; }
}
.barra-sezione .filtri-clienti { margin: 0; gap: 6px; }
table.elenco tr.cessato td { color: var(--testo-3); text-decoration: line-through; text-decoration-color: var(--bordo-forte); }
.segno-stato { display: inline-block; margin-right: 6px; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 16px;
  color: var(--giallo); background: var(--giallo-sfondo); border-radius: 3px; }
.cifre.cifre-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.cifre-cliente .cifra, .cifre-importa .cifra { padding: 6px 12px; }
.cifre-cliente .cifra strong, .cifre-importa .cifra strong { font-size: 17px; }
.importa-anteprima { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.importa-colonne { flex: none; max-height: 38vh; margin-bottom: 10px; }
.griglia-colonne { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.colonna-file { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.colonna-file.abbinata { border-color: #34508f; background: var(--accento-sfondo); }
.colonna-file .titolo-colonna, .colonna-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonna-file .titolo-colonna { font-weight: 600; }
.cifre.cifre-importa { margin-bottom: 10px; }
table.anteprima-importa td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
table.anteprima-importa tr.scartata td { color: var(--testo-3); }
table.anteprima-importa .nota-riga { margin-top: 2px; font-size: 11px; white-space: normal; }
.testo-giallo { color: var(--giallo); }
.scelta-presenti { display: flex; align-items: center; gap: 6px; color: var(--testo-2); }
.scelta-presenti select { width: auto; }

/* Accesso */
.pagina-accesso { align-items: center; justify-content: center; }
.accesso { width: 340px; padding: 28px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.accesso h1 { margin: 0 0 6px; font-size: 22px; }
.accesso label { display: block; margin: 12px 0 4px; font-size: 12px; color: var(--testo-3); }
.accesso input { width: 100%; }
.accesso button { width: 100%; margin-top: 18px; justify-content: center; }

/* Start */
.pagina-start { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.griglia-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.riquadro-start { padding: 10px 14px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.riquadro-start.largo { grid-column: 1 / -1; }
.riquadro-start h4 { margin: 2px 0 8px; font-size: 13px; color: var(--testo-2); font-weight: 600; }
.risposte-online { margin: 0; padding-left: 18px; }
.risposte-online li { margin: 3px 0; }
.risposte-online li.accettato::marker { color: var(--verde); }
.risposte-online li.rifiutato::marker { color: var(--rosso); }
.avviso-risposte { margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--giallo); background: var(--giallo-sfondo); border-radius: var(--raggio); }
.avviso-risposte h4 { color: var(--giallo); }

/* Editor del preventivo */
.riga-oggetto { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.riga-oggetto label { font-size: 12px; color: var(--testo-3); white-space: nowrap; }
.riga-oggetto input { flex: 1; }
.doc-testata .numero { width: 96px; }
table.righe-preventivo td.azioni-riga { white-space: nowrap; text-align: center; padding: 4px 2px; }
table.righe-preventivo td.azioni-riga button { padding: 2px 4px; font-size: 10px; color: var(--testo-3); background: none; border: 0; cursor: pointer; }
table.righe-preventivo td.azioni-riga button:hover { color: var(--testo); }
table.righe-preventivo td.azioni-riga button.via:hover { color: var(--rosso); }
table.righe-preventivo tr.riga-nota td:not(:first-child):not(.azioni-riga) > * { visibility: hidden; }
table.righe-preventivo tr.riga-nota textarea { font-weight: 600; color: var(--accento-testo); }
#tab-righe .doc-fondo { flex: none; }
#tab-righe > .area-tabella { min-height: 160px; }
#tab-righe > .barra-righe { flex: none; }
.totali-preventivo { width: 340px; flex: none; }
/* I totali del preventivo restano in colonna anche nelle pagine compatte (nel gestionale sono in riga) */
.compatta .totali.totali-preventivo { display: table; width: 340px; }
.compatta .totali-preventivo tbody { display: table-row-group; height: auto; }
.compatta .totali-preventivo tr { display: table-row; padding: 0; }
.compatta .totali-preventivo tr + tr { border-left: 0; }
.compatta .totali-preventivo td { padding: 2px 10px; text-align: left; font-size: 13px; }
.compatta .totali-preventivo td.num { text-align: right; }
.compatta .totali-preventivo td:first-child { font-size: 12px; color: var(--testo-2); }
.compatta .totali-preventivo tr.totale td { font-size: 15px; font-weight: 600; color: var(--testo); border-top: 1px solid var(--bordo); }
.compatta .totali-preventivo tr.netto td { color: var(--verde); font-weight: 600; }
.totali-preventivo tr.dettaglio td { font-size: 12px; color: var(--testo-3); padding-top: 0; }
.totali-preventivo tr.netto td { font-weight: 600; color: var(--verde); }
.totali-preventivo tr[hidden] { display: none; }
.in-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-linea input[type=number] { width: 80px; }
.in-linea input[type=text] { width: 260px; }
.doc-fondo .commenti textarea { width: 100%; min-height: 64px; }
#riepilogo-periodi { margin-top: 6px; }

/* Catalogo nell'editor */
.dialogo-catalogo { width: min(760px, 96vw); }
.dialogo-catalogo input[type=search] { width: 100%; margin-bottom: 8px; }
.catalogo-elenco { max-height: 55vh; overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 4px; }
.catalogo-elenco h5 { margin: 8px 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-3); }
.voce-catalogo { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 8px; text-align: left;
  color: var(--testo); background: none; border: 0; border-radius: var(--raggio); cursor: pointer; font: inherit; }
.voce-catalogo:hover { background: var(--superficie-2); }
.voce-catalogo.scelta { background: var(--accento-sfondo); }
.voce-catalogo small { flex: none; color: var(--testo-3); }

/* Nuovo cliente nell'editor */
.campi-cliente .scelta-cliente { display: flex; align-items: center; gap: 6px; }

/* Impostazioni: catalogo */
table.catalogo textarea { width: 100%; min-height: 30px; field-sizing: content; }
table.catalogo select, table.catalogo input[type=number] { width: 100%; }

/* Pagina pubblica di accettazione */
.riepilogo-online { display: flex; gap: 10px; margin: 10px 0; }
.riepilogo-online > div { flex: 1; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.riepilogo-online span { display: block; font-size: 12px; color: var(--testo-3); }
.riepilogo-online strong { font-size: 18px; }
.rifiuto { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.rifiuto summary { cursor: pointer; color: var(--testo-2); }
.rifiuto textarea { width: 100%; margin: 8px 0; box-sizing: border-box; }
.rifiuto .dialogo-pulsanti { justify-content: flex-end; }
.firma-modulo .scelta { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
.firma-attuale img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto 8px; padding: 8px; background: #fff; border-radius: 4px; }

@media (max-width: 760px) {
  .griglia-start { grid-template-columns: 1fr; }
  /* Righe del preventivo come schede: descrizione su tutta la riga, poi Q.tà/U.m./Prezzo, Sconto/Periodicità/Importo,
     frecce e cestino in fondo a destra; i titoli e le note mostrano solo la descrizione */
  table.righe-preventivo td:first-child { grid-column: 1 / -1; }
  table.righe-preventivo td.azioni-riga { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: flex-end; gap: 4px; padding: 6px 0 0; }
  table.righe-preventivo td.azioni-riga button { padding: 6px 12px; font-size: 13px; border: 1px solid var(--bordo); border-radius: var(--raggio); }
  table.righe-preventivo td.importo { padding: 2px 6px 0; }
  table.righe-preventivo td.importo::before { padding: 0 0 4px; text-align: right; }
  table.righe-preventivo tr.riga-nota td:not(:first-child):not(.azioni-riga) { display: none; }
  table.righe-preventivo :is(input, textarea, select) { font-size: 16px; } /* sotto i 16 px il telefono ingrandisce la pagina */
  .totali-preventivo { width: 100%; }
  .riga-oggetto { flex-direction: column; align-items: stretch; }
}
[data-aspetto="chiaro"] .firma-pagine img { box-shadow: 0 0 0 1px var(--bordo); }