.payroll-management { display: grid; gap: 18px; }
.payroll-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.payroll-management button { border:1px solid #dce3ed; background:white; border-radius:12px; padding:12px 18px; font-weight:650; cursor:pointer; }
.payroll-management button:disabled { opacity:.55; cursor:default; }
.payroll-tiles button { min-height:85px; text-align:left; font-size:16px; }
.payroll-tiles .is-active { border-color:#d71425; box-shadow:inset 0 -3px #d71425; background:#fff6f7; }
.payroll-management form { padding:20px; border:1px solid #e0e6ef; border-radius:16px; display:grid; gap:14px; background:#fff; }
.payroll-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.payroll-fields label { display:grid; gap:7px; color:#52637b; font-weight:600; }
.payroll-fields input,.payroll-fields select { width:100%; min-height:44px; padding:10px; border:1px solid #dce3ed; border-radius:10px; color:#172435; background:white; }
.payroll-table { overflow:auto; }
.payroll-table table { width:100%; border-collapse:collapse; }
.payroll-table th,.payroll-table td { padding:12px; border-bottom:1px solid #e4e9f0; text-align:left; }
.payroll-table th { background:#f4f7fb; }
.payroll-heading { display:flex; align-items:center; gap:20px; }
.payroll-heading h2 { margin:0; }
.payroll-time { white-space:pre-line; min-width:100px; }
.payroll-table td { vertical-align:top; }
@media(max-width:650px) { .payroll-tiles { grid-template-columns:1fr; } }
.payroll-payment-summary { margin: 16px 0; padding: 16px; border: 1px solid #dce3ef; border-radius: 12px; background: #f8faff; }
.payroll-payment-summary h3 { margin-top: 0; }
.payroll-payment-detail { margin-top: 6px; font-size: 0.86em; color: #5d687e; white-space: nowrap; }