/* ===========================================================================
   The report sheet - specification section 5.17.

   A report is NOT a document. A quotation is outward-facing and carries the
   letterhead, the brand mark and a boxed table; a financial statement is read
   inside the business and looks the way accounting software prints one -
   Zoho Books, QuickBooks and Xero converge on the same anatomy:

     · a centred masthead - company, report name, the date or period it covers,
       and the basis it was prepared on;
     · hairline ruling only. No vertical gridlines, no box around every cell;
     · accounts indented under the class and sub-class they belong to;
     · figures right-aligned on tabular numerals so the decimals line up, and a
       negative BRACKETED, never signed;
     · a SINGLE rule over a subtotal, a DOUBLE rule under a grand total - the
       underline convention every accountant reads without being told;
     · a foot saying when it was prepared, with the page number.

   Scaling is `--doc-fs`, the variable the print fitter drives, so a long report
   reduces to fewer pages exactly as a document does (lib/doc-print).
   =========================================================================== */

.rep-sheet {
  --doc-fs: 1;
  --rep-ink: #16181a;
  --rep-soft: #5f666d;
  --rep-faint: #8a9199;
  --rep-hair: #e4e7e9;
  --rep-rule: #9aa1a8;
  --rep-strong: #16181a;
  --rep-band: #f3f5f6;
  --rep-bar: #2f8f89;
  --rep-track: #e8ecee;

  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 14mm 12mm;
  box-sizing: border-box;
  background: #fff;
  color: var(--rep-ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: calc(9pt * var(--doc-fs));
  line-height: 1.35;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .10);
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* A report too wide for A4 upright - a month to a column, the lines behind a
   VAT return: A4 on its side (lib/doc-print). */
.rep-sheet.rep-landscape {
  width: 297mm;
  min-height: 210mm;
}

/* -------------------------------------------------------------- the masthead
   Centred text, with the company's mark small at the top left - the mark
   alone, never the name or the slogan drawn with it. */
.rep-head {
  position: relative;
  text-align: center;
}

.rep-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: calc(11mm * var(--doc-fs));
  width: calc(9.55mm * var(--doc-fs));
}

.rep-org {
  font-size: calc(10.5pt * var(--doc-fs));
  font-weight: 700;
  letter-spacing: .02em;
}

.rep-org-line {
  margin-top: calc(.6mm * var(--doc-fs));
  font-size: calc(7.6pt * var(--doc-fs));
  color: var(--rep-faint);
}

.rep-title {
  margin: calc(3.4mm * var(--doc-fs)) 0 0;
  font-size: calc(17pt * var(--doc-fs));
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* "As at 30 June 2026", or "From 1 January 2026 to 30 June 2026". */
.rep-span {
  margin-top: calc(1.4mm * var(--doc-fs));
  font-size: calc(9.5pt * var(--doc-fs));
}

/* "Basis: Accrual · Amounts in AED" - how to read the figures below. */
.rep-basis {
  margin-top: calc(.8mm * var(--doc-fs));
  font-size: calc(8pt * var(--doc-fs));
  color: var(--rep-soft);
}

.rep-head-rule {
  margin-top: calc(4mm * var(--doc-fs));
  border-bottom: .8pt solid var(--rep-strong);
}

/* ------------------------------------------------------------- what was run
   The filters a report was run with are part of the report: a figure means
   nothing if the reader cannot see what was left out of it. */
.rep-applied {
  margin-top: calc(2.6mm * var(--doc-fs));
  display: flex;
  flex-wrap: wrap;
  gap: calc(1mm * var(--doc-fs)) calc(5mm * var(--doc-fs));
  font-size: calc(8pt * var(--doc-fs));
  color: var(--rep-soft);
}

.rep-applied b {
  font-weight: 600;
  color: var(--rep-ink);
}

/* ------------------------------------------------- a statement of accounts
   Addressed to the client on the left; where the account stands on the right,
   as every statement of accounts opens. */
.rep-account {
  margin-top: calc(4.5mm * var(--doc-fs));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(8mm * var(--doc-fs));
}

.rep-party { min-width: 0; }

.rep-party-label,
.rep-summary th {
  font-size: calc(7.4pt * var(--doc-fs));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rep-soft);
}

