/* ============ fonts (DejaVu Sans, subset, matches source PDF) ============ */
@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVuSans.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVuSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVuSans-BoldOblique.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ============ workspace ============ */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "DejaVu Sans", Verdana, sans-serif;
  background: #f1f5f9; color: #0f172a; font-size: 11pt;
}
.topbar {
  display: flex; align-items: center; gap: 12pt; padding: 10pt 16pt;
  background: #1e293b; color: #fff;
}
.topbar h1 { font-size: 13pt; margin: 0; font-weight: 700; }
.topbar .spacer { flex: 1; }
.topbar input {
  font: inherit; font-size: 10pt; padding: 5pt 9pt; border-radius: 5pt;
  border: 1px solid #475569; background: #0f172a; color: #fff; width: 220pt;
}
button {
  font: inherit; font-size: 10pt; padding: 6pt 12pt; border-radius: 5pt;
  border: 1px solid #cbd5e1; background: #fff; cursor: pointer; color: #0f172a;
}
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
button.danger { background: #fff; border-color: #fca5a5; color: #b91c1c; }
button:disabled { opacity: 0.45; cursor: default; }
.wrap { display: flex; gap: 14pt; padding: 14pt 16pt; align-items: flex-start; }
.list-pane { flex: 0 0 300pt; background: #fff; border: 1px solid #e2e8f0; border-radius: 8pt; overflow: hidden; }
table.records { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
table.records th { text-align: left; font-size: 8pt; color: #64748b; padding: 7pt 9pt; border-bottom: 1px solid #e2e8f0; }
table.records td { padding: 7pt 9pt; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
table.records tr.sel td { background: #eff6ff; }
table.records tr:hover td { background: #f8fafc; }
.preview-pane { flex: 1; min-width: 0; }
.sheet {
  background: #fff; width: 595.28pt; max-width: 100%; overflow: auto;
  margin: 0 auto; box-shadow: 0 2pt 14pt rgba(15, 23, 42, 0.16);
}
.editor-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 22pt 12pt; overflow: auto; z-index: 50;
}
.editor-backdrop.open { display: flex; }
.editor { background: #fff; border-radius: 10pt; width: 560pt; max-width: 100%; padding: 18pt; }
.editor h2 { margin: 0 0 12pt; font-size: 13pt; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt 10pt; }
.fgrid .full { grid-column: 1 / -1; }
label.fld { display: block; font-size: 8pt; color: #475569; }
label.fld input, label.fld textarea {
  display: block; width: 100%; margin-top: 3pt; font: inherit; font-size: 10pt;
  padding: 6pt 8pt; border: 1px solid #cbd5e1; border-radius: 5pt; color: #0f172a;
}
label.fld textarea { resize: vertical; }
.itemrow { display: grid; grid-template-columns: 1fr 52pt 70pt 26pt; gap: 6pt; margin-top: 6pt; }
.itemrow input { font: inherit; font-size: 10pt; padding: 6pt 8pt; border: 1px solid #cbd5e1; border-radius: 5pt; }
.editor .actions { display: flex; gap: 8pt; margin-top: 14pt; justify-content: flex-end; }
.login { max-width: 300pt; margin: 60pt auto; background: #fff; padding: 22pt; border-radius: 10pt; border: 1px solid #e2e8f0; }
.login h2 { margin: 0 0 10pt; font-size: 13pt; }
.login input { width: 100%; font: inherit; font-size: 11pt; padding: 7pt 9pt; border: 1px solid #cbd5e1; border-radius: 5pt; }
.login button { margin-top: 10pt; width: 100%; }
.err { color: #b91c1c; font-size: 9pt; margin-top: 6pt; min-height: 12pt; }

/* ============ invoice document (points everywhere: screen = print) ============ */
.invoice {
  font-family: "DejaVu Sans", sans-serif; color: #0f172a;
  padding: 26.25pt 30pt 64pt; font-size: 8.2pt; line-height: 1.4;
  position: relative; background: #fff;
}
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.brand { height: 52.5pt; width: auto; display: block; }
.hcol { text-align: right; }
.doc-title { font-size: 25.5pt; color: #111827; line-height: 1.15; text-align: right; margin-top: 8pt; margin-right: 0.7pt; letter-spacing: 0.8pt; }
.co { text-align: right; margin-top: 11pt; font-size: 8.2pt; color: #334155; line-height: 12.7pt; }
.co-name { font-weight: 700; font-size: 9.8pt; color: #0f172a; }
.co-phone { margin-top: 6.3pt; }
.inv-rule { border-top: 0.9pt solid #cbd5e1; margin-top: 11.8pt; }
.inv-parties { display: flex; justify-content: space-between; margin-top: 13pt; }
.bill { font-size: 8.2pt; color: #334155; line-height: 12.65pt; }
.bill .lbl { font-size: 6.8pt; font-weight: 700; color: #94a3b8; letter-spacing: 0.4pt; }
.bill-name { font-weight: 700; color: #0f172a; }
.bill-email { margin-top: 6.1pt; }
.meta { width: 200pt; font-size: 8.2pt; line-height: 16.4pt; color: #0f172a; }
.mrow { display: flex; justify-content: flex-end; gap: 9pt; white-space: nowrap; }
.mrow .mkey { text-align: right; font-weight: 700; }
.mrow .mval { letter-spacing: -0.12pt; }
.mbox .mval { font-weight: 700; }
.mrow .mval { min-width: 91pt; }
.mbox { background: #f1f5f9; margin: 2.4pt -0.75pt 0 0; padding: 0 0.75pt 2.6pt 0; }
.items { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 10pt; }
.items th {
  background: #1e293b; color: #fff; font-size: 6.8pt; font-weight: 700;
  letter-spacing: 0.5pt; padding: 6.2pt 0; line-height: 1;
}
.items th.c-items { text-align: left; padding-left: 6pt; width: 279.73pt; }
.items th:nth-child(2) { width: 93.06pt; }
.items th:nth-child(3) { width: 79.9pt; }
.items th:nth-child(4) { width: 82.6pt; }
.items th.c-num { text-align: right; padding-right: 6pt; }
.items td { vertical-align: top; padding: 7.6pt 10pt 5pt 0; font-size: 8.2pt; }
.items td.c-items { padding-left: 6pt; }
.items td.c-num { text-align: right; letter-spacing: -0.1pt; }
.items td:nth-child(2) { padding-right: 6pt; }
.idesc { color: #0f172a; font-weight: 700; }
.isub { font-size: 7.5pt; color: #475569; margin-top: 3.6pt; }
.items tbody tr:last-child td.c-items { border-bottom: 0.75pt solid #e2e8f0; }
.totals { margin: 6.5pt 0 0; }
.totals .trow:first-child { position: relative; padding-bottom: 4.5pt; }
.totals .trow:first-child::after { content: ""; display: block; position: absolute; left: 295.15pt; right: 77.88pt; bottom: 0; border-bottom: 1.5pt solid #0f172a; }
.trow { display: flex; justify-content: space-between; font-size: 8.2pt; line-height: 12.5pt; }
.trow.tdue .tkey { margin-left: 0; }
.trow .tkey { margin-left: 301.2pt; }
.trow .tval { margin-right: 7pt; letter-spacing: -0.1pt; }
.trow.tdue { font-size: 9.4pt; font-weight: 700; margin-top: 5pt; }
.paybox { background: #eff6ff; border: 0.9pt solid #93c5fc; margin-top: 11pt; padding: 6.5pt 9pt 8.5pt; }
.payline { font-size: 8.6pt; color: #111827; }
.pills { display: inline-block; margin-left: 3pt; }
.pill { height: 13.2pt; width: auto; margin-left: 4.5pt; vertical-align: -2.6pt; }
.paylink { display: inline-block; margin-top: 4.5pt; font-size: 8.2pt; color: #2563eb; text-decoration: underline; word-break: break-all; }
.notes { margin-top: 16pt; }
.notes-h { font-size: 7.5pt; font-weight: 700; color: #334155; letter-spacing: 0.5pt; margin-bottom: 4pt; }
.notes-body { font-size: 8.2pt; color: #334155; line-height: 12.6pt; letter-spacing: -0.08pt; }
.notes-body p { margin: 0; }
.notes-body .nt-h { margin-top: 6pt; }
.notes-body .nt-s { margin-top: 3pt; }
.notes-body .nt-gap { height: 6pt; }
.inv-foot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 26pt; border-top: 0.75pt solid #e2e8f0; padding-top: 7.5pt; }
.f-addr { font-size: 6.4pt; color: #64748b; line-height: 9.2pt; }
.f-num { position: absolute; left: 0; right: 0; bottom: -7pt; font-size: 6.4pt; color: #64748b; text-align: center; line-height: 10pt; white-space: nowrap; pointer-events: none; }
.f-num .pagenum { font-size: 8pt; }
.pagenum:empty::after { content: "Page 1"; }
.f-brand { height: 26.25pt; width: auto; display: block; }

/* ============ print: invoice only, A4, repeating footer + page numbers ============ */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  body.printing-invoice .topbar, body.printing-invoice .list-pane, body.printing-invoice #login, body.printing-invoice .editor-backdrop { display: none !important; }
  body.printing-invoice #app { display: block !important; }
  body.printing-invoice .wrap { display: block; padding: 0; }
  body.printing-invoice .sheet { box-shadow: none; margin: 0; max-width: none; overflow: visible; }
  .invoice { padding: 0; }
  .invoice > .inv-foot { display: none; }
  .sheet-page { position: relative; height: 296.5mm; padding: 26.25pt 30pt 0; break-after: page; page-break-after: always; }
  .sheet-page.cont { padding-top: 28pt; }
  .sheet-page:last-child { break-after: auto; page-break-after: auto; }
  .sheet-page .inv-foot { position: absolute; bottom: 18.9pt; left: 30pt; right: 30pt; margin-top: 0; background: #fff; }
  .sheet-page .pagenum::after { content: none; }
}
.itemrow .sub{grid-column:1/-1}
body.measuring .list-pane{display:none}
body.measuring .sheet{width:595.28pt;max-width:none;margin:0 auto}
.sheet-page .notes.mid{margin-top:0}