/* Pay vouchers only: the editor, the voucher document, and its print layout. */
.pv-head, .pv-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-toolbar { margin-bottom: 12px; }
.pv-title { flex: 1; min-width: 180px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.pv-sub { font-size: 12px; color: var(--text2); margin: 6px 0 14px; }
.pv-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pv-settings .frow { margin: 0; }
.pv-banner { background: var(--amber-bg); border: 0.5px solid var(--amber); border-radius: var(--radius); padding: 9px 12px; font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
.pv-help { font-size: 11px; color: var(--text2); line-height: 1.5; margin: 8px 0 10px; }
/* .btn-row does not wrap by default; four buttons do not fit across a phone. */
.pv-actions { margin-top: 1rem; align-items: center; flex-wrap: wrap; gap: 8px; }
.pv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-warn { color: var(--red); font-weight: 600; font-size: 12px; }
.pv-clocked { font-size: 11px; color: var(--text3); margin-top: 3px; white-space: nowrap; }

/* The table scrolls inside its wrapper on a narrow screen instead of widening the page. */
.pv-lines { min-width: 760px; }
.pv-lines td { vertical-align: top; padding: 8px 6px; }
.pv-lines input { font-size: 12px; padding: 6px 7px; min-width: 0; }
.pv-lines input[type="number"], .pv-lines input[type="text"] { width: 84px; }
.pv-lines input[type="time"] { width: 104px; }
.pv-lines input[type="date"] { width: 140px; }
.pv-lines tfoot td { font-weight: 700; border-top: 1px solid var(--border-med); padding-top: 10px; }
.pv-lines .pv-incomplete td { background: var(--red-bg); }

.pv-payee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text2); margin-bottom: 14px; }
.pv-payee strong { color: var(--text); }
.pv-lines-manual { min-width: 620px; }
.pv-lines .pv-desc { width: 100%; min-width: 240px; }

/* The issued voucher. Laid out after the owner's existing Payment Voucher, so the
   greens are that document's own and are fixed rather than taken from the app theme. */
