/* ================================================================================
   THE INVOICE DOCUMENT — ONE STYLESHEET
   --------------------------------------------------------------------------------
   invoice-doc.js owns the document's structure; this file owns its appearance.
   Both app.mokont.com and the customer-facing shared link load both files, so a
   document printed from MoKont and the same document printed from the link your
   client received are the same sheet of paper.

   Everything here is scoped under `.invoice`. That matters twice over:
     • on the shared link there is no app stylesheet, so this must be complete;
     • on the app page it must beat styles-all-in-one.css, and a two-class
       selector outranks the bare `table td` / `.box h4` rules it is replacing
       without having to touch that 190KB file.

   Load AFTER styles-all-in-one.css.
   ================================================================================ */

.invoice {
  /* The app defines these on :root. Repeating them here — same values — is what
     lets the shared link, which has no app stylesheet, render identically. */
  --muted: #86868b;
  --line: #d2d2d7;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  background: #fff;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: #1d1d1f;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;

  /* The app applies these globally (`* { -webkit-font-smoothing: antialiased }`).
     Without them here the shared link rendered every bold run — the headings,
     the line totals, "Amount due" — a hair heavier than the app's. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings. The app forces `letter-spacing: -0.02em !important` and fixed
   weights on every h1-h6 in the product, document headings included, so those
   are the values the app actually prints — and therefore the ones the link has
   to use. Declared here rather than inherited, because on the shared link there
   is no global rule to inherit from. */
.invoice h2,
.invoice h3,
.invoice h4 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.02em;
}
.invoice .inv-brand h2 { font-weight: 700; }
.invoice .inv-right h3 { font-weight: 600; }

.invoice *,
.invoice *::before,
.invoice *::after { box-sizing: border-box; }

/* styles-all-in-one.css carries a global rule aimed at form copy:
       p, .page-sub, .form-section-description, … {
         font-size: 15px !important; color: #1d1d1f !important;
         line-height: 1.5 !important; }
   It also lands on the seller-address <p> inside a document, so on the app the
   address printed black at 1.5 while the shared link — which never loaded that
   stylesheet — printed it muted at 1.35, as the design intends. That single
   inherited !important was the last thing making the two outputs differ.
   Neutralise it inside .invoice and let the rules below decide. */
.invoice p {
  /* The shared link's page reset zeroes every margin; the app has no such reset
     inside a document, so the same <p> carried the browser default 1em top and
     bottom there and nowhere else. Zero it here so neither page depends on its
     own reset. */
  margin: 0;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* ---- header band ---------------------------------------------------------- */
.invoice .inv-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.invoice .inv-brand h2 { margin: 0 0 6px; font-size: 20px; }
/* !important here for the same reason as the .invoice p rule above: this has to
   outrank the global form-copy rule, which is itself !important. */
.invoice .inv-brand .meta {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  white-space: pre-line;
  line-height: 1.35 !important;
}
.invoice .inv-right { text-align: right; min-width: 260px; }
.invoice .inv-right h3 { margin: 0 0 10px; font-size: 16px; }

.invoice .kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 10px;
  justify-content: end;
  font-size: 12.5px;
}
.invoice .kv div:nth-child(odd) { color: var(--muted); }

