/* Timesheets (Phase 68). Tabs/header reuse .workspace-hero/.lv-tabs;
   approvals reuse .lv-approve/.lv-approve-grid; status badges reuse
   .status-badge.lv-pending/lv-approved/lv-rejected — all already global
   (leaves.css/polish.css), same statuses, nothing new needed for those. */
.ts-week-nav { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ts-week-nav__range { display: grid; min-width: 138px; gap: 2px; }
.ts-week-nav__range small { color: var(--color-fg-muted); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.ts-week-summary { display: grid; gap: 2px; margin-left: auto; text-align: right; }
.ts-week-total { color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-bold); }
.ts-week-summary small { color: var(--color-fg-muted); font-size: var(--text-xs); }
.ts-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.ts-day { display: flex; position: relative; min-width: 0; flex-direction: column; gap: var(--space-2); overflow: hidden; padding: var(--space-3); box-shadow: none; }
.ts-day::before { position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-primary-soft); content: ''; }
.ts-day:focus-within { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 10%, transparent); }
.ts-day__head { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.ts-day__head span { color: var(--color-fg-muted); font-size: var(--text-xs); }
.ts-day__hours { text-align: center; }
.ts-save-rail { position: sticky; bottom: calc(var(--safe-area-bottom) * -1); z-index: 3; display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-area-bottom)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 94%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); }
.ts-save-rail > span { display: grid; gap: 3px; }
.ts-save-rail small { color: var(--color-fg-muted); font-size: var(--text-xs); }

.ts-approval-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.ts-approval-summary > div { display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ts-approval-summary strong { font-size: 1.45rem; letter-spacing: -.03em; }
.ts-approval-summary span { color: var(--color-fg-muted); font-size: var(--text-xs); }
.ts-approval-tools { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ts-approval-tools .people-search { width: min(560px, 100%); margin: 0; }
.ts-approval-tools > span { display: grid; min-width: 36px; height: 36px; place-items: center; margin-left: auto; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-bold); }

@media (max-width: 900px) {
  .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-approval-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ts-week-nav { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); }
  .ts-week-nav__range { min-width: 0; text-align: center; }
  .ts-today { grid-column: 1 / -1; }
  .ts-week-summary { grid-column: 1 / -1; margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); text-align: left; }
  .ts-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .ts-day { display: grid; grid-template-columns: 72px 72px minmax(0, 1fr); align-items: center; }
  .ts-day__hours, .ts-day__note { min-width: 0; }
  .ts-day .status-badge { grid-column: 1 / -1; justify-self: start; }
  .ts-save-rail { align-items: stretch; flex-direction: column; }
  .ts-save-rail .btn { width: 100%; }
}

/* Overtime (Phase 74) — shares .ts-grid/.req-approval-card, just a hint
   line + a distinct badge color (primary, not a status color) since
   "overtime" isn't a lifecycle state. */
.ts-overtime-hint { color: var(--color-fg-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.status-badge.ts-overtime { background: var(--color-primary-soft); color: var(--color-primary); margin-left: auto; }