/* More document classes for Views/Templates (merged into report.css at the end).
   Same rules as report.css: tokens only, PDF-safe (tables, flex, var(); no grid, color-mix or oklch).
   _Base loads this file before report.css, so a rule here that overrides a report.css rule needs a higher
   specificity (e.g. `.doc .doc-stack > *`), not just a later position.

   .doc-part              one of several documents printed on the same sheet (e.g. two payslips per page);
                          parts after the first get a dashed cut line above them
   .doc-stack             blocks (header box, tables) stacked so their borders touch, like one ruled form
   .doc-frame             a ruled box of unruled, padded lines (a table used for label/value lines)
   .doc-ledger            side-by-side column groups in one flat table, ruled only between groups (a payslip
                          body: Earning | Misc. earning | Deduction | Rate of wages)
     th/td.gs                first cell of a group (rule on its left)
     tr.doc-ledger-title     group headings (centered, uppercase)
     tr.doc-ledger-head      column headings (shaded, ruled above and below)
     tr.doc-ledger-total     totals row (shaded, ruled above)
     .sub                    a sub-heading cell inside a group; .rule a cell ruled underneath
     .num .strong .muted     as in .doc-table
   .doc-header .doc-meta  key/value pairs inside a centered header are centered too
   .doc-thumb             a small square photo thumbnail in a table cell (punch selfies, ID photos)
   .doc-table .nowrap     a cell that never wraps (codes, IFSC, names in wide registers)
   td.sum-under / td.sum-double  an amount ruled underneath (single / double) in a worked calculation
   .doc-sign-box          an empty ruled box to sign or stamp in ("Receiver Sign.")
   .doc-script            a sheet in an Indian script: the Noto fallbacks (loaded by the template from Google Fonts)
   .doc-label             a small bold label placed before a value inside a cell
   .doc.doc-pdf           a sheet rendered for iText pdfHTML (Layout == null): no screen card chrome (belt and
                          braces; _ReportInlineStyles also applies the print rules)

   Notes for pdfHTML 6.3 (SalarySlip is only ever delivered as its PDF): _ReportInlineStyles pre-resolves
   var() and calc() and appends the print rules, but pdfHTML still doesn't style cells of nested tables
   reliably (so no nested tables in PDF documents) and ignores margins of inline elements.
*/

.doc.doc-pdf {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.doc-part + .doc-part {
  margin-top: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 8);
  border-top: 1px dashed var(--border-strong);
}

.doc .doc-stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.doc .doc-stack > * + * {
  margin-top: -1px;
}
.doc .doc-stack > .doc-box {
  border-color: var(--foreground);
}

.doc-frame {
  width: 100%;
  margin-bottom: calc(var(--spacing) * 3);
  border: 1px solid var(--foreground);
  border-collapse: collapse;
  font-size: var(--text-2xs);
  color: var(--foreground);
}
.doc-frame td {
  padding: var(--spacing) var(--spacing) 0;
}
.doc-frame tr:last-child td {
  padding-bottom: var(--spacing);
}
.doc-frame .strong {
  font-weight: var(--font-weight-bold);
}
.doc-frame .ctr {
  text-align: center;
}

.doc-ledger {
  width: 100%;
  margin-bottom: calc(var(--spacing) * 3);
  border: 1px solid var(--foreground);
  border-collapse: collapse;
  font-size: var(--text-2xs);
  color: var(--foreground);
}
.doc-ledger th,
.doc-ledger td {
  padding: 0 var(--spacing);
  text-align: left;
  vertical-align: top;
}
.doc-ledger .gs {
  border-left: 1px solid var(--foreground);
}
.doc-ledger .num {
  text-align: right;
  white-space: nowrap;
}
.doc-ledger .strong {
  font-weight: var(--font-weight-bold);
}
.doc-ledger .muted {
  color: var(--muted-foreground);
}
.doc-ledger .rule {
  border-bottom: 1px solid var(--foreground);
}
.doc-ledger .sub,
.doc-ledger-title th {
  text-align: center;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-subtle);
}
.doc-ledger-head th {
  border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--foreground);
  background: var(--muted);
  font-weight: var(--font-weight-bold);
}
.doc-ledger-total td {
  border-top: 1px solid var(--foreground);
  background: var(--muted);
  font-weight: var(--font-weight-bold);
}

.doc-header .doc-meta {
  justify-content: center;
  margin-bottom: 0;
}

