/* =========================================================
   Artisan By Nikhita — printable invoice design
   Modern, minimal system: white paper, near-black ink, a
   single restrained emerald accent spent only on the number
   that matters most (the grand total). One typeface (Inter)
   for everything except tabular figures, which run in
   IBM Plex Mono — a precision/ledger face for weight and
   rate columns, since this is fundamentally a weighing
   document. The one recurring motif is a hairline "ruler"
   tick rule between major sections, echoing that same idea.
   ========================================================= */

.invoice-card {
  --paper: #ffffff;
  --ink: #16171a;
  --ink-soft: #6b6d76;
  --ink-faint: #9799a1;
  --line: #e6e7ea;
  --line-strong: #d8d9de;
  --accent: #1e5245;

  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: 40px;
  height: auto;
  margin-bottom: 6px;
}

.brand__word {
  width: 140px;
  height: auto;
  opacity: 0.92;
}

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

.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 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;
}

.items-table .item-hsn {
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

/* ---------- 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__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;
}

/* ---------- Footer: signatures + monogram mark ---------- */

.invoice-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.signature-block,
.seal-block {
  text-align: center;
}

.signature-block {
  flex: 1 1 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
  min-width: 220px;
}

.signature-block__line {
  font-size: 11px;
  color: var(--ink-soft);
}

.seal-block__mark {
  width: 26px;
  height: auto;
  opacity: 0.8;
  margin-bottom: 8px;
}

.seal-block .signature-block__line {
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}

.seal-block .signature-block__sub {
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================
   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;
  }

  .invoice-foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .signature-block {
    width: 100%;
    max-width: 280px;
  }
}

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

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

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

  .chrome-bar,
  .editor {
    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;
  }
}