.payroll-page { display:grid; gap:18px; }
.payroll-page h1,.payroll-page h2,.payroll-page h3 { margin:0; }
.payroll-page h2 { font-size:14px; font-weight:600; }
.payroll-page h3 { font-size:12px; font-weight:600; }
.payroll-page [hidden] { display:none !important; }
.payroll-page :is(input,select,textarea) {
  min-width:0; padding:9px 10px; border:1px solid var(--border);
  border-radius:5px; background:var(--surface-input); color:var(--text);
  font:inherit; font-size:12px;
}
.payroll-page textarea { min-height:70px; resize:vertical; }
.payroll-page label { display:grid; gap:7px; font-size:12px; color:var(--muted); }
.payroll-page fieldset { padding:0; margin:0; min-width:0; border:0; }
.payroll-page :disabled { cursor:default; opacity:.6; }
.payroll-period { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.payroll-period-nav { display:flex; align-items:center; gap:8px; }
.payroll-period-nav a { display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:34px; border:1px solid var(--border); border-radius:5px; text-decoration:none; font-size:16px; }
.payroll-period-title { display:grid; gap:6px; }
.payroll-period-title strong { font-size:13px; font-weight:600; }
.payroll-period-title span { font-size:11px; color:var(--muted); }
.payroll-period-actions,.payroll-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.payroll-period-actions { margin-left:auto; }
.payroll-summary { display:flex; gap:30px; flex-wrap:wrap; padding:18px 20px; border-bottom:1px solid var(--border); }
.payroll-summary > div { display:grid; gap:7px; }
.payroll-summary span { color:var(--muted); font-size:11px; }
.payroll-summary strong { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.payroll-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); }
.payroll-toolbar input { width:min(330px,100%); }
.payroll-toolbar > span { color:var(--muted); font-size:11px; }
.payroll-table { width:100%; min-width:900px; }
:root[data-page="management"] .content .payroll-page .table-wrap > .payroll-table > :is(thead,tbody) > tr > :is(th,td) { padding-inline:10px; }
.payroll-table th { white-space:nowrap; }
.payroll-table td { vertical-align:middle; font-size:12px; font-variant-numeric:tabular-nums; }
.payroll-table td:first-child { min-width:170px; }
.payroll-table small { display:block; margin-top:5px; font-size:10px; color:var(--muted); }
.payroll-table button { font:inherit; font-size:11px; }
.payroll-table .payroll-hours { white-space:nowrap; }
.payroll-status { display:inline-flex; align-items:center; padding:4px 7px; border-radius:4px; background:var(--surface-raised); font-size:10px; white-space:nowrap; color:var(--muted); }
.payroll-status-reviewed { color:var(--accent); }
.payroll-status-paid { color:var(--success); }
.payroll-status-pending { color:var(--warning); }
.payroll-empty { padding:28px 20px; font-size:12px; color:var(--muted); }
.payroll-footer { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 20px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }
.payroll-footer .payroll-actions { margin-left:auto; }
.payroll-message { margin:0; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.payroll-message:empty { display:none; }
.payroll-message[data-error=true],.payroll-pending { color:var(--warning); }
.payroll-panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 20px; border-bottom:1px solid var(--border); }
.payroll-panel-head > div { display:grid; gap:6px; }
.payroll-panel-head small { color:var(--muted); font-size:11px; }
.payroll-panel-body { padding:18px 20px; }
.payroll-pending { margin:0; padding:15px 20px; border-bottom:1px solid var(--border); font-size:12px; line-height:1.6; }
.payroll-pending ul { margin:0; padding-left:17px; }
.payroll-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px); gap:20px; }
.payroll-days { width:100%; min-width:570px; }
.payroll-days :is(th,td) { font-size:11px; vertical-align:top; }
.payroll-days small { display:block; margin-top:4px; color:var(--muted); }
.payroll-breakdown { display:grid; gap:10px; margin:0; }
.payroll-breakdown > div { display:flex; justify-content:space-between; align-items:baseline; gap:18px; }
.payroll-breakdown dt { color:var(--muted); font-size:12px; }
.payroll-breakdown dd { margin:0; font-size:13px; font-variant-numeric:tabular-nums; }
.payroll-breakdown .payroll-net { border-top:1px solid var(--border); margin-top:4px; padding-top:12px; }
.payroll-net dd { font-size:19px; font-weight:600; }
.payroll-consumption { margin-top:20px; }
.payroll-consumption summary { cursor:pointer; font-size:12px; color:var(--muted); }
.payroll-consumption table { width:100%; min-width:520px; margin-top:12px; }
.payroll-consumption :is(th,td) { font-size:11px; }
.payroll-form { display:grid; gap:18px; }
.payroll-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.payroll-form-grid .payroll-wide { grid-column:1/-1; }
.payroll-rate-table { width:100%; min-width:440px; }
.payroll-rate-table :is(th,td) { font-size:11px; }
.payroll-rate-table input { width:100%; max-width:170px; }
.payroll-exception { border-top:1px solid var(--border); padding-top:18px; margin-top:2px; }
.payroll-exception > h3 { margin-bottom:14px; }
.payroll-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:16px; border-top:1px solid var(--border); }
.payroll-form-actions > button:first-child { margin-right:auto; }
.payroll-checkbox { display:flex !important; align-items:center; gap:8px !important; }
.payroll-checkbox input { width:16px; height:16px; accent-color:var(--accent); }
.payroll-payment-form { display:grid; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.payroll-payment-form p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.payroll-receipt { display:grid; gap:12px; }
.payroll-receipt dl { margin:0; display:grid; gap:9px; }
.payroll-receipt dl > div { display:flex; justify-content:space-between; gap:15px; }
.payroll-receipt dt { color:var(--muted); font-size:11px; }
.payroll-receipt dd { margin:0; font-size:12px; overflow-wrap:anywhere; }
@media(max-width:900px) { .payroll-detail-grid { grid-template-columns:1fr; } }
@media(max-width:650px) {
  .payroll-form-grid { grid-template-columns:1fr; }
  .payroll-period-actions { margin-left:0; }
  .payroll-summary { gap:20px; }
  .payroll-panel-head,.payroll-panel-body,.payroll-footer,.payroll-summary,.payroll-toolbar { padding-left:16px; padding-right:16px; }
}