.rep-party-name {
  margin-top: calc(1mm * var(--doc-fs));
  font-size: calc(10pt * var(--doc-fs));
  font-weight: 700;
}

.rep-party-line {
  margin-top: calc(.4mm * var(--doc-fs));
  font-size: calc(8.4pt * var(--doc-fs));
  color: var(--rep-soft);
}

.rep-summary {
  flex: 0 0 auto;
  width: calc(74mm * var(--doc-fs));
  border-collapse: collapse;
}

.rep-summary th {
  padding: calc(1.4mm * var(--doc-fs)) calc(1.8mm * var(--doc-fs));
  background: var(--rep-band);
  border-top: .5pt solid var(--rep-rule);
  border-bottom: .5pt solid var(--rep-rule);
  text-align: left;
}

.rep-summary td {
  padding: calc(1.3mm * var(--doc-fs)) calc(1.8mm * var(--doc-fs));
  border-bottom: .4pt solid var(--rep-hair);
}

.rep-summary tr.rep-summary-due td {
  border-top: .8pt solid var(--rep-strong);
  border-bottom: 2.6pt double var(--rep-strong);
  font-weight: 700;
}

/* ---------------------------------------------------------------- the table */
.rep-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: calc(3.4mm * var(--doc-fs));
}

/* A column heading WRAPS between its words - "Committed / Cost" - and is never
   cut off or run into the next column. A single word too long for its column
   is caught by the sheet, which shrinks every heading together until the
   longest one fits (--rep-th-fit, set in report-sheet.tsx). */
