/* =========================================================
   ZodiacTemple — printable invoice design
   Modern, minimal system: white paper, near-black ink, a
   single restrained blue accent (the logo's) spent only on the number
   that matters most (the balance due). One typeface (Inter)
   for everything except tabular figures, which run in
   IBM Plex Mono — a precision/ledger face for carat and
   rate columns. The one recurring motif is a hairline "ruler"
   tick rule between major sections. UAE documents add Arabic
   labels (IBM Plex Sans Arabic) under the English ones.
   ========================================================= */

.invoice-card {
  --paper: #ffffff;
  --ink: #16171a;
  --ink-soft: #6b6d76;
  --ink-faint: #9799a1;
  --line: #e6e7ea;
  --line-strong: #d8d9de;
  --accent: #2b4da0; /* the logo's blue */

  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
  padding: 20mm 16mm;
  box-shadow: 0 1px 2px rgba(22, 23, 26, 0.06), 0 20px 40px -28px rgba(22, 23, 26, 0.28);
  position: relative;
}

.invoice-card * {
  box-sizing: border-box;
}

.invoice-card p {
  margin: 0 0 2px;
}

/* Recurring motif: a hairline rule with small ruler ticks
   above it — used once at the header and once above the
   totals, not scattered everywhere. */

.ruler-rule {
  position: relative;
  height: 1px;
  background: var(--line-strong);
  margin: 22px 0;
}

.ruler-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink-faint) 0,
    var(--ink-faint) 1px,
    transparent 1px,
    transparent 10px
  );
  opacity: 0.7;
}

/* ---------- Header ---------- */

/* Flexbox, not Grid: Firefox's print engine has long-standing bugs
   collapsing multi-column CSS Grid to a single column when printing
   (it renders fine on screen, only print is affected). Flexbox
   prints reliably across Chrome, Firefox and Safari, so every
   multi-column block in this document uses it instead. */

.invoice-head {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.brand__mark {
  width: 52px;
  height: auto;
  margin-bottom: 6px;
}

/* A store's full logo artwork (see Region.applyToDocument). */
.brand__logo {
  width: 170px;
  height: auto;
}

/* Text wordmark beside the temple mark, for stores without full logo
   artwork of their own. */
.brand__word {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.brand__word-ar {
  margin-top: 4px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
}

.business-details {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  padding-top: 2px;
}

.business-details p:empty {
  display: none;
}

.business-details__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}

.invoice-meta {
  flex: 0 0 auto;
  text-align: right;
  min-width: 170px;
}

.invoice-meta__title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.invoice-meta__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  padding: 3px 0;
}

.invoice-meta__row span {
  color: var(--ink-soft);
}

.invoice-meta__row strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}

/* ---------- Bill To / Ship To ---------- */

.parties {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.party {
  flex: 1 1 0;
  min-width: 0;
}

.party h3 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.party__name {
  font-weight: 600;
  font-size: 13.5px;
}

.party p {
  font-size: 11.5px;
  color: var(--ink-soft);
}

.party p:empty {
  display: none;
}

/* ---------- Line items table ---------- */

.items-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.items-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.items-table tbody tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

.items-table thead {
  display: table-header-group;
}

.items-table thead th {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 8px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
}

.items-table th.num,
.items-table td.num {
  text-align: right;
}

.items-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  vertical-align: top;
}

.items-table td.desc {
  max-width: 220px;
  font-weight: 500;
}

.items-table td.desc .desc__sub {
  display: block;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--ink-soft);
}

.items-table tbody tr:last-child td {
  border-bottom: 1px solid var(--ink);
}

