/* Time clock screens. All clocks and totals are rendered from server time. */
.timeclock-page { min-width: 0; }
.timeclock-page .pagehead p { margin-bottom: 0; }
.timeclock-punch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 32px; align-items: center; padding: 32px; }
.timeclock-punch-active { border-color: #b9d9bd; background: #f8fcf8; }
.timeclock-status { display: flex; align-items: center; gap: 9px; color: #536172; font-size: 13px; font-weight: 650; margin-bottom: 18px; }
.timeclock-dot { width: 10px; height: 10px; border-radius: 50%; background: #8793a2; flex: 0 0 auto; }
.timeclock-punch-active .timeclock-status { color: #246c3a; }
.timeclock-punch-active .timeclock-dot { background: #2e7c43; box-shadow: 0 0 0 4px #e3f1e5; }
.timeclock-punch h2 { font-size: clamp(28px, 3.2vw, 42px); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.timeclock-punch h2 span { font-size: 17px; letter-spacing: -.02em; font-weight: 500; color: var(--muted); }
.timeclock-punch p { margin: 5px 0; overflow-wrap: anywhere; }
.timeclock-asof { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.timeclock-punch-form { margin: 0; text-align: center; }
.timeclock-punch-form .timeclock-punch-button { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; min-height: 64px; padding: 17px 22px; font-size: 19px; background: var(--clock-accent, #7ce779); color: #17251b; border-color: var(--clock-accent, #7ce779); border-radius: 10px; }
.timeclock-punch-form .timeclock-punch-button:hover { background: var(--clock-accent, #90ed8d); border-color: var(--clock-accent, #90ed8d); filter: brightness(1.05); }
.timeclock-punch-button span { font-size: 25px; font-weight: 400; }
.timeclock-punch-form .hint { margin-top: 10px; }
.timeclock-period { margin: 32px 0 24px; }
.timeclock-period-heading { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.timeclock-period-heading .eyebrow { margin-bottom: 8px; }
.timeclock-period-heading h2 { margin: 0; }
.timeclock-payday { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 8px; }
.timeclock-payday span { font-size: 12px; color: var(--muted); }
.timeclock-payday strong { font-size: 15px; }
.timeclock-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.timeclock-totals > div { background: #fff; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.timeclock-totals span, .timeclock-report-summary > div > span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.timeclock-totals strong, .timeclock-report-summary > div > strong { display: block; font-size: 36px; line-height: 1.4; letter-spacing: -.035em; font-weight: 650; font-variant-numeric: tabular-nums; }
.timeclock-totals small, .timeclock-report-summary small { display: block; font-size: 12px; color: var(--muted); }
.timeclock-totals .timeclock-total { background: #263242; color: #fff; border-color: #263242; }
.timeclock-total span, .timeclock-total small { color: #d0d9e4; }
.timeclock-tablewrap { max-width: 100%; border-radius: 8px; }
.timeclock-table { min-width: 460px; }
.timeclock-detail-table, .timeclock-summary-table { min-width: 720px; }
.timeclock-table th, .timeclock-table td { padding: 15px 14px; }
.timeclock-table td strong { font-size: 13px; font-weight: 600; }
.timeclock-table .sub { max-width: 280px; overflow-wrap: anywhere; }
.timeclock-number { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.timeclock-table-note { margin: 16px 0 0; }
.timeclock-footnote { max-width: 780px; margin: 0; }
.timeclock-report-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.timeclock-report-controls h2 { margin-bottom: 8px; }
.timeclock-report-controls p { margin: 0; font-size: 13px; }
.timeclock-period-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 100%; }
.timeclock-period-form label { margin: 0; min-width: 190px; }
.timeclock-report-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; margin: 0 0 24px; }
.timeclock-edit-page { max-width: 900px; margin: auto; }
.timeclock-edit-form { margin: 16px 0 0; }
.timeclock-original { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #f6f8fa; }
.timeclock-original span, .timeclock-original strong { display: block; overflow-wrap: anywhere; }
.timeclock-original span { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.timeclock-original strong { font-size: 13px; font-weight: 600; }
.timeclock-form-actions { margin-top: 24px; }
.timeclock-adjustments article { padding: 20px 0; border-bottom: 1px solid var(--line); }
.timeclock-adjustments article:last-child { padding-bottom: 0; border-bottom: 0; }
.timeclock-adjustment-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.timeclock-adjustment-heading strong { font-size: 13px; }
.timeclock-adjustment-heading > span { font-size: 12px; color: var(--muted); }
.timeclock-adjustments p { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.timeclock-change { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; font-size: 12px; color: var(--muted); margin: 5px 0; }
.timeclock-change > span:last-child { overflow-wrap: anywhere; }
.timeclock-change small { display: block; margin-top: 4px; }
.timeclock-company { display: inline-block; font-size: 12px; font-weight: 650; color: #526074; background: #edf1f6; padding: 5px 9px; border-radius: 6px; margin: -5px 0 14px; }
.timeclock-company-select { margin: 0 0 14px; text-align: left; }
.timeclock-working-at { text-align: left; font-size: 12px; padding-bottom: 14px; }
.timeclock-working-at strong { display: block; color: var(--ink); font-size: 14px; }
.timeclock-business-label { display: block; font-size: 12px; font-weight: 600; }
.timeclock-personal-table { min-width: 550px; }
.timeclock-profile-table { min-width: 720px; }
.timeclock-report-filter label { min-width: 150px; flex: 1; }
.timeclock-business-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.timeclock-business-totals .card { padding: 22px 24px; }
.timeclock-business-totals strong { display: block; font-size: 28px; line-height: 1.5; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.timeclock-business-totals strong > span { font-size: 14px; color: var(--muted); font-weight: 500; }
.timeclock-business-totals p { font-size: 12px; margin: 2px 0 0; }
.timeclock-business-fieldset { border: 1px solid var(--line); border-radius: 9px; padding: 12px 18px; margin: 20px 0; min-width: 0; }
.timeclock-business-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.timeclock-business-fieldset .check { margin: 10px 0; }
.timeclock-access-check { padding: 12px 16px; background: #f5f7fa; border-radius: 8px; }
.timeclock-access-check input, .timeclock-business-fieldset input { margin: 0; flex: 0 0 20px; accent-color: #263242; }
.timeclock-original .timeclock-original-business { margin-top: 8px; margin-bottom: 0; }
.timeclock-optional { color: var(--muted); font-weight: 400; }
.timeclock-setup-link { font: 12px/1.6 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; background: #f6f8fa; }
@media (max-width: 740px) {
  .timeclock-punch { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; }
  .timeclock-punch-form { text-align: left; }
  .timeclock-punch-form .timeclock-punch-button { max-width: 350px; }
  .timeclock-period-heading { align-items: flex-start; }
  .timeclock-totals { gap: 10px; }
  .timeclock-totals > div { padding: 17px; }
  .timeclock-totals strong { font-size: 30px; }
}
@media (max-width: 540px) {
  .timeclock-punch { padding: 20px; }
  .timeclock-period-heading { flex-direction: column; gap: 12px; }
  .timeclock-payday { text-align: left; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
  .timeclock-totals { grid-template-columns: minmax(0, 1fr); }
  .timeclock-totals > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; }
  .timeclock-totals strong { grid-column: 2; grid-row: 1 / 3; font-size: 30px; }
  .timeclock-totals small { grid-column: 1; }
  .timeclock-punch-form .timeclock-punch-button { max-width: none; }
  .timeclock-period-form { flex-wrap: wrap; width: 100%; }
  .timeclock-period-form label { flex: 1; min-width: 150px; }
  .timeclock-report-summary .actions { width: 100%; }
  .timeclock-report-summary .actions > a { flex: 1; text-align: center; }
  .timeclock-change { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .timeclock-business-totals { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Pay figures are scoped on the server to the signed-in employee. */
.timeclock-pay-panel { margin-bottom:24px; }
.timeclock-current-rates { display:flex; flex-wrap:wrap; gap:16px 32px; margin-top:20px; }
.timeclock-current-rates p { display:grid; gap:4px; }
.timeclock-current-rates span { color:var(--muted); font-size:14px; }
.timeclock-pay-rate { display:grid; gap:6px; padding:16px 0; border-bottom:1px solid var(--line); }
.timeclock-pay-rate small { color:var(--muted); }
.timeclock-labor { min-width:0; border:0; padding:0; margin:0 0 16px; }
.timeclock-labor legend { font-size:12px; font-weight:700; margin-bottom:8px; }
.timeclock-labor label { display:block; margin-bottom:12px; }
.timeclock-labor [hidden] { display:none; }