/* The payslip: one slip is half an A4 page, so a printed page carries two. Used on screen (payslip dialog) and in the
   print window; it always reads as paper, so colours come from the --print-* tokens in theme.css. */

.slip {
  box-sizing: border-box; position: relative; background: var(--print-bg); color: var(--print-ink);
  font: 12px/1.35 var(--font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  padding: 4mm 2mm 3mm; text-align: left;
}
.slip * { box-sizing: border-box; }
.slip p { margin: 0; }

.slip-head { display: flex; align-items: flex-start; gap: 12mm; min-height: 22mm; }
.slip-logo { flex: 0 0 34%; max-width: 34%; padding-left: 6mm; }
.slip-logo img { max-width: 100%; max-height: 22mm; object-fit: contain; display: block; }
.slip-co { font-size: 11px; line-height: 1.4; }
.slip-co strong { display: block; font-weight: 700; }
.slip-co span { display: block; }

.slip-title { display: flex; justify-content: space-between; align-items: baseline; margin: 5mm 0 3mm; font-size: 13px; }
.slip-title strong { font-weight: 800; letter-spacing: .02em; }

.slip-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8mm; row-gap: 1.4mm; }
.slip-info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-info b { font-weight: 700; margin-right: 1.5mm; }

.slip-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8mm; margin-top: 6mm; }
.slip-money + .slip-rule + .slip-money { margin-top: 3.5mm; }
.slip-rule { border: 0; border-top: 1px solid var(--print-ink); margin: 4mm 0 0; }
.slip-col { display: grid; grid-template-columns: minmax(0, 1fr) 34mm; column-gap: 6mm; row-gap: 1.4mm; align-content: start; }
.slip-col span, .slip-col em { font-style: normal; }
.slip-col em { text-align: left; font-variant-numeric: tabular-nums; }
.slip-col.out span, .slip-col.out em, .slip .neg { color: var(--danger); }
.slip-col.out span { text-transform: uppercase; }
.slip-col .strong { font-weight: 700; }
.slip-pair { grid-column: 1 / -1; display: flex; gap: 8mm; }
.slip-pair span { margin-right: 4mm; }
.slip-pair em { margin-right: 2mm; }

/* on screen: the slip sits on the dialog as a sheet of paper */
.hr-slip .slip { border: 1px solid var(--print-line); border-radius: var(--radius); padding: 5mm 6mm; width: 100%; overflow-x: auto; }
.hr-slip .slip-info { min-width: 640px; }
.hr-slip .slip-money { min-width: 640px; }

/* the print window: two slips a page, a dashed line where to cut */
.slip-sheet { box-sizing: border-box; width: 210mm; height: 297mm; padding: 8mm 12mm; display: flex; flex-direction: column; break-after: page; page-break-after: always; background: var(--print-bg); }
.slip-sheet:last-child { break-after: auto; page-break-after: auto; }
.slip-sheet .slip { flex: 1 1 50%; min-height: 0; overflow: hidden; }
.slip-sheet .slip + .slip { border-top: 1px dashed var(--print-muted); padding-top: 6mm; }
html.slip-print, html.slip-print body { margin: 0; background: var(--print-bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media screen { html.slip-print body { background: var(--print-fill); } html.slip-print .slip-sheet { margin: 0 auto 6mm; } }