/* ══════════════════════════════════════════════════════════════════════════════
   ViyaBook — INVOICE DOCUMENT
   ────────────────────────────────────────────────────────────────────────────
   Bilingual EN / DV. Every Dhivehi rule is scoped under html[lang="dv"] (or
   .viya-invdoc[lang="dv"]), so the English view is never affected.

   Based on the template Hussain supplied, with three additions:

   1. @page margin boxes (footer + running header). Chrome CANNOT do these on its
      own — it ignores @bottom-left / content:counter(page). paged.js polyfills
      them, which is how we get "Page 1 of 4" and the running
      "USMAANIYYA BOAT · Invoice #10865" footer exactly like the WeasyPrint sample.

   2. UNIT column + the description sub-line, which the sample PDFs have.

   3. .ltr is kept EXACTLY as supplied and is the reason the Dhivehi rows do not
      flip. WeasyPrint ignored `unicode-bidi: isolate`, which is why the sample
      Dhivehi PDF has its English rows reversed end-to-end. Chrome honours it, so
      printing from the browser is CORRECT where the sample was broken. Do not
      remove the .ltr wrappers.
   ══════════════════════════════════════════════════════════════════════════════ */

/* MV Waheed (Dhivehi/Thaana) — self-hosted, licensed font shipped in the repo at
   assets/fonts/MV_A_Waheed_Bold.ttf. Path is relative to THIS file (assets/css/),
   so ../fonts/ resolves to assets/fonts/. Verified HTTP 200, MIME font/ttf. */
/* MV Waheed is the ONLY Dhivehi font for PDF/print. Defined under both the app
   name ('MV Waheed') and this file's legacy name ('MVWaheed'); legacy Dhivehi
   names are aliased to the same file so no Faruma/Noto ever renders or downloads. */
