/* ============================================================
   ZapCalendar — Preventivi
   Stili dell'editor e del documento stampabile in A4.

   NOTA SULLA PRIORITÀ DEI SELETTORI
   finanze.css contiene un reset molto aggressivo:
       #est-app, #est-app * { margin:0; padding:0 }
   che ha priorità superiore a qualsiasi selettore di sola classe.
   Per questo ogni regola qui è ancorata a un id:
     · l'editor vive dentro #est-app
     · il documento vive dentro #prev-scope (anteprima) o
       #prev-print-root (copia usata per la stampa)
   :is() permette di coprire i due contesti del documento con
   un selettore solo, mantenendo la priorità dell'id.
   ============================================================ */

/* ── EDITOR (a schermo) ───────────────────────────────────── */

#est-app .prev-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

#est-app .prev-campo { display: flex; flex-direction: column; gap: 5px; }

#est-app .prev-campo label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-light);
}

#est-app .prev-campo input,
#est-app .prev-campo select,
#est-app .prev-campo textarea,
#est-app .prev-sez-corpo > textarea {
  font-family: inherit;
  font-size: .85rem;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

#est-app .prev-campo textarea,
#est-app .prev-sez-corpo > textarea {
  resize: vertical; min-height: 96px; line-height: 1.6;
}

#est-app .prev-campo input:focus,
#est-app .prev-campo select:focus,
#est-app .prev-campo textarea:focus,
#est-app .prev-sez-corpo > textarea:focus {
  outline: none;
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

/* Interruttore di sezione */
#est-app .prev-sez-testa {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#est-app .prev-sez-testa input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--success);
  cursor: pointer;
  flex-shrink: 0;
}

#est-app .prev-sez-corpo { margin-top: 12px; }
#est-app .prev-sez-corpo[hidden] { display: none !important; }

/* Righe voce */
#est-app .prev-righe { width: 100%; border-collapse: collapse; }

#est-app .prev-righe th {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-align: left;
  padding: 0 7px 7px;
  white-space: nowrap;
  background: none;
}

#est-app .prev-righe th.n, #est-app .prev-righe td.n { text-align: right; }
#est-app .prev-righe td { padding: 3px 4px; vertical-align: middle; border: none; }

#est-app .prev-righe input, #est-app .prev-righe select {
  font-family: inherit;
  font-size: .82rem;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

#est-app .prev-righe input.n { text-align: right; }

#est-app .prev-x {
  background: none; border: none; cursor: pointer;
  color: var(--danger); font-size: .95rem; padding: 4px 6px; line-height: 1;
}

#est-app .prev-tot-riga {
  font-size: .83rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; padding-right: 6px;
}

/* Riepilogo a schermo */
#est-app .prev-riepilogo-box {
  margin-left: auto;
  max-width: 330px;
  font-size: .86rem;
}

#est-app .prev-riepilogo-box .r {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 6px 0;
}

#est-app .prev-riepilogo-box .r.tot {
  border-top: 2px solid var(--ink);
  margin-top: 6px; padding-top: 10px;
  font-size: 1.02rem; font-weight: 800;
}

/* Elenco preventivi */
#est-app .prev-lista-riga {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color .15s, transform .15s;
}

#est-app .prev-lista-riga:hover { border-color: var(--success); transform: translateX(2px); }

#est-app .prev-stato {
  font-size: .64rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
  white-space: nowrap;
}

#est-app .prev-stato.bozza     { background: #f1f5f9; color: #64748b; }
#est-app .prev-stato.inviato   { background: #e0f2fe; color: #0369a1; }
#est-app .prev-stato.accettato { background: #dcfce7; color: #15803d; }
#est-app .prev-stato.rifiutato { background: #fee2e2; color: #b91c1c; }
#est-app .prev-stato.scaduto   { background: #fef3c7; color: #a16207; }

/* Cornice dell'anteprima: il foglio su sfondo grigio */
#est-app .prev-anteprima {
  background: #8a9099;
  padding: 22px;
  border-radius: 12px;
  overflow-x: auto;
}

/* ── DOCUMENTO A4 ─────────────────────────────────────────── */

