/* Pay Docly — timesheet & attendance document and its day-row editor. */

.field-inline{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.field-inline input[type=checkbox]{width:auto;margin:0}
.field-inline label{margin:0;font-weight:700}

/* Day rows: date, status, in, out, break, project, hours, remove */
.ts-head-row,.ts-row{
  display:grid;grid-template-columns:74px 108px 62px 62px 52px minmax(0,1fr) 54px 30px;
  gap:5px;align-items:center
}
.ts-head-row{
  font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:var(--muted-2);
  padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:8px
}
.ts-row{margin-bottom:6px}
.ts-row input,.ts-row select{padding:8px 9px;font-size:12px}
.ts-row.off input,.ts-row.off select{background:#f8fafc;color:var(--muted)}
.ts-hours{font-size:12px;font-weight:850;text-align:right;padding-right:3px}
.ts-row .remove-btn{width:28px;height:32px;font-size:15px}
.month-tools{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.month-tools .field{margin-bottom:0;flex:1;min-width:150px}

/* ---- Document ---- */
.timesheet .ts-title{font-size:22px;font-weight:900;letter-spacing:.05em;color:var(--brand)}
.timesheet .ts-period{font-size:15px;font-weight:850;margin-top:3px}
.timesheet .ts-head{width:auto;min-width:270px;margin:24px 0 18px}
.timesheet .ts-table{width:100%;border-collapse:collapse;font-size:10.5px}
.timesheet .ts-table th{
  background:#f4f6f8;text-align:left;padding:7px 8px;border-bottom:1px solid #e4e7ec;
  font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:850
}
.timesheet .ts-table td{padding:6px 8px;border-bottom:1px solid #edf0f4}
.timesheet .ts-table tr.off td{color:#98a2b3;background:#fcfcfd}
.timesheet .ts-table .c-t,.timesheet .ts-table .c-h{text-align:right;white-space:nowrap}
.timesheet .ts-table .c-h{font-weight:800;width:52px}
.timesheet .ts-table .c-t{width:46px}
.timesheet .ts-table tfoot td{background:#f4f6f8;font-weight:900;border-bottom:0}
.timesheet .ts-sec{margin-top:22px}
.timesheet .ts-stats{display:flex;flex-wrap:wrap;gap:8px}
.timesheet .ts-stat{
  border:1px solid #e4e7ec;border-radius:9px;padding:7px 12px;font-size:10.5px;
  display:flex;gap:9px;align-items:baseline;background:#fbfcfe
}
.timesheet .ts-stat strong{font-size:13px;font-weight:900}
.timesheet .ts-pay{width:100%;border-collapse:collapse;font-size:11px;margin-top:20px;max-width:420px}
.timesheet .ts-pay td{border:1px solid #e4e7ec;padding:7px 10px}
.timesheet .ts-pay td:not(:first-child){text-align:right;font-weight:800}
.timesheet .ts-pay tr.grand td{background:#ecfdf3;font-weight:900}
.timesheet .ts-note{
  margin-top:18px;font-size:10.5px;color:#475467;line-height:1.6;white-space:pre-line;
  border-left:3px solid var(--line);padding-left:11px
}
.timesheet .ts-signs{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:44px;text-align:center}
.timesheet .ts-sign-line{border-top:1px solid #98a2b3;margin-bottom:6px}
.timesheet .ts-sign-name{font-size:11.5px;font-weight:850}
.timesheet .ts-sign-role{font-size:10px;color:#667085;margin-top:2px}

@media(max-width:900px){
  .ts-head-row{display:none}
  .ts-row{
    grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;
    padding:10px;margin-bottom:9px;background:#fff
  }
  .ts-row input:nth-child(6){grid-column:1/-1}
  .ts-hours{grid-column:1;text-align:left}
  .ts-row .remove-btn{grid-column:2;justify-self:end}
}
@media(max-width:640px){
  .timesheet .ts-signs{grid-template-columns:1fr;gap:30px}
  .timesheet .ts-table{font-size:9.5px}
}
@media print{
  .timesheet .ts-table thead{display:table-header-group}
  .timesheet .ts-table tr{page-break-inside:avoid}
  .timesheet .ts-signs,.timesheet .ts-stats{display:grid!important}
  .timesheet .ts-stats{display:flex!important}
}