/* Printable documents (Views/Templates and print pages): payslips, registers, statutory forms.
   Tokens only. A sheet is always `.doc.light`, so it stays paper-white in dark mode.
   PDF-safe: the .doc* rules use tables, flex and var() only (no grid, color-mix or oklch), because
   SalarySlip / Form16 are also converted by iText pdfHTML (styles inlined by _ReportInlineStyles).

   Screen chrome (Views/Shared/_ReportLayout.cshtml)
     .report-bar            sticky top bar: .report-bar-title + .report-bar-actions (buttons)
     .report-canvas         gray area holding the sheets (a vertical stack)

   Sheet
     .doc.light             one paper sheet (A4 portrait width on screen; one printed page or more)
       .doc-landscape       A4 landscape (also prints on a landscape page)
       .doc-wide            full width on screen, for very wide registers (prints landscape)
       .doc-a5              A5-width card form (prints on A4 at that width)
       .doc-compact         smaller base text (11px) for dense forms
     .page-break            forced page break after this element (on a .doc or an empty div)
     .avoid-break           keep this block on one page
     .no-print              (layout.css) hidden when printing; .print-only = hidden on screen, shown in print

   Header block
     .doc-header            centered heading block; + .doc-header-ruled for a rule underneath
     .doc-form-no           "FORM 'C'", "Form - 22" (bold, uppercase)
     .doc-rule              "(see rule 36)" (small)
     .doc-company           company / establishment name (bold, uppercase)
     .doc-address           address line under the company
     .doc-title             document title (bold)
     .doc-subtitle          period / branch line under the title
     .doc-header-split      header row: logo | centered title | form number (children: 3 blocks)
       .doc-logo            small logo image

   Key / value
     .doc-meta              <dl class="doc-meta"><div><dt>Branch</dt><dd>Pune</dd></div>…</dl>
                            pairs flow in a wrapping row ("Branch: Pune   Month: Sep 2026")
       .doc-meta-plain      no ":" after the labels (label text already ends in its own punctuation)
       .doc-meta-list       one pair per line with an aligned label column
       .doc-meta-boxed      with .doc-meta-list: ruled box, e.g. a group header right above a table
     .doc-items             numbered statements of a form: <ol class="doc-items"><li>1. Label <b class="doc-value">…</b></li>
     .doc-ol                a numbered (1. 2. 3.) list where the numbers come from the list itself
     .doc-value             filled-in value (bold)
     .doc-indent            indent one step (values under an item)
     .doc-fill              blank to fill in by hand (dotted underline); + .doc-fill-wide for a full line

   Tables
     .doc-table             bordered grid (black hairlines); header cells centered, bold, light gray
       .doc-table-compact   11px text, tight padding
       .doc-table-dense     9px text, minimal padding (wide statutory registers)
       .doc-table-fixed     table-layout: fixed (column classes then set the widths)
       .doc-table-plain     no vertical lines: rows ruled only (MIS-style lists)
       .doc-table-kv        label/value table: th = label cell (left, semibold, 35%)
       .doc-table-bare      no lines at all (layout tables inside a form)
       .doc-table-narrow    shrink-to-fit and centered (small summary tables)
       .doc-table-center    body cells centered by default (registers); .left / .num per cell
     cells   .band (shaded, centered, uppercase section band: <tr><th colspan="5" class="band">Contact detail</th></tr>)
             .key (bold, no wrap: the label cell of a label/value grid)
             .num (right, tabular, no wrap) · .ctr (center) · .left · .wrap · .strong · .muted · .top · .indent / .indent-2 / .indent-3 (label 1–3 steps in)
     widths  .col-xs (3%) · .col-sm (5%) · .col-md (8%) · .col-lg (12%) · .col-xl (20%) · .col-2xl (30%)
             · .col-sign (10%, signature column) · .col-quarter (25%)
     joined  .doc-table-joined: no gap below, and the next .doc-table loses its top border (tables that read as one form)
     rows    (tfoot rows are bold) tr.total (bold, shaded) · tr.grand-total (double rule) · tr.subtotal (bold) · tr.group (group heading)
             tr.col-no (column numbers 1, 2, 3 … under the headings) · tr.tall (room to sign / write)
             tr.open-below + tr.open-above (two rows that read as one record: no rule between them)
             tr.rule-below (heavier rule under the row)
             tr.sign-row (taller; label sits at the bottom of the cell)
     .doc-repeat-head       a borderless cell spanning a first <thead> row that holds the sheet header, so it repeats on every printed page
     .doc-empty             "No records" cell (<td colspan class="doc-empty">) or block (<div class="doc-empty">)
     .doc-stacked           a cell split into stacked values: <td class="doc-stacked"><div>1</div><div>E001</div></td>

   CMS letters
     .doc-letter.light      wrapper around HTML from Content Management (DynamicReport); styles the stored
                            templates' own classes (.page-container, .letter-title, .clause-item, .signature-line …)

   Text and layout
     .doc-section           a block with space above; .doc-section-title for its heading (ruled)
     .doc-prose             legal / declaration text (justified paragraphs)
     .doc-cols              side-by-side equal columns (flex; each child one column)
     .doc-photo             passport-photo frame (100×120) holding an <img>; .doc-photo-sm (60×75) inside table rows;
                            .doc-photo-empty = dashed frame for "No photo"
     .doc-divider           <hr class="doc-divider"> a full-width rule between parts of a form
     .doc-cut               dashed "✂ Cut Here" line (tear-off part of a form)
     .doc-box               a hairline box around a block
     .doc-bar               a ruled one-line band (bold) above / below a table: group label, "Total per department : 12";
                            joins the table's border (add .doc-table-joined on a table followed by a bar)
     .doc-signatures        row of signature blocks pushed apart; each .doc-signature has a line above its label
       .doc-signatures-end  a single block at the right; .doc-signature-note = "Yours faithfully," above the space
     .doc-footnote          small note at the end
     .doc-legend            small legend of abbreviations, five per line (<div class="doc-legend"><div><b>P</b> : Present</div>…)
     .doc-split             a line with its children pushed to both ends ("E. Physical examination … Date: ____")
     .doc-page-footer       ruled footer line of a sheet: <div class="doc-page-footer"><span>Form 5</span><span>Page 1 of 4</span></div>
     .doc-muted, .doc-strong, .doc-upper, .doc-right, .doc-center
*/

