/* Screen replica of portal/invoice/pdf — the #previewDoc partial
   (app/views/portal/invoice/partial/previewDoc.dark.php), filled in at
   runtime by window.InvoicePreview.render(doc) (public/js/invoice-preview.js).

   Loaded by all three forms that render that partial: the portal's create
   and edit editors, and the public /invoice-generator page. It used to live
   only in invoice-editor.css, which /invoice-generator does not load — this
   is the CSS half of the same "one implementation, several callers" move the
   JS renderer made; duplicating it into invoice-generator.css would have put
   the same drift risk back into the stylesheet that the JS extraction just
   took out of the script. */

/* ============================================================
   Palette, type scale and section order are taken from pdf.dark.php so the
   preview and the produced PDF read as the same document. The px values are
   the PDF's own: the panel is a little narrower than the PDF's 184mm content
   box, so at these sizes the preview runs marginally larger than print — which
   keeps the 7.5px eyebrows legible on screen.
   ============================================================ */
.preview-doc {
    position: relative;
    background: #fff; border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    padding: 30px 34px 26px;
    font-size: 10.5px; line-height: 1.5; color: #0F172A;
    overflow: hidden;
}
.preview-doc table { border-collapse: collapse; width: 100%; }

.pdoc-eyebrow {
    font-size: 7.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #64748B;
}

