/* ============================================================
WULFRIC INVOICING — the document "sheets"
One semantic skeleton (built by js/doc-render.js), three distinct
looks keyed off [data-template]. Light + print-safe.
┌─ BESPOKING A CLIENT'S DOCUMENTS ─────────────────────────────┐
│ The whole document look is driven by the token block in `.doc`│
│ below. To tailor a client's invoices & proposals to their │
│ brand, edit THAT BLOCK ONLY — fonts, palette, type scale, │
│ spacing, rule weights. For a custom typeface, also swap the │
│ Google-Fonts in doc.html + admin/index.html and set │
│ --doc-font-display / --doc-font-body. │
│ Per-DOCUMENT brand + accent colors come from the admin │
│ (Settings) as --doc-brand / --doc-accent, set inline by the │
│ renderer — leave those alone. │
└───────────────────────────────────────────────────────────────┘
============================================================ */
/* doc.html loads only tokens.css + this file (no global reset), so scope
border-box here — otherwise the width:100% items table + padding overflows. */
.doc, .doc *, .docview, .docview * { box-sizing: border-box; }
.doc {
/* ---- brand (per-document, from admin Settings — don't hard-code) ---- */
--brand: var(--doc-brand, #0b7a75);
--accent: var(--doc-accent, #b8894d);
/* ---- typography (per-client knobs) ---- */
--d-display: var(--doc-font-display, var(--font-display));
--d-body: var(--doc-font-body, var(--font-body));
--d-fs: 14px; /* base body size */
--d-fs-name: 17px; /* company name */
--d-fs-number: 25px; /* the big document number */
--d-fs-title: 21px; /* proposal / invoice title */
--d-fs-total: 18px; /* grand total */
--d-leading: 1.5;
--d-label-fs: 10px; /* the small uppercase labels */
--d-label-tracking: .13em;
--d-label-transform: uppercase;
--d-label-weight: 600;
/* ---- palette ---- */
--ink: #1c1f26;
--ink-soft: #565b66;
--ink-faint: #8b909b;
--line: #e6e9ee;
--line-soft: #f0f2f6;
--paper: #ffffff;
--pos: #0a7d4f; /* paid / accepted */
--neg: #b23b3b; /* void / declined */
/* ---- spacing, rules & shape ---- */
--d-pad: 3.25rem; /* sheet horizontal padding */
--d-radius: 10px;
--d-rule: 1px; /* hairline weight */
--d-rule-strong: 2px; /* header / total rule */
--d-logo-h: 54px;
--d-shadow: 0 30px 80px -42px rgba(8,10,16,.5), 0 2px 10px rgba(8,10,16,.08);
width: 100%; max-width: 50rem; margin: 0 auto; /* ~ Letter width on screen */
background: var(--paper); color: var(--ink);
font-family: var(--d-body); font-size: var(--d-fs); line-height: var(--d-leading);
border-radius: var(--d-radius); box-shadow: var(--d-shadow); overflow: hidden;
-webkit-font-smoothing: antialiased;
/* print the brand band / tints / status colors, not just the text */
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* tabular figures everywhere money appears */
.doc-number, .doc-items td, .doc-items th, .tot-row span { font-variant-numeric: tabular-nums; }
.doc-head, .doc-meta, .doc-totals, .doc-blocks, .doc-signature, .doc-foot,
.doc-title { padding-left: var(--d-pad); padding-right: var(--d-pad); }
/* the items is inset with margin (a table ignores its own right
padding in auto layout, which let the Amount column bleed to the edge) */
.doc-items { margin-left: var(--d-pad); margin-right: var(--d-pad); width: calc(100% - 2 * var(--d-pad)); }
/* small uppercase label, used in several places */
.doc-meta-label, .doc-kind, .doc-date span, .doc-items th {
font-size: var(--d-label-fs); letter-spacing: var(--d-label-tracking);
text-transform: var(--d-label-transform); font-weight: var(--d-label-weight);
}
/* ---------- header ---------- */
.doc-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
padding-top: 2.4rem; padding-bottom: 1.2rem;
}
.doc-brand { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
.doc-logo { max-height: var(--d-logo-h); max-width: 210px; object-fit: contain; display: block; }
.doc-logomark {
width: var(--d-logo-h); height: var(--d-logo-h); border-radius: 12px; flex: none;
display: grid; place-items: center;
background: var(--brand); color: #fff;
font-family: var(--d-display); font-weight: 600; font-size: 22px;
}
.doc-company-name { font-family: var(--d-display); font-weight: 600; font-size: var(--d-fs-name); letter-spacing: -.01em; line-height: 1.15; }
.doc-company-meta { color: var(--ink-soft); font-size: 12px; margin-top: .3rem; line-height: 1.5; }
.doc-headline { text-align: right; flex: none; }
.doc-kind { color: var(--brand); letter-spacing: .24em; }
.doc-number { font-family: var(--d-display); font-size: var(--d-fs-number); font-weight: 500; letter-spacing: -.015em; margin-top: .15rem; line-height: 1; }
.doc-status {
display: inline-block; margin-top: .55rem; padding: .24rem .62rem; border-radius: 999px;
font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
border: 1px solid currentColor;
}
.doc-status--paid, .doc-status--accepted { color: var(--pos); background: color-mix(in srgb, var(--pos) 9%, transparent); }
.doc-status--sent { color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.doc-status--void, .doc-status--declined { color: var(--neg); background: color-mix(in srgb, var(--neg) 8%, transparent); }
/* ---------- meta (bill-to + dates) ---------- */
.doc-meta { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.doc-meta-label { color: var(--ink-faint); margin-bottom: .4rem; }
.doc-client-name { font-weight: 600; font-size: 15.5px; }
.doc-client-meta { color: var(--ink-soft); font-size: 12.5px; margin-top: .25rem; line-height: 1.5; }
.doc-dates { text-align: right; display: grid; gap: .6rem; align-content: start; }
.doc-date span { display: block; color: var(--ink-faint); margin-bottom: .12rem; }
.doc-date strong { font-weight: 600; font-size: 13.5px; }
/* ---------- title / intro ---------- */
.doc-title {
font-family: var(--d-display); font-size: var(--d-fs-title); font-weight: 500; line-height: 1.25;
padding-top: .2rem; padding-bottom: .9rem; letter-spacing: -.01em;
}
/* ---------- line items ---------- */
.doc-items { border-collapse: collapse; margin-top: .2rem; }
.doc-items th {
text-align: left; color: var(--ink-faint);
padding: .6rem 0; border-bottom: var(--d-rule-strong) solid var(--ink);
}
.doc-items td { padding: .68rem 0; border-bottom: var(--d-rule) solid var(--line); vertical-align: top; }
.doc-items tbody tr:last-child td { border-bottom: 0; }
.doc-items .li-qty, .doc-items .li-unit, .doc-items .li-amt { text-align: right; white-space: nowrap; width: 1%; padding-left: 1.6rem; color: var(--ink-soft); }
.doc-items .li-desc { padding-right: 1.6rem; font-weight: 500; color: var(--ink); }
.li-amt { font-weight: 600; color: var(--ink); }
.li-empty { color: var(--ink-faint); font-style: italic; font-weight: 400; }
.li-placeholder td { color: var(--ink-faint); }
/* ---------- totals ---------- */
.doc-totals { display: flex; justify-content: flex-end; padding-top: 1.05rem; padding-bottom: .4rem; }
.doc-totals-box { width: min(21rem, 62%); }
.tot-row { display: flex; justify-content: space-between; gap: 2rem; padding: .34rem 0; font-size: 13.5px; color: var(--ink-soft); }
.tot-row span:last-child { color: var(--ink); }
.tot-grand {
margin-top: .4rem; padding-top: .8rem; border-top: var(--d-rule-strong) solid var(--ink);
font-family: var(--d-display); font-size: var(--d-fs-total); font-weight: 600; color: var(--ink);
}
.tot-grand span:last-child { font-size: calc(var(--d-fs-total) + 1px); }
.tot-due {
margin-top: .55rem; padding: .65rem .85rem; border-radius: 8px; font-weight: 600;
background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.tot-due span { color: var(--brand) !important; font-size: 15px; }
.tot-due span:first-child { color: var(--brand) !important; }
/* ---------- notes / terms / signature / footer ---------- */
.doc-blocks { display: grid; gap: .9rem; padding-top: 1.4rem; padding-bottom: .4rem; }
.doc-note p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }
.doc-signature { padding-top: 1.6rem; }
.sig-name { font-family: var(--d-display); font-size: 23px; font-style: italic; color: var(--ink); }
.sig-date { color: var(--ink-faint); font-size: 12px; margin-top: .25rem; }
.doc-foot {
margin-top: 1.6rem; padding-top: 1rem; padding-bottom: 1.8rem; border-top: var(--d-rule) solid var(--line-soft);
color: var(--ink-faint); font-size: 11px;
}
/* ============================================================
TEMPLATE: classic — restrained traditional ledger.
A brand-colored header rule, serif numerals, hairline rules.
============================================================ */
.doc[data-template="classic"] .doc-head { border-bottom: 2px solid var(--brand); padding-bottom: 1.3rem; }
/* ============================================================
TEMPLATE: modern — a confident full brand-color masthead.
============================================================ */
.doc[data-template="modern"] .doc-head {
background: var(--brand); color: #fff; align-items: center;
padding-top: 2.4rem; padding-bottom: 2.4rem;
}
.doc[data-template="modern"] .doc-company-name,
.doc[data-template="modern"] .doc-number { color: #fff; }
.doc[data-template="modern"] .doc-company-meta,
.doc[data-template="modern"] .doc-kind { color: rgba(255, 255, 255, .85); }
.doc[data-template="modern"] .doc-kind { letter-spacing: .26em; }
/* white chip behind the logo so any logo (dark or light) reads on the band */
.doc[data-template="modern"] .doc-logo { background: #fff; padding: 6px 9px; border-radius: 8px; }
.doc[data-template="modern"] .doc-logomark { background: rgba(255, 255, 255, .18); color: #fff; }
.doc[data-template="modern"] .doc-status { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
.doc[data-template="modern"] .doc-meta {
background: var(--line-soft); padding-top: 1.4rem; padding-bottom: 1.4rem;
}
.doc[data-template="modern"] .doc-items th { border-bottom-color: var(--brand); color: var(--brand); }
.doc[data-template="modern"] .tot-grand { color: var(--brand); border-top-color: var(--brand); }
.doc[data-template="modern"] .tot-due { background: color-mix(in srgb, var(--brand) 12%, transparent); }
/* ============================================================
TEMPLATE: editorial — boutique masthead, airy, accent-led.
Large italic Fraunces kind label; gold accent instead of brand.
============================================================ */
.doc[data-template="editorial"] .doc-head {
flex-direction: column; align-items: flex-start; gap: 1.1rem;
padding-top: 2.5rem; padding-bottom: 1.3rem; border-bottom: var(--d-rule) solid var(--ink);
}
.doc[data-template="editorial"] .doc-headline { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.doc[data-template="editorial"] .doc-kind {
font-family: var(--d-display); font-style: italic; font-size: 26px; letter-spacing: 0;
text-transform: none; color: var(--accent); font-weight: 400; order: 1;
}
.doc[data-template="editorial"] .doc-number { font-family: var(--d-body); font-size: 17px; font-weight: 500; letter-spacing: .02em; color: var(--ink-soft); order: 2; margin-top: 0; }
.doc[data-template="editorial"] .doc-status { order: 3; margin-top: 0; }
.doc[data-template="editorial"] .doc-title { font-size: 24px; line-height: 1.18; padding-top: .8rem; }
.doc[data-template="editorial"] .doc-items th { border-bottom-color: var(--accent); }
.doc[data-template="editorial"] .tot-grand { border-top-color: var(--accent); }
.doc[data-template="editorial"] .tot-due { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.doc[data-template="editorial"] .tot-due span, .doc[data-template="editorial"] .tot-due span:first-child { color: var(--accent) !important; }
/* ============================================================
PRINT — the PDF path. The page margins are BAKED INTO the
document (the content keeps its --d-pad inset) rather than set
via @page, so they survive any browser's print-margin setting
and the right-aligned figures always sit inside a clean,
balanced margin instead of drifting to the paper edge.
============================================================ */
@page { margin: 0; }
@media print {
html, body { background: #fff !important; }
.docview { min-height: 0 !important; padding: 0 !important; background: #fff !important; }
.doc {
--d-pad: 15mm; /* the page side-margin, baked into the content */
max-width: none; width: 100%; border-radius: 0; box-shadow: none; overflow: visible;
padding-top: 15mm; padding-bottom: 13mm; /* top + bottom page margins */
}
/* the sections keep their horizontal --d-pad padding (= the side margins);
only the top space is reset, since .doc padding-top now supplies it */
.doc[data-template="classic"] .doc-head,
.doc[data-template="editorial"] .doc-head { padding-top: 0; }
/* modern: let the brand band bleed up to the top edge; its text stays
aligned with the body via the --d-pad padding it already carries */
.doc[data-template="modern"] .doc-head { margin-top: -15mm; }
.doc-foot { margin-top: 1rem; padding-top: .8rem; padding-bottom: 0; }
.doc-items tr, .doc-totals, .doc-signature, .doc-note { break-inside: avoid; }
[data-screen-only] { display: none !important; }
}
/* ============================================================
PUBLIC DOC PAGE chrome (doc.html) — a calm light portal that
frames the white sheet and carries the Download / Pay / Accept
actions. All screen-only; print shows only the sheet.
============================================================ */
.docview {
--pg-ink: #1d2024;
min-height: 100vh; background: linear-gradient(180deg, #f3f4f7, #e8eaef);
color: var(--pg-ink); font-family: var(--font-body);
padding: 1.25rem 1.25rem 4rem;
}
.docview-bar {
max-width: 50rem; margin: 0 auto 1.25rem; display: flex; align-items: center;
justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.docview-brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: #2b2f36; }
.docview-brand .brand-sigil { width: 26px; height: 26px; color: #3a3f47; }
.docview-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.dv-btn {
font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
border-radius: 10px; padding: .62rem 1.05rem; border: 1px solid #cdd2da; background: #fff;
color: #2b2f36; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dv-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(8,10,16,.5); }
.dv-btn--primary { border-color: transparent; background: var(--accent-btn, #0b7a75); color: #fff; }
.dv-btn--primary:hover { filter: brightness(1.05); }
.docview-banner {
max-width: 50rem; margin: 0 auto 1.1rem; padding: .8rem 1.1rem; border-radius: 12px;
background: rgba(10,125,79,.1); border: 1px solid rgba(10,125,79,.3); color: #0a6b44;
font-size: 13.5px; font-weight: 500; text-align: center;
}
.docview-banner--demo { background: rgba(0,0,0,.04); border-color: #d6dae1; color: #4b5059; }
.docview-banner code { font-family: var(--font-body); background: rgba(0,0,0,.06); padding: .05rem .35rem; border-radius: 5px; }
.docview-foot {
max-width: 50rem; margin: 1.4rem auto 0; text-align: center; color: #8a8f98; font-size: 12px;
}
.docview-foot a { color: #5a6068; }
/* accept modal */
.dv-scrim { position: fixed; inset: 0; background: rgba(12,14,20,.5); backdrop-filter: blur(2px); z-index: 40; }
.dv-modal {
position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(26rem, calc(100vw - 2rem)); background: #fff; border-radius: 16px; padding: 1.6rem;
box-shadow: 0 30px 80px -30px rgba(8,10,16,.6); color: #1d2024;
}
.dv-modal h3 { font-family: var(--font-display); font-size: 21px; margin: 0 0 .3rem; }
.dv-modal p { color: #5a6068; font-size: 13.5px; margin: 0 0 1rem; }
.dv-modal label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8f98; margin-bottom: .35rem; }
.dv-modal input {
width: 100%; box-sizing: border-box; font-family: var(--font-display); font-size: 18px; font-style: italic;
padding: .7rem .9rem; border: 1px solid #cdd2da; border-radius: 10px; color: #1d2024; background: #fafbfc;
}
.dv-modal input:focus { outline: none; border-color: var(--accent-btn, #0b7a75); }
.dv-modal-row { display: flex; gap: .6rem; margin-top: 1.1rem; }
.dv-modal-row .dv-btn { flex: 1; text-align: center; }
.dv-err { color: #b23b3b; font-size: 12.5px; margin-top: .6rem; min-height: 1em; }
.dv-sheet { transition: opacity .3s ease; }
@media print {
.docview { padding: 0; background: #fff !important; }
.docview-bar, .docview-banner, .docview-foot, .dv-scrim, .dv-modal, .toast { display: none !important; }
}