/* The printed document. Everything here is black, white and grey, set in Rubik,
   matching the original bills. Sizes are in pt/in so print output is exact. */

.sheet {
  --ink: #000000;
  --paper: #ffffff;
  --grey-head: #808080;   /* table header, from the original bills */
  --grey-row: #f2f2f2;    /* table rows, from the original bills */
  --grey-text: #6b6b6b;
  --grey-rule: #d4d4d4;
  --accent: #ee0000;      /* red used for the phases list in the Arabic bill */
  --pad-x: 0.85in;
  --pad-y: 0.45in;

  position: relative;
  box-sizing: border-box;
  width: var(--page-w, 8.5in);
  min-height: var(--page-h, 11in);
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Rubik', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.45;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.sheet p, .sheet h1, .sheet h2, .sheet h3, .sheet ul, .sheet dl, .sheet dd, .sheet figure { margin: 0; padding: 0; }
.sheet .num { font-variant-numeric: tabular-nums; }
.sheet bdi { unicode-bidi: isolate; }

/* ---------- Header ---------- */
.doc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.3in;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6pt 28pt;
}
.doc-meta div { display: flex; flex-direction: column; gap: 1pt; }
.doc-meta dt, .doc-foot, .client-label, .kv dt {
  font-size: 7pt;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-text);
}
.doc-meta dd { font-size: 10pt; }
.issuer {
  margin-top: 12pt;
  display: flex;
  flex-direction: column;
  gap: 2pt;
  font-size: 10pt;
}
.issuer .issuer-name { font-weight: 500; }
.doc-logo {
  display: block;
  height: 0.95in;
  width: auto;
  max-width: 2.4in;
  object-fit: contain;
}

/* ---------- Title + client bar (bleeds to the page edge) ---------- */
.title-row {
  margin-top: 0.22in;
  display: flex;
  align-items: stretch;
  gap: 0.35in;
}
.doc-title {
  flex: 0 0 auto;
  align-self: center;
  font-size: 30pt;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.client-bar {
  flex: 1 1 auto;
  min-height: 0.88in;
  margin-inline-end: calc(-1 * var(--pad-x));
  padding: 12pt 0.4in;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3pt;
  background: var(--ink);
  color: var(--paper);
}
.client-label { color: #b3b3b3; }
.client-name { font-size: 14pt; font-weight: 700; line-height: 1.25; text-wrap: balance; }

/* ---------- Body grid ---------- */
.doc-body {
  margin-top: 0.3in;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13pt 0.4in;
  align-items: start;
}
.blk { grid-column: 1 / -1; min-width: 0; break-inside: avoid; page-break-inside: avoid; }
.blk.w-half { grid-column: auto; }
.blk-items, .blk-list { break-inside: auto; page-break-inside: auto; }

/* Title */
.b-heading { font-weight: 700; line-height: 1.25; text-wrap: balance; }
.b-heading.s-lg { font-size: 18pt; }
.b-heading.s-md { font-size: 13pt; }
.b-heading.s-sm { font-size: 11pt; }
.a-start { text-align: start; }
.a-center { text-align: center; }
.a-end { text-align: end; }

/* Items table */
.items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.items th {
  background: var(--grey-head);
  color: var(--paper);
  font-weight: 400;
  font-size: 11.5pt;
  padding: 5pt 10pt;
  text-align: center;
  border-inline-start: 1.5pt solid var(--paper);
}
.items td {
  background: var(--grey-row);
  padding: 5.5pt 10pt;
  font-size: 10.5pt;
  vertical-align: middle;
  text-align: center;
  border-top: 1.5pt solid var(--paper);
  border-inline-start: 1.5pt solid var(--paper);
}
.items th:first-child, .items td:first-child { border-inline-start: 0; }
.items tr { break-inside: avoid; page-break-inside: avoid; }
.items .c-desc { text-align: start; }
.items th.c-desc { text-align: center; }
.items .c-qty { width: 15%; }
.items .c-price { width: 19%; }
.items .c-total { width: 21%; }
.items.no-qty .c-total { width: 30%; }
.items .row-details { display: block; margin-top: 2pt; font-size: 8.5pt; color: var(--grey-text); }
.items tr.sum td {
  background: var(--paper);
  border-top: 1pt solid var(--grey-rule);
  border-inline-start: 0;
  padding: 5pt 10pt;
  font-size: 10pt;
}
.items tr.sum td.sum-label { text-align: end; color: var(--grey-text); }
.items tr.grand td {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 12pt;
  padding: 7pt 10pt;
  border-top: 0;
  border-inline-start: 0;
}
.items tr.grand td.sum-label { text-align: end; }
.items.no-qty tr.grand td.sum-label { text-align: center; }
.items tr.sum + tr.grand td { border-top: 0; }
.items-note { margin-top: 7pt; font-size: 9pt; font-weight: 700; white-space: pre-line; }
.items .empty-row td { color: var(--grey-text); font-style: italic; }

/* Section titles used by list, fields and payment blocks */
.b-title { font-size: 10pt; font-weight: 700; margin-bottom: 4pt; }

/* Bullet list */
.b-list ul { list-style: none; display: flex; flex-direction: column; gap: 1.5pt; }
.b-list li { position: relative; padding-inline-start: 14pt; font-size: 9pt; }
.b-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2pt;
  top: 0.62em;
  width: 4pt;
  height: 4pt;
  background: currentColor;
}
.b-list li b { font-weight: 700; }
.tone-accent, .tone-accent .b-title { color: var(--accent); }

/* Text / note */
.b-note { white-space: pre-line; font-size: 10pt; }
.b-note.tone-bold { font-weight: 700; }
.b-note.tone-accent { font-weight: 700; }
.b-note.tone-muted { color: var(--grey-text); font-size: 8.5pt; }
.b-note.tone-large { font-size: 13pt; font-weight: 700; }

/* Key / value lists (custom fields and payment) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4pt 12pt; align-items: baseline; }
.kv dt { font-size: 7pt; }
.kv dd { font-size: 9.5pt; overflow-wrap: anywhere; }

/* Signature */
.b-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.4in; }
.sign-own { margin-inline-start: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2pt; font-size: 9.5pt; }
.sign-own img { display: block; height: 0.62in; width: auto; margin-block: -2pt -3pt; }
.sign-own .sign-gap { height: 0.45in; }
.sign-client { min-width: 2.2in; padding-top: 0.3in; }
.sign-client .line { border-top: 1pt solid var(--ink); padding-top: 4pt; font-size: 9pt; font-weight: 700; }
.blk.w-half .b-sign { justify-content: flex-end; }