.invoice .logo-wrap { margin-bottom: 10px; }
.invoice .logo-wrap img {
  max-width: 150px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---- Bill to / Payment ---------------------------------------------------- */
.invoice .block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.invoice .box { padding: 12px 0; }
.invoice .box h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.invoice .box .txt { white-space: pre-line; font-size: 13px; line-height: 1.35; }

/* ---- line items ----------------------------------------------------------- */
.invoice .inv-table { margin-top: 18px; }

.invoice .inv-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
/* The app pins table cells to this stack with `table, th, td { … !important }`,
   which reaches the cells directly — setting the family on the table alone does
   not beat it. Rather than fight it, the link uses the same stack, so the
   fallback font is the same on both pages if Inter ever fails to load. */
.invoice .inv-table table,
.invoice .inv-table th,
.invoice .inv-table td {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.invoice .inv-table thead {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.invoice .inv-table th {
  padding: 16px 20px;
  /* The app left-aligns every column, numbers included, and the shared link now
     matches it. `.num` is kept in the markup because print/PDF and any future
     right-aligned variant hang off it. */
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: middle;
  height: 48px;
}
.invoice .inv-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.invoice .inv-table tbody tr:last-child { border-bottom: none; }
.invoice .inv-table td {
  padding: 16px 20px;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.5;
  vertical-align: middle;
  height: 56px;
  text-align: left;
}

.invoice .inv-empty {
  text-align: center;
  padding: 32px;
  background: #f8fafc;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* ---- totals --------------------------------------------------------------- */
.invoice .totals { margin-top: 14px; display: flex; justify-content: flex-end; }
.invoice .totals .card {
  min-width: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.invoice .totals .line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
}
.invoice .totals .line strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.invoice .totals .grand {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 14px;
}
.invoice .totals .grand span { font-weight: 800; }
.invoice .badge { font-size: 12px; color: var(--muted); }

/* ---- notes / QR ----------------------------------------------------------- */
.invoice .footer-notes {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ---- narrow screens ------------------------------------------------------- */
/* `@media screen` deliberately: an A4 printable area is only ~700px wide, so a
   plain max-width query fires during printing and silently stacks the whole
   document — which is what used to push the shared link onto two pages. */
@media screen and (max-width: 680px) {
  .invoice .block { grid-template-columns: 1fr; }
  .invoice .footer-notes { grid-template-columns: 1fr; }
  .invoice .inv-right { min-width: unset; width: 100%; text-align: left; }
  .invoice .kv { grid-template-columns: 110px 1fr; justify-content: start; }
  .invoice .totals .card { min-width: auto; width: 100%; }
}

/* ================================================================================
   PRINT / PDF
   --------------------------------------------------------------------------------
   These rules decide what lands on the sheet, and they are identical on both
   pages because there is only one copy of them.
   ================================================================================ */
@page { size: A4; margin: 12mm; }

@media print {
  /* The document fills the printable area exactly. @page owns the margin;
     nothing here may add page padding, or the two paths drift again. */
  .invoice {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Restore the full-width layout. A4 less 12mm margins leaves ~703px, and the
     phone breakpoint above is 680px — 23px of headroom. Declaring the real
     layout here means the printed page can never depend on that luck. */
  .invoice .block { grid-template-columns: 1fr 1fr !important; }
  .invoice .footer-notes { grid-template-columns: 1fr auto !important; }
  .invoice .kv { grid-template-columns: 120px 1fr !important; justify-content: end !important; }
  .invoice .inv-right { min-width: 260px !important; width: auto !important; text-align: right !important; }
  .invoice .totals .card { min-width: 320px !important; width: auto !important; }

  /* Tighter rows on paper — ~80% of the on-screen height, with half the
     horizontal padding so long descriptions get more room.
     The height must be released first: `table td { height: 56px }` pins the row
     regardless of padding, so without `height:auto` nothing moves at all. */
  .invoice .inv-table th,
  .invoice .inv-table td {
    padding: 13px 10px !important;
    height: auto !important;
  }

  /* No shadows on paper. The app drops them all in print; a printer renders a
     soft shadow as a grey smudge along the table edge, which is exactly what
     the shared link was producing and the app was not. */
  .invoice,
  .invoice * { box-shadow: none !important; }

  /* Logo at 80% of its on-screen cap, proportionate to a sheet of paper rather
     than to a browser window. */
  .invoice .logo-wrap img {
    max-width: 120px !important;
    max-height: 80px !important;
  }

  /* Type scale for paper. */
  .invoice .inv-brand h2 { font-size: 18px !important; }
  .invoice .inv-right h3 { font-size: 14px !important; }
  .invoice .inv-brand .meta,
  .invoice .kv { font-size: 11px !important; }
  .invoice .inv-table th { font-size: 11px !important; }
  .invoice .inv-table td { font-size: 12px !important; }
  .invoice .totals .line { font-size: 12px !important; }
  .invoice .totals .grand { font-size: 12px !important; }
  .invoice .box .txt { font-size: 11px !important; }
  .invoice .box h4 { font-size: 10px !important; }

  /* THE CAUSE OF "prints on 2 pages". styles-all-in-one.css sets
         .invoice, .invoice * { page-break-inside: avoid; }
     Blanket-avoiding the whole document means a document a millimetre taller
     than one page cannot break anywhere — Chrome's only move is to push the
     entire thing onto a fresh sheet, leaving page 1 blank, and it overflows
     regardless. Reset it, then avoid only the blocks that must not be split. */
  .invoice, .invoice * {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  .invoice tr,
  .invoice .box,
  .invoice .totals,
  .invoice .inv-top {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .invoice table thead { display: table-header-group; }

  /* A stray bottom margin is enough to spill a one-page document onto a second
     sheet. */
  .invoice > *:last-child { margin-bottom: 0 !important; }
}