/* ==========================================================================
   Billkit — the document itself.
   One markup, eight skins. Everything below only ever restyles .doc.
   ========================================================================== */

.sheet {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: #14261F;
  position: relative;
  margin-inline: auto;
  padding: 15mm 14mm;
  box-shadow: 0 1px 2px rgba(20,22,26,.06), 0 20px 50px -20px rgba(20,22,26,.28);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 10.2pt;
  line-height: 1.5;
  overflow: hidden;
}

.sheet-fit { transform-origin: top left; }

.doc { position: relative; display: flex; flex-direction: column; min-height: 267mm; }
.doc .num { font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.doc p { margin: 0; }

/* ---------- Header ----------------------------------------------------- */

.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14mm; }
.doc-issuer { display: flex; gap: 4mm; align-items: flex-start; min-width: 0; }
.doc-logo { max-height: 16mm; max-width: 42mm; object-fit: contain; }
.doc-issuer-name { font-size: 13.5pt; font-weight: 600; line-height: 1.2; margin-bottom: 1.5mm; }
.doc-issuer-lines { color: #5A5E67; font-size: 8.6pt; line-height: 1.5; }
.doc-issuer-lines p { margin: 0; }

.doc-title-block { text-align: right; flex: none; }
.doc-kind {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15pt; font-weight: 600; letter-spacing: .02em; margin: 0 0 3mm;
}
.doc-meta { margin: 0; display: grid; gap: 1.2mm; }
.doc-meta > div { display: flex; justify-content: flex-end; gap: 4mm; align-items: baseline; }
.doc-meta dt {
  font-family: inherit; font-size: 7pt; letter-spacing: .12em;
  text-transform: uppercase; color: #8A8E97;
}
.doc-meta dd { margin: 0; font-size: 9pt; }

/* ---------- Parties ---------------------------------------------------- */

.doc-parties { display: flex; gap: 8mm; margin-top: 9mm; padding-top: 6mm; border-top: 0.4pt solid #DFDACD; }
.doc-party { flex: 1; min-width: 0; }
.doc-party--amount { text-align: right; flex: none; min-width: 45mm; }
.doc-label {
  font-family: inherit; font-size: 7pt; letter-spacing: .14em;
  text-transform: uppercase; color: #8A8E97; margin-bottom: 1.6mm;
}
.doc-party-name { font-size: 11pt; font-weight: 600; line-height: 1.25; }
.doc-party-lines { color: #5A5E67; font-size: 8.6pt; line-height: 1.5; margin-top: 1mm; }
.doc-headline-amount { font-size: 17pt; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Items ------------------------------------------------------ */

.doc-items { width: 100%; border-collapse: collapse; margin-top: 8mm; }
.doc-items th {
  font-family: inherit; font-size: 7pt; letter-spacing: .12em;
  text-transform: uppercase; color: #8A8E97; font-weight: 400; text-align: left;
  padding: 0 2mm 2mm; border-bottom: 0.8pt solid #14161A;
}
.doc-items td { padding: 2.6mm 2mm; border-bottom: 0.4pt solid #EBE7DC; vertical-align: top; font-size: 9.4pt; }
.doc-items .c-num  { width: 8mm; color: #8A8E97; text-align: left; padding-left: 0; }
.doc-items .c-qty  { width: 16mm; text-align: right; }
.doc-items .c-rate { width: 24mm; text-align: right; }
.doc-items .c-tax  { width: 15mm; text-align: right; }
.doc-items .c-amt  { width: 26mm; text-align: right; padding-right: 0; }
.doc-items th.c-qty, .doc-items th.c-rate, .doc-items th.c-tax, .doc-items th.c-amt { text-align: right; }
.doc-items th.c-amt { padding-right: 0; }
.doc-items th.c-num { padding-left: 0; }
.item-title { display: block; font-weight: 500; }
.item-details { display: block; font-size: 8pt; color: #8A8E97; line-height: 1.4; margin-top: .6mm; }
.item-empty { color: #B9BCC2; font-style: italic; }
.unit { font-family: "Inter", system-ui, sans-serif; font-size: 7.6pt; color: #8A8E97; }

/* ---------- Summary ---------------------------------------------------- */

.doc-summary { display: flex; gap: 10mm; margin-top: 7mm; align-items: flex-start; }
.doc-summary-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5mm; }
.doc-block { font-size: 8.6pt; color: #33373E; line-height: 1.5; }
.doc-block p { margin: 0; }
.doc-words p:last-child { font-style: italic; }
.doc-pay-grid { display: grid; grid-template-columns: auto 1fr; gap: .8mm 5mm; font-size: 8.6pt; }
.doc-pay-grid span:nth-child(odd) { color: #8A8E97; }
.doc-qr { display: flex; align-items: center; gap: 3mm; }
.doc-qr img { width: 24mm; height: 24mm; object-fit: contain; border: 0.4pt solid #DFDACD; padding: 1mm; background: #fff; }
.doc-qr p { font-size: 7.4pt; color: #8A8E97; letter-spacing: .1em; text-transform: uppercase; font-family: inherit; }

.doc-totals { width: 66mm; flex: none; }
.tot-row { display: flex; justify-content: space-between; gap: 6mm; padding: 1.7mm 0; font-size: 9.4pt; }
.tot-row > span:first-child { color: #5A5E67; }
.tot-sub { font-size: 8.4pt; padding: .8mm 0; }
.tot-sub > span:first-child { color: #8A8E97; }
.tot-grand {
  margin-top: 2mm; padding-top: 2.6mm; border-top: 0.8pt solid #14161A;
  font-size: 12.5pt; font-weight: 600;
}
.tot-grand > span:first-child { color: #14261F; }
.tot-due { font-weight: 600; color: var(--accent); }
.tot-due > span:first-child { color: var(--accent); }

/* ---------- Signature, stamp, footnote --------------------------------- */

.doc-signature { margin-top: auto; padding-top: 12mm; text-align: right; align-self: flex-end; width: 55mm; }
.doc-signature img { max-height: 14mm; max-width: 45mm; object-fit: contain; display: block; margin-left: auto; margin-bottom: 1mm; }
.doc-sig-rule { display: block; border-top: 0.4pt solid #8A8E97; margin-bottom: 1.6mm; }
.doc-signature p { font-size: 8.8pt; font-weight: 500; }
.doc-sig-role { font-weight: 400 !important; color: #8A8E97; font-size: 7.8pt !important; }

.doc-stamp {
  position: absolute; right: 6mm; top: 82mm;
  font-family: inherit; font-size: 16pt; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border: 2.4pt solid currentColor; border-radius: 2mm;
  padding: 1.8mm 4mm; transform: rotate(-14deg); opacity: .78; pointer-events: none;
}
.doc-stamp--paid      { color: #14663F; }
.doc-stamp--overdue   { color: #B4302A; }
.doc-stamp--cancelled { color: #8A8E97; }
.doc-stamp--draft     { color: #C7C3B6; opacity: .6; }

.doc-footnote {
  margin-top: 6mm; padding-top: 3mm; border-top: 0.4pt solid #EBE7DC;
  font-size: 7.8pt; color: #8A8E97; text-align: center;
}

/* ==========================================================================
   1. Minimal — hairlines and air. The default.
   ========================================================================== */

.doc--minimal .doc-kind { text-transform: uppercase; letter-spacing: .2em; font-size: 10pt; color: #8A8E97; font-weight: 500; }
.doc--minimal .doc-title-block { padding-top: 1mm; }
.doc--minimal .doc-items th { border-bottom-width: 0.4pt; border-bottom-color: #DFDACD; }
.doc--minimal .tot-grand { border-top-width: 0.4pt; }
.doc--minimal .doc-headline-amount { color: var(--accent); }

/* ==========================================================================
   2. Modern — a colour band, soft panels, rounded corners.
   ========================================================================== */

.doc--modern { padding-top: 4mm; }
.doc--modern::before {
  content: ""; position: absolute; top: -15mm; left: -14mm; right: -14mm; height: 6mm;
  background: var(--accent);
}
.doc--modern .doc-kind { color: var(--accent); font-size: 17pt; }
.doc--modern .doc-parties { border-top: 0; padding-top: 0; }
.doc--modern .doc-party {
  background: #F7F8FB; border-radius: 3mm; padding: 4mm; border: 0.4pt solid #EBEDF3;
}
.doc--modern .doc-party--amount { background: var(--accent); color: #fff; border-color: transparent; }
.doc--modern .doc-party--amount .doc-label { color: rgba(255,255,255,.75); }
.doc--modern .doc-items th { border-bottom: 0; background: #F7F8FB; padding: 2.4mm 2mm; }
.doc--modern .doc-items th:first-child { border-radius: 2mm 0 0 2mm; }
.doc--modern .doc-items th:last-child { border-radius: 0 2mm 2mm 0; }
.doc--modern .doc-totals { background: #F7F8FB; border-radius: 3mm; padding: 4mm; }
.doc--modern .tot-grand { border-top-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   3. Corporate — formal bar, fully ruled grid.
   ========================================================================== */

.doc--corporate .doc-head {
  border-bottom: 1.6pt solid var(--accent); padding-bottom: 5mm;
}
.doc--corporate .doc-kind { text-transform: uppercase; letter-spacing: .1em; font-size: 13pt; }
.doc--corporate .doc-parties { border-top: 0; padding-top: 4mm; }
.doc--corporate .doc-party { border: 0.4pt solid #DFDACD; padding: 3.5mm; }
.doc--corporate .doc-items th { background: var(--accent); color: #fff; padding: 2.4mm 2mm; border: 0.4pt solid var(--accent); }
.doc--corporate .doc-items td { border: 0.4pt solid #DFDACD; }
.doc--corporate .doc-items .c-num, .doc--corporate .doc-items th.c-num { padding-left: 2mm; }
.doc--corporate .doc-items .c-amt, .doc--corporate .doc-items th.c-amt { padding-right: 2mm; }
.doc--corporate .doc-totals { border: 0.4pt solid #DFDACD; padding: 3.5mm; }
.doc--corporate .tot-grand { border-top-color: var(--accent); }

/* ==========================================================================
   4. Studio — oversized title, creative-agency spacing.
   ========================================================================== */

.doc--studio .doc-head { flex-direction: column-reverse; align-items: flex-start; gap: 10mm; }
.doc--studio .doc-title-block { text-align: left; width: 100%; }
.doc--studio .doc-kind {
  font-family: Georgia, "Times New Roman", serif; font-size: 34pt; font-weight: 400;
  letter-spacing: -.03em; line-height: .95; margin-bottom: 5mm;
}
.doc--studio .doc-meta { display: flex; gap: 9mm; }
.doc--studio .doc-meta > div { flex-direction: column; align-items: flex-start; gap: .6mm; justify-content: flex-start; }
.doc--studio .doc-parties { margin-top: 12mm; }
.doc--studio .doc-headline-amount { font-family: Georgia, "Times New Roman", serif; font-size: 22pt; font-weight: 400; }
.doc--studio .doc-items { margin-top: 10mm; }
.doc--studio .doc-items th { border-bottom-color: #DFDACD; border-bottom-width: 0.4pt; }
.doc--studio .doc-items td { padding-block: 3.6mm; }
.doc--studio .tot-grand { font-family: Georgia, "Times New Roman", serif; font-size: 15pt; font-weight: 400; }

/* ==========================================================================
   5. Editorial — serif masthead, centred, magazine rules.
   ========================================================================== */

.doc--editorial { font-family: Georgia, "Times New Roman", serif; font-size: 10.6pt; }
.doc--editorial .doc-head {
  flex-direction: column; align-items: center; text-align: center; gap: 4mm;
  border-bottom: 0.4pt solid #14161A; padding-bottom: 5mm;
}
.doc--editorial .doc-issuer { flex-direction: column; align-items: center; text-align: center; gap: 2mm; }
.doc--editorial .doc-issuer-name { font-size: 18pt; font-weight: 400; letter-spacing: -.01em; }
.doc--editorial .doc-title-block { text-align: center; }
.doc--editorial .doc-kind {
  font-family: inherit; font-size: 8pt;
  letter-spacing: .34em; text-transform: uppercase; font-weight: 400; color: #5A5E67;
}
.doc--editorial .doc-meta { justify-items: center; }
.doc--editorial .doc-meta > div { justify-content: center; }
.doc--editorial .doc-parties { border-top: 0; }
.doc--editorial .doc-party-name { font-weight: 400; font-size: 12pt; }
.doc--editorial .doc-items th { border-bottom-width: 0.4pt; }
.doc--editorial .doc-items td { border-bottom-style: dotted; }
.doc--editorial .tot-grand { border-top-width: 0.4pt; border-bottom: 0.4pt solid #14161A; padding-bottom: 2mm; font-weight: 500; }
.doc--editorial .doc-headline-amount { font-weight: 400; }

/* ==========================================================================
   6. Bold — solid block, heavy type, no apology.
   ========================================================================== */

.doc--bold { padding-top: 2mm; }
.doc--bold .doc-head {
  background: var(--accent); color: #fff; margin: -15mm -14mm 0; padding: 14mm 14mm 10mm;
}
.doc--bold .doc-issuer-lines, .doc--bold .doc-meta dt { color: rgba(255,255,255,.7); }
.doc--bold .doc-issuer-name { font-size: 15pt; font-weight: 700; }
.doc--bold .doc-kind { font-size: 26pt; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.doc--bold .doc-parties { border-top: 0; margin-top: 8mm; }
.doc--bold .doc-label { color: var(--accent); }
.doc--bold .doc-party-name { font-size: 12pt; font-weight: 700; }
.doc--bold .doc-headline-amount { font-size: 20pt; font-weight: 700; }
.doc--bold .doc-items th { border-bottom-width: 1.6pt; }
.doc--bold .tot-grand { border-top-width: 1.6pt; font-size: 14pt; font-weight: 700; }

/* ==========================================================================
   7. Luxury — letterspaced caps, thin double rules.
   ========================================================================== */

.doc--luxury { font-size: 9.8pt; }
.doc--luxury .doc-head { border-bottom: 0.4pt solid var(--accent); padding-bottom: 6mm; }
.doc--luxury .doc-issuer-name {
  font-family: Georgia, "Times New Roman", serif; font-size: 15pt; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
}
.doc--luxury .doc-kind {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 11pt;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}
.doc--luxury .doc-parties { border-top: 0; margin-top: 8mm; padding-top: 4mm; }
.doc--luxury .doc-party-name { font-weight: 500; letter-spacing: .04em; }
.doc--luxury .doc-items th {
  border-bottom: 0.4pt solid var(--accent); color: var(--accent);
  letter-spacing: .2em; padding-bottom: 2.6mm;
}
.doc--luxury .doc-items td { border-bottom-color: #F0EDE4; }
.doc--luxury .doc-headline-amount { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .02em; }
.doc--luxury .tot-grand {
  border-top: 0.4pt solid var(--accent); border-bottom: 0.4pt solid var(--accent);
  padding-bottom: 2.4mm; font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; font-size: 11.5pt;
}
.doc--luxury .doc-signature { text-align: center; margin-inline: auto; }
.doc--luxury .doc-signature img { margin-inline: auto; }

/* ==========================================================================
   8. Startup — rounded cards, light, friendly.
   ========================================================================== */

.doc--startup { font-size: 10pt; }
.doc--startup .doc-kind {
  background: #F1F3F9;
  background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent);
  border-radius: 999px; padding: 1.4mm 4.5mm; display: inline-block;
  font-size: 9.5pt; font-weight: 600; letter-spacing: .04em;
}
.doc--startup .doc-parties { border-top: 0; padding-top: 0; }
.doc--startup .doc-party { background: #F8F8F6; border-radius: 4mm; padding: 4mm; }
.doc--startup .doc-party--amount { background: #F1F3F9; background: color-mix(in srgb, var(--accent) 10%, #fff); }
.doc--startup .doc-headline-amount { color: var(--accent); }
.doc--startup .doc-items { border-radius: 4mm; overflow: hidden; }
.doc--startup .doc-items th { border-bottom: 0; background: #F8F8F6; padding: 2.6mm 3mm; }
.doc--startup .doc-items td { border-bottom: 0.4pt solid #F0EFEB; padding-inline: 3mm; }
.doc--startup .doc-items .c-num, .doc--startup .doc-items th.c-num { padding-left: 3mm; }
.doc--startup .doc-items .c-amt, .doc--startup .doc-items th.c-amt { padding-right: 3mm; }
.doc--startup .doc-totals { background: #F8F8F6; border-radius: 4mm; padding: 4mm; }
.doc--startup .tot-grand { border-top-color: color-mix(in srgb, var(--accent) 40%, #fff); color: var(--accent); }
.doc--startup .doc-block { background: #F8F8F6; border-radius: 4mm; padding: 3.5mm; }

/* ==========================================================================
   Print
   ========================================================================== */

@page { size: A4; margin: 0; }

@media print {
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .no-print { display: none !important; }
  .sheet {
    width: 210mm; min-height: 297mm; margin: 0; box-shadow: none;
    transform: none !important; page-break-after: always;
  }
  .sheet:last-child { page-break-after: auto; }
  .print-stage, .share-shell, .builder-stage, .builder-form {
    padding: 0 !important; margin: 0 !important; background: #fff !important;
    max-height: none !important; overflow: visible !important; border: 0 !important;
  }
  .sheet-fit { transform: none !important; height: auto !important; }
  .doc-items tr { page-break-inside: avoid; }
  .doc-summary, .doc-signature { page-break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}