.payroll-heading,.payroll-toolbar,.payroll-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.payroll-heading{margin-bottom:22px}.payroll-heading h2{font-size:28px;letter-spacing:-.6px;margin:5px 0 9px}.payroll-muted{color:#64748b;font-size:14px;line-height:1.6}.payroll-tabs{display:flex;gap:6px;border-bottom:1px solid #dce4ef;margin-bottom:24px;overflow:auto}.payroll-tabs button{padding:13px 18px;border:0;background:transparent;white-space:nowrap;color:#526179;border-bottom:3px solid transparent;font-weight:600}.payroll-tabs button[aria-selected=true]{color:#007aab;border-bottom-color:#00adef}.payroll-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}.payroll-summary article{padding:21px;background:#fff;border:1px solid #dce4ef;border-radius:14px;min-width:0}.payroll-summary strong{display:block;font-size:clamp(18px,2vw,25px);margin-top:10px;overflow-wrap:anywhere}.payroll-summary span{font-size:13px;color:#526179}.payroll-summary article:last-child{background:#edf9ff;border-color:#bde9fb}.payroll-surface{background:#fff;border:1px solid #dce4ef;border-radius:16px;padding:24px;margin:18px 0}.payroll-surface h3{margin:0 0 10px}.payroll-status{display:inline-block;font-size:12px;font-weight:700;padding:5px 10px;border-radius:20px;background:#eef2f7;color:#465771}.payroll-status.approved,.payroll-status.paid,.payroll-status.released{background:#e5f7ed;color:#17683e}.payroll-status.review,.payroll-status.partial{background:#fff4d9;color:#805b04}.payroll-table{width:100%;border-collapse:collapse;font-size:14px}.payroll-table th{text-align:left;background:#f6f8fb;color:#526179;font-size:12px;padding:12px;white-space:nowrap}.payroll-table td{padding:15px 12px;border-top:1px solid #e8edf3;vertical-align:middle}.payroll-table .payroll-numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.payroll-table td small{display:block;margin-top:4px;color:#64748b}.payroll-table button{white-space:nowrap}.payroll-empty{text-align:center;padding:52px 24px;color:#64748b}.payroll-empty h3{color:#26354a;margin:0 0 12px}.payroll-error{color:#a32b31;white-space:pre-wrap}.payroll-notice{border-left:3px solid #00adef;background:#eff9fe;padding:14px 18px;line-height:1.6;font-size:14px;color:#34516a;margin:18px 0}.payroll-toolbar select,.payroll-dialog input,.payroll-dialog select,.payroll-dialog textarea{padding:11px;border:1px solid #cbd5e1;border-radius:8px;background:white;color:#1c2b40;width:100%;font:inherit}.payroll-toolbar select{width:auto;min-width:190px}.payroll-dialog{width:min(780px,calc(100vw - 32px));max-height:90vh;padding:28px;border:0;border-radius:18px;box-shadow:0 25px 80px #0d284533;color:#22334a}.payroll-dialog::backdrop{background:#0b1b36a3}.payroll-dialog h2{margin:0;font-size:23px}.payroll-dialog .dialog-heading{margin-bottom:18px}.payroll-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.payroll-form-grid label,.payroll-dialog>form>label{display:grid;gap:7px;font-size:13px;font-weight:600}.payroll-wide{grid-column:1/-1}.payroll-check{display:flex!important;align-items:flex-start;gap:10px!important;font-size:14px;line-height:1.6;margin:18px 0}.payroll-check input{width:18px;height:18px;flex-shrink:0;margin-top:3px}.payroll-live{background:#f0f8fd;padding:16px;border-radius:10px;font-weight:600;line-height:1.8}.payroll-slip{background:white;color:#172b43;padding:20px}.payroll-slip header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #00adef;padding-bottom:22px;margin-bottom:22px}.payroll-slip header img{width:100px;max-height:65px;object-fit:contain}.payroll-slip header h2{font-size:27px;color:#007cab}.payroll-slip header p{margin:7px 0;font-size:12px;color:#526179}.payroll-slip-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.payroll-slip-meta span{display:block;font-size:12px;color:#64748b;margin-bottom:5px}.payroll-slip .payroll-table td{padding:11px 7px}.payroll-slip .payroll-table th{padding:11px 7px}.payroll-slip-total{margin-top:20px;padding:20px;background:#edf9ff;display:flex;justify-content:space-between;align-items:center;border-radius:10px;font-size:20px;font-weight:700}.payroll-slip footer{font-size:11px;line-height:1.7;color:#64748b;border-top:1px solid #dce4ef;margin-top:25px;padding-top:15px}.payroll-history{padding:12px 0;border-top:1px solid #e8edf3;font-size:13px}.payroll-history summary{cursor:pointer}.payroll-history pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;background:#f6f8fb;padding:14px}.payroll-dialog .payroll-actions{justify-content:flex-end;margin-top:20px}
@media(max-width:720px){.payroll-summary{grid-template-columns:1fr 1fr}.payroll-surface{padding:16px}.payroll-heading h2{font-size:24px}.payroll-form-grid{grid-template-columns:1fr}.payroll-dialog{padding:18px}.payroll-slip{padding:0}.payroll-slip header{gap:14px}.payroll-slip header h2{font-size:22px}}
@media print{body.payroll-printing>*:not(#payroll-dialog){display:none!important}body.payroll-printing #payroll-dialog{display:block!important;position:static!important;width:100%!important;max-height:none!important;margin:0!important;padding:0!important;box-shadow:none!important;border:0!important;overflow:visible!important}body.payroll-printing #payroll-dialog>*:not(.payroll-slip){display:none!important}.payroll-slip{font-family:Arial,sans-serif;font-size:12px;print-color-adjust:exact}.payroll-slip .payroll-table{font-size:12px}.payroll-slip header{break-after:avoid}.payroll-slip footer{break-inside:avoid}dialog::backdrop{display:none}@page{size:A4;margin:15mm}}

.payroll-allowances{border:1px solid #dce4ef;border-radius:12px;padding:18px;margin:20px 0}.payroll-allowances h3{margin:0}.payroll-allowance-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:end;gap:10px;margin:14px 0}.payroll-allowance-row label{display:grid;gap:7px;font-size:13px;font-weight:600}.payroll-dialog input[readonly]{background:#f1f6fa;color:#34516a;font-weight:700}.payroll-allowance-row button{min-height:42px}
@media(max-width:520px){.payroll-allowance-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.payroll-allowance-row label:first-child{grid-column:1/-1}.payroll-allowance-row button{justify-self:end}.payroll-allowances{padding:12px}}
@media print{body.payroll-printing{background:white!important;padding:0!important;margin:0!important}}
@media print{.payroll-slip{padding:0;font-size:11px}.payroll-slip header{padding-bottom:14px;margin-bottom:14px}.payroll-slip header h2{font-size:24px}.payroll-slip header p{font-size:10px}.payroll-slip-meta{margin:14px 0;gap:10px}.payroll-slip-meta span{font-size:10px}.payroll-slip .payroll-table{font-size:11px}.payroll-slip .payroll-table td,.payroll-slip .payroll-table th{padding:7px 6px}.payroll-slip .payroll-table tr{break-inside:avoid}.payroll-slip-total{margin-top:14px;padding:14px;font-size:18px;break-inside:avoid}.payroll-slip footer{margin-top:15px;padding-top:10px;font-size:10px}}

.payroll-allowance-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.5fr) auto}@media(max-width:720px){.payroll-allowance-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.payroll-allowance-row label:first-child,.payroll-allowance-row label:nth-child(3){grid-column:1/-1}.payroll-allowance-row button{justify-self:end;grid-column:2}}