/* --- Screen chrome --------------------------------------------------------------------------- */

.report-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.report-bar-title {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.report-bar-title .icon {
  color: var(--muted-foreground);
}
.report-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.report-canvas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 6);
  overflow-x: auto;
}
@media (max-width: 640px) {
  .report-bar {
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  }
  .report-canvas {
    padding: calc(var(--spacing) * 4);
  }
}

/* --- Sheet ----------------------------------------------------------------------------------- */

.doc {
  width: 100%;
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
  padding: 12mm;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
}
.doc + .doc {
  margin-top: calc(var(--spacing) * 6);
}
.report-canvas > .doc + .doc {
  margin-top: 0;
}
.doc-landscape {
  max-width: 297mm;
}
.doc-wide {
  max-width: none;
}
.doc-a5 {
  max-width: 148mm;
}
.doc-compact {
  font-size: var(--text-2xs);
}

/* --- Header block ---------------------------------------------------------------------------- */

.doc-header {
  margin-bottom: calc(var(--spacing) * 4);
  text-align: center;
}
.doc-header > * + * {
  margin-top: calc(var(--spacing) * 0.5);
}
.doc-header-ruled {
  padding-bottom: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--foreground);
}
.doc-form-no,
.doc-rule,
.doc-company,
.doc-title,
.doc-subtitle {
  text-align: center;
}
.doc-form-no {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-subtle);
}
.doc-rule {
  font-size: var(--text-2xs);
}
.doc-company {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-subtle);
}
.doc-address {
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}
.doc-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}
.doc-subtitle {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}
.doc-header-split {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 3);
}
.doc-header-split > * {
  flex: 0 0 20%;
}
.doc-header-split > :nth-child(2) {
  flex: 1 1 0;
  text-align: center;
}
.doc-header-split > :last-child:not(:nth-child(2)) {
  text-align: right;
}
.doc-logo {
  max-height: calc(var(--spacing) * 14);
  width: auto;
  object-fit: contain;
}
.doc-header-split > .doc-logo {
  flex: 0 0 auto;
  margin-right: auto;
}

