.payroll-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px;border:1px solid #e7e7e7;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#f7f7f4 100%);margin-bottom:20px}.payroll-hero h2{font-size:var(--fs-heading-lg);line-height:1.15;margin:6px 0 8px}.payroll-hero p{max-width:760px;color:#666;line-height:1.6;margin:0}.payroll-loading{padding:40px;text-align:center;color:#777}.payroll-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:20px}.payroll-step{display:flex;align-items:center;gap:12px;border:1px solid #e8e8e8;border-radius:18px;padding:15px;background:#fff}.payroll-step b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#eee;font-size:var(--fs-lg);flex:0 0 auto}.payroll-step span{display:flex;flex-direction:column;gap:3px}.payroll-step small{font-size:var(--fs-md);color:#777}.payroll-step.active{border-color:#1d1d1d}.payroll-step.active b,.payroll-step.done b{background:#1d1d1d;color:#fff}.payroll-step.done{background:#f7f7f4}.payroll-simple-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;margin-bottom:18px}.payroll-card{overflow:hidden;border:1px solid #e7e7e7}.payroll-card .dashboard-card-head{align-items:flex-start}.payroll-card .dashboard-card-head small{display:block;margin-top:8px;color:#777;font-size:var(--fs-md)}.payroll-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 20px 18px}.payroll-form-grid label,.payroll-month-label,.payroll-mapping-grid label{display:flex;flex-direction:column;gap:7px;font-size:var(--fs-md);font-weight:var(--fw-bold);color:#4f4f4f}.payroll-note{margin:0 20px 20px;border-radius:16px;padding:15px;background:#f5f5f0;display:grid;gap:5px}.payroll-note span{font-size:var(--fs-lg);line-height:1.55;color:#666}.payroll-note .link-btn{justify-self:start;margin-top:4px}.payroll-month-card{padding-bottom:20px}.payroll-month-label{padding:0 20px}.payroll-month-select{display:flex;gap:10px}.payroll-month-select .select{flex:1;min-width:0;font-weight:var(--fw-medium)}.payroll-month-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px}.payroll-month-status span{border:1px solid #ececec;border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:4px}.payroll-month-status small{color:#777;font-size:var(--fs-base)}.payroll-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}.payroll-actions .black{background:#111;color:#fff}.payroll-closed{margin:14px 20px 0;padding:14px;border-radius:14px;background:#eff7ef;display:flex;flex-direction:column;gap:4px}.payroll-closed span{font-size:var(--fs-md);color:#567056}.payroll-wide{margin-bottom:18px}.payroll-table-wrap{overflow:auto;border-top:1px solid #eee}.payroll-table{width:100%;border-collapse:collapse;min-width:960px}.payroll-table th,.payroll-table td{padding:11px 10px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle;font-size:var(--fs-md)}.payroll-table th{background:#fafafa;color:#555;font-size:var(--fs-base);position:sticky;top:0;z-index:1}.payroll-table th small,.payroll-table td small{display:block;color:#888;font-weight:var(--fw-medium);margin-top:3px}.payroll-table td:first-child{min-width:190px}.payroll-small{min-width:120px}.payroll-hours{width:72px;min-width:72px;text-align:center}.payroll-table-help{padding:13px 20px;color:#777;font-size:var(--fs-md);line-height:1.5;background:#fafafa}.payroll-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 20px 18px}.payroll-kpis div{border:1px solid #eaeaea;border-radius:15px;padding:14px;display:flex;flex-direction:column;gap:5px}.payroll-kpis small{color:#777}.payroll-kpis strong{font-size:var(--fs-heading-md)}.payroll-issues{display:grid;gap:8px;padding:0 20px 18px}.payroll-issue{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 14px;background:#f6f6f6}.payroll-issue b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ddd;flex:0 0 auto}.payroll-issue span{display:flex;flex-direction:column;gap:3px}.payroll-issue small{line-height:1.45}.payroll-issue.blocker{background:#fff0ef;color:#8b211b}.payroll-issue.blocker b{background:#b7352c;color:#fff}.payroll-issue.warning{background:#fff8e8;color:#76530c}.payroll-ready{margin:0 20px 18px;padding:14px;border-radius:14px;background:#eef7ee;color:#295d2d;font-weight:var(--fw-bold)}.payroll-result{min-width:780px}.payroll-mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 20px}.payroll-employee-entry{display:flex}.status-chip.danger{background:#fff0ef!important;color:#9c2d25!important;border-color:#f0c0bc!important}
@media(max-width:1100px){.payroll-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-simple-grid{grid-template-columns:1fr}.payroll-mapping-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.payroll-hero{padding:20px;flex-direction:column}.payroll-hero h2{font-size:var(--fs-heading-md)}.payroll-steps{grid-template-columns:1fr}.payroll-form-grid{grid-template-columns:1fr}.payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-mapping-grid{grid-template-columns:1fr}.payroll-month-status{grid-template-columns:1fr}.payroll-actions .btn{width:100%;justify-content:center}}

/* Motion: payroll steps, table rows, issue list, and status banners */
.payroll-step{transition:background-color var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
.payroll-step b{transition:background-color var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard)}
.payroll-table tbody tr{transition:background-color var(--motion-fast) var(--ease-standard)}
.payroll-table tbody tr:hover{background:#fafafa}
@keyframes payroll-issue-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.payroll-issue{animation:payroll-issue-in var(--motion-base) var(--ease-out) both}
@keyframes payroll-banner-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.payroll-ready,.payroll-closed{animation:payroll-banner-in var(--motion-base) var(--ease-out) both}