/* TimeKeeper HR 24 · Salary, payroll, approvals and employee payslips */
.pxWorkspace{display:grid;gap:18px;min-width:0;color:#143055}
.pxHero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:29px 31px;border-radius:24px;background:linear-gradient(115deg,#142e50 0%,#1c4c82 72%,#2865a8 100%);color:white;box-shadow:0 18px 50px rgba(18,47,83,.12)}
.pxEyebrow{font-size:11px;font-weight:850;letter-spacing:1.6px;color:#8ab5ff}
.pxHero h2{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.8px;line-height:1.15;margin:7px 0 10px;color:#fff}
.pxHero p{color:#b9cee5;line-height:1.45;font-size:14px;max-width:630px}
.pxHeroStatus{padding:10px 14px;border-radius:50px;border:1px solid #ffffff3f;color:#e7f2ff;white-space:nowrap;font-size:12px;font-weight:700;background:#ffffff0d}
.pxLive{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6be5c1;margin-right:6px}
.pxMetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pxMetrics3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pxMetric{position:relative;background:#fff;border:1px solid #e2eaf4;border-radius:19px;padding:19px 20px;min-width:0;box-shadow:0 5px 18px rgba(30,72,115,.035)}
.pxMetricIcon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#eaf2ff;color:#3977e9;font-size:20px;font-weight:800;margin-bottom:14px}
.pxMetric p{color:#71829e;font-size:12px;font-weight:650;margin-bottom:7px}
.pxMetric strong{display:block;color:#123059;font-size:clamp(21px,2.15vw,30px);font-weight:850;letter-spacing:-.7px;overflow-wrap:anywhere;line-height:1.2}
.pxMetric small{display:block;margin-top:8px;color:#8294b0;font-size:11px}
.pxTabs,.pxSettingTabs{display:flex;align-items:center;gap:5px;padding:6px;background:#e8eef8;border:1px solid #dae5f4;border-radius:16px;width:max-content;max-width:100%;flex-wrap:wrap}
.pxTab,.pxSettingTab{border:0;color:#5b7294;background:transparent;border-radius:12px;padding:12px 17px;font-size:13px;font-weight:750;white-space:nowrap;transition:background .18s,color .18s}
.pxTab span{margin-right:8px;font-size:16px}
.pxTab.isActive,.pxSettingTab.selected{background:#fff;color:#1e5cac;box-shadow:0 3px 10px rgba(21,51,91,.1)}
.pxPanel,.pxDetails{background:#fff;border:1px solid #e0e8f3;border-radius:22px;padding:22px 24px;box-shadow:0 5px 26px rgba(31,67,106,.035);min-width:0}
.pxPanelHead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.pxPanelHead h2{font-size:19px;color:#173458;letter-spacing:-.35px}
.pxPanelHead p{font-size:12px;color:#8292a9;margin-top:6px;line-height:1.45}
.pxForm{display:grid;gap:14px}
.pxForm label,.pxRunSearch{display:grid;gap:7px;font-size:12px;color:#50688c;font-weight:750}
.pxForm input,.pxForm select,.pxForm textarea,.pxRunSearch input,.pxFilters input,.pxFilters select{min-height:45px;border-radius:12px;border:1px solid #d5e0ee;background:#fff;color:#163255;padding:10px 13px;font-size:14px;max-width:100%}
.pxForm input:focus,.pxForm select:focus,.pxForm textarea:focus,.pxRunSearch input:focus{outline:2px solid #9ec4ff;outline-offset:1px}
.pxCreateForm{grid-template-columns:minmax(140px,.7fr) minmax(200px,1fr) minmax(210px,1.4fr) auto;align-items:end}
.pxCreateForm .btn{min-height:45px}
.pxRateForm{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:850px}
.pxFull{grid-column:1/-1}
.pxCheck{display:flex!important;align-items:center;gap:10px;line-height:1.4;font-size:13px!important}
.pxCheck input{width:18px;min-height:18px;flex:none}
.pxHelp{color:#7a8eaa;font-size:12px;margin-top:15px;line-height:1.5}
.pxHint,.pxWarning{border-radius:15px;background:#f1f7ff;border:1px solid #d9e8fb;color:#486584;padding:13px 16px;font-size:12px;line-height:1.55}
.pxWarning{background:#fff8e9;border-color:#ffdf9b;color:#806022}
.pxDetails{padding:0;overflow:hidden}
.pxDetails summary{padding:20px 24px;cursor:pointer;font-weight:750;color:#1e508b}
.pxDetails[open]>:not(summary){margin:0 24px 22px}
.pxDetails .pxForm{padding-top:8px}
.pxBlank{text-align:center;padding:36px 24px;color:#8193ae;background:#f8fbff;border:1px dashed #d8e3f2;border-radius:17px}
.pxBlank>span{display:block;font-size:34px;line-height:1;color:#608bc2;margin-bottom:14px}
.pxBlank h3{color:#244e7f;font-size:16px;margin:0 0 7px}
.pxBlank p{font-size:13px;max-width:460px;margin:0 auto}
.pxRunGrid{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:14px}
.pxRunCard{text-align:left;border:1px solid #dfe8f4;background:#fff;border-radius:17px;padding:17px;display:grid;gap:15px;color:#1b395e;transition:box-shadow .15s,border-color .15s}
.pxRunCard:hover,.pxRunCard.selected{border-color:#74a6ed;box-shadow:0 10px 25px #2c72cf13}
.pxRunCardTop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pxRunCardTop b{font-size:20px}
.pxRunSubtitle{font-size:12px;color:#6a82a5}
.pxRunMeta{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.pxRunMeta span{color:#8192ac}
.pxRunMeta strong{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxRunAction{display:flex;justify-content:space-between;border-top:1px solid #eef2f9;padding-top:12px;color:#2f6fd6;font-size:12px;font-weight:800}
.pxStatus{display:inline-flex;padding:6px 10px;border-radius:24px;background:#e8f0fd;color:#3f6d9d;font-size:11px;font-weight:800;white-space:nowrap}
.pxStatus.positive{background:#e6f8ef;color:#08764e}.pxStatus.negative{background:#fdebec;color:#a74248}.pxStatus.pending{background:#fff4d8;color:#9b6a0e}
.pxRunSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.pxRunSummary>div{background:#f5f8fd;border:1px solid #e6ecf5;border-radius:14px;padding:13px 15px;display:grid;gap:8px}
.pxRunSummary span{font-size:12px;color:#7b8da8}.pxRunSummary b{font-size:20px;color:#194a84}
.pxRunTools,.pxInlineActions{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pxRunTools{border-top:1px solid #eff2f8;border-bottom:1px solid #eff2f8;padding:14px 0;margin:16px 0}
.pxMuted{color:#7d90ac;font-size:12px}
.pxRunSearch{max-width:320px;margin-bottom:15px}
.pxTableScroll{max-width:100%;overflow:auto;border:1px solid #e8eef6;border-radius:15px}
.pxTable{min-width:850px;width:100%;border-collapse:collapse;text-align:left;font-size:12px;color:#1c3659}
.pxTable thead{position:sticky;top:0;z-index:1}
.pxTable th{padding:14px 12px;color:#6b829f;letter-spacing:.15px;text-transform:uppercase;background:#f6f9fd;font-size:10px}
.pxTable td{padding:14px 12px;border-bottom:1px solid #eef3f9;vertical-align:top}
.pxTable tbody tr:last-child td{border:0}
.pxTable td b{font-size:12px}
.pxTable td small{display:block;font-size:10px;margin-top:5px;color:#7a8da6}
.pxTable tr[hidden]{display:none}
.pxSettingTabs{margin-bottom:2px}
.pxFilters{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin-bottom:18px}
.pxProposalList{display:grid;gap:10px}
.pxProposal{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #e3ebf5;border-radius:16px;padding:16px 18px}
.pxProposalTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pxProposalTop b{font-size:15px;color:#12375f}
.pxProposalMain{display:grid;gap:8px;min-width:0}
.pxProposalMain p{font-size:12px;color:#7386a4}
.pxType{font-size:11px;font-weight:800}
.pxType.bonus{color:#15986b}.pxType.deduction{color:#bd5b53}
.pxReason{color:#345572;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.pxProposalRight{text-align:right;display:grid;gap:12px;justify-items:end}
.pxProposalRight strong{font-size:19px;color:#12375f}
.pxProposalRight .pxInlineActions{justify-content:end}
/* Keep the existing, tested bulk-payment controls fully functional but align their spacing and visual hierarchy. */
.pxWorkspace #bulkPreviewForm{margin-top:8px}
.pxWorkspace .pbwMetrics{gap:12px}
.pxWorkspace .pbwNotice{font-size:12px;line-height:1.55}
/* Mobile payslips */
.pxMyHeader{padding:22px 20px;margin-bottom:15px;border-radius:20px;background:linear-gradient(135deg,#143356,#215c9a);color:#fff}
.pxMyHeader h2{font-size:24px;color:#fff;margin:9px 0}
.pxMyHeader p{font-size:13px;color:#c4d8ef;line-height:1.45}
.pxSlip{background:#fff;border:1px solid #e0e8f3;border-radius:20px;padding:17px;margin-bottom:12px;color:#193653;box-shadow:0 3px 16px #184a8c08}
.pxSlipHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pxSlipHead>div{display:grid;gap:6px;min-width:0}.pxSlipHead>div span{font-size:12px;color:#8191a8}.pxSlipHead>div strong{font-size:14px;line-height:1.3}
.pxSlipMain{margin:15px 0;background:#f5f9ff;border-radius:15px;padding:15px;display:grid;gap:7px}
.pxSlipMain>span{font-size:12px;color:#6e819d}
.pxSlipMain>strong{font-size:clamp(23px,5.8vw,33px);color:#1a518f;line-height:1.05;overflow-wrap:anywhere}
.pxSlipMain small{font-size:11px;color:#8294b1}
.pxSlipGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pxSlipGrid>div{display:grid;gap:6px;min-width:0}
.pxSlipGrid>div span{color:#7b8da7;font-size:11px}
.pxSlipGrid>div b{color:#213b60;font-size:14px;overflow-wrap:anywhere}
.pxSlipHistory{margin-top:16px;border-top:1px solid #edf2f8;padding-top:13px}
.pxSlipHistory summary{color:#2f6fc7;font-size:12px;font-weight:750;cursor:pointer}
.pxSlipHistory>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;font-size:12px;border-bottom:1px solid #f0f3f8}
.pxSlipNote,.pxEmployeeNote{margin-top:13px;border-radius:12px;background:#fff8e8;color:#826b36;padding:12px;font-size:11px;line-height:1.5}
.pxEmployeeNote{background:#f1f6fe;color:#55708e}
@media(max-width:1200px){.pxMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.pxRunGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:830px){.pxHero{display:block}.pxHeroStatus{display:inline-flex;margin-top:16px}.pxCreateForm{grid-template-columns:repeat(2,minmax(0,1fr))}.pxProposal{align-items:stretch;flex-direction:column}.pxProposalRight{display:flex;justify-content:space-between;align-items:center;text-align:left;flex-wrap:wrap}.pxRunSummary{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pxWorkspace{gap:12px}.pxHero{padding:22px 19px;border-radius:18px}.pxMetrics{gap:9px}.pxMetrics3{grid-template-columns:repeat(2,minmax(0,1fr))}.pxMetric{padding:14px}.pxMetric strong{font-size:20px}.pxPanel{padding:17px;border-radius:18px}.pxPanelHead{display:block}.pxTabs,.pxSettingTabs{display:flex;width:100%;flex-wrap:nowrap;overflow-x:auto;border-radius:13px}.pxTab,.pxSettingTab{padding:11px 13px}.pxRunGrid,.pxRateForm,.pxCreateForm,.pxFilters{grid-template-columns:1fr}.pxRunSummary{grid-template-columns:1fr}.pxRunSearch{max-width:100%}.pxRunCardTop b{font-size:17px}.pxSlipGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.pxSlipGrid{grid-template-columns:1fr}.pxMetric strong{font-size:17px}.pxMetrics3{grid-template-columns:1fr}.pxSlipHead{flex-direction:column}}
.pxWorkspace .payrollBulkWorkspace{border:0;box-shadow:none;padding:0;border-radius:0;margin:0}
.pxWorkspace .pbwHeader{padding:0 0 16px}
.pxWorkspace .pbwFilters{gap:12px}
.pxWorkspace .pbwBottom{border-radius:15px}