.items-table td.num,
.items-table th.num {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Column totals row under the line items. */
.items-table tfoot td {
  padding: 9px 8px;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: top;
}

.items-table tfoot td.desc {
  text-align: right;
}

.items-table tfoot td.desc .ar {
  text-align: right;
}

/* ---------- Settlement: bank + totals ---------- */

.settlement {
  display: flex;
  gap: 24px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.bank {
  flex: 1 1 auto;
  min-width: 0;
}

.totals {
  flex: 0 0 260px;
}

.bank h3 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bank p {
  display: flex;
  gap: 8px;
  font-size: 11.5px;
  padding: 2px 0;
}

.bank p span {
  flex: 0 0 90px;
  color: var(--ink-soft);
}

.bank p strong {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-family: "IBM Plex Mono", monospace;
}

/* Bank account number: masked on screen, revealed only in the
   printed/PDF output — the full number shouldn't be sitting
   visible on a shared screen or a screenshot. */

.print-only {
  display: none;
}

@media print {
  .screen-only {
    display: none;
  }

  .print-only {
    display: inline;
  }
}

.totals p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  padding: 4px 0;
  color: var(--ink-soft);
}

.totals p strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.totals__total {
  color: var(--ink) !important;
  font-weight: 600;
}

.totals__grand {
  margin-top: 10px;
  padding-top: 12px !important;
  border-top: 1px solid var(--ink);
  align-items: baseline;
}

.totals__grand span {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--ink);
  align-self: center;
}

.totals__grand strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent) !important;
}

/* ---------- Amount in words ---------- */

.amount-words {
  margin-top: 16px;
  font-size: 11.5px;
}

.amount-words span:first-child {
  color: var(--ink-faint);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}

.amount-words span:last-child {
  font-weight: 500;
}

.invoice-note {
  margin-top: 10px;
  font-size: 11.5px;
}

.invoice-note span:first-child {
  color: var(--ink-faint);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}

.invoice-note span:last-child {
  font-weight: 500;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ---------- Signatures + other offices ---------- */

.invoice-signatures {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 56px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.invoice-signatures p {
  flex: 0 1 220px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-faint);
  font-size: 10.5px;
  color: var(--ink-soft);
}

.invoice-signatures p:last-child {
  text-align: right;
}

.invoice-offices {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--ink-faint);
}

.invoice-offices:empty {
  display: none;
}

.invoice-offices span {
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Arabic labels (UAE) ----------
   Region.applyToDocument appends a .ar span inside every [data-ar]
   label on bilingual documents. Arabic letters join, so letter-spacing
   and uppercasing inherited from the English label must be reset or the
   script renders broken apart. */

.invoice-card .ar {
  display: block;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  /* dir="rtl" would otherwise right-align the block; keep it under its
     English label instead (right-aligned columns are handled below). */
  text-align: left;
}

.items-table th.num .ar,
.invoice-meta__title .ar {
  text-align: right;
}

.items-table thead th .ar {
  font-size: 10px;
  color: var(--ink-soft);
}

.invoice-meta__title .ar {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft);
}

.party h3 .ar,
.bank h3 .ar {
  font-size: 11px;
  color: var(--ink-soft);
}

/* Inline (not stacked) where the English label sits on one line with
   its value in a two-column row. */
/* (Specificity has to beat ".amount-words span:first-child", which
   would otherwise also match the .ar span and re-apply letter-spacing.) */
.invoice-card .amount-words .ar,
.invoice-card .invoice-note .ar {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================
   Narrow screens (phones/small tablets) — the invoice card
   still needs to be legible, not just shrunk to fit.
   ========================================================= */

@media (max-width: 700px) {
  .invoice-card {
    padding: 16px;
    min-height: 0;
  }

  .invoice-head {
    flex-direction: column;
    gap: 16px;
  }

  .invoice-meta {
    text-align: left;
  }

  .invoice-meta__row {
    max-width: 260px;
  }

  .parties {
    flex-direction: column;
    gap: 18px;
  }

  .settlement {
    flex-direction: column;
    gap: 20px;
  }

  .totals {
    flex-basis: auto;
  }

}

/* =========================================================
   Print
   ========================================================= */

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .chrome-bar,
  .region-notice,
  .editor,
  .cloud-layer {
    display: none !important;
  }

  .workspace {
    display: block !important;
  }

  .preview {
    padding: 0 !important;
    background: none !important;
  }

  .invoice-card {
    width: 100%;
    min-height: 0;
    margin: 0;
    box-shadow: none;
    /* Kept modest on purpose: browsers reserve extra space for
       their own print "headers and footers" (title/date/page
       number) unless the user disables that in the print dialog —
       this leaves headroom so a typical invoice still lands on
       one page even when that space is taken. */
    padding: 10mm 14mm;
  }
}