/* =====================================================================
   DOCUMENTS — statements, receipts, lists and reports
   ---------------------------------------------------------------------
   These rules used to live inside @media print, which was right while a
   document could only ever end up on paper. They can now also be opened
   from a shared link on a phone, so they describe the document itself and
   the medium is decided elsewhere: styles.css still hides the application
   while printing, and share.css frames the document as a page on screen.

   Loading this in the application is harmless — #print-root is display:none
   until a print is actually requested.

   Sizes stay in points. A document laid out in points reads the same on
   paper and on a screen, and these go to tenants and, if it ever comes to
   it, to court.
   ===================================================================== */

.pr-doc {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10pt;
  line-height: 1.35;
  color: #000;
}
.pr-portrait { font-size: 10.5pt; }

/* ---- letterhead ---- */
.pr-head { border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
.pr-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16pt; }
.pr-company-name { font-size: 14pt; font-weight: 700; letter-spacing: -.01em; }
.pr-company-contact,
.pr-company-ids { font-size: 8.5pt; color: #333; margin-top: 1.5pt; }
.pr-issued { text-align: right; font-size: 8.5pt; color: #333; white-space: nowrap; }
.pr-issued-label { text-transform: uppercase; letter-spacing: .05em; font-size: 7.5pt; }
.pr-issued-value { font-weight: 600; color: #000; }
.pr-title { font-size: 13pt; font-weight: 700; margin: 9pt 0 0; }
.pr-subject { font-size: 11pt; margin-top: 2pt; }
.pr-h2 { font-size: 11.5pt; font-weight: 700; margin: 14pt 0 5pt; break-after: avoid; }

/* ---- the facts strip under the letterhead ---- */
.pr-facts {
  display: flex; flex-wrap: wrap; gap: 4pt 20pt;
  margin: 8pt 0 10pt; padding-bottom: 7pt; border-bottom: .5pt solid #999;
}
.pr-fact-label {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: .05em; color: #444;
}
.pr-fact-value { font-size: 10pt; font-weight: 600; }

/* ---- tables ---- */
.pr-table { width: 100%; border-collapse: collapse; margin-top: 4pt; }
/* the header repeats on every page — a two-page ledger is unreadable without it */
.pr-table thead { display: table-header-group; }
.pr-table tfoot { display: table-footer-group; }
.pr-table th {
  text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1pt solid #000; padding: 3pt 5pt; white-space: nowrap;
}
.pr-table td {
  padding: 3pt 5pt; border-bottom: .5pt solid #ccc; vertical-align: top;
  white-space: nowrap;
}
.pr-table td.wrap { white-space: normal; }
.pr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table tr { break-inside: avoid; page-break-inside: avoid; }
.pr-table tfoot td {
  border-top: 1pt solid #000; border-bottom: 0; font-weight: 700; padding-top: 4pt;
}
.pr-table .pr-empty { text-align: center; color: #555; padding: 10pt; }
/* a row the owner still has to check keeps its mark on paper too */
.pr-flagged td:first-child::before { content: '! '; font-weight: 700; }

/* ---- the closing figure ---- */
.pr-summary {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 10pt;
  margin-top: 10pt; padding-top: 6pt; border-top: 1.5pt solid #000;
  break-inside: avoid;
}
.pr-summary-label { font-size: 10pt; text-transform: uppercase; letter-spacing: .04em; }
.pr-summary-value { font-size: 15pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-summary-lg .pr-summary-value { font-size: 20pt; }
.pr-balance-after { margin-top: 6pt; font-size: 9.5pt; color: #333; }
.pr-note { margin-top: 8pt; font-size: 8.5pt; color: #333; font-style: italic; }

/* ---- receipt signatures ---- */
.pr-signatures { display: flex; gap: 30pt; margin-top: 34pt; break-inside: avoid; }
.pr-sign { flex: 1 1 0; font-size: 8.5pt; color: #333; }
.pr-sign-line { border-bottom: .5pt solid #000; height: 22pt; margin-bottom: 3pt; }

.pr-footer-note {
  margin-top: 12pt; padding-top: 5pt; border-top: .5pt solid #999;
  font-size: 8pt; color: #444;
}

.pr-subject {
  font-size: 20pt;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-top: 5pt;
}
/* the document type steps back so the name leads */
.pr-title {
  font-size: 10.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #333;
  margin-top: 10pt;
}

/* The document reference — an invoice number, and anything like it. It sits
   under the subject, so it must not compete with the name above it. */
.pr-docref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11pt;
  font-weight: 600;
  letter-spacing: .04em;
  color: #333;
  margin-top: 3pt;
}

/* =====================================================================
   LABELS

   "We need to choose the client, print his name, on how many labels we need.
    Maybe there is an app which we can connect to it, so we can have more
    flexibility Fond and size"

   So the name is the content, and the face and the size are his to set. The
   first version put a company, a phone, a unit and a date on every tag; all
   of that is still available but off, because he asked for a name.

   Everything is in millimetres on purpose. A label sheet is a physical
   object: a value in points or pixels drifts against the die-cut and by the
   bottom of the column every tag is off.
   ===================================================================== */

.lb-sheet {
  display: grid;
  justify-content: start;
  align-content: start;
  break-after: page;
  page-break-after: always;
}

.lb-sheet:last-child { break-after: auto; page-break-after: auto; }

.lb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1mm;
  overflow: hidden;
  padding: 2mm 3mm;
  box-sizing: border-box;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Only when he is cutting them out himself. On die-cut stock a printed
   border lands on the edge and reads as a mistake. */
.lb-cut .lb {
  border: 0.2mm dashed #999;
  border-radius: 1.5mm;
}

/* The name. Face, weight and size all come from the dialog, so nothing here
   may set them — this rule only stops a long one from breaking the tag. */
.lb-name {
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #000;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.lb-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2mm;
  width: 100%;
  font-size: 7pt;
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
}

.lb-co {
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "1 of 3" — what makes a missing piece visible at handover rather than a
   fortnight later. Off by default; he turns it on when a customer leaves
   several things at once. */
.lb-count {
  flex: 0 0 auto;
  font-weight: 700;
  color: #000;
  font-variant-numeric: tabular-nums;
}

.lb-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 3mm;
  font-size: 8pt;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
}

.lb-note {
  font-size: 8.5pt;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}