.payroll-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.payroll-card{padding:22px 24px;border:1px solid #dbe6e0;border-radius:20px;background:linear-gradient(145deg,#fff,#f5faf7);box-shadow:0 6px 22px #123b2510;min-width:0}.payroll-card span{display:block;color:#56685d;font-size:13px;margin-bottom:14px}.payroll-card strong{display:block;font-size:clamp(22px,2.2vw,31px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:#1a3c2c}.payroll-card.net{background:linear-gradient(130deg,#087a43,#07552f);border-color:#087a43}.payroll-card.net span,.payroll-card.net strong{color:#fff}.payroll-card.deduct strong{color:#854024}.payroll-toolbar{display:flex;gap:18px;align-items:end;flex-wrap:wrap}.payroll-toolbar>.field{min-width:230px;flex:1}.payroll-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;flex:2}.payroll-filter .field{flex:1;min-width:140px}.payroll-person{display:flex;gap:18px;align-items:center;margin-top:16px}.payroll-person h2{margin:0}.payroll-person p{margin:6px 0}.payroll-person>.row-actions{margin-inline-start:auto;flex-wrap:wrap}.payroll-check{display:flex;gap:10px;align-items:center;padding:14px 0;line-height:1.8}.payroll-check input{width:18px;height:18px;flex:0 0 18px;accent-color:#087a43}.payroll-disclosure{width:100%;display:flex;gap:14px;align-items:center;background:none;border:none;font:inherit;font-weight:700;color:inherit;text-align:start;cursor:pointer;padding:4px 0}.payroll-disclosure>span:last-child{margin-inline-start:auto}.payroll-status{font-size:12px;border-radius:999px;padding:4px 14px;background:#e7f3ed;color:#286546}.payroll-source form{padding-top:22px;border-top:1px solid #dbe6e0;margin-top:20px}.payroll-explanation p{line-height:1.9}.payroll-source .info-box .field{margin-top:12px}.payroll-source .info-box input{font-family:monospace;font-size:12px}.payroll-cards+.panel{margin-bottom:18px}[data-theme=dark] .payroll-card{background:linear-gradient(145deg,#202f40,#182534);border-color:var(--line);box-shadow:0 6px 22px #0002}[data-theme=dark] .payroll-card span{color:var(--secondary)}[data-theme=dark] .payroll-card strong{color:var(--text)}[data-theme=dark] .payroll-card.net{background:linear-gradient(130deg,#1b6349,#144b3a)}[data-theme=dark] .payroll-card.net strong,[data-theme=dark] .payroll-card.net span{color:#d2ffea}[data-theme=dark] .payroll-card.deduct strong{color:#ffbca7}[data-theme=dark] .payroll-source form{border-color:var(--line)}[data-theme=dark] .payroll-status{background:#203f34;color:#9cecbe}[data-theme=glass] .payroll-card{background:linear-gradient(145deg,#ffffffba,#f2f9f380);backdrop-filter:blur(18px);border-color:#ffffffd9;box-shadow:0 12px 30px #40654816}[data-theme=glass] .payroll-card.net{background:linear-gradient(130deg,#087a43dc,#07552fde)}@media(max-width:900px){.payroll-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-person{align-items:flex-start;flex-wrap:wrap}.payroll-person>.row-actions{margin-inline-start:0;width:100%}}@media(max-width:520px){.payroll-cards{gap:10px}.payroll-card{padding:17px 14px}.payroll-card strong{font-size:23px}.payroll-card span{font-size:11px;min-height:30px}.payroll-toolbar,.payroll-filter{display:block}.payroll-filter .button{margin:8px 5px 0}.payroll-toolbar>.field{min-width:0}.payroll-person .avatar{flex-shrink:0}.payroll-person small{overflow-wrap:anywhere}.payroll-source .info-box{padding:13px}}

.payroll-source,.payroll-toolbar,.payroll-person,.payroll-explanation{padding:20px}.payroll-source{margin-bottom:18px}.payroll-details{margin-top:18px;overflow:hidden}.payroll-details>h2{margin:0;padding:18px 20px 8px}.payroll-details>p{margin:0;padding:0 20px 16px}.payroll-person>div:not(.row-actions){min-width:0}.payroll-person small,.payroll-explanation p{overflow-wrap:anywhere}.payroll-explanation p:first-child{margin-top:0}.payroll-explanation p:last-child{margin-bottom:0}@media(max-width:520px){.payroll-source,.payroll-toolbar,.payroll-person,.payroll-explanation{padding:16px}.payroll-details>h2{font-size:17px;padding:16px 16px 8px}.payroll-details>p{padding:0 16px 14px}.payroll-person .row-actions{gap:10px}.payroll-person .row-actions .button{flex:1}}

.payroll-period{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;margin:18px 0;padding:16px 20px;border:1px solid var(--line,#dbe6e0);border-radius:14px;background:var(--surface,#fff)}.payroll-period strong{color:var(--green,#087a43)}.payroll-period span{font-size:13px}.payroll-period small{flex-basis:100%;color:var(--secondary,#56685d)}

.payroll-private-rate{display:inline-block;min-width:7ch}.payroll-private-rate button{display:inline-block;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:help;min-width:7ch;font-variant-numeric:tabular-nums}.payroll-private-rate button:focus-visible{outline:2px solid var(--focus,#087a43);outline-offset:6px;border-radius:5px}.payroll-rewards-heading{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.payroll-rewards-heading h2{margin:0}.payroll-rewards-heading .row-actions{flex-wrap:wrap}.payroll-card.holidayPremium strong,.payroll-card.bonus strong{color:var(--green,#087a43)}