/* --- Key / value ----------------------------------------------------------------------------- */

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 3);
}
.doc-meta > div {
  display: flex;
  gap: calc(var(--spacing) * 1.5);
}
.doc-meta dt {
  font-weight: var(--font-weight-semibold);
}
.doc-meta dt::after {
  content: ":";
}
.doc-header .doc-meta {
  justify-content: center;
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: 0;
}
.doc-meta-plain dt::after {
  content: none;
}
.doc-meta-list {
  display: table;
  border-collapse: collapse;
}
.doc-meta-list > div {
  display: table-row;
}
.doc-meta-list dt,
.doc-meta-list dd {
  display: table-cell;
  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3) calc(var(--spacing) * 0.5) 0;
}
.doc-meta-list dt {
  white-space: nowrap;
}
.doc-meta-boxed {
  width: 100%;
  margin-bottom: 0;
  border: 1px solid var(--foreground);
  border-bottom: 0;
}
.doc-meta-boxed dt,
.doc-meta-boxed dd {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--foreground);
  font-weight: var(--font-weight-bold);
}
.doc-meta-boxed dt {
  width: 1%;
  border-right: 1px solid var(--foreground);
}
.doc-meta-boxed + .doc-table {
  border-top: 0;
}
.doc-items {
  margin-bottom: calc(var(--spacing) * 3);
  list-style: none;
}
.doc-items > * + * {
  margin-top: calc(var(--spacing) * 2);
}
.doc-ol {
  margin-bottom: calc(var(--spacing) * 3);
  padding-left: calc(var(--spacing) * 5);
  list-style: decimal;
}
.doc-ol > li + li {
  margin-top: calc(var(--spacing) * 1);
}
.doc-value {
  font-weight: var(--font-weight-bold);
}
.doc-indent {
  display: block;
  padding-left: calc(var(--spacing) * 5);
}
.doc-fill {
  display: inline-block;
  min-width: calc(var(--spacing) * 30);
  min-height: calc(var(--spacing) * 4);
  border-bottom: 1px dotted var(--foreground);
  vertical-align: bottom;
}
.doc-fill-wide {
  display: block;
  width: 100%;
}

/* --- Tables ---------------------------------------------------------------------------------- */