:is(#prev-scope, #prev-print-root) .prev-doc {
  --d-ink:    #14181f;
  --d-soft:   #5b6572;
  --d-line:   #d6dae0;
  --d-accent: #16a34a;

  width: 182mm;                 /* A4 (210mm) meno 14mm di margine per lato */
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: var(--d-ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10pt;
  line-height: 1.5;
}

/* A schermo il documento si presenta come un foglio A4 completo di margini */
#prev-scope .prev-doc {
  width: 210mm;
  padding: 14mm;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  border-radius: 2px;
}

/* Intestazione a due colonne — tabella, non flex: in stampa è più prevedibile */
:is(#prev-scope, #prev-print-root) .prev-head { display: table; width: 100%; margin: 0 0 9mm; }
:is(#prev-scope, #prev-print-root) .prev-head > div { display: table-cell; width: 50%; vertical-align: top; padding: 0; }
:is(#prev-scope, #prev-print-root) .prev-head > div + div { padding-left: 10mm; }

:is(#prev-scope, #prev-print-root) .prev-logo {
  max-height: 22mm; max-width: 62mm; margin: 0 0 3mm; display: block;
}

:is(#prev-scope, #prev-print-root) .prev-eti {
  font-size: 7.2pt; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--d-soft);
  margin: 0 0 1.6mm;
}

:is(#prev-scope, #prev-print-root) .prev-nome {
  font-size: 12pt; font-weight: 800; line-height: 1.28; margin: 0 0 1.4mm;
}

:is(#prev-scope, #prev-print-root) .prev-riga {
  font-size: 8.8pt; color: var(--d-soft); line-height: 1.5; margin: 0;
}

:is(#prev-scope, #prev-print-root) .prev-riga b { color: var(--d-ink); font-weight: 600; }

/* Barra con numero e date */
:is(#prev-scope, #prev-print-root) .prev-meta {
  display: table; width: 100%;
  border-top: 2px solid var(--d-ink);
  border-bottom: 1px solid var(--d-line);
  padding: 3.4mm 0; margin: 0 0 7mm;
}

:is(#prev-scope, #prev-print-root) .prev-meta > div { display: table-cell; vertical-align: middle; padding: 0; }
:is(#prev-scope, #prev-print-root) .prev-meta .t { font-size: 14pt; font-weight: 800; letter-spacing: -.01em; }
:is(#prev-scope, #prev-print-root) .prev-meta .d { text-align: right; font-size: 8.8pt; color: var(--d-soft); line-height: 1.65; }
:is(#prev-scope, #prev-print-root) .prev-meta .d b { color: var(--d-ink); font-weight: 700; }

/* Blocchi di testo */
:is(#prev-scope, #prev-print-root) .prev-blocco { margin: 0 0 6.5mm; }

:is(#prev-scope, #prev-print-root) .prev-blocco h3 {
  font-size: 8pt; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--d-accent);
  margin: 0 0 2.2mm; padding: 0 0 1.4mm;
  border-bottom: 1px solid var(--d-line);
}

:is(#prev-scope, #prev-print-root) .prev-blocco p {
  margin: 0; padding: 0; font-size: 9.2pt; white-space: pre-wrap;
}

/* Tabella voci */
:is(#prev-scope, #prev-print-root) .prev-tab {
  width: 100%; border-collapse: collapse; margin: 0 0 6mm;
}

:is(#prev-scope, #prev-print-root) .prev-tab thead th {
  font-size: 7.4pt; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; background: var(--d-ink);
  padding: 2.4mm 2.6mm; text-align: left; border: none;
}

:is(#prev-scope, #prev-print-root) .prev-tab thead th.n { text-align: right; }

:is(#prev-scope, #prev-print-root) .prev-tab tbody td {
  font-size: 9.2pt; padding: 2.4mm 2.6mm;
  border: none; border-bottom: 1px solid var(--d-line);
  vertical-align: top; background: none;
}

:is(#prev-scope, #prev-print-root) .prev-tab tbody td.n { text-align: right; white-space: nowrap; }
:is(#prev-scope, #prev-print-root) .prev-tab tbody tr:nth-child(even) td { background: #f7f8f9; }
:is(#prev-scope, #prev-print-root) .prev-tab .desc { font-weight: 600; }

/* Riepilogo economico, allineato a destra */
:is(#prev-scope, #prev-print-root) .prev-riepilogo {
  width: 72mm; margin: 0 0 7mm auto; padding: 0;
}

:is(#prev-scope, #prev-print-root) .prev-riepilogo table {
  width: 100%; border-collapse: collapse; margin: 0;
}

:is(#prev-scope, #prev-print-root) .prev-riepilogo td {
  font-size: 9.4pt; padding: 1.7mm 0; border: none; background: none;
}

:is(#prev-scope, #prev-print-root) .prev-riepilogo td.n { text-align: right; white-space: nowrap; }
:is(#prev-scope, #prev-print-root) .prev-riepilogo tr.sep td { border-top: 1px solid var(--d-line); }

:is(#prev-scope, #prev-print-root) .prev-riepilogo tr.tot td {
  border-top: 2px solid var(--d-ink);
  padding-top: 2.6mm; font-size: 11.5pt; font-weight: 800;
}

/* Modulo di accettazione */
:is(#prev-scope, #prev-print-root) .prev-firma { margin: 12mm 0 0; }

:is(#prev-scope, #prev-print-root) .prev-firma h3 {
  font-size: 8pt; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--d-accent);
  margin: 0 0 2.2mm; padding: 0 0 1.4mm;
  border-bottom: 1px solid var(--d-line);
}

:is(#prev-scope, #prev-print-root) .prev-firma .intro {
  font-size: 9pt; color: var(--d-soft); margin: 0 0 7mm;
}

:is(#prev-scope, #prev-print-root) .prev-firma .campi { display: table; width: 100%; }
:is(#prev-scope, #prev-print-root) .prev-firma .campi > div { display: table-cell; width: 50%; vertical-align: bottom; padding: 0; }
:is(#prev-scope, #prev-print-root) .prev-firma .campi > div + div { padding-left: 14mm; }

/* Il luogo, se impostato, resta prestampato sulla riga: il cliente vi aggiunge la data */
:is(#prev-scope, #prev-print-root) .prev-firma .linea {
  border-bottom: 1px solid var(--d-ink);
  height: 11mm;
  display: flex; align-items: flex-end;
  padding: 0 0 1.2mm;
  font-size: 9.2pt; color: var(--d-ink);
}

:is(#prev-scope, #prev-print-root) .prev-firma .eti {
  font-size: 7.6pt; color: var(--d-soft);
  margin: 1.6mm 0 0; text-transform: uppercase; letter-spacing: .05em;
}

:is(#prev-scope, #prev-print-root) .prev-pie {
  margin: 9mm 0 0; padding: 2.6mm 0 0;
  border-top: 1px solid var(--d-line);
  font-size: 7.6pt; color: var(--d-soft); text-align: center;
}

/* Contenitore usato solo durante la stampa */
#prev-print-root { display: none; }

/* ── STAMPA ───────────────────────────────────────────────── */

@page { size: A4; margin: 14mm; }

@media print {
  /* Fuori tutto tranne il documento */
  html.printing-prev body > *         { display: none !important; }
  html.printing-prev #prev-print-root { display: block !important; }

  html.printing-prev,
  html.printing-prev body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.printing-prev #prev-print-root .prev-doc {
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* L'intestazione della tabella si ripete su ogni pagina */
  #prev-print-root .prev-tab thead { display: table-header-group; }

  /* Elementi che non devono essere spezzati a metà */
  #prev-print-root .prev-tab tr,
  #prev-print-root .prev-blocco,
  #prev-print-root .prev-riepilogo,
  #prev-print-root .prev-firma,
  #prev-print-root .prev-head { break-inside: avoid; page-break-inside: avoid; }

  #prev-print-root .prev-blocco h3 { break-after: avoid; page-break-after: avoid; }

  /* Gli sfondi delle intestazioni devono comparire anche in stampa */
  #prev-print-root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}