/* Domain layout; presentation belongs to styles/components.css. */
.payroll-app-shell .workspace { min-width: 0; }
.payroll-app-shell .view { padding: var(--space-6); }
.payroll-shell { display: grid; gap: var(--space-8); min-width: 0; }
.payroll-hero { display: flex; align-items: flex-start; justify-content: space-between;  gap: var(--space-8); }
.payroll-hero-actions, .payroll-month-picker, .payroll-section-actions, .payroll-period-bar > div { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.payroll-month-control { display: flex; align-items: end; gap: var(--space-2); }
.payroll-month-control label { display: grid; gap: .25rem; }
.payroll-month-control input { min-height: 2.5rem; }
.payroll-period-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-6); }
.payroll-notice, .payroll-empty { display: grid; }
.payroll-notice.is-compact { padding: var(--space-6); margin-bottom: var(--space-6); }
.payroll-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payroll-kpis span, .payroll-kpis small { display: block; }
.payroll-kpis strong { display: block; }
.payroll-section, .payroll-fuel, .payroll-breakdown, .payroll-adjustments-readonly, .payroll-terms, .payroll-adjustments, .payroll-workflow-manager, .payroll-private-history, .payroll-workflow, .payroll-completion { min-width: 0; }
.payroll-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.payroll-section-head h3, .payroll-workflow h3 { margin: .2rem 0 0; }
.payroll-table-wrap { overflow: auto; overscroll-behavior-inline: contain; }
.payroll-table { width: 100%; min-width: 0; border-collapse: collapse; }
.payroll-table th, .payroll-table td { padding: .65rem; text-align: left; vertical-align: middle; }
.payroll-table th { position: sticky; top: 0; z-index: 1; }
.payroll-table input, .payroll-table select { width: 100%; min-width: 0; }
.payroll-table input[data-entry-field="comment"] { min-width: 0; }
.payroll-section-actions { justify-content: flex-end; margin-top: var(--space-3); }
.payroll-lower-grid, .payroll-review-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: var(--space-6); align-items: start; }
.payroll-review-grid > aside { display: grid; gap: var(--space-6); min-width: 0; }
.payroll-fuel-stats, .payroll-breakdown dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.payroll-fuel-stats > div, .payroll-breakdown dl > div { display: grid; gap: .2rem; padding: var(--space-6); }
.payroll-terms-readonly dl { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.payroll-terms-readonly dl > div { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: .35rem; }
.payroll-terms-readonly dd { margin: 0; text-align: right; }
.payroll-fuel-form, .payroll-terms-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-3); }
.payroll-field { display: grid; min-width: 0; }
.payroll-field input, .payroll-field select, .payroll-field textarea { width: 100%; }
.payroll-workflow { display: flex; align-items: center; justify-content: space-between; }
.payroll-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-6); }
.payroll-person-card { display: grid; }
.payroll-person-card h3 { margin: .2rem 0; }
.payroll-person-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; }
.payroll-person-card dd { margin: .2rem 0 0; }
.payroll-person-status { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.payroll-adjustments-readonly > div:not(.payroll-section-head), .payroll-adjustments article { display: flex; justify-content: space-between; gap: var(--space-6); padding: .65rem 0; }
.payroll-private-history article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-6); padding: .75rem 0; }
.payroll-private-history article > div { display: grid; gap: .2rem; }
.payroll-record-kind { display: block; margin-top: .2rem; max-width: 14rem; }
.payroll-confirm-day { display: block; margin-top: var(--space-2); min-height: 2rem; padding: .35rem .6rem; }
.payroll-breakdown > div:not(.payroll-section-head) { display: flex; justify-content: space-between; gap: var(--space-6); padding: .6rem 0; }
.payroll-breakdown > div.is-total { padding-top: var(--space-6); }
.payroll-completion progress { width: 100%; height: .75rem; accent-color: var(--brand-primary); }
.payroll-completion-counts { display: flex; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-2) 0; }
.payroll-hours-chart { display: grid; gap: var(--space-6); }
.payroll-hours-chart > header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); }
.payroll-hours-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr)); gap: .35rem; min-height: 9rem; align-items: end; padding-top: var(--space-2); }
.payroll-hours-bars > div { display: grid; grid-template-rows: 6rem auto auto; align-items: end; justify-items: center; gap: .35rem; min-width: 0; }
.payroll-hours-bars i { display: block; width: min(1.15rem, 100%); min-height: .2rem; height: var(--hours-height); }
.payroll-hours-bars span { writing-mode: vertical-rl; transform: rotate(180deg); }
.payroll-dialog { width: min(36rem, calc(100vw - 2rem)); padding: 0; }
@media (max-width: 980px) {
.payroll-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payroll-lower-grid, .payroll-review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.payroll-app-shell .view { padding: var(--space-6); }
.payroll-hero, .payroll-period-bar, .payroll-workflow { align-items: stretch; flex-direction: column; }
.payroll-month-control { width: 100%; }
.payroll-month-control label { flex: 1; }
.payroll-kpis, .payroll-fuel-stats, .payroll-breakdown dl, .payroll-fuel-form, .payroll-terms-form { grid-template-columns: 1fr; }
.payroll-table-wrap { overflow: visible; }
.payroll-table, .payroll-table tbody { display: grid; gap: var(--space-6); min-width: 0; }
.payroll-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.payroll-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-6); }
.payroll-table td { display: grid; gap: .25rem; padding: 0; }

.payroll-table td:first-child, .payroll-table td:last-child { grid-column: 1 / -1; }
.payroll-table input, .payroll-table select, .payroll-table input[data-entry-field="comment"] { min-width: 0; }
}
@media (max-width: 390px) {
.payroll-app-shell .view { padding-inline: var(--space-2); }
.payroll-month-control .c-button { min-width: 2.5rem; padding-inline: var(--space-2); }
.payroll-table tr { grid-template-columns: 1fr; }
.payroll-table td { grid-column: 1 / -1; }
.payroll-private-history article { grid-template-columns: 1fr; }
.payroll-terms-readonly dl > div { display: grid; }
.payroll-terms-readonly dd { text-align: left; }
}