.timesheet-surface { color: #172b39; }
.timesheet-surface [hidden] { display: none !important; }
.timesheet-surface h2 { font-size: 20px; margin: 0 0 18px; }
.timesheet-surface h3 { font-size: 16px; }
.timesheet-surface .ts-band { padding: 24px 0; border-bottom: 1px solid #dce3e6; }
.timesheet-surface .ts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.timesheet-surface label { display: grid; gap: 7px; min-width: 0; font-size: 14px; }
.timesheet-surface input, .timesheet-surface select, .timesheet-surface textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; border: 1px solid #aebcc4; border-radius: 4px; background: #fff; color: #172b39; font: inherit; }
.timesheet-surface textarea { min-height: 72px; }
.timesheet-surface .ts-check { display: flex; align-items: center; gap: 8px; }
.timesheet-surface input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; }
.timesheet-surface .ts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.timesheet-surface button { padding: 10px 16px; border: 1px solid #1d7660; border-radius: 4px; background: #0b6e51; color: #fff; cursor: pointer; font: inherit; min-height: 42px; }
.timesheet-surface button.secondary { background: white; color: #194c44; border-color: #aebcc4; }
.timesheet-surface button:disabled { opacity: .55; cursor: wait; }
.timesheet-surface button:focus-visible, .timesheet-surface input:focus-visible { outline: 3px solid #177fce; outline-offset: 2px; }
.timesheet-surface .ts-message { white-space: pre-line; overflow-wrap: anywhere; }
.timesheet-surface .ts-message:empty { display: none; }
.timesheet-surface .ts-message.error { color: #9d2531; }
.timesheet-surface .ts-muted { color: #52646e; }
.timesheet-surface .ts-venues { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; border: 0; padding: 0; }
.timesheet-surface .ts-venues legend { margin-bottom: 10px; }
.timesheet-surface .ts-table-wrap { overflow-x: auto; max-width: 100%; }
.timesheet-surface table { width: 100%; border-collapse: collapse; font-size: 14px; }
.timesheet-surface th, .timesheet-surface td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #dce3e6; vertical-align: top; }
.timesheet-surface td { overflow-wrap: anywhere; }
.timesheet-surface th { color: #52646e; font-weight: 600; }
.timesheet-surface .ts-shift { border-bottom: 1px solid #dce3e6; padding: 18px 0; }
.timesheet-surface .ts-shift h2 { display: flex; justify-content: space-between; align-items: center; }
.timesheet-surface .ts-icon { padding: 4px; width: 40px; height: 40px; font-size: 22px; }
.timesheet-surface canvas { display: block; width: 100%; height: 160px; background: #fff; border: 1px solid #aebcc4; border-radius: 4px; touch-action: none; box-sizing: border-box; }
.timesheet-surface .ts-signature { max-width: 500px; height: 125px; object-fit: contain; object-position: left; }
.timesheet-surface .ts-total { font-weight: 600; font-size: 18px; }
.timesheet-body { margin: 0; background: #f5f8fa; font: 16px/1.5 system-ui, sans-serif; letter-spacing: 0; }
.timesheet-body main { max-width: 820px; margin: 0 auto; padding: 28px 24px 64px; }
.timesheet-body h1 { font-size: 28px; margin: 0 0 12px; }
.timesheet-body p { overflow-wrap: anywhere; }
.timesheet-body main { padding-top: max(28px, env(safe-area-inset-top)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); }
.timesheet-body input:not([type=checkbox]), .timesheet-body select, .timesheet-body textarea { display: block; max-width: 100%; min-inline-size: 0; min-height: 48px; font-size: 16px; }
/* Bound Safari's native date/time controls to their grid track. */
.timesheet-body input[type=date], .timesheet-body input[type=time] { -webkit-appearance: none; appearance: none; }
.timesheet-body input::-webkit-date-and-time-value { min-height: 24px; text-align: left; }
.timesheet-body .ts-shift > label { margin-top: 16px; }
.timesheet-body .ts-check { min-height: 44px; }
.timesheet-body .ts-total { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .timesheet-surface .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .timesheet-body main { padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .timesheet-body .ts-grid { grid-template-columns: minmax(0, 1fr); }
  .timesheet-body .ts-total { flex-basis: 100%; }
}
@media (max-width: 420px) { .timesheet-surface .ts-grid { grid-template-columns: minmax(0, 1fr); } }