/* ---- Masthead ---- */
.pdoc-masthead > tbody > tr > td { vertical-align: top; }
.pdoc-titlerow { display: flex; align-items: center; gap: 12px; }
.pdoc-title { font-size: 20px; font-weight: 700; letter-spacing: 1.5px; line-height: 1; white-space: nowrap; }
.pdoc-pill {
    display: inline-block; font-size: 7.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; padding: 4px 9px;
    border-radius: 20px; line-height: 1;
}
.pdoc-pill-draft   { background: #F1F5F9; color: #475569; }
.pdoc-pill-issued  { background: #EEF2FF; color: #4338CA; }
.pdoc-pill-partial { background: #FEF3C7; color: #92400E; }
.pdoc-pill-paid    { background: #D1FAE5; color: #065F46; }
.pdoc-pill-overdue { background: #FEE2E2; color: #991B1B; }
.pdoc-meta { width: auto; margin-top: 8px; }
.pdoc-meta td { font-size: 9.5px; padding: 1px 0; vertical-align: top; }
.pdoc-meta .k { color: #64748B; padding-right: 6px; white-space: nowrap; }
.pdoc-meta .v { font-weight: 600; }
.pdoc-logo-cell { text-align: right; width: 32%; }
.pdoc-logo { max-width: 100%; max-height: 56px; }

/* ---- Parties ---- */
.pdoc-parties { margin-top: 20px; }
.pdoc-parties td { vertical-align: top; width: 50%; }
.pdoc-parties td:first-child { padding-right: 24px; }
.pdoc-party-name { font-size: 10.5px; font-weight: 600; margin-top: 3px; }
.pdoc-party-line { font-size: 9.5px; color: #475569; overflow-wrap: anywhere; }

/* ---- Summary ---- */
.pdoc-summary {
    margin-top: 20px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #F8FAFC; padding: 16px 20px;
}
.pdoc-summary.is-overdue { border-color: #FECACA; background: #FEF2F2; }
.pdoc-summary.is-paid { border-color: #A7F3D0; background: #ECFDF5; }
.pdoc-amount { font-size: 32px; font-weight: 700; letter-spacing: -.6px; margin-top: 2px; }
.pdoc-summary.is-paid .pdoc-amount { color: #047857; }
.pdoc-duehint { font-size: 9.5px; font-weight: 500; color: #475569; margin-top: 3px; }
.pdoc-duehint.is-urgent { color: #B91C1C; }

/* ---- Notes / Terms ---- */
.pdoc-notes { margin-top: 20px; border-left: 2px solid #E2E8F0; padding-left: 11px; }
.pdoc-terms { margin-top: 20px; }
/* Prose is the one thing here that cannot use the full measure — the PDF caps
   it at 52% for the same reason. */
.pdoc-prose { font-size: 9.5px; color: #475569; white-space: pre-line; margin-top: 3px; max-width: 52%; }

/* ---- Line items ---- */
.pdoc-items { margin-top: 20px; }
.pdoc-items th {
    font-size: 7.5px; font-weight: 600; color: #64748B;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 0 8px 7px; border-bottom: 1px solid #E2E8F0; text-align: right;
}
.pdoc-items th:first-child { text-align: left; padding-left: 0; }
.pdoc-items th:last-child { padding-right: 0; }
.pdoc-items td { padding: 9px 8px; border-bottom: 1px solid #F1F5F9; text-align: right; vertical-align: top; }
.pdoc-items td:first-child { text-align: left; padding-left: 0; }
.pdoc-items td:last-child { padding-right: 0; }
.pdoc-item-name { font-size: 10.5px; font-weight: 600; }
.pdoc-item-desc { font-size: 9px; color: #64748B; margin-top: 1px; }
.pdoc-item-amount { font-weight: 600; }
.pdoc-empty { color: #64748B; text-align: center; padding: 16px 0; }

/* ---- Bank panel + totals ---- */
.pdoc-foot { margin-top: 14px; }
.pdoc-foot > tbody > tr > td { vertical-align: top; }
.pdoc-bank-cell { padding-right: 26px; }
.pdoc-tot-cell { width: 250px; }
.pdoc-panel { border: 1px solid #E2E8F0; border-radius: 10px; padding: 13px 15px; }
.pdoc-panel-title {
    font-size: 7.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #64748B; margin-bottom: 7px;
}
.pdoc-paygrid td { padding: 4px 14px 4px 0; vertical-align: top; width: 50%; }
.pdoc-paygrid .k { font-size: 7.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #64748B; }
.pdoc-paygrid .v { font-size: 10px; font-weight: 600; color: #0F172A; overflow-wrap: anywhere; }
.pdoc-tot td { padding: 5px 0; font-size: 10px; }
.pdoc-tot .lbl { color: #64748B; text-align: left; }
.pdoc-tot .val { text-align: right; font-weight: 500; }
.pdoc-tot tr.grand td { padding-top: 9px; border-top: 1px solid #E2E8F0; font-size: 12px; font-weight: 700; }
.pdoc-tot tr.grand .lbl { color: #0F172A; }
.pdoc-tot .credit { color: #047857; }
.pdoc-duebox { border-top: 2px solid #0F172A; margin-top: 6px; }
.pdoc-duebox td { padding: 8px 0 0; }
.pdoc-duebox .lbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #0F172A; text-align: left; }
.pdoc-duebox .val { font-size: 15px; font-weight: 700; text-align: right; }

/* ---- Page furniture ---- */
.pdoc-pagefoot { margin-top: 22px; padding-top: 8px; border-top: 1px solid #F1F5F9; font-size: 8px; color: #64748B; }
.pdoc-watermark {
    position: absolute; top: 34%; left: 0; width: 100%;
    text-align: center; transform: rotate(-45deg); pointer-events: none;
    color: #0F172A; opacity: .05;
    font-size: 96px; font-weight: 700; letter-spacing: 14px;
}

/* IBAN, SWIFT and tax numbers are long unbreakable tokens. In a narrow column
   they set a min-content width the column cannot go below, which on a phone
   widens the layout viewport past the screen — every card then renders short
   of the right edge. Let them wrap mid-token instead. (The portal form's own
   #sellerNameDisplay/#sellerNifDisplay/#sellerIbanDisplay/#sellerSwiftDisplay
   carry the same rule in invoice-editor.css — those ids live outside
   #previewDoc, so they stay there rather than here.) */
#previewSellerName, #previewClient {
    overflow-wrap: anywhere;
}