/* Payroll compositions use the existing design-system primitives and tokens. */
.payroll-page { gap: var(--ui-space-4); }
.payroll-page .payroll-page-header { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); padding: var(--ui-padding-card); }
.payroll-page .panel-header-main { flex: 1; min-width: 0; }
.payroll-page .payroll-page-controls { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.payroll-context-bar, .payroll-step-actions, .payroll-list-toolbar, .payroll-result-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-3);
}
.payroll-context-bar { color: var(--ui-text-secondary); font-size: var(--ui-font-size-secondary); }
.payroll-page .payroll-tabs { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); margin: 0; }
.payroll-page .payroll-tab-button { white-space: normal; text-align: left; }
.payroll-settings-tab { margin-left: auto; }
.payroll-tab-button[data-dirty="true"]::after { content: " •"; }
.payroll-page .message:empty { display: none; }
.payroll-page .payroll-tab-panel { padding: 0; }
.payroll-page .payroll-tab-panel .analytics-card { gap: var(--ui-space-3); }
.payroll-step-actions { justify-content: space-between; padding: var(--ui-space-4) 0; }
.payroll-page .payroll-section-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-3); align-items: center; margin-bottom: var(--ui-space-4); }
.payroll-page .payroll-section-header > div:first-child { min-width: 0; flex: 1; }
.payroll-page .payroll-section-header p { margin: var(--ui-space-1) 0 0; }
.payroll-list-toolbar { margin: var(--ui-space-3) 0; }
.payroll-page .payroll-list-toolbar { display: flex; flex-wrap: wrap; align-items: end; }
.payroll-page .payroll-list-toolbar > button,
.payroll-page .payroll-section-header > button,
.payroll-page .payroll-payment-review button { width: auto; flex: 0 0 auto; }
.payroll-page .payroll-list-toolbar .ui-search-input { flex: 1 1 calc(var(--ui-space-16) * 3); }
.payroll-list-toolbar input, .payroll-list-toolbar select { min-width: 0; }
.payroll-list-toolbar .ui-search-input { flex: 1; }
.payroll-list-toolbar input[type="search"] { width: 100%; }
.payroll-page .payroll-workbench-header { align-items: flex-start; }
.payroll-page .payroll-workbench-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: var(--ui-space-3); }
.payroll-page .payroll-workbench-toolbar label { flex: 1; min-width: 0; }
.payroll-page .payroll-workbench-toolbar .payroll-workbench-search { align-self: end; }
.payroll-page .payroll-workbench-toolbar button { align-self: end; }
.payroll-page .payroll-workbench-savebar { position: sticky; bottom: var(--ui-space-2); background: var(--ui-bg-card); border: var(--ui-border-card); border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-card); padding: var(--ui-space-3); }
.payroll-page .payroll-add-employee-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.payroll-page .payroll-rule-role-card { background: var(--ui-bg-card); border: var(--ui-border-card); border-radius: var(--ui-radius-card); padding: var(--ui-space-4); }
.payroll-page .payroll-rule-role-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ui-space-3); }
.payroll-page .payroll-rule-role-head > div { flex: 1; min-width: 0; }
.payroll-page .payroll-rule-role-head > button { width: auto; }
.payroll-rule-navigation { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.payroll-rule-navigation button { flex: 1; }
.payroll-page .payroll-rule-navigation button.active { background: var(--ui-bg-card); color: var(--ui-accent-active); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-card); }
.payroll-page .payroll-kpi-card { background: var(--ui-bg-subtle); border: var(--ui-border-card); border-radius: var(--ui-radius-card); }
.payroll-page .payroll-stage-card { background: var(--ui-bg-card); border: var(--ui-border-card); border-radius: var(--ui-radius-control); }
.payroll-page .payroll-role-actions { justify-content: flex-end; }
.payroll-page .payroll-summary-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: var(--ui-space-4); }
.payroll-payment-review { margin: var(--ui-space-3) 0; }
.payroll-payment-review p { margin: var(--ui-space-2) 0; }
.payroll-page .payroll-payment-review p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.payroll-page .payroll-payment-register { min-width: 0; width: 100%; }
.payroll-payment-register td { vertical-align: top; font-variant-numeric: tabular-nums; }
.payroll-payment-register :is(th, td):nth-child(n+2):nth-child(-n+4) { white-space: nowrap; text-align: right; }
.payroll-payment-register small { display: block; color: var(--ui-text-muted); margin-top: var(--ui-space-1); }
.payroll-payment-register .payroll-result-actions { flex-wrap: nowrap; }
.payroll-finish-note { border-top: var(--ui-border-card); margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); font-size: var(--ui-font-size-secondary); color: var(--ui-text-secondary); }
.payroll-finish-note p { margin: var(--ui-space-2) 0; }
.payroll-page [hidden] { display: none !important; }
.payroll-page :is(h3, h4)[tabindex="-1"] { scroll-margin-top: var(--ui-space-4); }
.payroll-page .payroll-table-wrap { border-radius: var(--ui-radius-control); }
.payroll-page .payroll-table-wrap th { white-space: normal; }
.payroll-page .payroll-table-wrap td:first-child { min-width: calc(var(--ui-space-16) * 2); }
.payroll-page .payroll-table-wrap input { max-width: 100%; }
#payrollAgreementsTable .payroll-agreement-check input[type="checkbox"] {
  flex: 0 0 auto; width: var(--ui-space-4); height: var(--ui-space-4);
  min-width: 0; min-height: 0; padding: 0; margin: 0;
}
#payrollAgreementsTable .payroll-agreement-check span { min-width: 0; white-space: normal; }
@media (max-width: 1280px) {
  .payroll-settings-tab { margin-left: 0; }
  .payroll-page .payroll-page-controls { width: 100%; }
  .payroll-page .payroll-section-header > div:first-child { flex-basis: 100%; }
  .payroll-page .payroll-workbench-toolbar label { flex-basis: 40%; }
}
@media (max-width: 760px) {
  .payroll-page .payroll-tabs > button { flex: 1 1 45%; }
  .payroll-page .payroll-page-controls > * { flex: 1; }
  .payroll-page .payroll-period-form { flex-wrap: wrap; }
  .payroll-page .payroll-workbench-toolbar label { flex-basis: 100%; }
}