@font-face {
  font-family: 'MV Waheed';
  src: url('../fonts/MVWaheed.woff2') format('woff2'),
       url('../fonts/MV_A_Waheed_Bold.ttf') format('truetype');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'MVWaheed';
  src: url('../fonts/MVWaheed.woff2') format('woff2'),
       url('../fonts/MV_A_Waheed_Bold.ttf') format('truetype');
  font-weight: 400 900; font-display: swap;
}
@font-face { font-family: 'Faruma';           src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Thaana'; src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

.viya-invdoc {
  --ocean:#185FA5; --abyss:#0C1E3E; --foam:#EEF4FA;
  --coral:#FF6A4D; --green:#0F9D58;
  --ink:#1d2939; --muted:#6b7a8d; --faint:#98a4b3; --line:#e8edf3;
  --latin:'Inter','Helvetica Neue',Arial,sans-serif;

  font-family: var(--latin);
  color: var(--ink);
  font-size: 8.5pt;
}
.viya-invdoc * { box-sizing: border-box; }

/* The sheet. On screen it looks like paper; in print it fills the page. */
.viya-invdoc .sheet {
  width: 210mm; min-height: 297mm; margin: 18px auto; padding: 12mm;
  background: #fff; box-shadow: 0 6px 28px rgba(12,30,62,.16);
}

/* Numbers, IDs, latin tokens: never mirror, never take the Thaana face. */
.viya-invdoc .ltr {
  direction: ltr; unicode-bidi: isolate;
  display: inline-block; font-family: var(--latin);
}

.viya-invdoc .hdr { display:flex; gap:14px; align-items:flex-start; }
.viya-invdoc .mark { flex:0 0 46px; }
.viya-invdoc .mark img { width:46px; height:46px; object-fit:contain; border-radius:6px; }
.viya-invdoc .who { flex:1; }
.viya-invdoc .bizname { font-size:15pt; font-weight:700; color:var(--abyss); line-height:1.15; }
.viya-invdoc .bizen { font-size:8pt; font-weight:700; color:var(--ocean); letter-spacing:.8px; display:none; }
.viya-invdoc .bizmeta { font-size:7.8pt; color:#5a6a7d; line-height:1.6; margin-top:3px; }
.viya-invdoc .bizmeta b { color:var(--abyss); }
.viya-invdoc .stamp { flex:0 0 32%; text-align:right; }
.viya-invdoc .title { font-size:19pt; font-weight:700; color:var(--abyss); letter-spacing:1px; line-height:1; }
.viya-invdoc .badge {
  display:inline-block; margin-top:6px; padding:2px 11px;
  border:1.6px solid var(--green); color:var(--green);
  font-size:9pt; font-weight:700; border-radius:3px; letter-spacing:1px;
}
.viya-invdoc .badge.unpaid { border-color:var(--coral); color:var(--coral); }
.viya-invdoc .rule { height:2.5px; background:var(--ocean); margin-top:8px; }

.viya-invdoc .info { display:flex; gap:16px; margin-top:9px; }
.viya-invdoc .info > div { flex:1; min-width:0; }
.viya-invdoc .cap { font-size:6.8pt; letter-spacing:1.2px; color:var(--faint); font-weight:700; margin-bottom:3px; }
.viya-invdoc .billbox { background:var(--foam); border-left:3px solid var(--ocean); padding:7px 9px; border-radius:3px; }
.viya-invdoc .cust { font-size:10pt; font-weight:700; color:var(--abyss); }
.viya-invdoc .custline { font-size:8pt; color:#5a6a7d; margin-top:1px; }
.viya-invdoc .meta { width:100%; border-collapse:collapse; font-size:8.2pt; }
.viya-invdoc .meta td { padding:2.5px 0; }
.viya-invdoc .meta .k { color:var(--muted); text-align:right; padding-right:10px; white-space:nowrap; }
.viya-invdoc .meta .v { text-align:right; font-weight:700; color:var(--abyss); }
.viya-invdoc .meta tr.due td { border-top:1px solid #d7e0ea; padding-top:5px; font-size:9.2pt; }
.viya-invdoc .meta tr.due .v { color:var(--green); }
.viya-invdoc .meta tr.due.unpaid .v { color:var(--coral); }

.viya-invdoc table.items { width:100%; border-collapse:collapse; margin-top:11px; }
/* Repeats the column headers on EVERY page — the thing html2pdf could never do. */
.viya-invdoc table.items thead { display:table-header-group; }
.viya-invdoc table.items th {
  background:var(--abyss); color:#fff; font-size:7.4pt; letter-spacing:.6px;
  padding:5px 7px; text-align:left; font-weight:700;
}
.viya-invdoc table.items td { padding:3.5px 7px; border-bottom:1px solid var(--line); }
.viya-invdoc table.items tbody tr:nth-child(even) td { background:#fafcfe; }
.viya-invdoc .nm { font-weight:700; color:var(--abyss); font-size:8.4pt; }
.viya-invdoc .sub { font-size:7.2pt; color:var(--muted); font-weight:400; }
.viya-invdoc .c-no { width:28px; color:var(--faint); font-size:7.4pt; text-align:center; }
.viya-invdoc th.c-no { color:#fff; }
.viya-invdoc .c-qty, .viya-invdoc th.c-qty { width:52px; text-align:right; }
.viya-invdoc .c-unit, .viya-invdoc th.c-unit { width:52px; text-align:left; color:var(--muted); font-size:7.6pt; }
.viya-invdoc .c-num, .viya-invdoc th.c-num { width:84px; text-align:right; }

.viya-invdoc .foot { display:flex; gap:16px; margin-top:10px; break-inside:avoid; }
.viya-invdoc .foot > div { flex:1; min-width:0; }
.viya-invdoc .bank { border:1.4px solid var(--ocean); border-radius:4px; padding:7px 9px; }
.viya-invdoc .bank .cap { color:var(--ocean); }
.viya-invdoc .acc { font-size:12pt; font-weight:700; color:var(--abyss); letter-spacing:.6px; }
.viya-invdoc .holder { font-size:8pt; color:#33455c; }
.viya-invdoc .vb { font-size:7.4pt; color:var(--muted); margin-top:3px; }
.viya-invdoc .pkg { margin-top:7px; border:1.4px solid var(--abyss); border-radius:4px; padding:5px 9px; text-align:center; }
.viya-invdoc .pkg .n { font-size:15pt; font-weight:700; color:var(--abyss); line-height:1.1; }
.viya-invdoc .pkg .l { font-size:6.8pt; letter-spacing:1px; color:var(--muted); font-weight:700; }

.viya-invdoc table.tot { width:100%; border-collapse:collapse; font-size:8.6pt; }
.viya-invdoc table.tot td { padding:3.5px 9px; }
.viya-invdoc table.tot td:last-child { text-align:right; font-weight:700; color:var(--abyss); }
.viya-invdoc table.tot tr.grand td { background:var(--abyss); color:#fff; font-size:10.5pt; padding:7px 9px; }
.viya-invdoc table.tot tr.grand td:last-child { color:#fff; }
.viya-invdoc table.tot tr.bal td { background:var(--foam); font-size:9.5pt; padding:6px 9px; }
.viya-invdoc table.tot tr.bal td:last-child { color:var(--green); }
.viya-invdoc table.tot tr.bal.unpaid td:last-child { color:var(--coral); }
.viya-invdoc table.tot tr.sep td { border-top:1px solid #d7e0ea; }

.viya-invdoc .notes { margin-top:12px; font-size:7.6pt; color:#5a6a7d; break-inside:avoid; }
.viya-invdoc .sigline {
  margin-top:20px; margin-left:auto; border-top:1px solid var(--faint);
  width:170px; padding-top:3px; font-size:7.2pt; color:var(--muted); text-align:center;
}
.viya-invdoc .thanks {
  margin-top:14px; padding-top:7px; border-top:1px solid var(--line);
  text-align:center; font-size:7.4pt; color:var(--faint);
}

/* ══ DHIVEHI — scoped to lang="dv" only ═══════════════════════════════════ */
.viya-invdoc[lang="dv"] {
  /* Dhivehi = MV Waheed only (Latin fallback for embedded numbers/codes). */
  font-family:'MV Waheed','MVWaheed', var(--latin);
  font-size:11.5pt; line-height:1.9; direction:rtl; text-align:right;
}
.viya-invdoc[lang="dv"] .ltr { font-size:.76em; line-height:1.3; }
.viya-invdoc[lang="dv"] .bizen { display:block; }
.viya-invdoc[lang="dv"] .bizname { font-size:18pt; line-height:1.7; }
.viya-invdoc[lang="dv"] .bizmeta { font-size:10pt; line-height:1.9; }
.viya-invdoc[lang="dv"] .stamp { text-align:left; }
.viya-invdoc[lang="dv"] .title { font-size:20pt; line-height:1.7; letter-spacing:0; }
.viya-invdoc[lang="dv"] .badge { font-size:12pt; letter-spacing:0; line-height:1.8; }
.viya-invdoc[lang="dv"] .cap { font-size:9.5pt; letter-spacing:0; }
.viya-invdoc[lang="dv"] .cust { font-size:13pt; }
.viya-invdoc[lang="dv"] .custline { font-size:10.5pt; }
.viya-invdoc[lang="dv"] .billbox { border-left:0; border-right:3px solid var(--ocean); }
.viya-invdoc[lang="dv"] .meta { font-size:11pt; }
.viya-invdoc[lang="dv"] .meta .k { text-align:left; padding-right:0; padding-left:10px; }
.viya-invdoc[lang="dv"] .meta .v { text-align:left; }
.viya-invdoc[lang="dv"] .meta tr.due td { font-size:12pt; }
.viya-invdoc[lang="dv"] table.items th { font-size:10.5pt; text-align:right; letter-spacing:0; }
.viya-invdoc[lang="dv"] .nm { font-size:11pt; }
.viya-invdoc[lang="dv"] .sub { font-size:9pt; }
.viya-invdoc[lang="dv"] .c-qty, .viya-invdoc[lang="dv"] th.c-qty,
.viya-invdoc[lang="dv"] .c-num, .viya-invdoc[lang="dv"] th.c-num,
.viya-invdoc[lang="dv"] .c-unit, .viya-invdoc[lang="dv"] th.c-unit { text-align:left; }
.viya-invdoc[lang="dv"] table.tot { font-size:11pt; }
.viya-invdoc[lang="dv"] table.tot td:last-child { text-align:left; }
.viya-invdoc[lang="dv"] table.tot tr.grand td { font-size:13pt; }
.viya-invdoc[lang="dv"] table.tot tr.bal td { font-size:12pt; }
.viya-invdoc[lang="dv"] .acc { font-size:15pt; }
.viya-invdoc[lang="dv"] .holder { font-size:10.5pt; }
.viya-invdoc[lang="dv"] .vb { font-size:9.5pt; }
.viya-invdoc[lang="dv"] .pkg .n { font-size:19pt; }
.viya-invdoc[lang="dv"] .pkg .l { font-size:9.5pt; letter-spacing:0; }
.viya-invdoc[lang="dv"] .notes { font-size:10pt; }
.viya-invdoc[lang="dv"] .sigline { margin-left:0; margin-right:auto; font-size:10pt; }
.viya-invdoc[lang="dv"] .thanks { font-size:10pt; }

/* ══ PRINT / PAGED ════════════════════════════════════════════════════════
   The @page margin boxes below are what produce the footer in the sample:

       left  : "USMAANIYYA BOAT · TIN 1090475GST501"     <- from Settings
       right : "Page 1 of 4"
       top   : "USMAANIYYA BOAT · Invoice #10865"  (pages 2+ only)

   Chrome ignores these on its own. paged.js (assets/js/vendor/paged.polyfill.min.js)
   implements them, and invoice-doc.js sets the --inv-footer / --inv-runhead
   strings from Settings so EVERY line here is configurable — nothing hardcoded. */
@page {
  size: A4;
  margin: 14mm 12mm 16mm 12mm;

  @bottom-left {
    content: var(--inv-footer, "");
    font-family: 'Inter', Arial, sans-serif;
    font-size: 7pt; color: #98a4b3;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 7pt; color: #98a4b3;
  }
}
/* Running header on continuation pages only — page 1 already has the letterhead. */
@page :not(:first) {
  @top-right {
    content: var(--inv-runhead, "");
    font-family: 'Inter', Arial, sans-serif;
    font-size: 7pt; color: #98a4b3;
  }
}

@media print {
  body { background:#fff; }
  .viya-invdoc .sheet {
    width:auto; min-height:0; margin:0; padding:0; box-shadow:none;
  }
  .viya-invdoc .foot,
  .viya-invdoc .notes,
  .viya-invdoc .sigline,
  .viya-invdoc .thanks { break-inside: avoid; }
  /* No item row may be split across a page — the sample PDF broke rows 19, 47, 75. */
  .viya-invdoc table.items tr { break-inside: avoid; }
  .viya-invdoc table.items thead { display: table-header-group; }
  /* Dhivehi print = MV Waheed only. */
  .viya-invdoc[lang="dv"],
  .viya-invdoc[lang="dv"] *:not(.ltr) {
    font-family:'MV Waheed','MVWaheed', var(--latin) !important;
  }
}

/* Screen, narrow */
@media (max-width: 820px) {
  .viya-invdoc .sheet { width:auto; margin:10px; padding:14px; }
  .viya-invdoc .hdr,
  .viya-invdoc .info,
  .viya-invdoc .foot { flex-direction:column; }
  .viya-invdoc .stamp { text-align:left; }
  .viya-invdoc[lang="dv"] .stamp { text-align:right; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOST-PAGE ISOLATION  (Task 129 fix)
   ────────────────────────────────────────────────────────────────────────────
   The invoice document is injected into pages that carry their own aggressive
   styles, and two of them were destroying it:

   1. .vb-cardify — the app's responsive "table -> card" transformer:
          .vb-cardify thead     { display:none !important }
          .vb-cardify tbody tr  { display:block !important; background:#fff; border:...; }
          .vb-cardify tbody td  { display:flex !important; justify-content:space-between; }
      That is correct for the app's data tables. It is catastrophic for an invoice:
      it HIDES the column headers, turns every line item into a floating white card,
      and destroys the table structure — so the document can no longer paginate,
      cannot repeat its <thead> on page 2+, and its columns do not line up.

   2. #invoicePaper rules — invoice-detail.html has 43 of them. An ID selector
      (1-0-0) beats every class selector in this file (0-2-0) NO MATTER what order
      the stylesheets load in. Load order cannot fix this; only specificity can.

   So the document is re-asserted here with !important, scoped strictly to
   .viya-invdoc. Nothing outside the invoice is affected: the app's own tables keep
   their card behaviour everywhere else.

   An invoice must remain a REAL TABLE. That is not cosmetic — it is what makes
   `display:table-header-group` repeat the header on every page and what lets the
   pagination engine break cleanly between rows.
   ══════════════════════════════════════════════════════════════════════════════ */

.viya-invdoc table,
.viya-invdoc table.items,
.viya-invdoc table.meta,
.viya-invdoc table.tot {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.viya-invdoc table.items { margin-top: 11px !important; }

/* Undo .vb-cardify: the header must be visible AND repeat on every page. */
.viya-invdoc thead {
  display: table-header-group !important;
}
.viya-invdoc tbody { display: table-row-group !important; }

.viya-invdoc tr {
  display: table-row !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.viya-invdoc td,
.viya-invdoc th {
  display: table-cell !important;
  justify-content: initial !important;
  align-items: initial !important;
  gap: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-wrap: initial !important;
  width: auto;
}

/* .vb-cardify injects a data-label pseudo-element in front of every cell. */
.viya-invdoc td::before,
.viya-invdoc th::before { content: none !important; display: none !important; }

/* Re-assert the document's own look, now at !important so #invoicePaper cannot win. */
.viya-invdoc table.items th {
  background: var(--abyss) !important;
  color: #fff !important;
  padding: 5px 7px !important;
  font-size: 7.4pt !important;
  text-align: left !important;
  border: 0 !important;
}
.viya-invdoc table.items td {
  padding: 3.5px 7px !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.viya-invdoc table.items tbody tr:nth-child(even) td { background: #fafcfe !important; }

.viya-invdoc table.meta td { padding: 2.5px 0 !important; border: 0 !important; }
.viya-invdoc table.tot  td { padding: 3.5px 9px !important; border: 0 !important; }
.viya-invdoc table.tot tr.grand td { background: var(--abyss) !important; color: #fff !important; }
.viya-invdoc table.tot tr.bal   td { background: var(--foam) !important; }
.viya-invdoc table.tot tr.sep   td { border-top: 1px solid #d7e0ea !important; }

.viya-invdoc .c-qty, .viya-invdoc th.c-qty,
.viya-invdoc .c-num, .viya-invdoc th.c-num { text-align: right !important; }
.viya-invdoc .c-no,  .viya-invdoc th.c-no  { text-align: center !important; }
.viya-invdoc[lang="dv"] .c-qty, .viya-invdoc[lang="dv"] th.c-qty,
.viya-invdoc[lang="dv"] .c-num, .viya-invdoc[lang="dv"] th.c-num,
.viya-invdoc[lang="dv"] .c-unit, .viya-invdoc[lang="dv"] th.c-unit { text-align: left !important; }

/* The sheet itself must not inherit the page's card chrome. */
.viya-invdoc .sheet {
  border-radius: 0 !important;
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOST-PAGE ISOLATION v2  (Task 133)
   ────────────────────────────────────────────────────────────────────────────
   The v1 guard above re-asserted the document at `.viya-invdoc td` (0,1,1). That
   is not enough. Four host rules still reach into the invoice and beat it:

     1. styles/design-system.css
          .main-content table:not(...x6) tbody tr { height: 60px }
        Six :not(.class)   arguments make this (0,7,3) — far above the guard. Every
        invoice line, every meta row and every totals row is forced to 60px tall.
        This is why the document renders stretched down the page. It carries NO
        !important, so a single !important defeats it regardless of specificity.

     2. assets/css/rtl.css
          html[lang="dv"] td:first-child { border-radius:0 12px 12px 0 !important;
                                           border-left:1px solid ... !important }
          html[lang="dv"] td:last-child  { border-radius:12px 0 0 12px !important; ... }
        (0,2,2) !important. In Dhivehi this puts a rounded border on the first and
        last cell of EVERY row — which is exactly what turns each meta row, each
        totals row and each line item into a floating white card.

     3. assets/css/vb-core.css
          html[lang="dv"] td,th { line-height:var(--lh-dv) !important;
                                  padding-top:2px !important; padding-bottom:2px !important }
        (0,1,2) !important. Overrides the document's cell padding in Dhivehi.

     4. dark.css
          html[data-theme="dark"] tr:hover td { background:... !important }
        (0,2,2) !important. A printed document must not react to hover.

   Fix: re-assert at (0,2,4) / (0,3,4) with !important, scoped strictly inside
   .viya-invdoc .sheet. Nothing outside the invoice changes — the app's own tables
   keep their card behaviour, their RTL corners and their dark-mode hover.
   ══════════════════════════════════════════════════════════════════════════════ */

/* -- blanket reset: (0,2,4) beats rtl.css (0,2,2), vb-core (0,1,2), dark (0,2,2) -- */
html body .viya-invdoc .sheet table tr,
html body .viya-invdoc .sheet table thead tr,
html body .viya-invdoc .sheet table tbody tr {
  height: auto !important;          /* kills design-system's 60px row */
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .viya-invdoc .sheet table td,
html body .viya-invdoc .sheet table th {
  height: auto !important;
  min-height: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;      /* kills rtl.css 12px corners */
  box-shadow: none !important;
  line-height: 1.35 !important;     /* kills vb-core --lh-dv */
}
/* a document does not respond to hover */
html body .viya-invdoc .sheet table tr:hover td,
html body .viya-invdoc .sheet table tbody tr:hover td {
  background: inherit !important;
}

/* -- re-assert the document's own cells at (0,3,4), above the blanket reset -- */
html body .viya-invdoc .sheet table.items th {
  background: var(--abyss) !important;
  color: #fff !important;
  padding: 5px 7px !important;
  border-bottom: 0 !important;
}
html body .viya-invdoc .sheet table.items td {
  padding: 3.5px 7px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
html body .viya-invdoc .sheet table.items tbody tr:nth-child(even) td { background: #fafcfe !important; }
html body .viya-invdoc .sheet table.meta td { padding: 2.5px 0 !important;   border-bottom: 0 !important; }
html body .viya-invdoc .sheet table.tot  td { padding: 3.5px 9px !important; border-bottom: 0 !important; }
html body .viya-invdoc .sheet table.tot tr.grand td { background: var(--abyss) !important; color: #fff !important; }
html body .viya-invdoc .sheet table.tot tr.bal   td { background: var(--foam)  !important; }
html body .viya-invdoc .sheet table.tot tr.sep   td { border-top: 1px solid #d7e0ea !important; }
html body .viya-invdoc .sheet table.meta tr.due td  { border-top: 1px solid #d7e0ea !important; padding-top: 5px !important; }

/* Dhivehi: rtl.css forces text-align:right on every cell. Numbers must stay left. */
html body .viya-invdoc[lang="dv"] .sheet .c-qty,
html body .viya-invdoc[lang="dv"] .sheet .c-num,
html body .viya-invdoc[lang="dv"] .sheet .c-unit,
html body .viya-invdoc[lang="dv"] .sheet .meta .v,
html body .viya-invdoc[lang="dv"] .sheet .tot td:last-child { text-align: left !important; }
html body .viya-invdoc[lang="dv"] .sheet .c-no { text-align: center !important; }