/* The invoice document (print, PDF download, share): the A4 design of "my notes/samdart-invoice-document.html", scoped to .idoc so nothing
   here touches the app. The document is built by public/js/invoice-document.js and is only ever on screen while printing, or off screen
   while it is turned into a PDF. */

@page { size: A4; margin: 12mm 0 0 0; }
@page :first { margin: 0; }

/* Off screen while a PDF is made: A4 width, real layout, never visible. */
.idoc-stage { position: fixed; top: 0; left: -12000px; width: 794px; pointer-events: none; }
.idoc-stage .idoc .page { width: 794px; min-height: 1123px; margin: 0; box-shadow: none; }
/* Printing: only the document is shown. */
.idoc-print { display: none; }

.idoc {
  --deep: #073d31; --green: #087957; --mint: #e3f1ea; --gold: #f0b24a; --amber: #8a5410; --cream: #f6f3ea; --line: #dfe4de;
  --ink: #16211c; --muted: #5f6b65; --red: #b3261e; --navy: #14284b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); font-size: 10pt; line-height: 1.4;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.idoc *, .idoc *::before, .idoc *::after { box-sizing: border-box; margin: 0; padding: 0; }
.idoc .page { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; position: relative; display: flex; flex-direction: column; }
.idoc .strip { height: 4mm; background: var(--deep); }
.idoc .strip i { display: block; height: 100%; width: 34mm; background: var(--gold); }
.idoc .inner { padding: 8mm 16mm 0; flex: 1; display: flex; flex-direction: column; }
.idoc .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; }
.idoc .brand { display: flex; gap: 4mm; align-items: center; }
.idoc .logo { display: block; width: 14mm; height: 14mm; border-radius: 3mm; object-fit: cover; }
.idoc .brand b { display: block; font-size: 15pt; color: var(--deep); letter-spacing: -0.01em; }
.idoc .brand span { display: block; font-size: 9pt; color: var(--muted); }
.idoc .brand .web { color: var(--green); font-weight: 700; }
.idoc .title { text-align: right; }
.idoc .title .k { font-size: 9pt; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.idoc .title h1 { font-size: 24pt; line-height: 1.05; letter-spacing: -0.02em; color: var(--deep); margin-top: 1mm; }
.idoc .title .no { font-size: 11pt; font-weight: 700; color: var(--navy); margin-top: 1.5mm; }
.idoc .meta { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6mm; margin-top: 5mm; padding: 3mm 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.idoc .meta .l { font-size: 8pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1mm; }
.idoc .meta .v { font-size: 10.5pt; font-weight: 600; }
.idoc .meta .s { font-size: 9pt; color: var(--muted); font-weight: 400; }
.idoc .meta .row + .row { margin-top: 2.5mm; }
.idoc .sumstrip { display: grid; grid-template-columns: 1fr 1fr 1.2fr; margin-top: 5mm; border: 1px solid var(--line); border-radius: 3mm; overflow: hidden; }
.idoc .sumstrip > div { padding: 2.5mm 5mm; }
.idoc .sumstrip > div + div { border-left: 1px solid var(--line); }
.idoc .sumstrip .l { font-size: 8pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.idoc .sumstrip .v { font-size: 15pt; font-weight: 800; margin-top: 0.5mm; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.idoc .sumstrip .v small { font-size: 9pt; font-weight: 700; margin-right: 1mm; color: var(--muted); }
.idoc .sumstrip .bal { background: var(--cream); }
.idoc .sumstrip .bal.due .v { color: var(--red); }
.idoc .sumstrip .bal.ok .v { color: var(--green); }
.idoc table { width: 100%; border-collapse: collapse; margin-top: 5mm; font-variant-numeric: tabular-nums; }
.idoc thead { display: table-header-group; }
.idoc th { background: var(--deep); color: #fff; font-size: 8.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2.2mm 3mm; text-align: left; }
.idoc th.r, .idoc td.r { text-align: right; }
.idoc th.c, .idoc td.c { text-align: center; }
.idoc tbody td { padding: 2.2mm 3mm; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 10pt; }
.idoc tbody tr { break-inside: avoid; }
.idoc td .nm { font-weight: 600; }
.idoc td .op { font-size: 8.5pt; color: var(--muted); margin-top: 0.3mm; }
.idoc td.n { color: var(--muted); width: 9mm; }
.idoc tr.grp td { background: #f1f6f2; border-bottom: 1px solid #cfe0d4; padding: 2.6mm 3mm; font-weight: 700; color: var(--deep); }
.idoc tr.grp td span { font-weight: 500; color: var(--muted); font-size: 9pt; margin-left: 2mm; }
.idoc tr.sub td { border-bottom: 1px solid var(--line); font-weight: 700; background: #fafbfa; }
.idoc tr.not td { color: #7a847e; background: repeating-linear-gradient(135deg, #fff 0 6px, #f6f7f5 6px 12px); }
.idoc .unit { display: inline-block; background: #fdf1dc; color: var(--amber); font-weight: 700; border-radius: 1.2mm; padding: 0.2mm 1.6mm; font-size: 9pt; }
.idoc .bottom { break-inside: avoid; display: grid; grid-template-columns: 1fr 70mm; gap: 8mm; margin-top: 5mm; align-items: start; }
.idoc .box { border: 1px solid var(--line); border-radius: 3mm; padding: 3mm 4.5mm; }
.idoc .box h3 { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2mm; }
.idoc .box p { font-size: 9pt; color: var(--muted); line-height: 1.5; }
.idoc .box p + p { margin-top: 1.5mm; }
.idoc .box b { color: var(--ink); }
.idoc .tot { font-variant-numeric: tabular-nums; }
.idoc .tot .r { display: flex; justify-content: space-between; padding: 1.5mm 0; font-size: 10pt; color: var(--muted); }
.idoc .tot .r b { color: var(--ink); font-weight: 600; }
.idoc .tot .g { border-top: 1.5px solid var(--deep); margin-top: 1.5mm; padding-top: 2.5mm; font-size: 11.5pt; font-weight: 700; color: var(--ink); }
.idoc .tot .g b { font-size: 13pt; font-weight: 800; }
.idoc .tot .p b { color: var(--green); }
.idoc .tot .d { background: var(--cream); margin: 1.5mm 0 0; padding: 2.5mm 3mm; border-radius: 2mm; font-weight: 800; font-size: 11pt; color: var(--ink); }
.idoc .tot .d b { font-size: 12.5pt; font-weight: 800; }
.idoc .tot .d.due b { color: var(--red); }
.idoc .tot .d.ok b { color: var(--green); }
.idoc .pill { display: inline-block; margin-top: 2.5mm; font-size: 9pt; font-weight: 800; letter-spacing: 0.14em; border: 1.5px solid var(--green); color: var(--green); border-radius: 99px; padding: 0.8mm 4mm; }
.idoc .pill.due { border-color: var(--red); color: var(--red); }
.idoc .foot { margin-top: auto; padding: 3mm 16mm 6mm; }
.idoc .foot .thanks { font-size: 10pt; font-weight: 700; color: var(--deep); }
.idoc .foot .sm { display: flex; justify-content: space-between; gap: 8mm; font-size: 8.5pt; color: var(--muted); margin-top: 1.5mm; border-top: 1px solid var(--line); padding-top: 3mm; }
.idoc .foot .fn { font-size: 8.5pt; color: var(--muted); margin-top: 0.8mm; }
.idoc .compact tbody td, .idoc table.compact tbody td { padding: 1.5mm 3mm; }
.idoc .page.sh .inner { padding-top: 6mm; }
.idoc .page.sh .foot { padding-bottom: 4mm; }

@media print {
  html, body { background: #fff !important; }
  body.printing-idoc > *:not(.idoc-print) { display: none !important; }
  body.printing-idoc > .idoc-print { display: block !important; position: static; }
  .idoc-print .idoc .page { margin: 0; box-shadow: none; }
}