/* Pay Docly — the payslip document sheet only.
   Loaded after base.css + tool.css. Generic app chrome lives in tool.css. */

/* Payslip document */
.payslip .doc-meta .period{font-size:18px;font-weight:850;margin-top:4px}
.payslip .doc-meta .slip-no{font-size:11px;color:#98a2b3;margin-top:8px}
.payslip .summary-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:26px;margin:28px 0 34px}
.payslip .pay-card{border:1px solid #e4e7ec;border-radius:13px;overflow:hidden}
.payslip .pay-card-top{background:#ecfdf3;padding:20px 21px;border-bottom:1px dashed #c9d5df}
.payslip .net-value{font-size:27px;font-weight:850;padding-left:12px;border-left:3px solid #16a34a}
.payslip .net-label{font-size:11px;color:#667085;margin:5px 0 0 16px}
.payslip .pay-card-bottom{padding:14px 21px}
.payslip .pay-stat{display:flex;justify-content:space-between;padding:6px 0;font-size:12px}
.payslip .salary-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e4e7ec;border-radius:12px;overflow:hidden}
.payslip .salary-col+.salary-col{border-left:1px solid #edf0f4}
.payslip .salary-head,.payslip .salary-row,.payslip .salary-total{display:grid;grid-template-columns:1fr auto;gap:14px;padding:11px 14px;font-size:11px}
.payslip .salary-head{font-weight:850;border-bottom:1px dashed #cbd5e1}
.payslip .salary-row{min-height:36px}
.payslip .salary-total{background:#f4f6f8;font-weight:850;margin-top:6px}
.payslip .total-box{display:grid;grid-template-columns:1fr 150px;margin-top:20px;border:1px solid #e4e7ec;border-radius:10px;overflow:hidden}
.payslip .total-text{padding:13px 15px}
.payslip .total-text strong{font-size:12px;display:block}
.payslip .total-text span{font-size:10px;color:#667085}
.payslip .total-value{display:grid;place-items:center;background:#ecfdf3;font-size:15px;font-weight:850}
.payslip .bank-line{margin-top:16px;font-size:10px;color:#667085;display:flex;justify-content:space-between;gap:12px}

@media(max-width:640px){
.payslip .summary-grid,.payslip .salary-grid,.payslip .total-box{grid-template-columns:1fr;display:grid}
.payslip .salary-col+.salary-col{border-left:0;border-top:1px solid #edf0f4}
}
@media print{
.payslip .summary-grid,.payslip .salary-grid,.payslip .total-box{display:grid!important}
}