.doc-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--foreground);
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-xs);
  color: var(--foreground);
}
.doc-table th,
.doc-table td {
  border: 1px solid var(--foreground);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);
  vertical-align: middle;
  text-align: left;
  overflow-wrap: anywhere;
}
.doc-table th {
  background: var(--muted);
  font-weight: var(--font-weight-bold);
  text-align: center;
  overflow-wrap: normal;
}
.doc-table thead {
  display: table-header-group;
}
.doc-table tr {
  break-inside: avoid;
}
.doc-table-compact {
  font-size: var(--text-2xs);
}
.doc-table-compact th,
.doc-table-compact td {
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1);
}
.doc-table-dense {
  font-size: calc(var(--text-3xs) * 0.9);
  line-height: var(--leading-tight);
}
.doc-table-dense th,
.doc-table-dense td {
  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.75);
}
.doc-table-narrow {
  width: auto;
  min-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.doc-table-fixed {
  table-layout: fixed;
}
.doc-table-plain {
  border-left: 0;
  border-right: 0;
}
.doc-table-plain th,
.doc-table-plain td {
  border-left: 0;
  border-right: 0;
}
.doc-table-center td {
  text-align: center;
}
.doc-table-kv th {
  width: 35%;
  text-align: left;
  font-weight: var(--font-weight-semibold);
}
.doc-table-bare,
.doc-table-bare th,
.doc-table-bare td {
  border: 0;
  background: none;
}
table.doc-table-bare {
  width: 100%;
  border-collapse: collapse;
}
.doc-table-bare th,
.doc-table-bare td {
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 2) calc(var(--spacing) * 0.75) 0;
  text-align: left;
  vertical-align: top;
}
.doc-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.doc-table .ctr {
  text-align: center;
}
.doc-table .left {
  text-align: left;
}
.doc-table .wrap {
  white-space: normal;
}
.doc-table .strong {
  font-weight: var(--font-weight-bold);
}
.doc-table .muted {
  color: var(--muted-foreground);
}
.doc-table .indent {
  padding-left: calc(var(--spacing) * 5);
}
.doc-table .indent-2 {
  padding-left: calc(var(--spacing) * 10);
}
.doc-table .indent-3 {
  padding-left: calc(var(--spacing) * 12.5);
}
.doc-table tr.rule-below > * {
  border-bottom: 2px solid var(--foreground);
}
.doc-table .top {
  vertical-align: top;
}
.doc-table .col-xs {
  width: 3%;
}
.doc-table .col-sm {
  width: 5%;
}
.doc-table .col-md {
  width: 8%;
}
.doc-table .col-lg {
  width: 12%;
}
.doc-table .col-xl {
  width: 20%;
}
.doc-table .col-2xl {
  width: 30%;
}
.doc-table .col-sign {
  width: 10%;
}
.doc-table .col-quarter {
  width: 25%;
}
.doc-table.doc-table-joined {
  margin-bottom: 0;
}
.doc-table.doc-table-joined + .doc-table {
  border-top: 0;
}
.doc-table tr.sign-row > * {
  height: calc(var(--spacing) * 12);
  vertical-align: bottom;
}
.doc-table tfoot > tr > *,
.doc-table tr.total > *,
.doc-table tr.subtotal > *,
.doc-table tr.grand-total > * {
  font-weight: var(--font-weight-bold);
}
.doc-table tr.total > *,
.doc-table tr.grand-total > * {
  background: var(--muted);
}
.doc-table tr.grand-total > * {
  border-top: 3px double var(--foreground);
}
.doc-table th.band,
.doc-table td.band {
  background: var(--muted);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: uppercase;
}
.doc-table .key {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.doc-table tr.group > * {
  background: var(--muted);
  font-weight: var(--font-weight-bold);
  text-align: left;
}
.doc-table tr.col-no > * {
  padding-top: calc(var(--spacing) * 0.5);
  padding-bottom: calc(var(--spacing) * 0.5);
  font-size: var(--text-3xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}
.doc-table tr.open-below > * {
  border-bottom: 0;
}
.doc-table tr.open-above > * {
  border-top: 0;
}
.doc-table tr.tall > * {
  height: calc(var(--spacing) * 9);
}
.doc-table th.doc-repeat-head,
.doc-table td.doc-repeat-head {
  padding: 0 0 calc(var(--spacing) * 2);
  border: 0;
  background: none;
  font-weight: var(--font-weight-normal);
  text-align: left;
}
.doc-empty {
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
  color: var(--muted-foreground);
  text-align: center;
}
.doc-table td.doc-empty {
  text-align: center;
}
div.doc-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.doc-table td.doc-stacked {
  padding: 0;
  vertical-align: top;
}
.doc-stacked > * {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);
}
.doc-stacked > * + * {
  border-top: 1px solid var(--foreground);
}

/* --- Text and layout ------------------------------------------------------------------------- */

.doc-section {
  margin-top: calc(var(--spacing) * 5);
}
.doc-section-title {
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 1);
  border-bottom: 1px solid var(--foreground);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}
.doc-section-title:first-child,
.doc-section > .doc-section-title {
  margin-top: 0;
}
.doc-prose {
  text-align: justify;
  line-height: var(--leading-normal);
}
.doc-prose > * + * {
  margin-top: calc(var(--spacing) * 2);
}
.doc-cols {
  display: flex;
  gap: calc(var(--spacing) * 4);
}
.doc-cols > * {
  flex: 1 1 0;
  min-width: 0;
}
.doc-divider {
  margin: calc(var(--spacing) * 5) 0;
  border-top: 1px solid var(--foreground);
}
.doc-cut {
  position: relative;
  margin: calc(var(--spacing) * 6) 0;
  border-top: 1px dashed var(--foreground);
}
.doc-cut::after {
  content: "✂ Cut Here";
  position: absolute;
  right: 0;
  top: calc(var(--spacing) * -2);
  padding: 0 calc(var(--spacing) * 1);
  background: var(--card);
  font-size: var(--text-3xs);
  font-weight: var(--font-weight-bold);
}
.doc-box {
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--foreground);
}
.doc-box > .doc-meta:last-child {
  margin-bottom: 0;
}
.doc-box > * + * {
  margin-top: calc(var(--spacing) * 1.5);
}
.doc-box .doc-meta {
  margin-bottom: 0;
}
.doc-bar {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border: 1px solid var(--foreground);
  font-weight: var(--font-weight-bold);
}
.doc-meta.doc-bar {
  margin-bottom: 0;
}
.doc-bar + .doc-bar,
.doc-bar + .doc-table,
.doc-box + .doc-table,
.doc-table-joined + .doc-bar {
  border-top: 0;
}
.doc-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 25);
  height: calc(var(--spacing) * 30);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--foreground);
}
.doc-photo-sm {
  width: calc(var(--spacing) * 15);
  height: calc(var(--spacing) * 19);
  font-size: var(--text-3xs);
}
.doc-photo-empty {
  border-style: dashed;
}
.doc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doc-signatures {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--spacing) * 8);
  margin-top: calc(var(--spacing) * 14);
  break-inside: avoid;
}
.doc-signatures-end {
  justify-content: flex-end;
}
.doc-signature-note {
  margin-bottom: calc(var(--spacing) * 12);
  text-align: center;
}
.doc-signature {
  min-width: calc(var(--spacing) * 45);
  padding-top: calc(var(--spacing) * 1.5);
  border-top: 1px solid var(--foreground);
  text-align: center;
  font-weight: var(--font-weight-semibold);
}
.doc-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
}
.doc-page-footer {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 6);
  padding-top: calc(var(--spacing) * 1.5);
  border-top: 1px solid var(--foreground);
  font-size: var(--text-3xs);
  color: var(--muted-foreground);
}
.doc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1.5) 0;
  font-size: var(--text-3xs);
}
.doc-legend > * {
  flex: 0 0 20%;
}
.doc-footnote {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
}
.doc-muted {
  color: var(--muted-foreground);
}
.doc-strong {
  font-weight: var(--font-weight-bold);
}
.doc-upper {
  text-transform: uppercase;
}
.doc-right {
  text-align: right;
}
.doc-center {
  text-align: center;
}