/* Space, divider, page break */
.b-divider { border: 0; border-top: 1pt solid var(--grey-rule); margin: 0; }
.b-pagebreak { break-after: page; page-break-after: always; }

/* Footer */
.doc-foot {
  margin-top: auto;
  padding-top: 0.16in;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4pt 18pt;
  letter-spacing: 0.06em;
}
.doc-foot .foot-inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4pt 18pt;
  padding-top: 8pt;
  border-top: 1pt solid var(--grey-rule);
}

/* Arabic: no letter-spacing or uppercase — they break Arabic joining. */
.sheet[dir="rtl"] .doc-meta dt,
.sheet[dir="rtl"] .doc-foot,
.sheet[dir="rtl"] .client-label,
.sheet[dir="rtl"] .kv dt { letter-spacing: 0; text-transform: none; font-size: 8pt; }
.sheet[dir="rtl"] .doc-title { letter-spacing: 0; }

/* ---------- On-screen helpers (never printed) ---------- */
@media screen {
  .print-root { display: none; }
  .sheet .blk { cursor: pointer; border-radius: 2px; outline: 1px dashed transparent; outline-offset: 5px; transition: outline-color 0.12s; }
  .sheet .blk:hover { outline-color: rgba(238, 0, 0, 0.35); }
  .sheet .blk.is-active { outline: 1.5px solid rgba(238, 0, 0, 0.7); }
  .sheet .b-pagebreak {
    height: 0; border-top: 1px dashed #b5b5b5; position: relative;
  }
  .sheet .b-pagebreak::after {
    content: 'Page break';
    position: absolute; inset-inline-end: 0; top: -8px;
    background: #fff; padding: 0 6px;
    font-size: 7pt; color: #8a8a8a; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .sheet .b-spacer { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,0.035) 5px 10px); }
  .page-guide {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }
  .page-guide span {
    position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
    background: #fff; padding: 0 8px; font: 500 7pt/1.4 'Rubik', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a8a;
    direction: ltr;
  }
}

/* ---------- Print ---------- */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .sheet {
    width: 100%;
    min-height: calc(var(--page-h, 11in) - 0.9in - 2px);
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    transform: none !important;
  }
  .page-guide { display: none !important; }
  .sheet .b-spacer { background: none; }
}