/* Invoice & contract document designs. Used on screen, in browser print and in PDFs. */
.doc {
  --a: #0f6e5c; --ink: #1d2330; --mute: #6b7280; --rule: #e3e6eb; --soft: #f6f7f9;
  background: #fff; color: var(--ink); max-width: 820px; margin: 0 auto; padding: 44px 48px;
  border: 1px solid var(--rule); border-radius: 10px; position: relative;
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, "Noto Naskh Arabic", sans-serif;
  font-size: 13.5px; line-height: 1.5;
}
.doc * { box-sizing: border-box; }
.doc .pre { white-space: pre-wrap; }
.doc .small { font-size: .88em; }
.doc .mute { color: var(--mute); }
.doc .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th, .doc td { border: 0; padding: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; vertical-align: top; }
.doc h2, .doc h3 { margin: 0; }

.doc .logo { display: block; max-height: 64px; max-width: 220px; object-fit: contain; margin-bottom: 10px; }
.doc .head { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 26px; }
.doc .co-name { font-size: 19px; font-weight: 700; margin-bottom: 2px; }
.doc .title { text-align: right; }
.doc .title h2 { font-size: 24px; letter-spacing: .08em; margin-bottom: 8px; }
.doc .kv { width: auto; margin-left: auto; }
.doc .kv td { padding: 2px 0 2px 16px; font-size: .93em; }
.doc .kv td:first-child { color: var(--mute); }

.doc .label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-bottom: 4px; }
.doc .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.doc .due-box .amount { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.doc .items th { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 9px 10px; color: var(--mute); }
.doc .items th.num { text-align: right; }
.doc .items td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc .items tr { break-inside: avoid; }
.doc .totals { width: 310px; margin: 14px 0 0 auto; break-inside: avoid; }
.doc .totals td { padding: 6px 10px; }
.doc .totals .grand td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--ink); padding-top: 10px; }

.doc .pay { margin-top: 26px; padding: 14px 16px; background: var(--soft); border-radius: 8px; break-inside: avoid; }
.doc .foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 12px; }
.doc .stamp { position: absolute; top: 42%; right: 10%; transform: rotate(-15deg); font-size: 46px; font-weight: 800; letter-spacing: .05em;
  color: rgba(6,118,71,.22); border: 5px solid rgba(6,118,71,.22); padding: 2px 16px; border-radius: 8px; margin: 0; pointer-events: none; }
.doc .stamp.cancelled { color: rgba(180,35,24,.22); border-color: rgba(180,35,24,.22); }

.doc .contract-title { text-align: center; font-size: 18px; margin: 0 0 22px; }
.doc .terms { line-height: 1.7; white-space: pre-wrap; }
.doc .sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; break-inside: avoid; }
.doc .sigline { border-bottom: 1px solid var(--ink); height: 52px; margin-bottom: 6px; }

/* ---- Classic ---- */
.doc.d-classic .head { border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.doc.d-classic .items th { background: #f1f2f4; }

/* ---- Modern: brand-colored header band ---- */
.doc.d-modern .head { background: var(--a); color: #fff; padding: 26px 28px; border-radius: 10px; }
.doc.d-modern .head .mute, .doc.d-modern .kv td:first-child { color: rgba(255,255,255,.78); }
.doc.d-modern .logo { background: #fff; padding: 6px; border-radius: 6px; }
.doc.d-modern .label { color: var(--a); }
.doc.d-modern .due-box .amount { color: var(--a); }
.doc.d-modern .items th { background: color-mix(in srgb, var(--a) 11%, white); color: var(--a); }
.doc.d-modern .items th:first-child { border-radius: 6px 0 0 6px; }
.doc.d-modern .items th:last-child { border-radius: 0 6px 6px 0; }
.doc.d-modern .totals .grand td { background: var(--a); color: #fff; border: 0; }
.doc.d-modern .pay { background: color-mix(in srgb, var(--a) 6%, white); border-left: 4px solid var(--a); border-radius: 0 8px 8px 0; }
.doc.d-modern .contract-title { color: var(--a); }
.doc.d-modern .sigline { border-color: var(--a); }

/* ---- Minimal: light lines, lots of space ---- */
.doc.d-minimal { padding: 56px 60px; }
.doc.d-minimal .co-name { font-weight: 600; }
.doc.d-minimal .title h2 { font-weight: 300; letter-spacing: .28em; color: var(--mute); }
.doc.d-minimal .items th { border-bottom: 1px solid var(--ink); padding-left: 0; }
.doc.d-minimal .items td { border-bottom: 0; padding-left: 0; }
.doc.d-minimal .items .num { padding-right: 0; }
.doc.d-minimal .totals td { padding-right: 0; }
.doc.d-minimal .totals .grand td { border-top: 1px solid var(--ink); color: var(--a); }
.doc.d-minimal .pay { background: none; padding: 0; }
.doc.d-minimal .foot { border-top: 0; }

/* ---- Formal: serif, centered, double rule ---- */
.doc.d-formal { font-family: "Noto Serif", Georgia, "Times New Roman", "Noto Naskh Arabic", serif; font-size: 14px; }
.doc.d-formal .head { flex-direction: column; align-items: center; text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 18px; gap: 14px; }
.doc.d-formal .logo { margin: 0 auto 10px; }
.doc.d-formal .title { text-align: center; }
.doc.d-formal .kv { margin: 0 auto; }
.doc.d-formal .contract-title { text-transform: uppercase; letter-spacing: .08em; font-size: 17px; }
.doc.d-formal .terms { text-align: justify; }
.doc.d-formal .parties { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .doc, .doc.d-minimal { padding: 20px; }
  .doc .title { text-align: left; }
  .doc .kv { margin-left: 0; }
  .doc .parties, .doc .sigs { grid-template-columns: 1fr; }
  .doc .totals { width: 100%; }
}

/* ---- PDF and browser print: the page margins come from the printer/PDF settings ---- */
body.pdf { margin: 0; background: #fff; }
body.pdf .doc { border: 0; border-radius: 0; max-width: none; padding: 0; }
@media print {
  .doc { border: 0; border-radius: 0; max-width: none; padding: 0; }
  .doc, .doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page { size: A4; margin: 14mm; }
.doc .terms .clause { display: inline-block; margin-top: 4px; letter-spacing: .02em; }
.doc.d-modern .terms .clause { color: var(--a); }