/* Stile dell' area «schede-documento» (Pagamenti, Allegati, Trasporto): si carica dopo app.css e può ritoccarlo. */

/* etichetta a sinistra del campo, come nei moduli di Fattura24 */
.sd-riga { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 0 8px; min-width: 0; margin: 0 0 12px; }
.sd-et { font: 400 14px/1.2 var(--font); color: #464d52; text-transform: none; letter-spacing: 0; }
.sd-et-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.et-info { display: inline-flex; color: #6e7a81; cursor: help; }

/* le schede Pagamenti, Allegati e Trasporto riempiono l'altezza della finestra (righe a strisce fino in fondo) */
.fin.documento .pannello:not([hidden]):has(> .pannello-pag, > .pannello-all) { min-height: 100%; display: flex; flex-direction: column; }
.fin.documento .pannello:not([hidden]):has(> .pannello-pag, > .pannello-all) > div { flex: 1; }

/* gli avvisi non coprono i pulsanti del piede (Salva): stanno più in alto */
.toasts { bottom: 96px; }
/* «Verifica riconciliazioni» nel piede, solo nella scheda Pagamenti (spento finché non c'è la riconciliazione) */
.fin.documento .fin-piede .verifica-ric { display: none; white-space: nowrap; }
.fin.documento:has(.pannello:not([hidden]) > .pannello-pag) .fin-piede .verifica-ric { display: inline-flex; }
.fin.documento .fin-piede .verifica-ric:disabled { opacity: .85; cursor: default; }

/* ---------- Pagamenti ---------- */
.pannello-pag { padding-top: 6px; display: flex; flex-direction: column; margin-bottom: -16px; }
.fin.documento .pannello-pag input[type=text], .fin.documento .pannello-pag select { background-color: #fff; border-color: #ddd; }
.fin.documento .pannello-pag input:disabled { background-color: #efefef; }
.fin.documento .pannello-pag select.bianco, .fin.documento .pannello-pag select.bianco:disabled { background-color: #fff; border-color: #ddd; color: #000; }
.pannello-pag select { background-color: #fff; border-color: #ddd; }
.fin.documento .pannello-pag select:disabled, .fin.documento .pannello-pag .rata input:disabled { background-color: #fff; color: #000; }
.fin.documento .pannello-pag select:disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23333'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.pag-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; }
.pag-col { padding: 0 10px; }
.pag-col + .pag-col { padding-left: 28px; border-left: .5px solid var(--bordo); }
.pag-col .sd-riga { grid-template-columns: 120px minmax(0, 1fr); }
.pag-col + .pag-col .sd-riga { grid-template-columns: 190px minmax(0, 1fr); }
.con-info { display: flex; gap: 8px; align-items: center; min-width: 0; }
.con-info select { flex: 1; }
.info-btn { flex: none; width: 24px; height: 28px; display: grid; place-items: center; border: .5px solid var(--bordo-campo); border-radius: 4px; background: #fff; color: var(--azzurro-scuro); font: italic 700 15px/1 Georgia, serif; cursor: help; }
.rate-titolo { display: flex; align-items: center; gap: 12px; margin: 14px 0 14px; flex-wrap: wrap; }
.rate-titolo h3 { margin: 0; padding: 0; border: 0; font-weight: 300; font-size: 26px; line-height: 1.2; }
.rate-titolo .pul.piccolo { height: 34px; padding: 0 10px; }
.tab-rate-sc { flex: 1; display: flex; flex-direction: column; margin: 0 -24px; }
.tab-rate { min-width: 900px; flex: 1; display: flex; flex-direction: column; }
.rata { display: grid; grid-template-columns: 24px 150px minmax(150px, 1.2fr) 130px 130px minmax(150px, 1.5fr) 32px; gap: 0 10px; align-items: center; padding: 0 24px; min-height: 46px; background: #fff; border-bottom: .5px solid var(--bordo); }
.rata-testa { min-height: 30px; background: none; border: 0; align-items: end; padding-bottom: 4px; }
.rata-et { font: 500 11px/1.2 var(--font); color: #464d52; }
.rata-c { min-width: 0; position: relative; }
.rata-apri { color: #6e7a81; display: grid; place-items: center; }
.rata-importo { display: flex; align-items: center; gap: 6px; }
.rata-importo input { text-align: right; background: #fff; border-color: #ddd; }
.rata-euro { font: 400 15px var(--font); }
.rata input { background: #fff; border-color: #ddd; }
.rata input:disabled { background: #fff; color: #000; }
.con-icona input { padding-right: 28px; }
.campo-icona { position: absolute; right: 7px; top: 10px; color: #4a5560; pointer-events: none; }
.rata-cestino { width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--rosso); border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.rata-cestino:hover { background: var(--rosso-chiaro); }
.rate-vuote { flex: 1; min-height: 140px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 46px, #f1f3f5 46px, #f1f3f5 92px); }
.rate-somma { margin: 10px 0 0; font-size: 12px; color: var(--muto); }
.rate-somma:empty { display: none; }
.rate-somma.attenzione { color: var(--rosso-testo); font-weight: 500; }

/* pagamenti: stella, Ri.Ba., stato, gradini, dettagli rata */
.pannello-pag.occupata { opacity: .7; pointer-events: none; }
.riba-sp { display: inline-flex; align-items: center; gap: 8px; font: 400 14px var(--font); color: var(--testo); min-height: 35px; }
.riga-stella { align-items: center; }
.stella-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.stella-scelta .stella-auto { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; background: #fff; }
.stella-scelta .stella-auto.scelta { border-color: var(--azzurro-scuro); box-shadow: inset 0 0 0 1px var(--azzurro-scuro); }
.stella-sc { width: 27px; height: 28px; padding: 0; display: grid; place-items: center; background: #fff; border: .5px solid #ddd; border-radius: 4px; cursor: pointer; }
.stella-sc:hover { background: #eef0f3; }
.stella-sc.scelta { border-color: var(--azzurro-scuro); box-shadow: inset 0 0 0 1px var(--azzurro-scuro); }
.stella-vuota { color: #9aa3a9; }
.stato-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saldo-riepilogo { font-size: 12px; color: var(--muto); }
.fin.documento .pannello-pag select.stato-saldo.saldato:disabled { color: #2e7d32; font-weight: 500; }
.fin.documento .pannello-pag select.stato-saldo.parziale:disabled { color: #b26a00; font-weight: 500; }
.fin.documento .pannello-pag select.stato-saldo.non_saldato:disabled { color: var(--rosso-testo); }
.rata-apri { width: 24px; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; }
.rata-apri svg { transition: transform .15s; }
.rata-apri.su svg { transform: rotate(180deg); }
.rata-cestino:disabled { opacity: .35; cursor: default; background: none; }
.rata.incassata { background: #f3faf4; }
.rata-importo { flex-wrap: wrap; }
.rata-importo input { flex: 1; min-width: 0; }
.rata.con-nota { padding-top: 6px; padding-bottom: 6px; }
.rata-nota { flex-basis: 100%; font: 400 11px/1.2 var(--font); color: #5a6772; }
.rata-gruppo { display: flex; flex-direction: column; }
.rata-dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; padding: 8px 24px 10px 44px; background: #fafbfc; border-bottom: .5px solid var(--bordo); }
.rd-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rata-dettaglio input, .rata-dettaglio select { background: #fff; border-color: #ddd; }
.grad-box { margin: 0 0 14px; padding: 12px 14px; background: #fff; border: .5px solid var(--bordo-campo); border-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.grad-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.grad-riga { display: grid; grid-template-columns: minmax(120px, 1.2fr) 90px minmax(140px, 1fr) 110px 30px; gap: 0 10px; align-items: center; }
.grad-riga input, .grad-riga select { background: #fff; border-color: #ddd; }
.grad-perc { display: flex; align-items: center; gap: 4px; }
.grad-perc input { text-align: right; }
.grad-importo { font: 500 14px var(--font); text-align: right; }
.grad-piede { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.grad-piede .spaziatore { flex: 1; }
.grad-somma { font-size: 12px; color: var(--muto); align-self: center; }
.grad-somma.attenzione { color: var(--rosso-testo); font-weight: 500; }
.grad-somma.ok { color: #2e7d32; }
.incasso-box .rd-c { min-width: 150px; }

/* ---------- Allegati ---------- */
.pannello-all { padding-top: 6px; display: flex; flex-direction: column; margin-bottom: -16px; }
.all-modello { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fin.documento .all-modello select, .fin.documento .all-modello select:disabled { background-color: #fff; border-color: #ddd; color: #000; }
.all-elenco-tit { font: 400 14px/1.2 var(--font); color: #464d52; margin: 4px 0 8px; }
.all-elenco { flex: 1; display: flex; flex-direction: column; background: #fff; border-top: .5px solid var(--bordo); margin: 0 -24px; }
.all-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 0 24px; font: 400 11px/1.2 var(--font); color: var(--testo); border-bottom: .5px solid var(--bordo); background: #fff; }
.all-riga:nth-child(even) { background: #f6f8fa; }
.all-nessuno { color: var(--muto); }
.all-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.all-azioni { display: flex; align-items: center; gap: 22px; flex: none; }
.all-ic { width: 20px; height: 24px; display: grid; place-items: center; color: #4a5560; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.all-ic:hover { color: #000; }
.all-ic.vuoto { cursor: default; }
.all-menu-ancora { position: relative; display: block; }
.all-menu { position: absolute; right: 0; top: 26px; z-index: 5; min-width: 120px; background: #fff; border: .5px solid var(--bordo-campo); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); padding: 4px 0; display: flex; flex-direction: column; }
.all-menu a, .all-menu button { display: block; text-align: left; padding: 7px 14px; font: 400 13px var(--font); color: var(--testo); background: none; border: 0; text-decoration: none; cursor: pointer; }
.all-menu a:hover, .all-menu button:hover { background: var(--riga-alt); }
.all-vuote { flex: 1; min-height: 120px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 28px, #f6f8fa 28px, #f6f8fa 56px); }
.all-zona { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; margin: 0 -24px; font: 400 12px var(--font); text-transform: uppercase; color: #4a5560; cursor: pointer; background: #f8f8f8; border-top: .5px solid var(--bordo); }
.all-zona:hover, .all-zona.sopra { background: rgba(122, 153, 196, .18); }
.all-zona.disattiva { opacity: .55; cursor: default; }
.all-zona.disattiva:hover { background: #f8f8f8; }

/* ---------- Dati trasporto ---------- */
.pannello-trasp { padding-top: 6px; }
.pannello-trasp .sd-riga { grid-template-columns: 135px minmax(0, 1fr); margin-bottom: 14px; }
.pannello-trasp input, .pannello-trasp textarea { background: #fff; border-color: #ddd; }
.pannello-trasp input { height: 32px; }
.pannello-trasp input:disabled, .pannello-trasp textarea:disabled { background: #efefef; }
.tr-titolo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #7d93ad; }
.tr-sep { margin-top: 12px; padding-top: 14px; border-top: .5px solid var(--bordo); }
.tr-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.tr-dest, .tr-ind, .tr-citta, .tr-paese { grid-column: 1; }
.tr-cap, .tr-prov { grid-column: 2; }
.pannello-trasp .tr-cap, .pannello-trasp .tr-prov, .pannello-trasp .tr-aspetto { grid-template-columns: 94px minmax(0, 1fr); }
.tr-cap input, .tr-prov input { max-width: 120px; }
.tr-ind { grid-row: 2; } .tr-cap { grid-row: 2; }
.tr-citta { grid-row: 3; } .tr-prov { grid-row: 3; }
.tr-paese { grid-row: 4; }
.tr-svuota { grid-column: 2; grid-row: 4; justify-self: start; margin: 0 0 14px 102px; height: 28px; background: #f48a1f; border-color: #f48a1f; color: #fff; }
.pul.blu { background: #2f6db5; border-color: #2f6db5; color: #fff; }
.pul.blu:hover:not(:disabled) { background: #255a98; }
.pul.arancio { background: #f48a1f; border-color: #f48a1f; color: #fff; }
.pul.arancio:hover:not(:disabled) { background: #dd7a14; }
.tr-causale { grid-column: 1 / -1; }
.tr-vettore, .tr-trasp, .tr-colli, .tr-peso, .tr-porto { grid-column: 1; }
.tr-colli input, .tr-peso input { max-width: 120px; text-align: right; }
.tr-aspetto { grid-column: 2; grid-row: 2 / span 5; align-items: start; }
.tr-aspetto .sd-et { padding-top: 7px; }
.tr-aspetto textarea { min-height: 230px; height: 100%; }

@media (max-width: 760px) {
  .toasts { bottom: 84px; }
  .fin.documento .fin-piede .verifica-ric, .fin.documento:has(.pannello:not([hidden]) > .pannello-pag) .fin-piede .verifica-ric { display: none; }
  .rate-titolo { gap: 8px; }
  .rate-titolo h3 { flex: 1 1 100%; }
  .rate-titolo .pul.piccolo { white-space: nowrap; font-size: 12px; padding: 0 8px; flex: 1 1 auto; }
  .rate-titolo .pul.verde { flex-basis: 100%; }
  .pag-testa { grid-template-columns: 1fr; }
  .pag-col { padding: 0; }
  .pag-col + .pag-col { padding-left: 0; border-left: 0; }
  .sd-riga, .pag-col .sd-riga, .pag-col + .pag-col .sd-riga, .pannello-trasp .sd-riga, .pannello-trasp .tr-cap, .pannello-trasp .tr-prov, .pannello-trasp .tr-aspetto { grid-template-columns: 1fr; gap: 4px; }
  .tr-griglia { grid-template-columns: 1fr; }
  .tr-dest, .tr-ind, .tr-citta, .tr-paese, .tr-cap, .tr-prov, .tr-causale, .tr-vettore, .tr-trasp, .tr-colli, .tr-peso, .tr-porto, .tr-aspetto, .tr-svuota { grid-column: 1; grid-row: auto; }
  .tr-svuota { margin-left: 0; }
  .tr-cap input, .tr-prov input, .tr-colli input, .tr-peso input { max-width: none; }
  .tab-rate-sc, .all-elenco, .all-zona { margin: 0 -12px; }
  .rata, .all-riga { padding: 0 12px; }
  .all-azioni { gap: 8px; }
  .pannello-pag, .pannello-all { margin-bottom: -12px; }
  .grad-riga { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 8px; padding-bottom: 8px; border-bottom: .5px solid var(--bordo); }
  .grad-riga select { grid-column: 1 / 2; }
  .grad-importo { text-align: left; }
  .rata-dettaglio { grid-template-columns: 1fr; padding: 8px 12px 10px; }
}

/* acquisti: stati di pagamento (da pagare / parziale / pagato) */
.fin.documento .pannello-pag select.stato-saldo.pagato:disabled { color: #2e7d32; font-weight: 500; }
.fin.documento .pannello-pag select.stato-saldo.da_pagare:disabled { color: var(--rosso-testo); }