.payslip-page{max-width:900px;margin:auto}.payslip-toolbar{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;margin-bottom:15px}.payslip-toolbar,.payslip-toolbar__actions{display:-webkit-box;display:-ms-flexbox;display:flex}.payslip-toolbar__actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:8px}.payslip-toolbar button{border:1px solid #d8e2ec;background:#fff;color:#175985;padding:10px 15px;border-radius:9px;font-weight:750}.payslip-toolbar button.active{border-color:#11958f;background:#e9f8f5;color:#087c76}.payslip-toolbar .print{border:0;color:#fff;background:linear-gradient(115deg,#0d4c7d,#11958f)}.payslip-sheet{background:#fff;border:1px solid #dbe4ed;border-radius:16px;padding:34px;-webkit-box-shadow:0 12px 35px rgba(29,52,79,.08);box-shadow:0 12px 35px rgba(29,52,79,.08);color:#223047}.payslip-sheet>header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:30px;padding-bottom:22px;border-bottom:2px solid #0f8e89}.payslip-sheet header span{font-size:11px;letter-spacing:2px;color:#0d8e88;font-weight:800}.payslip-sheet h1{font-size:23px;margin:4px 0}.payslip-sheet p{color:#748197}.period{text-align:right}.period b,.period em,.period small{display:block}.period em{display:inline-block;margin-top:9px;padding:5px 10px;border-radius:20px;background:#e7f7ef;color:#128052;font-size:10px;font-weight:850;font-style:normal}.period .commission-period-label{margin-top:13px}.employee-meta{display:grid;grid-template-columns:1fr 2fr 1.4fr 1fr;gap:15px;padding:20px 0}.employee-meta small{display:block;color:#7b889a;font-size:10px}.pay-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pay-columns>section{border:1px solid #dfe7ef;border-radius:12px;overflow:hidden}.company-contribution h2,.pay-columns h2{font-size:13px;padding:12px 15px;margin:0;background:#eaf7f5;color:#087c76}.pay-columns h2.deduction{background:#fff1f1;color:#bd3d48}.pay-columns footer,.pay-line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:9px 15px;border-bottom:1px solid #edf1f5;font-size:12px}.pay-columns footer{background:#f5f8fb;border:0;font-weight:800}.take-home{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:18px;padding:20px;border-radius:13px;background:linear-gradient(115deg,#0d4c7d,#11958f);color:#fff}.take-home small{display:block;letter-spacing:1.5px}.take-home strong{display:block;font-size:27px}.take-home p{color:#d6f2ef;margin:2px 0}.take-home>i{font-size:34px}.company-contribution{margin-top:18px;border:1px solid #e1e8ef;border-radius:12px;overflow:hidden}.company-contribution div{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:9px;padding:13px}.company-contribution span{padding:6px 9px;background:#f3f7fa;border-radius:7px;font-size:11px}.sheet-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;margin-top:40px}.sheet-footer>p{font-size:10px;max-width:55%}.sheet-footer div{text-align:center;border-top:1px solid #aebdcb;padding:8px 25px 0}.sheet-footer div b,.sheet-footer div span{display:block}.commission-employee-meta{grid-template-columns:1fr 1.8fr 1.3fr 1.8fr}.commission-table-wrap{overflow-x:auto;border:1px solid #dfe7ef;border-radius:12px}.commission-table{width:100%;min-width:760px;border-collapse:collapse}.commission-table td,.commission-table th{padding:11px 12px;border-bottom:1px solid #e7edf4;vertical-align:top;font-size:12px}.commission-table th{background:#f4f7fb;color:#53657d;font-size:10px;letter-spacing:.5px;text-align:left;text-transform:uppercase;white-space:nowrap}.commission-table td small{display:block;margin-top:2px;color:#7a899e}.commission-table td.amount,.commission-table th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.commission-table tbody tr:last-child td{border-bottom:0}.commission-empty{padding:30px!important;color:#7a899e;text-align:center!important}.commission-total{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:20px;margin-top:18px;padding:18px 20px;border-radius:13px;background:#e9f8f3;color:#08775b}.commission-total small{display:block;letter-spacing:1.4px;font-weight:800}.commission-total p{margin:3px 0 0;font-size:11px}.commission-total strong{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;font-size:25px;font-variant-numeric:tabular-nums}@media(max-width:650px){.payslip-toolbar,.payslip-toolbar__actions{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.payslip-sheet{padding:20px}.employee-meta,.pay-columns{grid-template-columns:1fr 1fr}.payslip-sheet>header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.period{text-align:left}.commission-total{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}@media print{body{background:#fff!important}.aside,.footer,.header,.payslip-toolbar{display:none!important}.payslip-page{max-width:none}.payslip-sheet{-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;padding:10mm}.pay-columns{grid-template-columns:1fr 1fr}.commission-table-wrap{overflow:visible}.commission-table{min-width:0}}