/* Payslip document (public/js/payslip.js). Always printed on white paper, so it keeps light colours in dark mode. */
.payslip-doc {
  --ps-brand: #b71c1c;
  --ps-ink: #1c2230;
  --ps-muted: #5d6676;
  --ps-line: #e4e7ec;
  --ps-soft: #f7f8fa;
  --ps-tint: #fbeeee;
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  color: var(--ps-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid var(--ps-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.payslip-doc * { box-sizing: border-box; }
.ps-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ps-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 28px; border-bottom: 4px solid var(--ps-brand);
  background: linear-gradient(90deg, #fff 55%, var(--ps-tint));
}
.ps-org { display: flex; align-items: center; gap: 14px; }
.ps-logo { width: 54px; height: 54px; object-fit: contain; }
.ps-org-name { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 18px; }
.ps-org-sub { color: var(--ps-muted); font-size: 12px; }
.ps-title { text-align: right; }
.ps-kicker { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 24px; color: var(--ps-brand); letter-spacing: 0.02em; text-transform: uppercase; }
.ps-period { font-weight: 600; }
.ps-dates { color: var(--ps-muted); font-size: 12px; }

.ps-who {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px;
  padding: 18px 28px; background: var(--ps-soft); border-bottom: 1px solid var(--ps-line);
}
.ps-who div { display: flex; flex-direction: column; min-width: 0; }
.ps-who span, .ps-flow span, .ps-net span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ps-muted);
}
.ps-who strong { font-weight: 600; overflow-wrap: anywhere; }

.ps-hero { display: flex; align-items: stretch; gap: 20px; padding: 20px 28px 4px; }
.ps-net {
  display: flex; flex-direction: column; justify-content: center; padding: 14px 20px; min-width: 230px;
  background: var(--ps-brand); color: #fff; border-radius: 12px;
}
.ps-net span { color: rgba(255, 255, 255, 0.85); }
.ps-net strong { font-family: Outfit, Inter, sans-serif; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-flow { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 8px; border: 1px solid var(--ps-line); border-radius: 12px; padding: 10px 14px; }
.ps-flow div:not(.ps-op) { display: flex; flex-direction: column; }
.ps-flow strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.ps-op { font-size: 20px; color: var(--ps-muted); }

.ps-tables { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; padding: 16px 28px; }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ps-brand);
  border-bottom: 2px solid var(--ps-brand); padding: 6px 0;
}
.ps-table td { padding: 6px 0; border-bottom: 1px solid var(--ps-line); }
.ps-table tfoot td { font-weight: 700; border-bottom: 0; padding-top: 9px; }
.ps-table tfoot .ps-sub td { font-weight: 400; color: var(--ps-muted); padding-top: 2px; }
.ps-tag { font-size: 9.5px; color: var(--ps-muted); border: 1px solid var(--ps-line); border-radius: 99px; padding: 0 6px; margin-left: 4px; }

.ps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 28px 18px; }
.ps-card { background: var(--ps-soft); border: 1px solid var(--ps-line); border-radius: 10px; padding: 12px 14px; }
.ps-card h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ps-muted); }
.ps-card dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; }
.ps-card dt { color: var(--ps-muted); }
.ps-card dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-small { margin: 6px 0 0; font-size: 11px; color: var(--ps-muted); }

.ps-note { margin: 0 28px 16px; padding: 10px 14px; border-left: 3px solid #f2b705; background: #fff8e1; border-radius: 6px; font-size: 12px; }
.ps-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px; border-top: 1px solid var(--ps-line); color: var(--ps-muted); font-size: 11px;
}

@media (max-width: 640px) {
  .ps-head, .ps-hero { flex-direction: column; align-items: stretch; }
  .ps-title { text-align: left; }
  .ps-who { grid-template-columns: repeat(2, 1fr); }
  .ps-tables, .ps-cards { grid-template-columns: 1fr; }
  .ps-net { min-width: 0; }
  .ps-flow { flex-wrap: wrap; }
}

@media print {
  .payslip-doc { box-shadow: none; border: 0; border-radius: 0; max-width: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .payslip-doc { break-after: page; font-size: 11.5px; }
  .ps-card dt { white-space: nowrap; }
}