.payroll-entry-console {
  margin: 14px 0;
  border: 1px solid var(--red);
  background: linear-gradient(125deg, #1e1114, #0d0e0f 60%);
  padding: 22px;
}
.payroll-entry-console > header span { color: var(--red2); font-size: 8px; letter-spacing: .14em; }
.payroll-entry-console > header h3 { margin: 6px 0; font: 600 26px var(--display); }
.payroll-entry-console > header p { margin: 0 0 16px; color: #999; }
.payroll-entry-console .work-form { border-top: 1px solid #4a242b; padding-top: 16px; }
.payroll-entry-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payroll-roster { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.payroll-roster h4 { color: #999; font-size: 9px; letter-spacing: .12em; }
.payroll-roster article { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(120px, auto) auto; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 11px 0; }
.payroll-roster article div { display: grid; gap: 3px; }
.payroll-roster article small, .payroll-roster article span { color: #888; font-size: 9px; }
.payroll-roster article button { padding: 9px 12px; }
@media (max-width: 800px) {
  .payroll-entry-inputs, .payroll-roster article { grid-template-columns: 1fr; }
  .payroll-roster article button { width: 100%; }
}

/* Payroll control is a full operational workspace, not a narrow form dialog. */
#work-modal:has(.payroll-control-layout) {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 34px;
}
.payroll-control-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; min-width: 0; }
.payroll-period-list { position: sticky; top: 0; }
.payroll-period-list small,
.payroll-period-list label,
.payroll-entry-fields label,
.payroll-employee-row p { color: #aaa; }
.payroll-employee-row { overflow: hidden; }
.payroll-entry-fields {
  grid-template-columns: minmax(80px, .7fr) minmax(80px, .7fr) minmax(115px, .9fr) minmax(150px, 2fr);
}
.payroll-entry-fields input,
.payroll-entry-fields select { min-width: 0; }
.payroll-itemized-stub { display: grid; gap: 3px; margin-top: 11px; padding: 10px 12px; border-left: 2px solid var(--red); background: rgba(255,255,255,.025); }
.payroll-itemized-stub b { color: #fff; font-size: 10px; letter-spacing: .1em; }
.payroll-itemized-stub span { color: #e7e7e7; font-size: 12px; line-height: 1.45; }
.payroll-itemized-stub small { color: #9fa3aa; font-size: 10px; line-height: 1.45; }
.payroll-iban-reveal { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; align-items: center; margin: 12px 0 0; padding: 14px 16px; border: 1px solid #74333d; background: #171012; }
.payroll-iban-reveal span { grid-column: 1 / -1; color: var(--red2); font-size: 8px; letter-spacing: .13em; }
.payroll-iban-reveal b { color: #fff; font-size: 11px; }
.payroll-iban-reveal code { justify-self: end; color: #fff; font-size: 16px; letter-spacing: .08em; }
.payroll-iban-reveal small { grid-column: 1 / -1; color: #aaa; font-size: 9px; }
.payroll-blocker { display: grid; gap: 5px; }
.payroll-blocker span { color: #d8b7bb; font-size: 11px; line-height: 1.55; }
.payroll-processing { border-color: #4a3035; padding: 24px; }
.payroll-processing h3 { font-size: 26px; }
.payroll-check { gap: 13px; padding: 15px 12px; cursor: pointer; }
.payroll-check input { width: 18px; height: 18px; accent-color: var(--red); flex: 0 0 auto; }
.payroll-check b { font-size: 12px; }
.payroll-check small { color: #aaa; font-size: 10px; }
.payroll-check-locked { opacity: .48; cursor: not-allowed; }
.payroll-period-actions { align-items: center; }
.payroll-period-actions button { white-space: nowrap; }
.payroll-approval-state { display: grid; gap: 4px; margin-right: auto; max-width: 480px; }
.payroll-approval-state b { font-size: 9px; letter-spacing: .12em; }
.payroll-approval-state span { color: #bbb; font-size: 10px; line-height: 1.5; }
.payroll-approval-state.ready b { color: #75d8ad; }
.payroll-approval-state.blocked b { color: #ff8c99; }
.time-clock-workspace { display:grid; gap:22px; min-width:min(820px,82vw); }
.time-clock-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; border:1px solid #d21f3c; background:linear-gradient(135deg,rgba(210,31,60,.12),rgba(255,255,255,.02)); }
.time-clock-hero h3 { margin:.25rem 0; font-size:30px; }
.time-clock-list,.time-clock-corrections { display:grid; gap:12px; }
.time-clock-row,.time-clock-corrections article { border:1px solid #34363b; border-left:3px solid #d21f3c; padding:16px; background:#111318; }
.time-clock-row.open { border-left-color:#42c98b; }
.time-clock-row header { display:flex; justify-content:space-between; gap:16px; }
.time-clock-row header div { display:grid; gap:4px; }
.time-clock-row header span,.time-clock-row small { color:#aaa; }
.time-clock-row details { margin-top:14px; border-top:1px solid #34363b; padding-top:12px; }
.time-clock-row summary { cursor:pointer; font-size:11px; font-weight:800; letter-spacing:.1em; }
.time-clock-row.review-focus { border-color:#e6576e; box-shadow:0 0 0 2px rgba(210,31,60,.25); }
.time-clock-management,.time-clock-exceptions { border:1px solid #34363b; background:#0d0f12; padding:18px; }
.time-clock-management>header { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #292c31; padding-bottom:13px; }
.time-clock-management h4 { margin:4px 0 0; font:600 24px var(--display); }
.time-clock-management>header>b { color:#42c98b; font-size:11px; letter-spacing:.1em; }
.time-clock-active-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; padding-top:14px; }
.time-clock-active-grid article { display:grid; gap:4px; padding:13px; border-left:3px solid #42c98b; background:#15181c; }
.time-clock-active-grid article span,.time-clock-active-grid article small { color:#aaa; font-size:10px; }
.time-clock-active-grid article b { color:#fff; font-size:19px; }
.time-clock-exceptions { display:grid; gap:10px; }
.time-clock-exceptions article { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px; border-left:3px solid #e0a800; background:#15181c; }
.time-clock-exceptions article p { margin:4px 0 0; color:#aaa; }
.time-clock-manual output { display:block; padding:12px; border:1px solid #34363b; color:#aaa; background:#111318; }
.time-clock-manual output.warning { color:#ffd176; border-color:#8a6814; }
.clock-out-dialog { width:min(560px,calc(100vw - 32px)); border:1px solid #555; background:#111318; color:#fff; padding:26px; }
.clock-out-dialog::backdrop { background:rgba(0,0,0,.78); }
.clock-out-dialog h3 { margin:.25rem 0; font:600 34px var(--display); text-transform:uppercase; }
.time-clock-dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.time-clock-dialog-actions button { min-width:120px; }
.overview-time-clock { margin:0 0 35px; border:1px solid #3b2a2e; background:linear-gradient(120deg,rgba(210,31,60,.1),#101114 62%); }
.overview-time-clock>header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px; border-bottom:1px solid #34272a; }
.overview-time-clock h3 { margin:4px 0; font:600 27px var(--display); text-transform:uppercase; }
.overview-time-clock header p:not(.eyebrow),.overview-time-clock span,.overview-time-clock small { color:#969094; font-size:10px; }
.overview-time-clock button { border:1px solid #d21f3c; background:transparent; color:#fff; padding:11px 15px; font-size:9px; font-weight:800; letter-spacing:.08em; cursor:pointer; }
.overview-time-clock button.primary { background:#d21f3c; min-width:130px; }
.overview-hours { display:grid; grid-template-columns:210px 1fr; }
.overview-hours>article { padding:22px; border-right:1px solid #34272a; display:grid; align-content:center; }
.overview-hours>article b { font:600 42px var(--display); margin:5px 0; }
.overview-hours>section { padding:18px 22px; }
.overview-hours>section>div { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.overview-hours ul { list-style:none; padding:0; margin:12px 0 0; }
.overview-hours li { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-top:1px solid #292528; font-size:10px; }
.overview-hours li span { display:flex; gap:7px; flex-wrap:wrap; }
.overview-hours li b { color:#fff; }
.overview-clock-loading { padding:22px; color:#999; }

@media (max-width: 800px) {
  #work-modal:has(.payroll-control-layout) {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 24px 18px;
  }
  .payroll-control-layout { grid-template-columns: 1fr; }
  .payroll-period-list { position: static; }
  .payroll-period-actions { display: grid; }
  .payroll-period-actions button { width: 100%; }
  .payroll-approval-state { margin: 0 0 6px; }
  .payroll-iban-reveal { grid-template-columns: 1fr; }
  .payroll-iban-reveal code { justify-self: start; overflow-wrap: anywhere; }
  .time-clock-workspace { min-width:0; }
  .time-clock-hero { align-items:stretch; flex-direction:column; }
  .time-clock-management>header,.time-clock-exceptions article,.time-clock-dialog-actions { align-items:stretch; flex-direction:column; }
  .time-clock-dialog-actions button { width:100%; }
  .overview-time-clock>header,.overview-hours>section>div { align-items:stretch; flex-direction:column; }
  .overview-hours { grid-template-columns:1fr; }
  .overview-hours>article { border-right:0; border-bottom:1px solid #34272a; }
}