.doc-thumb {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.doc-table .nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

.doc-table td.sum-under {
  border-bottom: 1px solid var(--foreground);
}
.doc-table td.sum-double {
  border-bottom: 3px double var(--foreground);
}

.doc-sign-box {
  width: calc(var(--spacing) * 33);
  height: calc(var(--spacing) * 14);
  margin: calc(var(--spacing) * 1) auto 0;
  border: 1px solid var(--foreground);
}

.doc.doc-script {
  font-family: var(--font-sans), "Noto Sans Gujarati", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Kannada",
    "Noto Sans Telugu", sans-serif;
}

.doc-label {
  margin-right: calc(var(--spacing) * 1.5);
  font-weight: var(--font-weight-bold);
}

@media print {
  .doc-part + .doc-part {
    margin-top: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
  }
  .doc-ledger-head th,
  .doc-ledger-total td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- Identity cards (IdCardReport) ------------------------------------------------------------
   Physical cards: the outer size is the ID-1 card format (85.6 × 54 mm, printed 88 × 56 mm), so it is
   given in mm on purpose; everything inside uses the scale tokens.
   .id-cards              wrapping row of cards on the sheet
   .id-card-pair          front and back of one card, side by side (kept on one printed page)
   .id-card               one card side, landscape; + .id-card-portrait, + .id-card-rounded (heavy rounded frame)
     .id-card-head        top row: logo | title | form number (pushed apart); .id-card-logo is the logo image
     .id-card-name        company name standing in for a missing logo
     .id-card-form        form number block (right aligned)
     .id-card-title       centered card title
     .id-card-address     small uppercase address line
     .id-card-fields      label / value table (th = label, td = value)
     .id-card-rule        a full-width rule
     .id-card-center      centered column (portrait front: logo, photo, name)
     .id-card-band        solid band along the bottom edge (portrait front)
     .id-card-list        small bulleted / numbered notes
     .id-card-foot        signature row at the bottom; .id-card-sign = a signature with a line above
     .id-card-contact     icon + text line
*/
.id-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(var(--spacing) * 5);
}
.id-card-pair {
  display: flex;
  gap: calc(var(--spacing) * 2.5);
  break-inside: avoid;
}
.id-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 88mm;
  height: 56mm;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  overflow: hidden;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--foreground);
  font-size: var(--text-3xs);
  line-height: var(--leading-tight);
  break-inside: avoid;
}
.id-card-portrait {
  width: 56mm;
  height: 88mm;
  padding: 0;
}
.id-card-rounded {
  border-width: 3px;
  border-radius: var(--radius-2xl);
}
.id-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 1);
}
.id-card-rounded .id-card-head {
  padding-bottom: calc(var(--spacing) * 1.5);
  border-bottom: 1px solid var(--foreground);
  margin-bottom: calc(var(--spacing) * 2);
}
.id-card-logo {
  max-width: 60%;
  height: calc(var(--spacing) * 8);
  object-fit: contain;
}
.id-card-name {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}
.id-card-form {
  flex-shrink: 0;
  text-align: right;
  font-weight: var(--font-weight-bold);
}
.id-card-title {
  flex: 1 1 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}
.id-card-address {
  margin-bottom: calc(var(--spacing) * 1);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
.id-card-fields {
  width: 100%;
  border-collapse: collapse;
}
.id-card-fields th,
.id-card-fields td {
  padding: 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) 0;
  text-align: left;
  vertical-align: top;
}
.id-card-fields th {
  width: 1%;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-weight: var(--font-weight-bold);
}
.id-card-fields td {
  font-weight: var(--font-weight-bold);
}
.id-card-rule {
  margin: calc(var(--spacing) * 1.5) 0;
  border: 0;
  border-top: 1px solid var(--foreground);
}
.id-card-center {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  text-align: center;
}
.id-card-center .id-card-logo {
  max-width: 100%;
  height: calc(var(--spacing) * 12);
}
.id-card-center + .id-card-center {
  flex: 0 0 auto;
  gap: calc(var(--spacing) * 0.5);
  border-top: 1px solid var(--foreground);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-bold);
}
.id-card-center .id-card-name {
  text-transform: uppercase;
}
.id-card-band {
  flex: 0 0 auto;
  height: calc(var(--spacing) * 5);
  background: var(--foreground);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.id-card-portrait .id-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font-size: calc(var(--text-3xs) * 0.8);
}
.id-card-portrait .id-card-body .id-card-list,
.id-card-portrait .id-card-body .id-card-rule {
  margin: 0;
}
.id-card-list {
  margin: 0 0 calc(var(--spacing) * 1.5);
  padding-left: calc(var(--spacing) * 4);
}
ul.id-card-list {
  list-style: disc;
}
ol.id-card-list {
  list-style: decimal;
}
.id-card-list li + li {
  margin-top: calc(var(--spacing) * 0.5);
}
.id-card-contact {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  margin-top: calc(var(--spacing) * 1);
}
.id-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin-top: auto;
  font-weight: var(--font-weight-bold);
}
.id-card-sign {
  min-width: 40%;
  padding-top: calc(var(--spacing) * 0.5);
  border-top: 1px solid var(--foreground);
  text-align: center;
  white-space: nowrap;
}
@media print {
  .id-cards {
    display: block;
  }
  .id-card-pair,
  .id-cards > .id-card {
    margin-bottom: 8mm;
  }
}