/* =========================================================================
   Ledger Timesheets — "document model" rendering (screen preview of the PDF)
   Two things share these rules on purpose: the on-screen month table and the
   artifact preview both come from GET /api/timesheets/{id}/document (GAP-02).
   In the real product the PDF is rendered server-side (DEC-13); this is the
   design reference for what that paper must look like. Labels are Dutch:
   document language (DOC-01), independent of the English interface language.
   ========================================================================= */

.doc-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 12.5px; color: var(--muted);
}
.doc-stage {
  background: #ddd8d1; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 16px; display: flex; flex-direction: column; gap: 22px; align-items: center;
}
@media (max-width: 900px) { .doc-stage { padding: 12px 6px; } }

.sheet {
  --pad: 18mm;
  width: 210mm; max-width: 100%;
  background: #fff; color: #191916;
  padding: var(--pad);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 14px 34px rgba(0, 0, 0, .12);
  font-family: var(--font-doc);
  font-size: 10.5pt;
  line-height: 1.45;
  position: relative;
}
.sheet.compact { --pad: 14mm; font-size: 10pt; }

.sheet .letterhead { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.sheet .ident { display: flex; gap: 12px; align-items: flex-start; }
.sheet .ident img { max-height: 20mm; max-width: 46mm; object-fit: contain; display: block; }
.sheet .ident .txt { font-size: 9pt; color: #3c3a34; }
.sheet .ident .txt .name {
  font-family: var(--font); font-size: 13pt; font-weight: 700; letter-spacing: -.01em; color: #17171a;
  display: block; margin-bottom: 2px;
}
.sheet .doctitle { text-align: right; }
.sheet .doctitle .t {
  font-family: var(--font); font-weight: 700; font-size: 14pt; letter-spacing: -.02em; text-transform: uppercase;
  letter-spacing: .06em;
}
.sheet .doctitle .sub { font-size: 9pt; color: #57544d; font-style: italic; }
.sheet .rule { border-top: 1.5pt solid #1c4736; margin: 8mm 0 5mm; }
.sheet .rule.thin { border-top-width: .6pt; border-color: #b9b4a9; margin: 5mm 0 3mm; }

.sheet .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm 10mm; font-size: 9.5pt; }
.sheet .meta .row2 { display: flex; gap: 6px; }
.sheet .meta .k { color: #6a665e; min-width: 42mm; }
.sheet .meta .v { font-weight: 600; }
.sheet .meta .v.ref { font-family: var(--font-mono); font-size: 9pt; letter-spacing: .02em; }

.sheet h.sec {
  font-family: var(--font); font-size: 9pt; text-transform: uppercase; letter-spacing: .1em;
  color: #3f6b5a; margin: 7mm 0 2mm; font-weight: 700;
}

/* the month table on paper */
.sheet table.hours { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.sheet table.hours th {
  font-family: var(--font); font-size: 7.6pt; text-transform: uppercase; letter-spacing: .07em;
  text-align: right; padding: 0 4px 2mm; border-bottom: .8pt solid #2f5b4b; color: #2f5b4b; font-weight: 700;
}
.sheet table.hours th.l { text-align: left; }
.sheet table.hours td { padding: 1.7mm 4px; border-bottom: .4pt solid #ded9d0; text-align: right; font-variant-numeric: tabular-nums; }
.sheet table.hours td.l { text-align: left; }
.sheet table.hours td.sum { font-family: var(--font); font-size: 9pt; color: #38352f; }
.sheet table.hours tr.ot td { background: #fbf3e6; }
.sheet table.hours tr.ot td.l:first-child { border-left: 2pt solid #d8b478; }
.sheet table.hours tr.tot td { border-top: 1.2pt solid #2f5b4b; border-bottom: 0; font-weight: 700; font-family: var(--font); }
.sheet table.hours tr.tot.soft td { font-weight: 600; color: #4b4842; border-top: .4pt solid #b9b4a9; }
.sheet .otmark {
  font-family: var(--font); font-size: 7pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #8a5710; border: .5pt solid #d8b478; border-radius: 2px; padding: 0 2px; margin-left: 4px;
}
.sheet .dayname { color: #6a665e; font-size: 8.5pt; }
.sheet .empty-month {
  border: .6pt dashed #b9b4a9; padding: 6mm; text-align: center; color: #6a665e; font-style: italic; font-size: 9.5pt;
}

.sheet .signbox { margin-top: 8mm; display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; font-size: 9pt; color: #4b4842; }
.sheet .signbox .line { border-bottom: .6pt solid #8d8880; height: 10mm; margin-bottom: 2mm; }

.sheet .foot {
  margin-top: 8mm; border-top: .6pt solid #b9b4a9; padding-top: 3mm;
  font-family: var(--font); font-size: 7.6pt; color: #6a665e;
  display: flex; justify-content: space-between; gap: 8mm;
}
.sheet .foot .rt { text-align: right; }

.sheet .watermark {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.sheet .watermark span {
  transform: rotate(-24deg);
  font-family: var(--font); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-size: 40pt; color: rgba(155, 43, 33, .13); border: 3pt solid rgba(155, 43, 33, .13);
  padding: 6px 18px; border-radius: 6px;
}

@media print {
  .doc-stage { background: none; border: 0; padding: 0; }
  .sheet { box-shadow: none; width: auto; max-width: none; }
  .doc-toolbar { display: none; }
}

.sheet .sec-title {
  font-family: var(--font); font-size: 9pt; text-transform: uppercase; letter-spacing: .1em;
  color: #3f6b5a; margin: 7mm 0 2mm; font-weight: 700;
}