/* ============================================================================
   APILOX A4 DOCUMENT TEMPLATE
   ----------------------------------------------------------------------------
   One printable house style for every A4 document the app produces: GRN
   reports, wholesale invoices, proformas, inventory reports, statements.
   Build the markup with js/apilox-doc.js rather than hand-rolling it per
   page, so a change here reaches every report at once.

   Layout follows the classic accent-band invoice: a colour block behind the
   masthead, labelled band headers over each data group, zebra data rows, a
   totals box, and a full-width footer band.

   The accent is the navigation active-tab green (--sweet-mint-pesto), with
   --tropical-forest for text on top of it. That pairing is deliberate and
   not interchangeable: sweet-mint-pesto is a light mint, so white text on
   it fails badly on paper and worse on a monochrome printer. Every band in
   here is therefore mint-with-forest-text, matching the active nav item.
   ============================================================================ */

:root{
  --doc-accent:#bcf49d;          /* sweet-mint-pesto -- nav active tab */
  --doc-accent-soft:#d7f7c4;     /* mint-soft -- zebra tint */
  --doc-ink:#1f4842;             /* tropical-forest -- text on accent */
  --doc-ink-deep:#16332f;
  --doc-text:#1a1a1a;
  --doc-muted:#6b6f6e;
  --doc-line:#e6e6e6;
  --doc-row:#f2f4f2;
  --doc-paper:#ffffff;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
.doc-page{
  position:relative;
  width:210mm;
  min-height:297mm;
  margin:0 auto;
  padding:0 0 34mm;             /* room for the footer band */
  background:var(--doc-paper);
  color:var(--doc-text);
  font-family:'Google Sans Flex Variable', -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:10pt;
  line-height:1.45;
  box-sizing:border-box;
}
/* On screen the page floats on a desk; in print it IS the paper. */
.doc-viewport{ background:#eef0ee; padding:24px 12px; }
.doc-viewport .doc-page{ box-shadow:0 10px 40px rgba(22,51,47,.16); }

/* Accent block in the top-left corner. On screen it is drawn on the sheet
   itself; in print it becomes a running mark repeated on every page (see
   .doc-mark below), so a loose continuation sheet is still identifiable
   as an Apilox document. */
.doc-page::before{
  content:''; position:absolute; top:0; left:0;
  width:26mm; height:14mm; background:var(--doc-accent);
}

/* The print root is parked off-screen on screen, and brought back for
   print. Both states live here rather than as an inline style, because an
   inline declaration is not reliably overridden by @media print rules --
   when it wasn't, the document rendered perfectly and then printed blank,
   still sitting at left:-10000px. */
.doc-print-root{ position:absolute; left:-10000px; top:0; }

/* The repeating corner mark. Hidden on screen -- the sheet already draws
   its own via ::before -- and switched on for print, where `position:fixed`
   is what makes an element repeat on every page. */
.doc-mark{ display:none; }

.doc-inner{ padding:16mm 16mm 0; position:relative; }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.doc-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12mm; margin-bottom:10mm;
}
/* The masthead carries ONLY the pharmacy's own logo now -- no Apilox
   wordmark/tagline, no pharmacy name repeated as text next to it (the
   party blocks and footer below already say who this document is from).
   Sized deliberately larger than the old logo+name lockup it replaces, so
   a bare mark still reads as a real letterhead, not an afterthought. */
.doc-brand{ display:flex; align-items:center; min-height:20mm; }
.doc-brand img{ max-height:20mm; max-width:70mm; width:auto; display:block; object-fit:contain; }
.doc-brand-fallback{
  font-size:19pt; font-weight:800; letter-spacing:.03em;
  color:var(--doc-ink-deep); line-height:1.1;
}
.doc-title{
  font-size:26pt; font-weight:300; letter-spacing:.06em;
  color:var(--doc-ink-deep); text-transform:uppercase; text-align:right;
  white-space:nowrap; line-height:1;
}
.doc-title-sub{
  font-size:8pt; font-weight:700; letter-spacing:.14em; text-align:right;
  color:var(--doc-muted); text-transform:uppercase; margin-top:1.5mm;
}

/* ── Reference lines (No. / date / due) ───────────────────────────────── */
.doc-meta{ margin-bottom:8mm; }
.doc-meta div{ font-size:9pt; color:var(--doc-text); }
.doc-meta .strong{ font-weight:700; }

/* ── Party blocks (FROM / TO) ─────────────────────────────────────────── */
.doc-parties{ display:flex; gap:10mm; margin-bottom:9mm; }
.doc-party{ flex:1; min-width:0; }
.doc-party.right{ margin-left:auto; }

.doc-band{
  background:var(--doc-accent); color:var(--doc-ink);
  font-size:8pt; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:2mm 3mm;
}
.doc-rows{ border:1px solid var(--doc-line); border-top:none; }
.doc-row{
  display:flex; gap:2mm; padding:1.6mm 3mm; font-size:8.5pt;
  border-bottom:1px solid var(--doc-line);
}
.doc-row:last-child{ border-bottom:none; }
.doc-row:nth-child(odd){ background:var(--doc-row); }
.doc-row .k{ color:var(--doc-muted); font-weight:600; white-space:nowrap; }
.doc-row .v{ color:var(--doc-text); font-weight:600; word-break:break-word; }

/* ── Line-item table ──────────────────────────────────────────────────────
   Plain block-stacked rows, not a real <table> and not CSS grid -- see the
   comment on `table()` in apilox-doc.js for why: both fragment incorrectly
   (print entirely blank) once a report is long enough to span more than
   one physical page. Each .doc-trow is flex internally (a single row's
   height never needs to fragment) but the rows themselves are plain block
   children of .doc-table, which is the one layout Chromium's print engine
   paginates reliably. Column widths are percentages set inline per cell
   (computed once per document in JS) so they still line up top to bottom. */
.doc-table{ width:100%; margin-bottom:7mm; }
.doc-trow{ display:flex; }
.doc-thead-row{ background:var(--doc-accent); }
.doc-thead-row .doc-tcell{
  color:var(--doc-ink);
  font-size:8pt; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2.4mm 3mm; text-align:left; white-space:nowrap; box-sizing:border-box;
  border-bottom:none;
}
.doc-tcell.num{ text-align:right; }
.doc-tcell{
  padding:2.6mm 3mm; font-size:9pt; color:var(--doc-text); box-sizing:border-box;
  border-bottom:1px solid var(--doc-line);
}
.doc-trow.even .doc-tcell{ background:var(--doc-row); }
.doc-table .item-name{ font-weight:700; color:var(--doc-text); }
.doc-table .item-sub{ font-size:7.5pt; color:var(--doc-muted); margin-top:.4mm; }
.doc-tcell.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.doc-table .flag{ color:#f73540; font-weight:800; }

/* ── Lower half: notes on the left, totals on the right ───────────────── */
.doc-lower{ display:flex; gap:10mm; align-items:flex-start; margin-bottom:8mm; }
.doc-notes{ flex:1; min-width:0; }
.doc-note-body{
  border:1px solid var(--doc-line); border-top:none;
  padding:2.6mm 3mm; font-size:8.5pt; color:var(--doc-text);
}
.doc-note-body div{ margin-bottom:.8mm; }
.doc-note-body div:last-child{ margin-bottom:0; }

.doc-totals{ width:74mm; flex:none; }
.doc-total-row{
  display:flex; justify-content:space-between; gap:4mm;
  padding:2.2mm 3mm; font-size:9pt; border-bottom:1px solid var(--doc-line);
}
.doc-total-row:nth-child(odd){ background:var(--doc-row); }
.doc-total-row span{ color:var(--doc-muted); font-weight:600; }
.doc-total-row strong{ font-variant-numeric:tabular-nums; font-weight:700; }
.doc-total-row.grand{
  background:var(--doc-accent); border-bottom:none;
  padding:3mm; margin-top:0;
}
.doc-total-row.grand span{ color:var(--doc-ink); font-weight:800; font-size:9.5pt; }
.doc-total-row.grand strong{ color:var(--doc-ink); font-size:12pt; font-weight:800; }

/* ── Close ────────────────────────────────────────────────────────────── */
.doc-close{ display:flex; justify-content:space-between; align-items:flex-end; gap:12mm; }
.doc-thanks{ font-size:15pt; font-weight:300; color:var(--doc-ink-deep); margin-bottom:3mm; }
.doc-terms-title{ font-size:8pt; font-weight:800; color:var(--doc-text); margin-bottom:1mm; }
.doc-terms{ font-size:7.5pt; color:var(--doc-muted); max-width:105mm; line-height:1.5; }

.doc-sign{ text-align:center; flex:none; }
.doc-sign-line{ width:46mm; border-top:1px solid var(--doc-text); margin:0 auto 1.4mm; }
.doc-sign-name{ font-size:9pt; font-weight:700; color:var(--doc-text); }
.doc-sign-role{ font-size:7.5pt; color:var(--doc-muted); }

/* ── Footer band ──────────────────────────────────────────────────────── *
 * Deliberately just one centered line now -- the pharmacy's own contact
 * details (phone/email/address) moved up into the "From" party block on
 * an invoice, where they're actually part of the seller's identity,
 * rather than repeated again down here. This line is Apilox's own
 * attribution, not the pharmacy's, so it stays quiet: a thin top hairline,
 * no accent-color band. */
.doc-footer{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--doc-line); color:var(--doc-muted);
  padding:4mm 16mm; text-align:center; font-size:7.5pt; font-weight:700; letter-spacing:.04em;
}

/* A status stamp for documents that carry one (GRN verified, invoice paid).
   Sits below the masthead (.doc-head is ~20mm tall, starting at .doc-inner's
   16mm top padding) rather than at the same 16mm top as .doc-title -- the
   two used to land on the same spot and the stamp print on top of the
   title text. */
.doc-stamp{
  position:absolute; top:38mm; right:16mm;
  border:2px solid var(--doc-ink); color:var(--doc-ink);
  font-size:9pt; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:1.6mm 4mm; transform:rotate(-8deg); opacity:.85;
}
.doc-stamp.muted{ border-color:var(--doc-muted); color:var(--doc-muted); }

/* ── Print ──────────────────────────────────────────────────────────────
   Page margins live on @page rather than on the content, because content
   padding only applies once at the start of the flow -- a report that ran
   onto a second page would start hard against the top edge of the paper.
   @page gives every sheet, including continuation sheets, the same
   standard margins. The band down the bottom and the corner mark are
   `position:fixed`, which is what makes an element repeat on each page. */
/* No global @page here on purpose. A page can host BOTH an A4 document and
   an 80mm receipt, and a stylesheet-level @page would apply to whichever
   printed second -- receipts came out on A4. Each renderer now injects its
   own @page for the duration of its print (see ApiloxDoc.print /
   ApiloxReceipt.print), so exactly one is ever active. */

@media print{
  html, body{ background:#fff !important; margin:0 !important; padding:0 !important; }
  /* Hide the app so only the generated document prints -- but ONLY when
     there is one. Unscoped, this rule meant a plain Ctrl+P on any page
     that merely loads this stylesheet printed a blank sheet, since there
     was nothing to reveal in the app's place. */
  body:has(.doc-print-root) > *:not(.doc-print-root){ display:none !important; }
  .doc-print-root{ display:block !important; position:static; left:auto; top:auto; }
  .doc-viewport{ background:#fff !important; padding:0 !important; }
  .doc-page{
    width:auto; min-height:auto; margin:0; padding:0; box-shadow:none !important;
    page-break-after:always;
  }
  .doc-page:last-child{ page-break-after:auto; }
  /* @page now supplies the top and bottom margins; the sheet only needs
     its side gutters. */
  .doc-inner{ padding:0 16mm; }
  /* The masthead is part of the normal flow, so it prints once, on page
     one. Continuation pages carry only the corner mark -- no repeated
     title block, which is what makes them read as a continuation. */
  .doc-page::before{ display:none; }
  /* Chrome positions a fixed element against the CONTENT area in paged
     media and clips anything outside it, so the mark cannot be pushed up
     into the @page margin (tried: it disappears). It therefore sits at the
     top of the content area, and is kept narrower than the 16mm side
     gutter so it can never collide with the table that starts there. */
  .doc-mark{
    display:none; position:fixed; left:0; top:0;
    width:12mm; height:10mm; background:var(--doc-accent);
  }
  /* The footer closes the document once, on the final page, and stays
     absolutely positioned. Making it `fixed` did repeat it on every sheet,
     but a fixed element reserves no space in the flow, so it sat on top of
     the last rows of every page and cut them in half. The repeating
     identifier is the corner mark instead -- that one is small enough to
     live in the gutter without touching anything. */
  .doc-page{ padding-bottom:22mm; }
  /* Bands and zebra rows are the document's structure, not decoration --
     without this they vanish in most browsers' default print settings. */
  .doc-band, .doc-thead-row, .doc-total-row.grand, .doc-footer,
  .doc-trow.even .doc-tcell, .doc-row:nth-child(odd),
  .doc-total-row:nth-child(odd), .doc-mark{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  /* No longer a real <table>, so no page-break-inside/table-header-group --
     each cell is just a grid item and breaks like any other block. */
}