/* ============================================================
   Unique Signature Business SPC — the printed receipt
   ------------------------------------------------------------
   Sized for A4 portrait.

   Two constraints shape this file and explain choices that would
   otherwise look dated:

   1. html2canvas rasterises this subtree for the PDF export. Its
      CSS grid support is unreliable, so every layout here is
      flexbox or a real <table>.
   2. It also ignores logical properties. The document is always
      dir="rtl", so borders and margins are written physically
      (inline-start = right) rather than as inline-*.
   ============================================================ */

.doc {
  --d-ink: #14120D;
  --d-ink2: #46402F;
  --d-ink3: #7E7663;
  --d-gold: #B08D3F;
  --d-gold-lt: #E0C270;
  --d-rule: #D9CFB4;
  --d-rule-lt: #EDE6D2;
  --d-paper: #FFFFFF;
  --d-tint: #FAF7EF;

  position: relative;
  width: 190mm;
  max-width: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  color: #14120D;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  direction: rtl;
  border: 1px solid #D9CFB4;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.doc .num { font-family: 'Space Grotesk', monospace; font-variant-numeric: tabular-nums; }

/* ── Watermark ─────────────────────────────────────────── */
.doc-wm {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.doc-wm svg { width: 92mm; height: auto; opacity: .05; }

.doc-void {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.doc-void span {
  font-size: 58px; font-weight: 800; letter-spacing: .18em;
  color: rgba(178, 58, 47, .18);
  border: 5px solid rgba(178, 58, 47, .18);
  border-radius: 10px; padding: 8px 28px;
  transform: rotate(-17deg);
}

/* ── Masthead ──────────────────────────────────────────── */
.doc-mast {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  padding: 7mm 8mm 5mm;
  background: #12100A;
}
.doc-mast-logo,
.doc-mast-stamp {
  width: 26mm; flex: 0 0 26mm;
  display: flex; align-items: center; justify-content: center;
}
.doc-mast-logo img,
.doc-mast-stamp img { max-width: 24mm; max-height: 24mm; display: block; }
.doc-mast-logo svg { width: 22mm; height: auto; }

.doc-mast-mid { flex: 1 1 auto; text-align: center; min-width: 0; padding: 0 5mm; }
.doc-co-ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 17px; font-weight: 600; color: #E0C270; line-height: 1.35;
}
.doc-co-en {
  font-size: 9px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: #B79B5E; margin-top: 2px;
}
.doc-co-rule {
  width: 34mm; height: 1px; margin: 3mm auto 2.5mm;
  background: #8A7134;
}
/* Was #8C877B at 7.5px on a #12100A ground — around 3:1, which is not
   readable in print. Lightened and enlarged; the C.R. is the one number
   on this document a reader may need to check. */
.doc-co-meta { font-size: 8.5px; line-height: 1.85; color: #C9C3B4; direction: ltr; }
.doc-co-meta span { white-space: nowrap; }
.doc-co-meta i { color: #8A7134; font-style: normal; padding: 0 5px; }

/* ── Title band ────────────────────────────────────────── */
.doc-band {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  padding: 3mm 8mm;
  background: #B08D3F;
  color: #1A1509;
}
.doc-band-ar {
  flex: 1 1 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px; font-weight: 700; text-align: right;
}
.doc-band-en {
  flex: 1 1 0;
  font-size: 9px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; text-align: left; direction: ltr;
  color: #3D3212;
}
.doc-band-no {
  flex: 0 0 auto;
  padding: 0 6mm; text-align: center; direction: ltr;
  border-right: 1px solid #8E7433;
  border-left: 1px solid #8E7433;
}
.doc-band-no b {
  display: block;
  font-family: 'Space Grotesk', monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
}
.doc-band-no em {
  display: block; font-style: normal; font-size: 6.5px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #4C3F18;
}

/* ── Meta strip ────────────────────────────────────────── */
.doc-strip {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 3mm 8mm;
  background: #FAF7EF;
  border-bottom: 1px solid #D9CFB4;
}
.doc-strip-item { display: flex; align-items: baseline; margin-left: 7mm; }
.doc-strip-l {
  font-size: 7.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7E7663; margin-left: 2mm;
}
.doc-strip-v { font-size: 11px; font-weight: 700; color: #14120D; }
.doc-strip-v.num { font-size: 11.5px; letter-spacing: .02em; }
.doc-strip .spacer { flex: 1 1 auto; }
.doc-chip {
  padding: 1mm 3mm; border-radius: 20px;
  border: 1px solid #B08D3F; color: #7C6023; background: #FBF6E9;
  font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* ── Body ──────────────────────────────────────────────── */
/* The receipt ended two-thirds down the sheet, which reads as a page
   printed at the wrong size. The body is given a floor so the document
   reaches A4 proportions and the signatures land near the bottom where
   they belong. Set with min-height rather than flex: html2canvas does
   not implement flexbox, and this block has to survive the PDF export.
   Tuned against the measured height of the masthead, band, strip,
   signatures and footer. */
.doc-body {
  position: relative; z-index: 1;
  padding: 5mm 8mm 4mm;
  /* 159mm + 116mm of fixed chrome (masthead, band, strip, signatures,
     footer) = 275mm, which is exactly A4's printable height once the
     export scales 190mm of width up to the 194mm content box. Measured,
     not guessed: 186mm here pushed the footer onto a second page. */
  min-height: 159mm;
}

/* Bilingual field line: the Arabic label sits at the right edge,
   the English at the left, the value between them. */
.doc-line {
  display: flex; align-items: flex-end;
  padding-bottom: 1.5mm; margin-bottom: 3.5mm;
  border-bottom: 1px solid #D9CFB4;
  min-height: 8mm; direction: rtl;
}
.doc-line-lab {
  flex: 0 0 auto;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 9.5px; color: #7E7663; white-space: nowrap;
  margin-left: 3mm;
}
.doc-line-val { flex: 1 1 auto; min-width: 0; text-align: center; }
.doc-line-val .v-ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px; font-weight: 700; color: #14120D;
}
.doc-line-val .v-en { font-size: 11px; font-weight: 600; color: #46402F; direction: ltr; }
.doc-line-val .v-both {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap;
}
.doc-line-val .v-both > * { margin: 0 2mm; }
.doc-line-lab-en {
  flex: 0 0 auto;
  font-size: 8.5px; color: #7E7663; white-space: nowrap;
  direction: ltr; text-align: left; margin-right: 3mm;
}

/* ── Amount block ──────────────────────────────────────── */
.doc-amt {
  position: relative;
  border: 1.4px solid #B08D3F;
  border-radius: 3px; overflow: hidden;
  margin-bottom: 4mm;
  background: #FFFFFF;
}
.doc-amt-hd {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2mm 4mm;
  background: #14120D;
  border-bottom: 1.4px solid #B08D3F;
}
.doc-amt-hd-ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 10.5px; font-weight: 700; color: #E0C270;
}
.doc-amt-hd-en {
  font-size: 8px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #9C8A5E; direction: ltr;
}
.doc-amt-bd { position: relative; z-index: 1; display: flex; background: #FFFFFF; }
/* border-LEFT, not right. The document is RTL, so the words sit on the
   right of the flex row and the R.O./BZS cells on the left — a border on
   the right just doubled the outer frame and left the cells unclosed. */
.doc-amt-words { flex: 1 1 auto; padding: 3mm 4mm; border-left: 1.4px solid #D9CFB4; min-width: 0; }
.doc-amt-words .w-ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12px; font-weight: 700; color: #14120D; line-height: 1.55;
}
.doc-amt-words .w-en { font-size: 10px; font-weight: 500; color: #46402F; margin-top: 1mm; direction: ltr; }
.doc-amt-cells { flex: 0 0 auto; display: flex; direction: ltr; }
.doc-amt-cell { display: flex; flex-direction: column; }
.doc-amt-cell.ro { width: 26mm; }
.doc-amt-cell.bz { width: 20mm; }
.doc-amt-cap {
  padding: 1.5mm; text-align: center;
  background: #FBF6E9; border-bottom: 1px solid #D9CFB4;
  font-size: 7px; font-weight: 700; letter-spacing: .1em; color: #7C6023;
}
.doc-amt-val {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 2mm 1mm;
  font-family: 'Space Grotesk', monospace;
  font-size: 19px; font-weight: 700; color: #14120D;
  font-variant-numeric: tabular-nums;
}
.doc-amt-div { width: 1px; background: #D9CFB4; }

/* ── Payment row ───────────────────────────────────────── */
.doc-pay {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 2.5mm 4mm; margin-bottom: 4mm;
  background: #FAF7EF; border: 1px solid #EDE6D2; border-radius: 3px;
}
.doc-cb {
  display: flex; align-items: center;
  font-size: 9.5px; color: #46402F; margin-left: 6mm;
}
.doc-cb-box {
  width: 3.4mm; height: 3.4mm; flex: 0 0 auto;
  border: 1.2px solid #8E8674; border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; line-height: 1; color: transparent;
  margin-left: 1.5mm;
}
.doc-cb-box.on { background: #14120D; border-color: #14120D; color: #E0C270; }
.doc-pay-meta {
  width: 100%;
  padding-top: 2mm; margin-top: 1.5mm;
  border-top: 1px dashed #D9CFB4;
  font-size: 9px; color: #7E7663;
}
/* Each pair is one inline-block with the value bidi-isolated. Latin
   cheque numbers and dates inside an RTL line were being reordered into
   their own labels; isolating them keeps label-then-value order and
   stops the two colliding. */
.doc-pay-item {
  display: inline-block;
  margin-left: 7mm;
  white-space: nowrap;
  vertical-align: baseline;
}
.doc-pay-item:last-child { margin-left: 0; }
.doc-pay-k { color: #7E7663; }
.doc-pay-v {
  display: inline-block;
  unicode-bidi: isolate;
  direction: ltr;
  color: #14120D; font-weight: 600;
  border-bottom: 1px solid #D9CFB4;
  padding: 0 2mm;
  margin-right: 1.5mm;
  min-width: 14mm; text-align: center;
}

/* ── Running balance ───────────────────────────────────── */
.doc-bal {
  display: flex;
  border: 1.2px solid #D9CFB4;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4mm;
  background: #FFFFFF;
}
.doc-bal-cell {
  flex: 1 1 0;
  padding: 2.2mm 3mm;
  text-align: center;
  border-left: 1px solid #EDE6D2;
}
.doc-bal-cell:last-child { border-left: none; }
.doc-bal-cell.strong { background: #FBF6E9; }
.doc-bal-l {
  font-size: 7.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7E7663; margin-bottom: 1mm;
}
.doc-bal-v {
  font-family: 'Space Grotesk', monospace;
  font-size: 13px; font-weight: 700; color: #14120D;
  font-variant-numeric: tabular-nums;
}
.doc-bal-cell.strong .doc-bal-v { color: #7C6023; font-size: 14px; }

/* ── Vector stamp ──────────────────────────────────────── */
.doc-mast-stamp .stamp { width: 24mm; height: 24mm; display: block; }

/* ── Section heading ───────────────────────────────────── */
.doc-sec { display: flex; align-items: center; margin: 4mm 0 2mm; direction: rtl; }
.doc-sec-ar {
  flex: 0 0 auto;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 10.5px; font-weight: 700; color: #7C6023; white-space: nowrap;
}
.doc-sec-en {
  flex: 0 0 auto;
  font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #7C6023; white-space: nowrap; direction: ltr;
}
.doc-sec-line { flex: 1 1 auto; height: 1px; background: #D9CFB4; margin: 0 3mm; }

/* ── Detail table ──────────────────────────────────────── */
.doc-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.doc-table th {
  background: #14120D; color: #E0C270;
  padding: 1.8mm 2.5mm; border: 1px solid #14120D;
  font-size: 8px; font-weight: 700; letter-spacing: .05em; text-align: center;
}
.doc-table td {
  padding: 1.8mm 2.5mm; border: 1px solid #EDE6D2;
  text-align: center; color: #14120D; background: #FFFFFF;
}
.doc-table tbody tr:nth-child(even) td { background: #FAF7EF; }
.doc-table .t-start { text-align: right; }
.doc-table .t-end {
  text-align: left;
  font-family: 'Space Grotesk', monospace; font-variant-numeric: tabular-nums;
}
.doc-table tfoot td { background: #FBF6E9; font-weight: 700; border-top: 1.2px solid #B08D3F; }

/* ── Detail grid (rental / services) ───────────────────── */
.doc-grid {
  display: flex; flex-wrap: wrap;
  border: 1px solid #D9CFB4; border-radius: 3px; overflow: hidden;
}
.doc-grid-item {
  width: 50%; padding: 2.2mm 3mm;
  border-bottom: 1px solid #EDE6D2;
  border-left: 1px solid #EDE6D2;
}
.doc-grid-item.full { width: 100%; border-left: none; }
.doc-grid-l {
  font-size: 7.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7E7663; margin-bottom: .8mm;
}
.doc-grid-v {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11px; font-weight: 600; color: #14120D;
}

/* ── Signatures ────────────────────────────────────────── */
.doc-sigs {
  position: relative; z-index: 1;
  display: flex;
  border-top: 1.4px solid #B08D3F;
}
.doc-sig {
  flex: 1 1 0; width: 33.33%;
  padding: 3mm 4mm 4mm; text-align: center;
  border-left: 1px solid #EDE6D2;
  background: #FFFFFF;
}
.doc-sig:last-child { border-left: none; }
.doc-sig-space {
  height: 22mm; width: 76%; margin: 0 auto 1.5mm;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #93897A;
}
.doc-sig-space img { max-height: 20mm; max-width: 100%; object-fit: contain; }

/* The stamp cell is deliberately NOT flex and has no rule under it.
   html2canvas does not implement flexbox, so it ignored align-items
   and stretched the seal to fill the cell's height — a round stamp
   came out as an ellipse. Plain block centring rasterises correctly,
   and you do not sign on top of a stamp, so the line goes too. */
.doc-sig-space.is-stamp {
  display: block;
  border-bottom: none;
  height: 22mm;
}
.doc-sig-space.is-stamp .stamp,
.doc-sig-space.is-stamp img {
  display: block;
  width: 21mm;
  height: 21mm;
  max-height: 21mm;
  margin: 0.5mm auto 0;
  object-fit: contain;
}
.doc-sig-name { font-size: 9.5px; font-weight: 700; color: #14120D; min-height: 4mm; }
.doc-sig-ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 9.5px; color: #46402F; margin-top: .6mm;
}
.doc-sig-en {
  font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #7E7663; direction: ltr;
}

/* ── Footer ────────────────────────────────────────────── */
.doc-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2mm 8mm; background: #14120D;
}
.doc-foot-l { font-size: 7.5px; letter-spacing: .06em; color: #837E72; direction: ltr; }
.doc-foot-r {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 8.5px; color: #A08B58;
}

/* ============================================================
   PRINT — the receipt alone
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 8mm; }

  html, body { background: #FFF !important; }

  .shell, .auth, .toast-stack, .modal-bar, .boot, #confirm-modal { display: none !important; }

  .modal {
    display: block !important;
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .doc {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* The masthead, title band and amount block are the document's
     structure, not decoration — they have to survive the printer's
     default "don't print backgrounds". */
  .doc, .doc * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .doc-sigs, .doc-amt, .doc-table tr { break-inside: avoid; }
}