/* --- CMS letters (Views/Templates/DynamicReport) ---------------------------------------------- */
/* Appointment / confirmation letters come from Content Management as HTML. Their markup uses these
   class names, so the names are a contract with the stored templates: keep them. */

.doc-letter .page-container {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: 0 auto calc(var(--spacing) * 5);
  padding: 20mm 20mm 15mm;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--text-control);
}
.doc-letter .page-content {
  display: flex;
  flex-direction: column;
  height: 250mm;
  overflow: hidden;
  text-align: justify;
}
.doc-letter .page-footer {
  position: absolute;
  right: 20mm;
  bottom: 15mm;
  font-size: var(--text-2xs);
}
.doc-letter .page-break {
  break-before: page;
  break-after: auto;
}
.doc-letter .letter-title {
  margin: calc(var(--spacing) * 4) 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
}
.doc-letter .recipient-details {
  margin-bottom: calc(var(--spacing) * 5);
  line-height: var(--leading-normal);
}
.doc-letter .salutation {
  margin-bottom: calc(var(--spacing) * 2.5);
  font-weight: var(--font-weight-bold);
}
.doc-letter .subject-line {
  margin-bottom: calc(var(--spacing) * 4);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}
.doc-letter .letter-body {
  line-height: var(--leading-normal);
}
.doc-letter .clause-list {
  margin: calc(var(--spacing) * 2.5) 0;
  list-style: none;
}
.doc-letter .clause-item {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  text-align: justify;
}
.doc-letter .clause-title {
  display: inline;
  font-weight: var(--font-weight-bold);
}
.doc-letter .signature-section {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--spacing) * 10);
}
.doc-letter .signature-box {
  width: 45%;
}
.doc-letter .signature-line {
  margin-top: calc(var(--spacing) * 11);
  padding-top: calc(var(--spacing) * 1.5);
  border-top: 1px solid var(--foreground);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* --- Paging ---------------------------------------------------------------------------------- */

.page-break {
  break-after: page;
  page-break-after: always;
}
.avoid-break {
  break-inside: avoid;
}
.print-only {
  display: none;
}

@page {
  size: A4 portrait;
  margin: 10mm;
}
@page landscape {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .report-bar {
    display: none !important;
  }
  .print-only {
    display: block;
  }
  .report-canvas {
    display: block;
    padding: 0;
    overflow: visible;
  }
  .doc {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .doc ~ .doc {
    break-before: page;
  }
  .doc-landscape,
  .doc-wide {
    page: landscape;
  }
  .doc-letter .page-container {
    margin: 0 auto;
    border: 0;
    box-shadow: none;
    break-after: page;
  }
  .doc-letter .page-container:last-child {
    break-after: auto;
  }
  .doc-table th,
  .doc-table tr.total > *,
  .doc-table tr.grand-total > *,
  .doc-table tr.group > * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}