.rep-table th {
  padding: calc(1.6mm * var(--doc-fs)) calc(1.8mm * var(--doc-fs));
  background: var(--rep-band);
  border-top: .5pt solid var(--rep-rule);
  border-bottom: .5pt solid var(--rep-rule);
  font-size: calc(7.4pt * var(--doc-fs) * var(--rep-th-fit, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.25;
  color: var(--rep-soft);
  text-align: left;
  vertical-align: bottom;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.rep-table th .rep-th { display: block; }

/* A section's reading, level with its heading in the column it is read in -
   "% of Cost of Sales" over the P&L's percentages. Set like a column heading,
   small and uppercase, and on screen it opens the menu of the other readings
   (report-sheet.tsx). On paper it is only the name. */
.rep-table tr.rep-group td.rep-reading {
  vertical-align: bottom;
  text-align: right;
  font-size: calc(7.2pt * var(--doc-fs) * var(--rep-body-fit, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.25;
  color: var(--rep-soft);
}

.rep-pick {
  display: inline-flex;
  align-items: center;
  gap: calc(.8mm * var(--doc-fs));
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}
.rep-pick:hover { color: var(--rep-ink); }
.rep-pick:focus-visible {
  outline: 1.5px solid #1a5fb4;
  outline-offset: 2px;
  border-radius: 2px;
}
.rep-pick-caret { flex: 0 0 auto; }

/* Body text scales by --rep-body-fit: a figure too wide for its column
   reduces the whole table's type together, never one cell (report-sheet.tsx). */
.rep-table td {
  padding: calc(1.45mm * var(--doc-fs)) calc(1.8mm * var(--doc-fs));
  border-bottom: .4pt solid var(--rep-hair);
  vertical-align: top;
  overflow-wrap: break-word;
  font-size: calc(9pt * var(--doc-fs) * var(--rep-body-fit, 1));
}

/* A figure column: right-aligned and tabular. A FIGURE is never broken across
   lines; its heading may be. */
.rep-table .rep-n,
.rep-summary .rep-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rep-table td.rep-n,
.rep-summary td.rep-n { white-space: nowrap; }

/* A SHARE - a cost as a part of Gross Profit: a bar drawn to its size, then
   the figure. The bar takes what the column leaves beside the figure, so the
   figures stay in one right-aligned column. It prints as it is drawn. */
.rep-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(2.2mm * var(--doc-fs));
}

.rep-share-track {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(28mm * var(--doc-fs));
  height: calc(1.7mm * var(--doc-fs));
  border-radius: 999px;
  background: var(--rep-track);
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.rep-share-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rep-bar);
}

.rep-share-n {
  flex: 0 0 auto;
  min-width: calc(11mm * var(--doc-fs));
  text-align: right;
}

/* A class of accounts - Assets, Operating Income. A heading inside the table,
   so it carries no rule of its own. */
.rep-table tr.rep-group td {
  padding-top: calc(3.6mm * var(--doc-fs));
  padding-bottom: calc(1.2mm * var(--doc-fs));
  border-bottom: 0;
  font-size: calc(9.5pt * var(--doc-fs) * var(--rep-body-fit, 1));
  font-weight: 700;
}

/* A sub-class under it - Current Assets, Fixed Assets. */
.rep-table tr.rep-group td.rep-i1,
.rep-table tr.rep-group td.rep-i2 {
  padding-top: calc(2.4mm * var(--doc-fs));
  font-size: calc(9pt * var(--doc-fs) * var(--rep-body-fit, 1));
  font-weight: 600;
}

/* The first heading on a page has the column headings' rule above it already. */
.rep-table tbody tr.rep-group:first-child td { padding-top: calc(2mm * var(--doc-fs)); }

/* Depth: an account under its class, a class under its heading. */
.rep-table td.rep-i1 { padding-left: calc(5mm * var(--doc-fs)); }
.rep-table td.rep-i2 { padding-left: calc(10mm * var(--doc-fs)); }

/* A SUBTOTAL - "Total for Current Assets". Ruled above, bold. */
.rep-table tr.rep-sub td {
  border-top: .5pt solid var(--rep-rule);
  border-bottom: 0;
  font-weight: 700;
}

/* A RESULT inside the statement - Gross Profit, Operating Profit, Total for
   Assets. Ruled firmly above, but not the final answer. */
.rep-table tr.rep-result td {
  border-top: .8pt solid var(--rep-strong);
  border-bottom: 0;
  padding-top: calc(1.7mm * var(--doc-fs));
  padding-bottom: calc(1.7mm * var(--doc-fs));
  font-weight: 700;
}

/* The GRAND TOTAL - ruled above and double-ruled below: the figure the report
   exists to state. */
.rep-table tr.rep-grand td {
  border-top: .8pt solid var(--rep-strong);
  border-bottom: 2.6pt double var(--rep-strong);
  padding-top: calc(1.9mm * var(--doc-fs));
  padding-bottom: calc(1.9mm * var(--doc-fs));
  font-size: calc(9.5pt * var(--doc-fs) * var(--rep-body-fit, 1));
  font-weight: 700;
}

/* Air between one class of accounts and the next. */
.rep-table tr.rep-space td {
  height: calc(2.6mm * var(--doc-fs));
  padding: 0;
  border: 0;
}

.rep-table td.rep-empty {
  padding: calc(10mm * var(--doc-fs)) calc(2mm * var(--doc-fs));
  text-align: center;
  color: var(--rep-soft);
  border-bottom: 0;
}

/* A series number that opens its record (report page: RecordOverlay). On paper
   it is ink like the text around it; the PDF keeps the link. */
.rep-link {
  color: #1a5fb4;
  text-decoration: none;
  cursor: pointer;
}
.rep-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.rep-link:focus-visible {
  outline: 1.5px solid #1a5fb4;
  outline-offset: 1px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ the foot */
.rep-note {
  margin-top: calc(3.4mm * var(--doc-fs));
  font-size: calc(7.8pt * var(--doc-fs));
  color: var(--rep-soft);
  line-height: 1.4;
}

.rep-made {
  margin-top: calc(4mm * var(--doc-fs));
  padding-top: calc(1.6mm * var(--doc-fs));
  border-top: .4pt solid var(--rep-hair);
  display: flex;
  justify-content: space-between;
  gap: calc(4mm * var(--doc-fs));
  font-size: calc(7.4pt * var(--doc-fs));
  color: var(--rep-faint);
}

@media print {
  .rep-sheet { box-shadow: none; }
  .rep-pick-caret { display: none; }
  .rep-pick { cursor: auto; }
  .rep-table tr { break-inside: avoid; }
  .rep-link { color: inherit; text-decoration: none; }
}