.pv-doc { max-width: 860px; padding: 2.25rem 2.5rem; color: #1c1c1a; --pvd-green: #19703f; --pvd-line: #a9cdb9; --pvd-tint: #e9f5ec; --pvd-label: #56705f; }
.pvd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--pvd-line); padding-bottom: 18px; margin-bottom: 26px; }
.pvd-title { font-size: 26px; font-weight: 700; color: var(--pvd-green); margin-top: 34px; }
.pvd-ref { min-width: 220px; }
.pvd-logo { display: block; height: 40px; width: auto; margin-bottom: 14px; }
.pvd-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pvd-label); margin-bottom: 6px; }
.pvd-field { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: #33423a; padding: 5px 0; }
.pvd-field span { white-space: nowrap; }
.pvd-field strong { flex: 1; min-width: 60px; min-height: 20px; font-size: 14px; font-weight: 500; color: #111; border-bottom: 1px solid var(--pvd-line); padding: 0 8px 3px; overflow-wrap: anywhere; }
.pvd-void { border: 1px solid #a32d2d; color: #a32d2d; font-weight: 700; font-size: 12px; padding: 8px 12px; margin-bottom: 18px; }
.pvd-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--pvd-line); border-right: 0; border-bottom: 0; margin-bottom: 30px; }
.pvd-cell-head, .pvd-cell { border-right: 1px solid var(--pvd-line); border-bottom: 1px solid var(--pvd-line); padding: 10px 14px; }
.pvd-cell-head { background: var(--pvd-tint); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pvd-label); padding-bottom: 22px; }
.pvd-cell { padding: 14px 18px 18px; min-width: 0; }
.pvd-period { display: flex; gap: 16px; flex-wrap: wrap; }
.pvd-period .pvd-field { flex: 1; min-width: 110px; }
.pvd-section { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pvd-green); margin: 0 0 12px 8px; }
.pvd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pvd-table th { background: var(--pvd-green); color: #fff; text-align: left; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 14px 10px; border: 1px solid var(--pvd-green); border-right-color: #fff; position: static; }
.pvd-table th:last-child { border-right-color: var(--pvd-green); }
.pvd-table td { padding: 14px 10px; border: 1px solid var(--pvd-line); vertical-align: top; overflow-wrap: anywhere; }
/* app.css removes the bottom border of a table's last row; this table is a box. */
.pvd-table tbody tr:last-child td { border-bottom: 1px solid var(--pvd-line); }
.pvd-table th:nth-child(1) { width: 53%; } .pvd-table th:nth-child(2) { width: 12%; } .pvd-table th:nth-child(3) { width: 15%; } .pvd-table th:nth-child(4) { width: 20%; }
.pvd-time { color: #56705f; margin-left: 10px; white-space: nowrap; }
.pvd-total { display: flex; justify-content: flex-end; align-items: center; gap: 70px; margin: 44px 0 36px; }
.pvd-total span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pvd-label); max-width: 70px; text-align: right; line-height: 1.5; }
.pvd-total strong { font-size: 20px; font-weight: 700; color: var(--pvd-green); white-space: nowrap; }
.pvd-note { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 14px; }
.pvd-contract { font-size: 11px; color: #56705f; border-bottom: 1px solid var(--pvd-line); padding-bottom: 10px; margin-bottom: 14px; }
.pvd-ack { margin-left: 50%; padding-right: 8%; }
.pvd-ack-title { font-size: 12px; font-weight: 700; color: var(--pvd-label); margin-bottom: 44px; }
.pvd-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #56705f; border-top: 1px solid #dfe9e3; margin-top: 60px; padding-top: 10px; }
@media (max-width: 640px) {
  .pv-doc { padding: 1.25rem 1rem; }
  .pvd-grid { grid-template-columns: 1fr; }
  .pvd-ack { margin-left: 0; padding-right: 0; }
  .pvd-total { gap: 24px; }
  .pvd-title { margin-top: 0; }
}

/* Print: only the voucher, portrait.
   app.css hides every body child except the group-class print root when printing,
   and sets the page to landscape for that grid. `html body >` out-ranks its hide
   rule, and the named page gives the voucher its own orientation without changing
   the grid's. */
@page pv-page { size: A4 portrait; margin: 14mm; }
@media print {
  html body > #pv-print-root { display: block !important; page: pv-page; }
  #pv-print-root .pv-doc { max-width: none; border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
  /* Without this the green header row and the tinted box headings print white. */
  #pv-print-root, #pv-print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #pv-print-root tr, #pv-print-root .pvd-ack, #pv-print-root .pvd-total { break-inside: avoid; page-break-inside: avoid; }
  /* White paper: the app's page colour must not print behind the voucher. */
  body:has(> #pv-print-root) { background: #fff !important; padding: 0 !important; }
  #pv-print-root { background: #fff; }
  /* Tighter than on screen so a voucher with a few lines fits one A4 page, with the
     acknowledgement on the same page as the total, as on the original voucher. */
  #pv-print-root .pvd-title { margin-top: 22px; font-size: 22pt; }
  #pv-print-root .pvd-top { padding-bottom: 12px; margin-bottom: 18px; }
  #pv-print-root .pvd-cell-head { padding: 8px 12px 14px; }
  #pv-print-root .pvd-cell { padding: 10px 14px 12px; }
  #pv-print-root .pvd-grid { margin-bottom: 20px; }
  #pv-print-root .pvd-table th, #pv-print-root .pvd-table td { padding: 10px 9px; }
  #pv-print-root .pvd-total { margin: 28px 0 24px; }
  #pv-print-root .pvd-ack-title { margin-bottom: 30px; }
  #pv-print-root .pvd-foot { margin-top: 34px; }
}